Close

Responsive web design, de Ethan Marcotte

Responsive Web Design de Ethan Marcotte, aux Éditions Eyrolles (Acheter)

Depuis l’arrivée de l’Internet mobile à la suite du WAP, je me suis toujours questionné sur la pertinence de dupliquer son site internet à la fois sur navigateur et sur Smartphone. En effet, il existe tellement de systèmes d’exploitation différents sur mobile que nos clients devaient investir dans une application iPhone, puis Androïd, Blackberry et Windows Phone…

Ce n’est pas pérenne ni rentable.

La solution du Responsive Web Design

La solution que je prônais dès lors était de ne faire qu’un seul site internet qui soit à la fois visible sur mobile et sur ordinateur. Le problème principal, c’est qu’à l’époque, les navigateurs de bureaux (Internet Explorer en tête) ne suivait pas vraiment les normes et homogénéiser l’ensemble des éléments relevait alors du miracle. En rajoutant la problématique mobile, le coût du projet ne pouvait pas être absorbé par le client.

Tout cela change avec le Responsive Web Design.

Les navigateurs ont changés et se sont alignés sur les normes W3C, permettant aujourd’hui de faire d’un code source quasi similaire, une page rendue quasi identique.

Le livre de Ethan Marcotte, Responsive Web Design, apporte des solutions techniques simples afin de permettre de modifier vos techniques de programmation pour qu’un site internet s’adapte parfaitement à son support, quel qu’il soit !

Le site internet s’adapte à votre support

Et non l’inverse ! Ce n’est pas à vous de faire plusieurs versions de votre site suivant le support.
Désormais sur les tablettes, Smartphone, Mac ou PC, qu’importe, votre site internet se modifiera en fonction du support.
Pour se faire, on va utiliser deux techniques : les grilles fluides et les media queries.

[box]Les grilles flexibles se traduisent par l’adaptation des sites internet en largeur et en grandeur au support proposé. Pour cela, il s’affranchit des pixels et ne fonctionne qu’en calcul proportionnel. Je vous invite à commander le livre pour suivre les exemples (vraiment très simples !) qu’Ethan donne dans son ouvrage.

Les media queries sont des styles CSS qui ne sont utilisés que suivant le type de support. Cela permet de changer la mise en page et donc de rendre plus lisible l’ensemble des éléments suivant la taille de lecture du support.[/box]

Pour comprendre ce que cela implique, il vous suffit de réduire la largeur de ce blog et vous verrez que le contenu et les éléments vont se modifier en direct pour s’adapter à l’écran et ainsi être lisible qu’importe le support : tablette, smartphone ou navigateur de bureau.

Le mobile d’abord

En outre, Ethan Marcotte met en valeur un concept intéressant que je trouve totalement vrai : le mobile d’abord. Il faut fabriquer votre site internet en fonction du mobile d’abord puis en améliorant les effets, le design, en fonction de la taille du support. Il est par exemple inutile de charger une grande quantité d’images pour une galerie de page d’accueil alors que l’on se trouve sur un mobile connecté en 3G ! Il vaut peut-être mieux mettre une seule image par exemple, et des liens sous forme textuelle.

Se pose également la pertinence d’afficher telle ou telle information en premier selon le type de support. En effet, je me suis souvent rendu compte que lorsque je suis en mobilité, ce qui ‘intéresse sur un site que je visite, est : soit l’adresse, soit le contact. Pourquoi, alors, ne pas l’afficher en premier sur mobile et ailleurs sur un navigateur de bureau ?

A vous de réfléchir au mieux et d’appliquer un minimum de Responsible Web Design pour améliorer la navigation et la lecture de votre blog ou site internet pour vos visiteurs !

Photo

About the author Styven

Je poste de tout ici, photos, impression, vidéo. C'est une trace que je laisse pour me rappeler des choses que j'ai tendance à oublier...

All posts by Styven →

2 Comments

  1. […] sans flash est accessible sur Tablette, Smartphone et Ordinateur grâce à son développement en Responsive design : il s'adapte au support de lecture. Le site est même nominé aux CSS Award pour la technique […]

    Reply

  2. […] je l’indique dans cet article sur le Responsive Web Design, il est aujourd’hui possible techniquement de créer un site Internet qui s’adapte à […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *