Faut-il opter pour un site en responsive design ou des versions séparées ?

Au regard de la multiplication du nombre de support permettant de surfer sur le web, il est important de disposer d’un site non seulement accessible mais également ergonomique quelque soit le support de navigation. Face à cette nécessité deux solutions sont envisageables : créer des versions séparées ou opter pour le responsive design. Phénomène de mode ou réelle solution miracle, voici quelques points afin d’y voir plus clair sur le potentiel qu’offre le responsive design :

Qu’est ce que c’est ?

Le responsive design, également appelé web adaptif ou design réactif, consiste à développer une interface qui s’adapte automatiquement à la taille de l’écran (ordinateur, tablette, e-reader, mobile). Au lieu de développer différentes versions du site, le responsive design permet de créer un site universellement lisible quelque soit le support.

Comme une image vaut mille mots voici un exemple :

Ouvrez cette page et modifiez la taille de la fenêtre de navigation. http://3200tigres.wwf.fr/

L’on constate que lorsque l’on modifie la taille de la fenêtre du navigateur, le site s’adapte. Les éléments de la page restent présents mais se déplacent, ceux-ci sont redimensionnés ou sont recadrés pour rester visibles. Aucune barre de défilement horizontal n’apparait.

Dans la version mobile, pour optimiser la navigation, la photo est présente mais n’est plus visible. En effet, le principe du responsive design consiste à produire un seul site dont les éléments, selon la taille de l’écran, vont être ou non visibles par l’internaute.

Comment cela est-il techniquement possible ? 

Le responsive design repose principalement sur les CSS3 medias queries (gestion CSS des résolutions) qui adaptent le visuel du site internet en fonction du support. Les propriétés de CSS3 permettent d’ajuster la mise en page, la taille des caractères, la dimension des images et vidéos mais également l’ajout et la suppression de certains blocs, pour permettre l’affichage sur les différentes résolutions.

De nombreux sites, en anglais ainsi que le livre de Ethan Marcotte «  responsive design », expliquent très bien les techniques de code pour développer un site web responsive. (Je vous laisse le soin d’y jeter un œil :-D)

Une solution très attrayante :

Ce procédé permet d’avoir une communication web percutante car le site est accessible à tout moment, quelque soit le support. Le responsive design évite de voir l’internaute quitter prématurément la page web en raison d’un problème de compatibilité.

Au regard de cet exemple le responsive design semble être la solution miracle ! En effet l’on perçoit dès à présent quelques avantages à l’utilisation de ce précédé :

1)      Un seul site web est développé, seul l’agencement de la page change. En ce sens le développement d’une telle solution est moins chronophage et moins couteux que de développer des versions séparées.

2)      En cas de modification sur le site, il n’y a pas d’effort de réplication sur les autres versions.  En ce sens le coût de maintenance est plus faible. On progresse vers une standardisation du web (normes W3C)

Les avantages sont perceptibles en termes de coût et de délais !

Des enjeux ergonomiques : Mobile first 

Le responsive web design révolutionne la manière de concevoir la navigation sur les sites internet. En effet, on ne pense plus la navigation sur ordinateur, tablette ou mobile séparément mais globalement. Car comme nous l’avons dit il s’agit d’un seul site « caméléon » grâce à l’utilisation des médias queries.

Dans la mesure où les exigences ergonomiques et le comportement de navigation varient selon le support, le responsive web design doit relever un grand challenge ! Le challenge de répondre aux attentes des utilisateurs et de rester ergonomique quelque soit l’appareil sur lequel le site est consulté! En effet, il ne s’agit pas d’empiler les boites les unes au dessus des autres dans une colonne unique pour faire la version mobile ! Il est important de hiérarchiser les informations et de se questionner sur la pertinence de l’affichage de certains éléments. Certains éléments seront amenés à disparaitre.

Pour cela on conseille, si on peut dire, de fonctionner à l’envers. On ne crée pas la version ordinateur en premier puis la version mobile, comme s’il s’agissait d’un accessoire à la première, mais bel et bien la version mobile en premier. L’idée de Luke Wroblewski, auteur de la philosophie Mobile First, consiste à partir du support qui présente le plus de contraintes afin de focaliser la conception sur l’essentiel. Petit à petit, pour chaque palier de résolution, on apporte de la valeur ajoutée à l’expérience utilisateur. Cela se traduit par la réorganisation des éléments, la création de menus de navigation supplémentaire, la division de contenu en colonne, l’ajout de médias…

Voici un très bel exemple de site responsive et de la réussite ergonomique :

Lors d’une consultation du site sur PC et tablette en mode portrait, l’on constate que diverses sections nous sont proposées.

Lors d’une consultation sur tablette en mode portrait ainsi que sur mobile la navigation est adaptée :

Boston Globe Iphone navigation

Boston Globe Iphone navigation

Boston Globe Iphone paysage

Boston Globe Iphone paysage

Boston Globe Ipad

Boston Globe Ipad

Une solution qui peut aller à l’encontre de l’expérience utilisateur :

Si le responsive design semble être une réelle alternative au développement de versions mobiles ou d’applications, ne crions pas victoire car il ne s’agit pas toujours de la meilleure solution !

En effet, un site responsive propose à l’utilisateur mobile d’accéder à un site internet ergonomique sur support mobile. Mais, le site internet est exactement le même que celui qui est accessible sur PC, seul l’agencement change. En aucun cas, il ne propose une expérience utilisateur unique qui prend en compte les atouts, les contraintes et les contextes d’utilisations propres aux mobiles. En ce sens, réfléchissez à l’objectif stratégique d’une consultation mobile. Si vous souhaitez offrir un usage différent, de la version PC, il est plus pertinent de développer une solution séparée.

