II. Responsive Design : un "caméléon" graphique qui s’adapte à tous les terminaux

Offrir au visiteur une expérience de consultation optimale

Pour les entreprises, le défi présenté par le consommateur multicanal est essentiel. Entre ordinateurs, smartphones et tablettes aux résolutions variées, comment créer un site qui s’adapte à tous ces supports ? La solution, c’est la technologie du ‘’responsive design’’ qui transforme la mise en page et le design du site en fonction du terminal sur lequel il est consulté. Parmi les nombreux enjeux : celui d’offrir au visiteur une expérience de consultation optimale.

Rédigé par Anthony Guidoux le Jeudi 2 Octobre 2014

Pour se renseigner

• Livre blanc Miratech
url.exen.fr/100087/

Le livre blanc présente les guidelines illustrées des meilleures pratiques, ainsi que l’analyse d’un cas e-commerce concret.

Pour bien démarrer

3 outils prêts à l’emploi

Les outils ci-dessous sont des kits de démarrage qui permettent de gagner un temps précieux.

• Outil « Foundation » - foundation.zurb.com/

Foundation est un outil très complet pour créer facilement et rapidement un prototype, ce qui facilite la compréhension et la simulation de l’ergonomie. Il dispose de nombreux éléments graphiques.

• Skeleton - www.getskeleton.com/

L’outil est particulièrement adapté à de petits sites et sa prise en main est rapide.

• Bootstrap - getbootstrap.com/2.3.2/

Permet de mettre en place rapidement un site multi-terminaux.

Pour des images responsive

• Adaptative Images - adaptive-images.com/

Solution pratique pour avoir des images responsive. L’outil génère automatiquement des images flexibles optimisées en fonction de la résolution d’écran du visiteur.

• Sencha - www.sencha.com/products/space/

Pratique pour redimensionner les images.

• FitText - fittextjs.com/

Plug in pratique pour ajuster la taille des textes et titres en fonction de la résolution d’écran.

Pour tester le responsive design d’un site

• Responsive Web Design Testing Tool - mattkersley.com/responsive/

• Screenfly - quirktools.com/screenfly/

Outil très simple d’utilisation et agréable à prendre en main. Il suffit d’entrer l’URL du site et de se laisser guider.

• Responsinator - www.responsinator.com/

Permet de visualiser rapidement l’affichage d’un site web sur les mobiles et tablettes les plus connus.

Intéressant pour se faire une opinion rapide des axes d’amélioration à travailler pour vos sites responsive.

Source : toolinux.com

A LIRE AUSSI : I. Le responsive design, l"arme fatale" de votre portail e-business ?