Introduction

Le Responsive Web Design (ou Responsive Design) désigne la faculté d’un site/application web à s’adapter et à réorganiser l’affichage de son contenu en fonction des spécificités d’un terminal (résolution, navigateur, dimensions, OS, etc.). Il répond à l’ensemble de ces problématiques en changeant dynamiquement l’affichage de la page en fonction de la zone d’affichage. Pour le constater, il suffit de modifier la taille du navigateur sur un site utilisant le Responsive Design pour voir l’affichage se modifier.

Les avantages majeurs du responsive design

  • Un coût de mise en place plus avantageux par rapport aux autres alternatifs (développement natif, site dédié).
  • Une maintenance plus facile (une seule feuille de style, un seul fichier HTML, etc.) et de ce fait, plus économique.
  • Une URL unique qui permet d’optimiser votre référencement naturel.
  • Une capacité d’adapter l’affichage d’une page web à n’importe quelle résolution d’écran (Desktop, tablette, smartphone).
  • Une gestion unique et centralisée du contenu.

Les inconvénients majeurs et les difficultés du responsive design

  • Durée de chargement plus longue : les données HTML d’une page web sont chargées entièrement quelque soit le type du terminal, par exemple, si l’affichage d’une page sur un smartphone ne requiert que 60% du contenu de cette page, les 40% restantes sont aussi chargées puis masquées via CSS.
  • Compatibilité limitée sur des anciens terminaux puisque ces derniers ne prennent pas en charge le HTML5 et des propriétés de CSS3.
  • De bonnes connaissances techniques et une veille technologique permanente sont nécessaires pour garder une maîtrise de ce concept et pour suivre ses tendances.
  • Le test d’un site en Responsive Design est très coûteux, en plus de l’effort important à fournir pour réaliser ces tests sur les différents navigateurs web, il est aussi nécessaire de disposer d’un parc de terminaux (tablettes, smartphones) au niveau de chaque plateforme mobile (Android, iOS, etc.), pour pouvoir dérouler ces tests.
Des outils pour vous faciliter la tâche

Dans la pratique, le Responsive Design repose principalement sur l’utilisation des technologies CSS:

MEDIA QUERIES : sont des filtres/spécifications/règles qui peuvent être appliqués à des styles CSS, et qui forcent la page d’utiliser des règles CSS différentes à la base des tailles de l’appareil qui consulte la page.

Démonstrations :

Démonstration 01
Démonstration 02

Ressources :

developer.mozilla.org
mediaqueri.es
cssmediaqueries.com

 

LES GRILLES CSS : L’idée est d’appliquer les règles de design habituellement utilisées dans le monde des graphistes et de l’imprimerie aux pages web. Suivre ces règles permet d’obtenir un design harmonieux, qui respecte des proportions précises, des rythmes verticaux et horizontaux.

Exemples:

960 grid system

960 grid system

Susy

susy

CSS wizardry grids

csswizardry grids

LES FRAMEWORKS CSS : il existe de nombreux frameworks en responsive CSS qui permettent de faciliter la création de modèles adaptatifs pour le web et gagner du temps d’intégration.

Exemples:

bootstrap

Bootstrap

fundation_zurb

Foundation zurb

skeleton

Skeleton

 

Nos bonnes pratiques pour réussir une intégration en Responsive Design.

Nous présentons ci-après une synthèse de bonnes pratiques pour réussir une intégration en Responsive Design.

 

01. UNE MISE EN PAGE SIMPLE

responsive-design-02

 

02. LES MÉDIAS QUERIES

Considérez les media queries comme un puissant outil de conditions :

[SI TAILLE X = AFFICHER STYLE Y]

Pour le design adaptif, on met avant tout l’accent sur les conditions de width : selon la largeur actuelle de navigateur, on applique des styles alternatifs.

responsive-design-03

 

03. DÉFINISSEZ LES FRONTIÈRES

Les résolutions les plus populaires peuvent être séparées en 6 points de ruptures majeurs:

1. Indispensables

responsive-design-05

2. Optionnels

responsive-design-04

  • Mettre l’accent sur les « indispensables »
  • Ajouter les optionnels si possible
  • Avoir une version full desktop au-dessus de 1024px

 

04. UNE MISE EN PAGE FLEXIBLE

Les grilles flexibles utilisent des colonnes pour organiser le contenu, et un width relatif plutôt que fixe afin de s’adapter au viewport. Utiliser une mise en page fluide est la meilleure façon d’être paré à toute taille d’écran/orientation.

responsive-design-06

Pour passer d’une unité statique (px) à une unité relative (%), il faut appliquer l’équation suivante :

(Target /Context) * 100 = result%

Alors sur notre exemple en haut :

(150 / 1024) * 100 = 14.64%
(574 / 1024) * 100 = 56.05%
(300 / 1024) * 100 = 29.29%

Combiné à de bons media queries, votre design sera adapté à tous les appareils.

 

05. DOMPTEZ AUSSI VOS IMAGES

Un seul style est requis pour rendre vos images fluides. Vous pouvez également utiliser des images alternatives si la bande passante ne pose pas de problème.

a. Taille fluide

Ajustez simplement le width :

  • width de 100% : img{ width : 100% ;}
  • width de 100%, max-width à la taille du fichier : img{ max-width : 100% ;}

b. Points de rupture

L’attribut « src » d’une image ne peut pas être manipulé par un media query.

Solution possible :

  • Background-image : écraser l’attribut background-image d’un bloc.
  • Afficher/Cacher le parent : utiliser différentes versions d’image et afficher/cacher le parent à l’aide de media queries

 

06. N’OUBLIEZ PAS MAX ET MIN

Vous pouvez utiliser max-* et min-* comme limite pour les styles relatifs.

Utilisation de base :

Empêcher votre design de s’élargir ou de se réduire à des propositions ridicules sur des appareils très larges ou très petits.

Quelques exemples :

Fluide, mais pas moins large que 768 et pas plus grand que 1024 :
Min-width: 768px ;
Max-width: 1024px ;

Au moins 350 de haut:
Min-height: 350px;

#main pas moins large que 1000 sur un ordinateur:
@media screen and (min-width: 1024px){
#main{min-width 1000px}
}

 

07. SUR MOBILE, ON LINÉARISE

Écraser la largeur de chaque colonne dans votre feuille de style mobile :

responsive-design-07

 

08. SUPPRIMEZ LE NON ESSENTIEL

Certaines sections sur le site seront inutiles dans un contexte mobile, supprimez-les.

responsive-design-08

Ajouter une classe aux blocs non-essentiels, et cachez les comme ceci :
@media screen and (mix-width: 300px){
.not_mobile{display:none;}
}

 

09. VÉRIFIEZ VOTRE META VIEWPORT

De nombreux navigateurs mobiles simulent une vue desktop, affichant les pages en pleine résolution dans un tout petit écran.

responsive-design-09

Simulation Desktop
Dans le head :
<meta name= »viewport » content= »width=1024″>
Simulation Desktop
Dans le head :
<meta name= »viewport » content= »width=device-width »>

 

 

Lorsque le meta viewport est défini comme device-width, le navigateur utilise, la taille réelle de l’appareil.

Conclusion

Grace à la popularité grandissante du mobile, le responsive design présente une solution efficace qui offre des possibilités et des alternatives réelles afin de proposer une expérience riche en adéquation avec l’usage web moderne (Mobile, tablette, TV, etc.).
C’est l’une des évolutions majeures du web design qui a relevé plusieurs défis, cependant, sa réussite nécessite une expertise pointue au niveau de l’intégration graphique, une veille technologique et surtout un usage des bonnes pratiques comme celles présentées dans cet article.