Il faut donc agir au cas par cas, selon que vous avez un site vitrine, e-commerce et selon le nombre de page de votre site. Si votre site est un site vitrine, une version responsive aura de grande chance d’être une solution effectivement adaptée à vos besoins. Par contre, dès lors qu’il y a de multiples interactions avec l’internaute (taper des informations, renseigner des coordonnées…) ou que votre site contient beaucoup de pages, il est conseillé de développer une version mobile séparée. En effet, pour faciliter la navigation, il faudra réorganiser l’information contenue sur le site pour la rendre plus accessible. Par ailleurs, il peut être pertinent pour un site e-commerce de proposer de la géolocalisation, élément impossible avec un site responsive.

Si au regard de ces éléments, il vous semble plus pertinent de développer une solution mobile séparée, je vous conseille néanmoins de développer des gabarits en partie responsive. Il est effectivement intéressant que le site perçoive sur quel support il est lu et s’adapte. Cela évitera notamment ceci : (photo site H&M) lors de la lecture sur ordinateur d’un lien mobile.

Néanmoins certaines contraintes sont inhérentes à ce procédé :

Si le responsive design vous a convaincu, voici néanmoins quelques points à savoir avant de débuter votre projet :

1)      Les codes HTML et CSS sont en effet plus poussés que dans une version classique et le développement sera, en ce sens, plus complexe et plus long (parfois le double du temps est nécessaire). Il y a donc, malgré tout, un impact budgétaire.

2)      La compatibilité avec les différents navigateurs reste un point sensible. Cependant, il existe des scripts javascriptes qui permettent d’obtenir un résultat équivalent sur les navigateurs qui ne supportent pas les CSS3 medias queries tels que (IE 5, Safari 2, Firefox 1).

3)      Par ailleurs pour que le site soit modulable, et ne pas trop complexifier l’intégration,  la mise en page doit rester souple. L’on constate que si les développeurs sont les heureux bénéficiaires de cette solution en raison du gain de temps, le designer web sont surement les victimes indirectes ! En effet les sites responsives ne peuvent pas être autant créatifs que les sites classiques. Le souci de modularité conduit à opter pour des structures plus simples, constituées de blocs.

Un outil sympa :

Si vous n’avez pas tous les types de supports sous la main pour vérifier que votre site responsive apparait bien sur les différents supports (tablettes, mobile…) (et si vous ne voulez pas jouer continuellement avec la taille de la fenêtre du navigateur) il existe un outil très utile qui fait cette vérification pour vous : http://mattkersley.com/responsive/  . Cet outil vous permet également de vous rendre compte de l’aspect de votre site classique sur les différents supports.

About these ads

18 réflexions sur “Faut-il opter pour un site en responsive design ou des versions séparées ?

  1. ppi dit :

    This is a topic that’s close to my heart… Many thanks! Exactly where are your contact details though?

  2. Common Skin Disorders dit :

    There’s certainly a great deal to find out about this subject. I love all the points you made.

  3. Mildred dit :

    I was recommended this website by my cousin. I am not sure whether this submit is
    written via him as no one else realize such particular approximately my difficulty.

    You are incredible! Thank you!

  4. Perlengkapan Bayi baru lahir dit :

    Wow, incredible blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is magnificent, as well as the content!. Thanks For Your article about Faut-il opter pour un site en responsive design ou des versions séparées ? | Le blog de Anne-Sophie Janvrin .

  5. Lavina Anerton dit :

    Regards for this post, I am a big big fan of this site would like to go along updated.

  6. liberty reserve dit :

    This is the correct Faut-il opter pour un site en responsive design ou des versions séparées ? Le blog de Anne-Sophie Janvrin journal for anyone who wants to act out out about this message. You remark so such its nigh wearying to reason with you (not that I real would want…HaHa). You definitely put a new rotate on a message thats been scripted near for years. Good foul, just high!

  7. URL dit :

    … [Trackback]…

    [...] There you will find 10921 more Infos: annesophiejanvrin.com/2012/07/08/faut-il-opter-pour-un-site-en-responsive-design-ou-des-versions-separees/ [...]…

  8. aQWtg dit :

    275517 370684I discovered your blog website on google and examine numerous of your early posts. Continue to preserve up the superb operate. I merely extra up your RSS feed to my MSN News Reader. In search of forward to reading much more from you later on! 758773

  9. Have you ever considered about adding a little bit more than just your articles?

    I mean, what you say is fundamental and everything.
    However just imagine if you added some great visuals or video clips to give your posts
    more, "pop"! Your content is excellent but with images and videos, this website could certainly be one of the most beneficial in its niche.
    Terrific blog!

  10. [...] Au regard de la multiplication du nombre de support permettant de surfer sur le web, il est important de disposer d’un site non seulement accessible mais également ergonomique quelque soit le suppo…  [...]

  11. Contenter un grand nombre de personnes ne peut être qu’une certitude avec Faut-il opter pour un site en responsive design ou des versions séparées ? Le blog de Anne-Sophie Janvrin.

  12. Eloida dit :

    looking forward to another great article. good luck to the author! all the best!http://www.videogb.com

  13. Dejanira dit :

    i will get in touch with this post and site as well , giving this kind of post is really happy. looking for someone here. anyway waiting for another post here.http://www.papajogosmario.com

  14. Emmanuelle dit :

    Un merci pour ce post, je viens d´apprendre quelque chose :-)

  15. [...] Le responsive design, également appelé web adaptif ou design réactif, consiste à développer une interface qui s'adapte automatiquement à la taille de l'écran (ordinateur, tablette, e-reader, mobile). Au lieu de développer …  [...]

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l’aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s