Comment rendre son site compatible au téléphone portable et tablette ?

site responsive compatible mobile

Ah, voici un beau challenge que rendre son site internet compatible avec les téléphones portables et les tablettes. Je ne crois pas que les blogueurs traditionnels portent assez attention au développement du monde du mobile et des tablettes tactiles, et qu’ils se rendent assez compte que dans deux ou trois ans, une majorité de connexions se fera grâce à un appareil mobile et non plus avec un ordinateur classique. Faire partie de ce bouleversement demeure donc indispensable. Je n’ai pas trouvé un bon article sur le net décrivant le processus complet pour rendre son site compatible avec ces outils, pas de retour client. Je me suis donc attelé à vous présenter les différents moyens existants et à les mettre à votre disposition. À part si vous êtes un bon codeur, ces solutions ne sont pas gratuites. J’ai néanmoins adopté une solution peu chère, que vous pourrez vous aussi mettre en place. Nous verrons d’abord quelles sont les différentes méthodes pour rendre son site compatible avec les appareils mobiles, puis ensuite l’outil que j’utilise pour mes blogs qui se trouve être un bon compromis en prix et efficacité.

 

I) Rendre son site compatible, utiliser des thèmes responsives et des programmeurs

Avant de voir comment rendre son site compatible avec les tablettes et les téléphones tactiles, on va voir rapidement ce qu’un site compatible doit faire et ce qu’il ne doit pas proposer.

Une version mobile d’un site doit :

être simple et pratique à utiliser

– être lié graphiquement avec le site classique (même logo, couleur, typographie..)

– s’adapter à tous les appareils instantanément en les reconnaissant

– éliminer les étapes de présentation du contenu (article accessible directement)

Une version mobile ne doit pas :

– obliger le lecteur à zoomer et dézoomer pour lire le contenu

– utiliser des images et éléments graphiques trop lourds (même si la 4G est là !)

– contenir un trop grand nombre de liens cliquables proche les uns des autres (Il faut penser au détenteur de gros doigts)

– contenir d’animation Flash (on sait qu’elles ne sont pas lues par le matériel d’Apple).

Voici deux petits sites permettant de tester la compatibilité de votre blog. Ils ne sont pas miraculeux, mais peuvent aider :

Mobilotest

Ready.mobi

Trois méthodes pour rendre son site mobile friendly :

1) le thème responsive

Il existe certains templates wordpress créés spécialement pour s’afficher correctement sur les appareils mobiles. Rien de plus simple dans leur utilisation, il suffit des les installer comme n’importe quel template et de le configurer. Le thème va reconnaitre automatiquement l’appareil et afficher son design en conséquence. Ces thèmes sont très pratiques, mais néanmoins limités en nombre. La plupart sont payants, ce qui n’aide pas les “test”. Je vous mets ci-dessus les noms de trois templates responsives les plus connus. Il en existe évidemment beaucoup d’autres, mais attention au téléchargement gratuit de thème sur internet, ceux-ci contiennent souvent des trojans et virus.

Mobility

Onswipe

Mobile pro

 2) La modification de son template

Quel que soit le template que vous utilisez, celui-ci peut être modifié. Je ne rentrerai pas dans les détails des particularités CSS à changer, car je ne les connais pas. Je sais juste que vous pouvez faire appel à un freelance ou a votre assistant virtuel programmeur pour faire ce job. Sur Odesk, vous trouverez rapidement la personne qu’il vous faut pour ce travail; lire l’ebook gratuit si besoin. Vous où votre programmeur configurera votre template pour qu’ils reconnaissent les appareils mobiles et qu’il s’y adapte. Il sera souvent nécessaire de faire disparaitre les colones sidebar ou d’autres éléments du design pour que celui-ci rende le mieux possible sur mobile. C’est un travail assez compliqué et qui doit être fait avec attention. Les critères évoqués au début de ce chapitre seront à respecter. Je vous conseille de dessiner sur une feuille le rendu que vous attendez avant de vous lancer dans la phase de programmation.

 

3) La création de son site mobile avec jquery

jquery-logoJquery est avant tout une librairie javascript pour la programmation. L’outil JqueryMobile vous permet de créer de A à Z votre application pour mobile et tablette ou votre site mobile. Avec quelque connaissance en HTML vous avez le pouvoir de créer de toutes pièces la présentation de votre site compatible mobile ainsi que son menu et ses options éventuelles. Je préfère ce type de site, car ils sont dès le début adaptés pour l’appareil que vous utilisez et permets la navigation comme pour une application smartphone. Pour ceux qui ne souhaitent pas se lancer eux-mêmes dans la programmation (très simple) de leur site pour mobile, vous trouverez des milliers de freelances, sur les plateformes de recrutements, pouvant vous faire le travail de façon professionnel. L’avantage par rapport à la modification du code de son template est qu’avec Jquerymobile votre site va être beaucoup plus léger et rapide. Vous pourrez recréer seulement les éléments du design que vous trouvez primordiaux et faire afficher les images en qualité moindre. JqueryMobile est une option très intéressante pour votre site, mais ce n’est pas celle que j’ai choisie pour le mien.

