Le Responsive Web Design  (ou conception de sites Web adaptatifs) était annoncé comme la grande tendance de 2013 à prendre en compte. Le surf sur smartphones et tablettes de plus en plus croissant oblige à adopter de nouvelles pratiques de conception ergonomique de site Internet. Aujourd’hui, en France, de plus en plus d’entreprise passent au Responsive. Mais le jeu en vaut-il la chandelle ? Doit-on se précipiter dans la réalisation de sites Web applicatifs ? Le Responsive Web Design, effet de mode ou réelle nécessité ? Tour d’horizon.

L’idée

4 questions pour faire le point sur le Responsive Web Design pour les sites Internet :

–    Qu’est-ce-que le Responsive Web Design ?
–    Pourquoi penser Responsive Web Design en 2014 ?
–    Atouts et intérêts ? Les 5 principaux avantages.
–    Les limites ? 3 principaux inconvénients.

L’action

1- Qu’est-ce que le Responsive Web Design ?

NO PITCHING – NO SCROLLING – NO ZOOMING

Le Responsive Web Design permet à un site Internet de s’adapter à tous les supports : taille d’écran et résolution. Les images se rétrécissent ou s’agrandissent d’elles-mêmes. Les textes et les contenus se replacent automatiquement avec pour résultat final une expérience utilisateur cohérente, que vous consultiez le site Internet à l’aide de votre smartphone, iPhone, tablette, en mode paysage ou portrait, ordinateur, PC portable, etc.

Copyright Search Engine Land
Copyright Search Engine Land

2- Pourquoi penser Responsive Web Design en 2014 ?

Aujourd’hui, la mobilité est un enjeu majeur pour les entreprises ; un enjeu économique, Marketing. Un enjeu technique également du fait de la multiplicité des différents supports d’accès à l’Internet.

La France compte 24,1 millions de possesseurs de smartphone en 2013.

Les Français sont de plus en plus nombreux à utiliser leur smartphone ou tablette pour aller sur le Web :

  • 15% en moyenne du trafic d’un site Web provient aujourd’hui d’un mobile ou d’une tablette.
  • 77,7% des mobinautes utilisent l’Internet mobile quasi quotidiennement.

Pour le marché de la publicité et du e-commerce :

  • 67% des consommateurs sont plus enclin à acheter à partir d’un site mobile convivial et adapté.
  • Au premier semestre 2013, le marché de la publicité sur mobile génère 85 millions d’Euros en France ; soit plus de 29% par rapport à 2012.

Le Responsive Web Design répond à ces enjeux et changements de comportement en permettant de concevoir un site unique compatible quelque soit le support emprunté, évitant ainsi le développement de plusieurs versions d’un site Web.

3- Atouts et intérêt du Responsive Design ? Les 5 principaux avantages.

  • Site unique, « User Friendly », quelque soit le support de lecture.

– Meilleure lisibilité des contenus du fait que le design s’adapte au support, contexte de lecture.
– Réponse aux modes de consommation des mobinautes.
– Permet une meilleure adaptation du parcours utilisateur (lecture/navigation). Le non ajustement du site au support de navigation peut affecter grandement l’expérience achat du mobinaute.

  • Affichage universel du site Web grâce aux nouvelles règles de propriété de CSS 3 acceptées par la grande majorité des navigateurs.
  • Une URL unique au lieu de deux avec un site mobile dédié.

– Meilleur pour le référencement naturel : le flux de vos visiteurs ne se disperse pas sur deux URL. Une seule URL simplifie également le processus de référencement. Les moteurs de recherche tels que Google n’auront donc plus à analyser plusieurs sites avec le risque de voir son contenu considéré comme du duplicate content.
– Simplifie la gestion du tracking et l’analyse statistiques Google Analytics car il s’agit du même site sur les différentes périphériques.
– Interaction et partage des contenus par les utilisateurs plus facile.

  • Réduit la dette technique.

– Les coûts de développement et de maintenance sont plus intéressants qu’un site mobile spécialisé.  Le Responsive Web Design permet d’adapter le contenu à l’environnement par lequel il est lu, en utilisant toujours une même source de données. Ceci fait que le texte et les images sont gérés à un seul endroit. Cela évite donc de créer et d’entretenir une copie du contenu pour chaque plateforme supportée.

  • Gain pour votre communication.

