Soignez votre présence mobile avec le responsive design

Les internautes naviguent maintenant de plus en plus en utilisant leurs smartphones ou tablettes. On estime à 19 millions le nombre de mobinautes français en 2012 selon une étude Médiamétrie*. Autant de supports sur lesquels il faut être présent si on souhaite une visibilité optimale.

device responsive design

Les sites conçus initialement pour des formats desktop ne sont pas adaptés à ces nouveaux devices.

Deux solutions existent :
- Concevoir un site mobile dédié en complément du site principal
- Concevoir un site internet adapté à une visualisation sur support PC ou mobile en utilisant le responsive design

Qu’est ce que le responsive design ?

Il s’agit d’une méthode permettant de concevoir un site Internet unique, qui s’adapte à la taille de l’écran et aux mode d’interaction (souris/tactile) des supports sur lequel il est consulté (ordinateur, tablette, mobile, télé connectée…)
Ainsi, les sources d’information et les socles techniques ne sont pas dupliqués. Cela engendre des économies d’échelles dans la conception et la maintenance de sites internet.
Les mobinautes peuvent consulter la même information, mais organisée différemment selon le type de terminal utilisé.

Tous les éléments réagissent alors selon la taille du navigateur :
- La navigation
- Les images
- Les textes
- …

En prenant en compte différentes critères :
- La mise en page
- La technologie utilisée
- Le poids du site : les débits ne sont pas les mêmes depuis une connexion 3G, le site doit donc être léger pour s’afficher rapidement
- L’utilisabilité : certains mobiles sont tactiles, d’autres non, il faut penser l’ergonomie du site en fonction de ces différents cas

Œil pour Œil a déjà réalisé plusieurs sites en responsive design, parmi lesquels   www.finorpa.fr

Pour ce site, nous avons conçu 4 gabarits :
- Un format « desktop » optimisé pour les ordinateurs et TV
- Un format « tablette paysage », optimisé pour les netbooks et tablettes en consultation horizontale
- Un format « tablette portrait », optimisé pour les tablettes en consultation verticale et les grands smartphones
- Un format « smartphone » pour les smartphones standards et mobiles

Ainsi, en fonction de l’appareil utilisé, différents éléments varient :
- Le header évolue proposant ou non une animation
- La navigation passe sur une ou deux lignes, et s’adapte au format tactile
- Les accès directs aux rubriques sont proposés en colonne droite ou en bas de page
- Les blocs texte s’ajustent à la largeur de la page
- Des informations secondaires sont supprimés dès que l’affichage est trop restreint

Finorpa version desktop :

finorpa.fr version desktop

Finorpa version tablette paysage :

Finorpa version tablette paysage

Finorpa version tablette portrait :

Finorpa version tablette portrait

Finorpa version smartphone :

finorpa.fr version smartphone

*Source : http://www.marketing-android.fr/etude-2012-mobinautes-france/

Cette entrée a été publiée dans En avant, Technologies et solutions. Vous pouvez la mettre en favoris avec ce permalien.

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>