Responsive Web design

Share
responsive webdesign

responsive webdesign

On a commencé à en parler en  2008-2009*.
Cette tendance, aidée par la multiplication des appareils mobiles, s’est très vite répandue et devient même désormais quasi-obligatoire.

Un peu d’histoire :

Si la toute première approche date de 2004, la version moderne s’est précisée en 2009,  en raison de l’engouement sans cesse grandissant pour les smartphones, puis les tablettes, ce qui imposait un affichage différent du site.
L’arrivée des CSS3 fin 2011 a permis de largement faciliter la mise en place du responsive.
Cependant, le responsive webdesign n’a été connu du grand public que relativement récemment (2012 environ) et est devenu une contrainte quasi-obligatoire depuis que Google a mis en place une modification de son algorithme visant à mettre en avant les sites optimisés pour supports mobiles dans les résultats mobiles (pour le moment. il est probable qu’à plus ou moins longue échéance, ce soit étendu aux résultats desktop également).
Cette modification a été mise en place le 21 avril 2015.

Le Responsive Web design.

On pourrait traduire ça par « webdesign adaptatif » en Français.
Globalement, il s’agit, à l’aide de divers principes et techniques, de faire en sorte qu’un design s’adapte à n’importe quel support, de l’iPhone aux écrans d’ordinateurs de bureau.

Pour cela, on fait massivement appel aux CSS3, au HTML5 et au Javascript, de façon à détecter les dimensions de l’écran et à modifier l’affichage en conséquence (c’est ce qu’on appelle les media queries).

Les Media Queries.

Il s’agit essentiellement d’encadrer l’application des feuilles de style suivant l’appareil où va s’afficher le site. Pour ce faire, un script récupère la taille réelle de l’écran de l’appareil, puis sélectionne les instructions CSS les mieux adaptées.

Concrètement, comment on fait ?

A la base, on était obligé de créer une feuille CSS par type de média, ce qui est très contraignant, les fabricants de smartphones n’ayant pas défini de résolutions d’écran standard. Il fallait donc une feuille CSS pour iPhone, une autre pour iPad, une autre encore pour Blackberry, etc…
Avec les CSS3, on dispose de fonctionnalités spécifiques permettant de définir des critères de façon précise, comme la taille de l’écran, l’orientation (horizontale ou verticale), le ration de la zone d’affichage, la résolution, etc….
Pour éviter de rendre cet article trop technique (ce n’est pas le but du blog) autant que  dans le but de ne pas réinventer la roue, j’invite ceux qui voudraient en savoir plus à consulter l’article relatif au Responsive Web design et aux Media Queries sur Alsacreations.

Le Web actuel.

Tous les sites ne présentent pas encore de Responsive Web design, mais de plus en plus le proposent. La version définitive de Grafimages répondra également à ce critère (la version actuelle est temporaire et sera complétée dans les semaines qui viennent) .

A noter que le responsive n’est qu’une des possibilités pour rendre un site compatible mobile. 2 autres possibilités sont : une version mobile spécifique (mais qui oblige alors à faire 2 mises à jour séparées, desktop et mobile) ou bien une application dédiée, qui ne prend pas forcément en compte tout le contenu du site desktop.

Demander un devis

Share

3 réflexions au sujet de « Responsive Web design »

  1. Ping : Tendance Webdesign : le flat design | Grafimages

  2. Ping : Nos projets pour 2013 | Grafimages

  3. Ping : Template HTML5/CSS3 responsive gratuit | Grafimages

Laisser un commentaire