Le design adapté – les bases

1 Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les bases

2

Définition du responsive web design Avec l'arrivée des smartphones et ensuite des tablettes tactiles sur le marché du web, il existe plusieurs manières d'aborder ces supports. Il est possible de développer des applications dédiés par exemple. Le responsive design est une technique d'intégration et de développement pour le webdesign qui, contrairement aux applications, a pour objectif de s'adapter aux différentes résolutions d'écrans. Pour cela il est nécessaire de mettre en place des principes de développement pour pouvoir facilement adapter non seulement les cadres mais aussi les contenus (ajuster, déplacer ou cacher des blocs, redimensionner des images, etc.). Le responsive design est une manière différente d'aborder le web et qui se base sur l'aspect liquide. Contrairement au design provenant du print, le web ne propose pas un seul mode d'affichage, et ce n'est pas uniquement une question de matériel. Pour bien aborder le responsive webdesign, il ne suffit pas d'adapter un design existant mais, lorsque c'est possible, l'intégrer dans tout le processus de création dès les maquettes fonctionnelles. L'ergonomie est aussi à adapter car un internaute ne va pas forcément vouloir naviguer et accéder aux mêmes contenus lorsqu'il est sur un ordinateur, sur une tablette ou sur un smartphone.

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les bases

3

Maquette flexible ou liquide À ce sujet je vous invite à lire cet article : http://www.fruitdefendu-emarketing.com/design-flexibles-responsive-design/ Pour résumé, il faut mettre en place une grille flexible, des images qui puissent s'adapter et utiliser des "medias queries". Il vous faudra baser votre design sur des mesures en pourcentages (% ou em) plutôt qu'en pixel. Généralement, nous regroupons sous l'appellation de responsive design deux méthodes qui fonctionnent bien : le design réactif (qui s'adapte à tous les types et totalement fluide) et le "switch" design (qui proposera quelques affichages adaptés à des largeurs précisées via les medias queries). Il est important pour faciliter l'intégration de bien organiser les contenus des pages et que cette hiérarchie soit reprise au maximum sur toutes les pages. C'est un peu la base de l'intégration html/css. Les grilles Si vous ne voulez pas tout développer, il existe de nombreux systèmes de grilles comme 960.gs ou encore Blueprint que vous pouvez utiliser. Ensuite vous allez agir sur ces grilles avec les css et les "medias queries" pour spécifier les tailles (indispensables pour le switch design).

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les bases

4

Grace aux css3 et aux medias queries nous allons pouvoir cibler des résolutions précises et lui conférer des styles propres. Voici les tailles d'écrans les plus courantes :

Medias queries : /* Smartphones */ @media (max-width: 480px) { … } /* Smartphones paysage & tablettes */ @media (min-width: 481px) and (max-width: 768px) { … } /* Tablettes paysage & écran classique */ @media (min-width: 769px) and (max-width: 1200px) { … } /* Grands écrans */ @media (min-width: 1200px) { … }

Vous trouverez une liste des tailles d'écran assez complètes pour les medias queries sur : http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les bases

5

Les images, la typo… Les images aussi devront s'adapter à l'affichage. Il existe plusieurs techniques pour gérer les images : vous allez pouvoir les redimensionner avec le css en utilisant par exemple max-width: 100% et height: auto pour qu'elle s'adapte en gardant son homothétie. Il est possible de placer des images en background. Celles-ci pourront changer en fonction des supports et des résolutions grâce au css. De même les textes devront rester lisibles. Vous devrez utiliser en font-size soit les %, soit les em. En principe, 1em correspond à 16px (voir l'excellent livre d'Ethan Marcotte). Il faudra vérifier ensuite sur les supports la lisibilité de vos textes. Un texte adapté à un écran classique semblera petit sur un smartphone sur sur un écran de très haute résolution. Bien entendu il est généralement possible de zoomer sur un texte mais le principe du responsive est évidemment de pouvoir afficher le site de la meilleure manière qui soit, sans manipulation de l'internaute. Passage de la souris au tactile Il est important aussi de penser à l'aspect ergonomique. Des menus déroulant au survol vont avoir des difficultés à fonctionner sur un appareil tactile. Il faut donc proposer une alternative. La taille des boutons et des liens est importante pour le tactile. S'ils sont trop petits, il sera difficile de les toucher correctement.

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les règles

6

1. Taille flexible des textes (em) Pour le responsive design et pour des questions d’accessibilité en général, il est fortement conseillé de travailler avec des em (unité relative flexible) plutôt qu’en px. cible ÷ contexte = résultat exemple pour un titre font-size 24px avec un lien à 11px <h1>titre<a…>lien</a></h1> si le 100% correspond à 16px nous obtenons 24 ÷ 16 = 1,5em pour le titre 11 ÷ 24 = 0,458333333333333em pour le lien css : h1 {font-size:1.5em;} h1 a{font-size:0.458333333333333em;} Il faut définir la valeur de la taille du lien en fonction de la taille définie dans le h1 et non par rapport à la valeur par défaut (16px généralement). Il n’est pas conseillé d’arrondir un résultat. Les navigateurs sont capables d’arrondir ces décimales et vous resterez au plus proche des proportions définies en amont.

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les règles

7

2. Grille flexible exemple sur une grille de 960px, séparée en 12 colonnes de 69px espacées de 12 px <div id=page> <div class=blog section> <h1 class=titre>titre<a…>lien</a></h1> <div class=conteneur>…</div> <div class=autre>…</div> </div> </div> #page { margin: 36px auto; width: 960px; } .blog { margin: 0 auto 53px; width: 900px; } .blog .conteneur{ float: left; width: 566px; } .blog .autre{ float: right;

