Les bases du responsive design

  • 13,971 views
Uploaded on

support pour formation avec de nombreux liens vers des ressources en ligne

support pour formation avec de nombreux liens vers des ressources en ligne

More in: Self Improvement
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
13,971
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
180
Comments
1
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Le design adapté – les basesVoyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 1
  • 2. Responsive Design – les basesDéfinition du responsive web designAvec larrivée des smartphones et ensuite des tablettes tactiles sur le marché du web, ilexiste plusieurs manières daborder ces supports. Il est possible de développer desapplications dédiés par exemple. Le responsive design est une technique dintégration et dedéveloppement pour le webdesign qui, contrairement aux applications, a pour objectif desadapter aux différentes résolutions décrans.Pour cela il est nécessaire de mettre en place des principes de développement pour pouvoirfacilement adapter non seulement les cadres mais aussi les contenus (ajuster, déplacer oucacher des blocs, redimensionner des images, etc.).Le responsive design est une manière différente daborder le web et qui se base sur laspectliquide. Contrairement au design provenant du print, le web ne propose pas un seul modedaffichage, et ce nest pas uniquement une question de matériel. Pour bien aborder leresponsive webdesign, il ne suffit pas dadapter un design existant mais, lorsque cestpossible, lintégrer dans tout le processus de création dès les maquettes fonctionnelles.Lergonomie est aussi à adapter car un internaute ne va pas forcément vouloir naviguer etaccéder aux mêmes contenus lorsquil est sur un ordinateur, sur une tablette ou sur unsmartphone. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 2
  • 3. Responsive Design – les basesMaquette 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 sadapter etutiliser des "medias queries". Il vous faudra baser votre design sur des mesures enpourcentages (% ou em) plutôt quen pixel. Généralement, nous regroupons souslappellation de responsive design deux méthodes qui fonctionnent bien : le design réactif(qui sadapte à tous les types et totalement fluide) et le "switch" design (qui proposeraquelques affichages adaptés à des largeurs précisées via les medias queries).Il est important pour faciliter lintégration de bien organiser les contenus des pages et quecette hiérarchie soit reprise au maximum sur toutes les pages. Cest un peu la base delintégration html/css.Les grillesSi vous ne voulez pas tout développer, il existe de nombreux systèmes de grilles comme960.gs ou encore Blueprint que vous pouvez utiliser. Ensuite vous allez agir sur ces grillesavec les css et les "medias queries" pour spécifier les tailles (indispensables pour le switchdesign). Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 3
  • 4. Responsive Design – les basesGrace aux css3 et aux medias queries nous allons pouvoir cibler des résolutions précises etlui 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) { … } Vous trouverez une liste des tailles décran assez complètes pour les /* Grands écrans */ medias queries sur : @media (min-width: 1200px) { … } 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 4
  • 5. Responsive Design – les basesLes images, la typo…Les images aussi devront sadapter à laffichage. Il existe plusieurs techniques pour gérer lesimages : vous allez pouvoir les redimensionner avec le css en utilisant par exemple max-width: 100% et height: auto pour quelle sadapte en gardant son homothétie. Il est possiblede placer des images en background. Celles-ci pourront changer en fonction des supports etdes résolutions grâce au css.De même les textes devront rester lisibles. Vous devrez utiliser en font-size soit les %, soitles em. En principe, 1em correspond à 16px (voir lexcellent livre dEthan Marcotte).Il faudra vérifier ensuite sur les supports la lisibilité de vos textes. Un texte adapté à un écranclassique semblera petit sur un smartphone sur sur un écran de très haute résolution. Bienentendu il est généralement possible de zoomer sur un texte mais le principe du responsiveest évidemment de pouvoir afficher le site de la meilleure manière qui soit, sans manipulationde linternaute.Passage de la souris au tactileIl est important aussi de penser à laspect ergonomique. Des menus déroulant au survol vontavoir des difficultés à fonctionner sur un appareil tactile. Il faut donc proposer unealternative.La taille des boutons et des liens est importante pour le tactile. Sils sont trop petits, il seradifficile de les toucher correctement. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 5
  • 6. Responsive Design – les règles1. Taille flexible des textes (em)Pour le responsive design et pour des questions d’accessibilité en général, il est fortementconseillé de travailler avec des em (unité relative flexible) plutôt qu’en px.cible ÷ contexte = résultatexemple pour un titre font-size 24px avec un lien à 11px<h1>titre<a…>lien</a></h1>si le 100% correspond à 16px nous obtenons24 ÷ 16 = 1,5em pour le titre11 ÷ 24 = 0,458333333333333em pour le liencss :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 parrapport à la valeur par défaut (16px généralement). Il n’est pas conseillé d’arrondir unrésultat. Les navigateurs sont capables d’arrondir ces décimales et vous resterez au plusproche des proportions définies en amont. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 6
  • 7. Responsive Design – les règles2. Grille flexible }exemple sur une grille de 960px, séparée en Avec les mêmes règles que pour la taille des12 colonnes de 69px espacées de 12 px textes, nous calculons l’ensemble des<div id=page> largeurs en %. <div class=blog section> Si la div#page est à 90% de largeur, par <h1class=titre>titre<a…>lien</a></h1> exemple, nous obtenons un .blog à 93,75%, <div class=conteneur>…</div> un .conteneur à 62,8888889% et un .autre à <div class=autre>…</div> 36,7777778%. </div></div> Les proportions de notre design restent#page { intactes. margin: 36px auto; width: 960px;} Pour des images ou autres formats, vous.blog { pourrez optez pour : margin: 0 auto 53px; img, embed, object, video, audio{ width: 900px; max-width: 100%;} }.blog .conteneur{ float: left; Vos images s’adapteront automatiquement à width: 566px; vos pages.}.blog .autre{ float: right; width: 331px; Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 7
  • 8. Responsive Design – les règles3. Meta viewportLe principe de la <meta name="viewport" content="..." /> est de permettre de contrôler lataille de laffichage et doutrepasser 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 dun support à lautre (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 dautres options comme le blocage du zoom (a priori sivotre 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 zoomerPour 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 8
  • 9. Responsive Design – les règles4. Sur les anciens navigateurs CSS3-mediaqueries.js le plus complet mais le plus lourd à charger (Edge et 3G naime 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 9
  • 10. Responsive Design – les liensLiens 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 10
  • 11. Responsive Design – les liensTutoriels• 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 11
  • 12. Responsive Design – les liensRessources 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 12