Best Of Webdesign — 07 novembre 2012 — 2 commentaires
Adaptez votre site comme un caméléon grâce au responsive design

Les internautes naviguent de plus en plus sur leurs mobiles ou leurs tablettes, c’est un fait. On estime à presque 20 millions le nombre de mobinautes français en 2012. Les sites internet sont donc obligés de s’adapter à cette nouvelle tendance en offrant aux visiteurs une expérience tout aussi agréable qu’une navigation sur ordinateur. Un nouveau genre de site tend à s’installer : le responsive design

Le Responsive Design ?

C’est tout simplement une méthode de conception permettant à un site internet de se moduler suivant le support sur lequel il est consulté. Les éléments doivent ainsi réagir suivant la taille du navigateur. Les images doivent-elles se réduire ou s’augmenter? Les colonnes doivent-elles se déplacer?

Le Chant des Succubes

Ce phénomène est né suite à l’évolution toujours plus intense de la navigation sur des supports autres que l’ordinateur. Plus ces périphériques augmentent, plus les résolutions changent. Il existe aujourd’hui plusieurs centaines de résolutions différentes pour tous les appareils vendus.

Cette fonctionnalité connait également un essor depuis la mise en place des « Media Queries » avec le CSS3 (qui permet de mettre en place des conditions suivant la taille du navigateur en temps réel).

Selon une étude réalisée par Google, seules 12% des entreprises françaises proposent un site web conçu pour une navigation sur mobile contre 32% des entreprises américaines.

Plus de 40% des mobinautes se tournent également vers un site concurrent après une expérience laborieuse sur leur mobile. Le responsive design se présente donc comme une solution miracle.

Une philosophie

Responsive design

Conséquence directe : tout l’aspect de la création du site se voit modifié. On réfléchit à présent en amont du projet à la modularité de sa conception. Il faut entièrement redéfinir la mise en page et l’aspect technique, certains mobiles sont tactiles, d’autres non tandis que sur un ordinateur on navigue avec une souris. Les débits ne sont pas les mêmes sur un smartphone, les éléments doivent ainsi être chargés plus rapidement. Toute les technologies ne sont pas compatibles (le Flash par exemple). Autant de point à prendre en compte avant même la première maquette.

Beaucoup de freins

La conception d’un site internet en responsive design est beaucoup plus longue qu’auparavant. Il faut à présent prendre en compte énormément de cas de figures. Au niveau de la technique, il ne suffit pas simplement de savoir se servir des nouvelles fonctionnalités CSS3, il faut connaitre les spécificités de chaque navigateur pour chaque plateforme par exemple. Enfin, la créativité se voit tout de suite bridée par la nécessité de prévoir son design suivant la forme d’une grille. Les éléments sont la plupart du temps tous alignés, carrés afin de mieux s’adapter.

Nul doute que ce phénomène provoquera la naissance de nouveaux métiers. Une question subsiste, pensez vous qu’il est plus intéressant pour une entreprise d’offrir aux internautes un site en responsive design ou une version séparée pour chacun des périphériques ?

Liens utiles

Articles similaires

L'auteur

Arnaud Bruckler

Jeune freelance dans le domaine du web, j'étais il y a quelques temps étudiant en licence professionnelle "Référenceur et Rédacteur Web" à l'IUT de Mulhouse et webmaster dans plusieurs agences de communication. Je tente d'insuffler à chacune de mes créations un souffle de créativité et d'émotion dans le but de marquer mon public.

 

2 Commentaires

  1. En fait, le souci me paraît être de taille lorsque vous avez un blog déjà établi, ça peut devenir compliqué pour migrer vers un thème responsive (je parle pour WordPress).
    En raison du fait de compatibilité par rapport aux plugins que vous aurez installés surtout.

    Il s’avère que dans ce cas-là il faudra sans doute faire plutôt un site dédié au mobile en parallèle.

    S’il y a un conseil à donner, passez au responsive design si vous faites un blog dès le début !

  2. La version d’un site web « normal » vers un site adapté aux mobiles doit impérativement passer par une re-conception et re-design complet du site en question.

    Cela n’aide pas d’avoir simplement un thème « responsive » qui s’adapte automatiquement aux écrans réduits des gadgets mobiles.

    Le site mobile doit être épuré et le contenu doit aller droit au but quant au message à diffuser à cause de la vitesse de chargement hautement réduite des transmissions par mobiles.

    Ne faites pas l’erreur de simplement utiliser un thème responsive pour la version mobile de votre site. Utilisez un plugin comme EZmobileSiteGenerator pour générer une version mobile en HTML de votre site « normal »

    Un site mobile en WordPress est à proscrire vu la complexité de la plateforme WordPress et sa lourdeur au chargement.

 

Laisser un commentaire via Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>