Adaptation mobile de son site web

De nos jours, une grande partie des utilisateurs surfent sur internet grâce à leur mobile, il est donc plus que pertinent de penser à un site responsive (selon le projet).

Pour les intégrateurs HTML/CSS, la mise en place d’une version mobile d’un site peut être plus ou moins facile. Il est encore moins simple pour un néophyte qui souhaite se lancer dans le web et qui déjà peine à « coder » son site. Le but de cet article sera donc de se poser la question : Comment adapter son site aux périphériques mobiles ?

Si vous êtes un peu curieux (et je sais que c’est le cas) vous avez peut être vu qu’il y a plusieurs techniques pour faire une version mobile. Nous allons donc voir deux possibilités en développant plus l’une que l’autre (et vous comprendrez rapidement pourquoi). Sachez aussi que si vous cherchez des thèmes gratuits déjà tout fait sur internet (déconseillé) ou sur des sites spécialisés comme thème forest, il suffit de cocher « responsive design » pour une adaptation mobile de votre site.

Le sous domaine

Et oui c’est LA solution de facilité mais qui peut aussi se révéler très dangereuse pour votre référencement :p

Les avantages du mobile.monsite.com

• Deux versions de site donc aucun code n’alourdit la page
• Possibilité de varier la charte graphique ainsi que l’emplacement des informations.

Inconvénients

Le principal danger est le duplicate content car oui vous devrez créer de nouvelles pages avec un contenu qui sera similaire au site principal (sinon l’intêret n’y est pas). Pour pallier à cela, vous pouvez donc utiliser un robots.txt pour bloquer ce nom de domaine pour googlebot.

Par exemple :

User-agent: Googlebot
Disallow: /mobile/


Vous ciblez le dossier du site web et hop on demande au googlebot de ne pas le prendre en compte.

Pour plus de surêté, vous pouvez aussi passer toutes les pages de la version mobile en< meta name= »robots » content= »noindex,nofollow »/>

 

Le responsive design

Qu’est ce que le responsive design ? C’est en fait toute l’apparence du site qui va s’adapter à la taille de l’écran du périphérique sur lequel on le consulte.

Comment mettre en place ce design mobile / tablette ?

Pour cette partie, il faut quand même avoir un minimum de connaissance HTML/CSS (dans le cas contraire, vous pouvez me contacter pour votre projet pro/perso).

Le principal de la technique va être de « jouer » sur le redimensionnement et le recadrage des éléments quelque soit la taille de l’écran du terminal. C’est un travail qui concerne l’ergonomie du site.

Plusieurs choses sont à analyser avant de se lancer dans cette aventure périlleuse:

• Implémenter correctement les blocs HTML pour faciliter les différents positionnements.
• La créativité du projet peut se retrouver bridé car la mise en place dynamique apporte son lot de contraintes techniques
• Les images : redimensionnement automatique des images ou les cacher pour éviter de prendre trop de mémoire au terminal
• Temps de chargement : analyser le temps de chargement car il est pris en compte pour l’expérience utilisateur et pour Google aussi

Pour avoir un aperçu de votre site sur différents terminaux mobiles, je vous conseille ce site : http://www.responsinator.com

Mais avant tout projet, n’oubliez surtout pas d’analyser parfaitement vos besoins ou ceux de votre client avant de se lancer corps et âme dans cette « usine à gaz » 😀