Site en Responsive design : la solution miracle ?

Par Emilie LEBRUN12 juin 2013

Avec presque 21 millions de mobinautes qui utilisent à 97% leurs navigateurs, avoir un site visible sur mobile est devenu une priorité pour de nombreuses entreprises. Si aujourd’hui plusieurs techniques existent, la demande est principalement de disposer d’un site en responsive design, souvent montrée comme la solution idéale. Mais pourquoi ce choix ? Quel budget faut il prévoir ? Est ce vraiment la solution la plus adaptée ?

Pour les derniers rangs

Pour être présent sur mobile, vous avez principalement le choix entre trois options : le responsive design, le site version mobile qui sera une autre version de votre site et l’application.

 

Ok le responsive design concrètement c’est quoi ?
C’est une interface “élastique” qui s’adapte automatiquement à la taille et à la résolution de l’écran du visiteur. Sur grand écran, mini portable, tablette ou mobile, le contenu du site se réorganise proportionnellement en fonction de l’espace : les élément passent les uns sous les autres, les photos ou vidéos sont redimensionnées, le menu s’affiche autrement afin de faciliter la navigation sur un espace plus réduit…

 

Souvent très réussis, voici quelques exemples de réalisations :

 

Clean Air Commute Challenge

 

Clean Air Commute Challenge

Illy Issimo

16

The Boston Globe

Boston_Globe

Food Sense

site+web+responsive+Food+Sense

 

Bref c’est magique … ou presque !

De la technique pour tous

Réaliser un site responsive de qualité requière tout de même une vrai connaissances de tous les intervenants : les différents profils doivent maitriser les techniques liées à ce type de projet.

 

Le chef de projet ou l’ergonome doivent au moment du zoning penser au positionnement et au déplacement des informations en fonction des tailles d’affichage afin de conserver une bonne accessibilité des contenus….et pour toutes les pages !

 

Le graphiste doit tenir compte dans la création de sa maquette de beaucoup de paramètres afin que le redimensionnement soit esthétique : vrai taille en pixel des supports, nombre de colonnes, mise en page « élastique », adaptation de la taille des visuels…

 

L’intégrateur et le développeur front doivent maitriser les media queries et surtout savoir déjouer les pièges liés aux inégalités des navigateurs … et des orientations !

 

Les connaissances à acquérir sont nombreuses mais abordables avec un peu de patience mais surtout d’expériences. Il est surtout primordial que tous les membres de l’équipe disposent du même niveau de compétences sur le sujet afin que le projet soit livré à temps et avec la qualité escomptée.

Les avantages … et les contraintes

Avec le responsive design, votre site est visible sur l’ensemble des écrans. Mais ce n’est pas le seul bénéfice qui le différencie des autres solutions :

  • Un seul site à maintenir… et un seul back office, idéal pour les mises à jours
  • Une adresse unique, parfait pour votre communication
  • Des coûts de développement nettement inférieur à une application
  • Une bonne indexation du site par notre ami Google

 

Si sur le papier le Responsive Design est une technique idéale, ce n’est pas non plus la solution miracle. En plus de vrais contraintes en terme de créativité, la limite de certains supports gâche parfois l’expérience utilisateur, tous les téléphones n’etant pas égaux.
Il subsiste également des temps de chargements parfois trop lourds mais un travail d’optimisation peut faire gagner quelques précieuses secondes… Mais à quel prix ?

Et le budget dans tout ça

Il faut effectivement tenir compte du budget car disposer d’un site responsive est plus onéreux qu’un site classique, c’est environ 20 à 40 % du budget du site. Non ce n’est pas “gratuit” ou “inclus” car il ne s’agit pas de quelques techniques à appliquer : le temps de construction est plus long, il y a plus de maquettes, d’intégration, de recettes à effectuer et de corrections, etc …

 

Je vous conseille à ce sujet  « Un site web responsive en une heure par Raphaël Goetter”  présentée à l’AgoraCMS qui explique bien les étapes de la construction et le temps que cela peu parfois nécessiter.
https://speakerdeck.com/goetter/un-site-web-responsive-en-une-heure

 

La question du budget est liée également au stade du projet. Si vous êtes en pleine refonte de votre site internet, il sera plus facile d’opter pour un site responsive que pour un site mobile séparé.
Alors que si la refonte du site est récente (et que votre agence a « oublié » de vous conseiller en terme de multi-écran …), le budget pour passer en responsive sera surement plus élevé que de disposer d‘un site mobile séparé.

 

Après autant faut-il en avoir besoin …
La consultation des supports utilisés par vos visiteurs sur votre Google Analytics par exemple est un excellent indicateur. Au dessus d’un certain pourcentage de visiteurs, il devient indispensable de disposer d’une interface adaptée afin de pouvoir satisfaire vos mobinautes. Avec 15% de consultations sur mobiles et tablettes, avoir un site adapté aux mobiles a entrainé la refonte du site de notre agence tel que lancé ce mois ci 🙂

Penser besoin

La principale problématique reste liée à la stratégie mobile car masquer ou déplacer des éléments sur le site ne parvient pas à satisfaire tous les besoins des mobinautes.

 

Le responsive design fonctionne parfaitement pour les sites de presse ou les blogs car les contenus sont les mêmes sur l’ensemble des supports, un article est un article, on ne le tronque pas …
Mais pour un site de marque ou ecommerce, le contenu, le parcours, l’usage doivent être adaptés aux supports.
Sur mobile, il faut aller à l’essentiel, donner une information concise et amener rapidement à l’action souhaitée : adapté le contenu, les fonctionalités, les filtres à une consommation instantanée et directe.

 

C’est pour cette raison que de nombreuses marques ont préféré opter pour un site mobile séparé afin de proposer un contenu adapté plutot que d’avoir une version responsive non efficace.
Nous rédigerons très prochainement un article à ce sujet.

Pour conclure

Disposer d’un site mobile, en responsive ou non, n’est pas un effet de mode : il faut précisément savoir à quels besoins vous allez répondre et disposer de la solution adaptée.

La mission d’une agence est justement d’accompagner ses clients dans cette réflexion et de proposer un outil efficace pour sa transformation.

 

Si votre site est sous WordPress, vous pouvez même disposer d’outils supplémentaires … mais cela fera l’objet d’un prochain article 🙂

 

Pour aller plus loin

 

Un très bon article :
http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

 

Un ouvrage très accessible et parfait pour débuter quelque soit votre métier :
Ethan Marcotte (150 pages, Éditions Eyrolles / A book apart, ISBN-13 : 978-2212133318)

 

 

Emilie LEBRUN

Auteur Emilie LEBRUN

Dirigeante fondatrice de l'agence Whodunit

Tous les articles de Emilie LEBRUN

Laissez une réponse