width: 331px;

}

Avec les mêmes règles que pour la taille des textes, nous calculons l’ensemble des largeurs en %. Si la div#page est à 90% de largeur, par exemple, nous obtenons un .blog à 93,75%, un .conteneur à 62,8888889% et un .autre à 36,7777778%. Les proportions de notre design restent intactes. Pour des images ou autres formats, vous pourrez optez pour : img, embed, object, video, audio{ max-width: 100%; }

Vos images s’adapteront automatiquement à vos pages.

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les règles

8

3. Meta viewport Le principe de la <meta name="viewport" content="..." /> est de permettre de contrôler la taille de l'affichage et d'outrepasser le comportement par défaut. exemple : <meta name="viewport" content="width=320" /> On impose une largeur de 320px. Mais nous allons plutôt procéder à une récupération de taille d'écran que de la fixer en px car ça varie d'un support à l'autre (tous les smartphones ne font pas 320px de large). <meta name="viewport" content="initial-scale=1.0, width=device-width" /> Ici initial-scale fixe le niveau de zoom de la page (1.0 correspont à 100%). Le width récupère la largeur de l'écran (et non la largeur du navigateur qui peut être supérieur à celle de l'écran physique). Vous avez la possibilité de rajouter d'autres options comme le blocage du zoom (a priori si votre site est adapté aux smartphones le zoom ne devrait pas être nécessaire) <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1" /> le zoom est bloqué à 100% donc impossible de zoomer Pour plus de détails : https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les règles

9

4. Sur les anciens navigateurs CSS3-mediaqueries.js

le plus complet mais le plus lourd à charger (Edge et 3G n'aime pas forcément) http://code.google.com/p/css3-mediaqueries-js/

respond.js https://github.com/scottjehl/Respond on doit rajouter juste un commentaire en fin de media @media screen and (min-width: 480px){ ...styles for 480px and up go here }/* /mediaquery*/

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les liens

10

Liens autour du sujet : • Les règles du webdesign responsive -

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ • Les petits et gros challenges du responsive design -

http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/

• Une leçon sur l’emploi des media queries - http://blog.bloop.co/the-practicalities-of-css-media-queries-lesso

• Le rôle du responsive design - http://acquia.com/blog/new-front-end-design-stack-role-responsive-web-design

• Article sur la conception d’un site « responsive » - http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/

• Le webdesign responsive a crée des opportunités - http://www.webdesignerdepot.com/2011/08/responsive-web-design-has-created-opportunities-across-the-board/

• Les pour et les contres du responsive web design - http://thepam.blogspot.com/2011/08/pros-and-cons-of-responsive-web-design.html

• 11 problèmes du responsive design - http://www.webdesignshock.com/responsive-design-problems/

• L’ultime compilation de liens sur le responsive design - http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les liens

11

Tutoriels • Tutoriel sur les media queries CSS3 - http://webdesignerwall.com/tutorials/css3-media-queries • Comment utiliser les media queries CSS3 pour créer la version mobile de votre site -

http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

• Créer un design responsive avec les media queries CSS3 - http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://webdesignerwall.com/tutorials/adaptive-responsive-design-with-css3-media-queries

• Le guide du débutant sur le responsive web design - http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

• Tutoriel de mises en pages flexibles en media queries - http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://www.netmagazine.com/tutorials/adaptive-layouts-media-queries

• Travailler avec les media queries - http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://nathanstaines.com/articles/working-with-media-queries/

• Un guide visuel du responsive web design - http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/

• Tutoriel sur les media queries CSS3 (au cas où vous n’en avez toujours pas assez !) - http://css-tricks.com/6731-css-media-queries/

• Comment utiliser l’orientation en media queries - http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

• Optimisez vos emails pour les supports mobiles à l’aide des medias queries - http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/%20http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

• Le responsive web design avec l’HTML5 et le framework Less - http://www.sitepoint.com/responsive-web-design-with-html5-and-the-less-framework-3/

• Cacher et afficher des portions d’images - http://zomigi.com/blog/hiding-and-revealing-portions-of-images/ • Comment créer une grille d’images responsives - http://css-tricks.com/13372-seamless-responsive-photo-grid/ • Redimensionner des images HTML lors du changement de résolution - http://zomigi.com/blog/foreground-images-that-scale-with-

the-layout/

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr

Responsive Design – les liens

12

Ressources et outils utiles pour le “responsive web design” • 21 supers Outils pour le « responsive web design » -

http://www.netmagazine.com/node/1337 • Fittext : un script JS qui permet à votre titre de s’adapter proportionnellement à la largeur

du conteneur - http://fittextjs.com/ • Sencha.io.Src : un service qui héberge vos images, les optimise et les affiche à la taille

appropriée pour chaque appareil - http://www.sencha.com/products/io/ • Respond : un petit script (3Kb) qui permet aux propriétés min/max width des media

queries CSS3 de fonctionner sur IE6-8 - https://github.com/scottjehl/Respond • Modernizr : pour détecter le support de sortie - http://www.modernizr.com/ • Resize my browser : outil très pratique pour redimensionner votre navigateur (et ainsi

tester l’affichage flexible) - http://resizemybrowser.com/ • Screenfly : encore un outil pour tester vos sites sur les résolutions d’appareils variés -

http://quirktools.com/screenfly/ Template • http://verekia.com/initializr/responsive-template

Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr