Le responsive design

 

Le responsive design consiste à rendre un site utilisable sur tous les supports (ordinateur, smartphone et tablette). Avec plusieurs réalisations à notre actif, nous pouvons concevoir un webdesign qui s’adapte à tous les écrans et ainsi élargir l’audience de votre site.

 

Pourquoi s’y intéresser ?

Les mobinautes sont de plus en plus nombreux et utilisent leurs mobiles de manière plus régulière. Ce nouveau support représente un trafic conséquent et donc un marché à fort potentiel. Le marché mobile est une source à fort potentiel aussi bien pour les sites éditoriaux que pour les boutiques en ligne (Prestashop, Magento …). 

La montée en puissance du responsive design

Les sites classiques ne sont pas assez adaptés à une lecture sur un petit écran. Principaux inconvénients d’un site classique :

• L’utilisateur doit continuellement zoomer/dézoomer pour naviguer
• Il faut scroller verticalement ET horizontalement

La philosophie d’un design réactif consiste à créer un seul site consultable quelque soit l’écran du visiteur. Le contenu s’adapte automatiquement à l’écran avec lequel on le visualise. 

Avantages d’un site en responsive design

• Crédibilité accentuée aux yeux des visiteurs. Le design est toujours propre et fonctionnel
• Ergonomie adaptée selon le support. L’utilisateur sera ravi d’utiliser votre site
• Budget réduit par rapport à la création d’un site et d’une application native
• Rapidité de développement et de maintenance
• Site consultable de n’importe où. Vos visiteurs pourront consulter votre site lors d’une réunion, dans un bus, un train, un avion…
• Site avec une durée de vie accrue. Nous utilisons HTML 5 et CSS 3 pour faire des sites compatibles avec les normes du W3C.

1 – Responsive design : Concepts & définition

La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu’un site est conçu pour s’adapter aux différentes tailles d’écrans et aux différents terminaux permettant d’afficher le site (navigateur, tablette, mobile, télévisions connectées). Ainsi, les mobinautes pourront avoir une expérience adaptée à leur terminal sans dégradation et sans devoir utiliser les fonctionnalité de zoom (ou un autre type de redimensionnement). Ils pourront consulter la même information, mais organisée différemment selon le type de terminal utilisé. (source Wikipédia).

Pour résumer, vous développez une fois un design qui s’adaptera à toutes les tailles  

Au niveau technique

Le concept de web responsive regroupe différentes techniques :

• Les feuilles de style CSS permettant d’utiliser des dimensions relatives aux dimensions des écrans
• Une solution de stockage d’images adaptables car le poids des images s’adaptera directement, côté serveur
• La qualité de l’affichage se basera  sur l’utilisation massive de javascript et les usages des nouveaux standards du web (HTML5, CSS3…)

Quelques cas d’école (http://diablomedia.com)

Conclusion et perspectives

Le responsive design est une approche intéressante pour développer sa stratégie multi-canal. Elle permet de développer et de créer en une seule fois un look and feel qui s’adapatera aux différentes tailles d’écrans. Attention cependant, il reste toujours préconisé de rendre l’expérience utilisateur différente sur chaque terminal. Tout dépend de l’approche qui est retenue au départ.

Sources

http://www.web-world.fr/2012/04/le-responsive-design-la-tendance-2012/

http://neoptin.com/responsive-design/