Responsive Web designPetit déjeuner defimedia21 février 2013
Préambule : le Webet ses utilisateurs en 2013
Plus de smartphones, moins d’ordinateurs     Ventes   globalesd’appareilsconnectés                        Source : Gartner...
Quelques chiffres•   France, 1er trimestre 2012 : Hausse de 195% des ventes depuis    smartphones et tablettes, non compri...
Any Time, Any Where, Any Device                         98%         65%          44%       Où sont     79%         63%    ...
La diversité desappareils connectés  La quantité et la diversité  des appareils connectés  – la plupart dont nous ne  savo...
On dénombre plus de 230 résolutions d’écran différentes parmi les appareilscapables de se connecter au Web                ...
Limitations de l’approche traditionnelle« version mobile séparée »•   Les utilisateurs veulent retrouver les mêmes contenu...
Une solution : le responsive Web design La notion de Responsive Web Design regroupe différents principes et technologies q...
La définition d’un concept•   Ethan Marcotte (inventeur du concept) le définit comme l’usage :     • de grilles fluides ; ...
La définition de techniquesHTML5 / CSS3 (media queries) / Javascript    /* Smartphones (landscape) */    @media only scree...
Source : mediaqueri.es
Source : mediaqueri.es
Responsive VS Adaptive (fixed + switch)•   Fluidité totale VS grille fixe et points de rupture                        http...
Le responsive design : panacée ?
Mobile first    Une méthode de design et une solution technique•   Les contraintes du média mobile nous forcent à nous con...
Mobile firstUne méthode de design et une solution technique (suite) (basic) Mobile First + Unobtrusive JavaScript + Progre...
Mobile first    Une tendance, voire une « philosophie » de design•    Les capacités du mobile et du tactile offrent des op...
Mobile first / Mobile only
Enjeux, mutations…•   Ne plus penser la flexibilité d’un site comme une entrave à la maîtrise    d’un espace délimité (qui...
Merci !
defimedia                  Parc CREALYS             Pôle Image de Liège                           Rue Phocas Lejeune, 32  ...
Responsive Web design - defimedia
Prochain SlideShare
Chargement dans…5
×

Responsive Web design - defimedia

1 051 vues

Publié le

La notion de Responsive Web Design regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation, quel que soit son interface connectée...

Publié dans : Technologie
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 051
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Rewics 2010 - conférence "Objectifs"MT Vallées des Eaux Vives - site web 17 mars 201026/02/2010 (c) Defimedia 2010defimedia 26/02/2010 defimedia MT Vallées des Eaux Vives - site web
  • Responsive Web design - defimedia

    1. 1. Responsive Web designPetit déjeuner defimedia21 février 2013
    2. 2. Préambule : le Webet ses utilisateurs en 2013
    3. 3. Plus de smartphones, moins d’ordinateurs Ventes globalesd’appareilsconnectés Source : Gartner, IDC, Strategy Analytics, Company filings, Business Insider
    4. 4. Quelques chiffres• France, 1er trimestre 2012 : Hausse de 195% des ventes depuis smartphones et tablettes, non compris les téléchargements payants d’applications.• Panier moyen des achats très supérieur sur les tablettes (20% de plus que sur les ordinateurs, 54% de plus que sur les smartphones).• 28% des mobinautes américains n’accèdent au Web que grâce à leur smartphone et/ou tablette. Source : Edatis Digital Marketing (France) / BigCommerce.com (US)
    5. 5. Any Time, Any Where, Any Device 98% 65% 44% Où sont 79% 63% 42% utilisés lessmartphones ? 76% 62% 26% 76% 45% Source : Google / IPSOS
    6. 6. La diversité desappareils connectés La quantité et la diversité des appareils connectés – la plupart dont nous ne savons encore rien – va exploser dans le futur.
    7. 7. On dénombre plus de 230 résolutions d’écran différentes parmi les appareilscapables de se connecter au Web 70 % des téléphones vendus dans le monde sont des « feature phones »
    8. 8. Limitations de l’approche traditionnelle« version mobile séparée »• Les utilisateurs veulent retrouver les mêmes contenus et les mêmes fonctionnalités, quel que soit leur device du moment.• Site mobile + site desktop = 2 versions SEULEMENT. De nombreux devices ne sont pas spécifiquement optimisés (typographie et lisibilité, « feature phones » oubliés…).• Site mobile + site desktop = 2 URL différentes (problèmes dans les détections et les versions servies automatiquement, désavantage SEO).
    9. 9. Une solution : le responsive Web design La notion de Responsive Web Design regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation, quel que soit son interface connectée (moniteurs dordinateur, smartphones, tablettes, TV...).
    10. 10. La définition d’un concept• Ethan Marcotte (inventeur du concept) le définit comme l’usage : • de grilles fluides ; • d’images flexibles ; • de media queries, afin de délivrer une expérience visuelle élégante (layouts, typographie…) qui s’accommode de notre paysage numérique post-iPhone, post- Android, post-iPad.• Plutôt que de concevoir différents designs indépendants pour chacun des types de devices Web (dont la variété se multiplie), nous pouvons les traiter comme différentes facettes d’une même expérience.
    11. 11. La définition de techniquesHTML5 / CSS3 (media queries) / Javascript /* Smartphones (landscape) */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
    12. 12. Source : mediaqueri.es
    13. 13. Source : mediaqueri.es
    14. 14. Responsive VS Adaptive (fixed + switch)• Fluidité totale VS grille fixe et points de rupture http://www.sony.com/ http://www.barackobama.com/ http://www.defimedia.be http://blog.defimedia.be
    15. 15. Le responsive design : panacée ?
    16. 16. Mobile first Une méthode de design et une solution technique• Les contraintes du média mobile nous forcent à nous concentrer sur ce qui est vraiment important (contenus et fonctions essentielles).• La problématique de la bande passante est davantage considérée.• La rédaction des textes part sur des contraintes productives (exigence d’être synthétique, « scannable » et concret).
    17. 17. Mobile firstUne méthode de design et une solution technique (suite) (basic) Mobile First + Unobtrusive JavaScript + Progressive Enhancement Un trio de choc si l’on veut cibler notamment les feature phones : leurs navigateurs ne comprennent pas JavaScript ou media queries. Une bonne pratique est de créer un site Web basique et de l’enrichir pour les smartphones et écrans plus larges—plutôt que suivre la logique de « dégradation harmonieuse » pour faire fonctionner une site complexe et lourd sur un téléphone mobile basique.
    18. 18. Mobile first Une tendance, voire une « philosophie » de design• Les capacités du mobile et du tactile offrent des opportunités d’innovation.• La culture mobile influence davantage la culture numérique « desktop » que l’inverse (ex: interfaces single task focused)• Philosophie sur laquelle devrait se baser un CMS aussi important que Drupal 8…• Tendance intéressante : le mobile only.
    19. 19. Mobile first / Mobile only
    20. 20. Enjeux, mutations…• Ne plus penser la flexibilité d’un site comme une entrave à la maîtrise d’un espace délimité (qui est un enjeu du « print ») mais la voir comme une opportunité de répondre au mieux à chaque cas particulier d’utilisation.• The fold : l’organisation d’une page Web tient moins au fait de concentrer tous les éléments importants le plus haut possible, que d’inciter le visiteur à faire défiler le contenu en minimisant le nombre de possibilités d’interaction à chaque écran…• Scrolling is the new click (FB, Pixmania…) / la pagination devient peu à peu obsolète.
    21. 21. Merci !
    22. 22. defimedia Parc CREALYS Pôle Image de Liège Rue Phocas Lejeune, 32 Rue de Mulhouse, 36 5032 Gembloux 4020 Liège facebook.com/defimedia twitter.com/defimediaAgency/ linkedin.com/company/defimedia-sa/Tél : +32 (0)81 81 03 81info@defimedia.bewww.defimedia.beblog.defimedia.be

    ×