II) Le meilleur choix pour son site version mobile : WpTouch Pro

1) Présentation du plugin

Et si on pouvait allier simplicité, performance et prix ?

J’ai recherché pendant un moment une solution tout-en-un, puis j’ai trouvé un plugin payant assez formidable. Wptouch permet l’affichage d’un site en version mobile sous forme d’application smartphone. Quand vous vous connectez avec une tablette ou un téléphone sur mon blog, le plugin va repérer quel matériel exact vous utilisez et afficher le site en fonction. Vous pouvez modifier le format d’affichage, ajouter votre logo, gérer le menu et les catégories et bien plus encore. La version gratuite s’avère déjà très puissante, et je vous conseille de la tester. Plusieurs template prédéfinis sont à votre disposition et la configuration du logiciel est simple.

Voici trois screenshots de mon téléphone portable pour vous montrer le rendu, pour limiter le poids des images j’ai baissé leur qualité. À noter que vous pouvez afficher le tout de façon très différente sur votre site en changeant de template.

screenshot-1

Le premier cercle vert montre le logo, le second le menu permettant d’accéder aux autres pages du site ainsi qu’aux catégories, et le troisième les 10 derniers articles immédiatement accessible. C’est simple et clair, pour lire un article il suffit de cliquer dessus.

Screenshot-2

Voici ce que vous pouvez trouver après avoir appuyé sur “menu”. L’ensemble des pages présentes sur mon blog est représenté ici. Vous pouvez modifier votre menu comme bon vous semble.

Screenshot-3

Ce dernier screenshot montre les catégories, accessible depuis les options du menu.

Comme vous pouvez le voir, le but de ce plugin est de rendre la navigation la plus simple possible en offrant une expérience de visite sensiblement identique à une application smartphone. Vous pouvez parcourir le blog et consulter toutes les informations que vous désirez, sans avoir à zoomer ou à vous battre pour appuyer sur un lien trop proche d’un autre.

 

2) Installation et configuration de WpTouch Pro

On ne va pas passer des heures sur l’installation du plugin. Vous le téléchargez, et l’installez comme tout autre plugin WordPress. Une petite icône Wptouch Pro apparaitra dans votre bar de menu WordPress. Il est maintenant temps de le configurer. Expliquer toutes les options serait bien trop long et fastidieux, je vous ai donc noté les points à ne pas manquer :

Avant tout, choisir ton thème. J’utilise le thème classic Redux pour afficher mon blog en version mobile. Choisissez celui qui vous intéresse et essayez.

Pour améliorer la vitesse de consultation de votre site mobile, il est important d’activer la librairie Jquery 2.0. Pour cela rendez-vous dans” Paramètre principaux”, puis “outils de débogage”, et cochez “utilisez jquery 2…” comme indiqué dans ce screenshot :

jquery

Sur la page “personnalisation”, deux éléments à ne pas oublier. D’abord uploader votre logo pour qu’il soit immédiatement visible à tout utilisateur qui se connecte sur votre site, puis ajouter vos identifiants Facebook, Twitter.. Ceux-ci s’afficheront en bas des pages et permettront à vos lecteurs de partager rapidement votre contenu.

J’utilise ce plugin sur mes sites de niches. Il offre une meilleure expérience utilisateur à ceux qui se connectent via leur smartphones ou tablettes. Vous pouvez activer les publicités Adsenses (ou autres régies) et les faire afficher aux emplacements que vous désirez sur votre site pour mobile. Pour cela suivez la page “publicité” et entrée les informations demandées. Bien ajouter la prise en charge des tablettes sur la page suivante !

Dernière information importante : le plugin WpTouch Pro va entrer en conflit avec vos plugins de gestion du cache et de seo. De simples manipulations permettent de régler le problème, mais étant donné le nombre de plugin différent, je vous invite à vous reporter sur la page de support lié.

Vous voici informés sur la création d’un site pour smartphone et tablette ou l’utilisation d’un plugin. Vous n’avez plus d’excuses pour ne pas vous mettre à jour et faire encore fuir les utilisateurs d’outils mobiles. WpTouch Pro se trouve être la solution que j’ai trouvée, mais ce n’est peut-être pas la meilleure pour vous. Je vous invite à consulter mon site de façon plus importante avec vos tablettes et smartphones et à me dire ce que je pourrai améliorer. J’attends vos commentaires pour aider les autres utilisateurs à mettre à jour leur site, et vos questions sur cet article.

Envie de partager ?

WhatsApp
Email

+2000 téléchargements ✨

Guide IA Gratuit

🎁 Recevez immédiatement le guide des 10 meilleurs prompts, outils et ressources IA que vous ne connaissez pas.