Accueil - Fiches pratiques - Smartphone/tablette: comment adapter du contenu ?

Fiches pratiques

  Développez votre visibilité
Smartphone/tablette: comment adapter du contenu ?
Aide et outils

Tablette et smartphone

40 % des Français se connectent à Internet depuis des périphériques mobiles*. A nouvelles habitudes, solution innovante : le responsive design. Explications.

 

 

 

Comprendre le responsive design
Pour proposer une bonne expérience de lecture à l’internaute sur un site depuis tous les supports (ordinateur, mobile, tablette…), une adaptation est nécessaire. C’est ce qu’on appelle le responsive design. Cela nécessite un ajustement des colonnes, des images et de la structure d’un site, pour offrir une ergonomie optimale selon le support. 

Les enjeux sont notables :

* S’assurer que l’information donnée soit lue dans de bonnes conditions,

* Proposer à l’internaute une bonne expérience de lecture pour qu’il reste fidèle au site.


Quelles sont les étapes à suivre ?
Il existe plusieurs solutions pour passer un site existant en « responsive design ». Cela ne nécessite pas obligatoirement une refonte complète. Les coûts sont donc mieux maîtrisés.

*Utiliser des CSS, c'est-à-dire une feuille de style spécifique, qui déterminent plusieurs largeurs de page web selon celles des écrans,

- Cette modification entraîne une réorganisation des images et des textes, qui se superposent selon la largeur de l'écran.

* Si le site est issu d'un CMS Wordpress, il peut s'agir d'une version déjà adaptable pour les périphériques mobiles. Dans le cas contraire, une simple extension peut suffire.

- WP Mobile Detector
- WP Touch Mobile Plugin


Pour repenser un site existant en responsive, plusieurs étapes sont à prévoir :
* Consulter la part d'internautes qui se connectent depuis un terminal mobile, par exemple avec un outil comme Google Analytics, ainsi que les supports et navigateurs utilisés,

* Etablir une liste des modifications à effectuer, déterminer le rôle des intervenants : dans le cas où les compétences le nécessitent, l'adaptation peut être confiée à un prestataire externe,

* Prévoir tests et ajustements : pour s'adapter au mieux sur toutes les plateformes, plusieurs séries de tests peuvent être nécessaires. Il ne faut donc pas s'inquiéter si l'adaptation n'est pas immédiate !

Des bonnes pratiques pour s'adapter à la lecture mobile
Le passage au responsive design s'accompagne de quelques règles à respecter dans la mise en ligne de nouveaux contenus.

* Produire des textes courts, bien aérés et faciles à lire dans toutes conditions,

* Mettre en valeur des liens facilement cliquables, et privilégier des zones cliquables plus larges,

* Limiter le poids des images téléchargées, afin que cela n'impacte pas sur le temps de chargement,

* Proposer des contenus facilement accessibles depuis tout support : par exemple, les vidéos lisibles uniquement depuis un ordinateur sont à proscrire.


Compléter un site responsive avec un e-mailing responsive
Dans le cas où le site est associé à des campagnes d'e-mailing ou avec l'envoi d'une newsletter, le passage à un e-mailing responsive peut être nécessaire. Il s'agit alors de proposer une lecture facile des e-mails depuis des supports mobiles, sans perdre le lien avec le site.

Les étapes à aborder suivent la même logique technique :

* Utilisation des feuilles de styles CSS qui adaptent l'e-mail à la largeur de l'écran,

* Proposer des liens facilement cliquables,

* Tester l'envoi sur plusieurs supports afin de vérifier la facilité de lecture et de navigation.


Le passage au responsive design se décide après une véritable étude : comment privilégier le confort de lecture des internautes, et cela en respectant le budget et les délais impartis ? Quelles sont les difficultés qui vont être rencontrées, et comment les contourner ?

Cela représente une étape nécessaire pour accompagner l'internaute dans ses changements d'habitudes. Cette nouvelle expérience de lecture peut encore être poussée encore plus loin dans le cas où le site est associé à des campagnes d'e-mailing.


Crédit photo : © monicaodo - Fotolia.com

Crédit texte : Web Report

 

*Selon une étude de l’Insee (Institut national des statistiques et des études économiques) parue en juin 2013

CES ARTICLES VOUS
INTÉRESSERONT PEUT-ÊTRE ...
Comment animer une page Facebook ?

Même s’il n’existe pas de recette miracle pour animer Lire la suite...

Retouches d’images : des outils faciles et gratuits

Plus simples et moins chers que Photoshop, de nombreux Lire la suite...

Publier une mini-vidéo : quels outils pour quels usages ?

Les mini-vidéos circulent sur la toile et sur les mobiles Lire la suite...

Vous devez être connecté(e) pour publier un commentaire