– Travaille l’image de votre entreprise : avoir un site réalisé en Responsive Web Design, c’est être au goût du jour.
– Facilite les campagnes de promotion : Les visiteurs doivent connaître seulement une URL, quelque soit le support utilisé.

4- Les limites au Responsive Design ? 3 principaux inconvénients.

  • Temps de développement plus longs… et donc plus coûteux.

– La conception graphique et ergonomique ainsi que le développement d’un site Web Responsive demande plus de temps, le code HTML et les CSS étant plus complexes. Notons qu’aujourd’hui des CMS comme WordPress ou Drupal propose des Templates Responsive qui simplifient les développements techniques et permettent de baisser les coûts. Cependant, cela ne veut pas dire un coût zéro en termes de développement technique.

  • Téléchargement et visualisation des contenus pas toujours optimal.

– Il arrive que les images soient allongées, étirées et pas redimensionnées pour s’adapter au support. Cela peut avoir un impact négatif sur le temps de téléchargement.
– Les contenus « texte » étant les mêmes quelque soit les supports, certains affichages peuvent se révéler inadaptés.
– Nécessité parfois de télécharger un code HTML/CSS qui s’avère inutile.

  • Moins de possibilités créatives : la problématique du Mobile First.

– L’élaboration d’une interface ergonomique sous la contrainte d’un faible espace d’affichage force à épurer au maximum les éléments visibles par l’utilisateur final.
– Le Responsive Design nécessite souvent une mise en page en grille afin de répondre aux contraintes techniques et pouvoir être replacé facilement au moindre redimensionnement. La disposition des contenus est souvent assez carrée et alignée.
– Très peu de travail d’images. On favorise l’aplat de couleurs et le Flat design.

Notons quand même que la tendance actuelle en termes de graphisme et de présentation de l’information est à la « simplification ».

Alors, effet de mode ou réelle nécessité ?

Pour nous une réelle nécessité.

Tout n’est pas parfait dans le Responsive Web Design. Il semble, toutefois, que ce soit la bonne alternative pour répondre aux nouveaux comportements des utilisateurs en matière d’accès à l’Internet. Pour répondre à leurs attentes et proposer une expérience utilisateur cohérente, l’optimisation de votre site Web en utilisant une conception adaptée est une évidence.

Attention tout de même à la problématique des contenus (le fond et non plus la forme). Pour des sites à très forts contenus, comme par exemple ceux de la FNAC, de la SNCF ou d’Amazon, un site Responsive Web Design unique n’est pas la solution à adopter. Mieux vaut réfléchir à des solutions dédiées par support de lecture : un site Internet complet en termes de contenus et un site mobile plus « light »ou une application dédiée.

C’est pourquoi, avant de vous lancer dans un projet de site Responsive, faites-le point : état de votre site actuel, votre cible, compétences, stratégie d’entreprise… et vérifiez s’il s’agit pour vous et votre entreprise de la solution.

 

Que pensez-vous du Responsive Web Design ? Est-ce quelque chose que vous avez déjà mis en œuvre ou prévoyez-vous de le faire bientôt ? Partagez votre opinion ci-dessous !

 

Sources :
Retours sur SEO Campus 2013 : Didier Vassout – Conférence :  « Le responsive design : la solution ultime ? »
Forrester Research
Mobile Marketing Association France
http://blog.hubspot.com/marketing/responsive-design-list
http://blog.octo.com/les-ux-bonnes-raisons-de-7-bonnes-raisons-de-faire-du-responsive-web-design/
http://blog.octo.com/infographie-ux-by-octo-responsive-et-mobile-first/
http://www.journaldunet.com/ebusiness/internet-mobile/equipement-et-usages-des-smartphones-0613.shtml
http://fr.wikipedia.org/wiki/Site_web_adaptatif
http://www.commentcamarche.net/faq/34876-responsive-design-avantages-et-inconvenients
http://www.webdesignertrends.com/2013/03/responsive-design-la-solution-seo-friendly-pour-mobile/
http://fr.slideshare.net/tessierv/numbate-table-ronde-oct-2013

 

Inscription à la newsletter Exclamative