Les bases du responsive design

Le design adapté – les bases

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

Responsive Design – les bases

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.



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).



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) { … }
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/



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.


Responsive Design – les règles

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.



2. Grille flexible }
exemple sur une grille de 960px, séparée en Avec les mêmes règles que pour la taille des
12 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
<h1
class=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;



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



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*/


Responsive Design – les liens

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/


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/



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


Les bases du responsive design

Contenu connexe

Tendances

En vedette

Similaire à Les bases du responsive design

Plus de Voyelle Voyelle

Les bases du responsive design