Changement de Design : le Site devient Mobile-Friendly !

Partagez si vous aimez ->

Pour ceux qui ne l’auraient pas remarqué, le blog Dessine-moi un Site a totalement changé de look depuis le mois d’avril dernier.

Il y a longtemps que j’avais envie de moderniser le design mais cette fois j’ai été un peu forcé d’agir vite à cause de… Google !

Tous les Webmasters en parlent en ce moment, Google a radicalement changé son algorithme de recherche le 21 avril 2015. Les sites qui ne sont pas Mobile-Friendly sont maintenant officiellement pénalisés par le moteur de recherche.

Il m’a donc fallu adapter rapidement le design de mon blog pour le rendre compatible avec les mobiles. C’est ce qu’on appelle un Design Responsive.

Qu'est-ce qu'un design responsive, explication en imageC’est donc une bonne occasion pour moi de vous expliquer le plus clairement ce qu’est un Design et un Site Mobile-Friendly

Mais qu’est-ce qui ne va pas avec un Site classique ?

En fait pour être plus précis, lorsqu’on dit que tel ou tel site n’est pas adapté aux mobiles, cela signifie en réalité plusieurs choses :

  • Problèmes de lisibilité : La police de caractère est trop petite pour la lecture sur écran mobile. Ce qui oblige le visiteur à zoomer sur la partie qu’il souhaite lire. du coup il ne voit plus qu’une petite parie de la page et non plus la page dans sa globalité.
  • Problèmes d’ergonomie : Les différents boutons et liens (par exemple le menu) sont trop proches les uns des autres. Ce qui induit des erreurs de clic dues à l’imprécision du pointage avec nos gros doigts sur l’écran !
  • Contenu masqué : les dimensions de la  page sont fixes et plus grandes que la taille de l’écran. Certains éléments ne sont donc pas visibles, et oblige le visiteur à faire défiler la page horizontalement pour en voir tout le contenu.
  • Lenteur de chargement : Lorsque vous êtes en déplacement avec votre mobile, la connexion au réseau n’est pas toujours rapide (la 3G ne passe pas partout comme veulent nous le faire croire les opérateurs !) D’où une lenteur de chargement de certains sites classiques non optimisés pour mobiles.

Voilà donc en résumé les principaux défauts que l’on peut reprocher aux Site non adaptés aux mobiles. Mais finalement est-ce si important pour vous ?

Est-ce si important pour tout le monde d’avoir un Site Mobile ?

Dans la mesure où le trafic Internet venant des mobiles prend de plus en plus d’ampleur (30% aujourd’hui) et si votre activité est justement basée sur ce trafic, alors OUI c’est ultra important que votre Site soit compatible avec les mobiles.

Du point de vue référencement, et comme l’a annoncé Google, il n’est plus permis de douter qu’un Site Mobile-Friendly aura quelques longueurs d’avance dans les résultats de recherche du moteur de recherche.

Tous les mobiles sont équipés de GPS. Et les internautes s’en servent pour effectuer des recherches localisées ! 50 % des requêtes de recherche locales sont faites à partir d’un mobile, pour trouver un article ou un service de proximité. Cela signifie que si votre business n’est pas associé à un Site mobile, vous perdez potentiellement des clients qui passent tout près de vous.

Google My Business

D’ailleurs au passage si vous avez un commerce, une boutique, un restaurant, un cabinet ou toute autre activité de proximité vous devez impérativement ouvrir un compte Google My Business pour y inscrire votre entreprise. Celle-ci sera alors identifiée et correctement localisée sur Google Maps.

Vous n’aurez ensuite qu’à associer l’URL (adresse) votre Site Mobile avec votre compte Google My Business pour avoir une solide visibilité.

 

Comment vérifier si votre Site est Mobile-Friendly ?

C’est très simple et rapide à vérifier avec deux outils :

1 – Test de compatibilité mobile de Google

C’est l’outil officiel de Google. Pas le choix.

Comment vérifier qu'un site est mobile-fiendly

Il vous suffit très simplement de saisir l’adresse de votre Site et cliquer sur Analyser.

Le verdict est immédiat, et Google vous dit si votre Site passe le test ou non. Dans ce dernier cas, il vous listera les erreurs détectées et les modifications à faire sur votre Site.

 

2 – Encore mieux : Piresponsive

Cet outil (développé par une société française) est presque magique !

Grâce à Piresponsive vous pouvez voir en live le rendu de votre Site sur différents types d’écrans en simulant un appareil mobile de votre choix : iPad, iPhone, Samsung Galaxy, Kindle, Nokia, Sony… etc.

Je l’ai utilisé pour comparer le visuel de mon Blog avant et après le changement de Design. Voyez le résultat dans cet exemple sur une simulation de Samsung Galaxy S3 :

Aperçu site deisgn responsive avec Piresponsive avant - après

(Cliquez pour agrandir l’image)

 

Comment faire pour changer de Design ?

Tout dépend de l’outil ou CMS que vous utilisez.

Personnellement mon Blog tourne sous WordPress, il m’a « suffi » de choisir et d’installer un nouveau Thème graphique en Responsive Design. Il m’a quand même fallu quelques jours de travail pour retoucher un peu la mise en page des articles et remettre quelques boutons qui avaient disparus (à cause des shortcodes si cela vous parle).

Juste pour vous, un conseil personnalisé !

Mais le mieux pour vous, si vous voulez rendre votre Site compatible Mobile-Friendly, je vous propose de me laisser un message dans les commentaires juste en dessous de l’article.

Je vous répondrai personnellement et j’essaierai de trouver une solution en fonction de l’outil que vous utilisez. A tout de suite :-)

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

5 réponses

  1. curt dit :

    Bonjour Youcef,
    J’ai bien mis l’adresse de mon site : http://www.michelcurt.com sur le test de comptabilité et voila ce qui m’a été répondu : Impossible d’explorer l’URL demandée.Dismiss.
    Pourrais tu me dire ce que je dois faire.
    D’avance merci
    Bien cordialement

    • Youcef dit :

      Bonjour Michel.
      Ce n’est pas normal ce message. Je vais voir et je tiens au courant

    • Aymen dit :

      Bonjour Curt,

      Ce problème vient généralement du CMS que vous utilisez, dans le cas présent Jimdo. Je pense que le thème que vous aviez utilisé n’été entièrement pas mobile friendly ou comporte une erreur. (Par exemple sur votre page d’accueil on peut prendre une photo et la faire glisser dans le titre)

      Le mieux serait peut être migrer vers un nouveau thème plus récent mais je sais pas trop comment cela se passe chez Jimdo vu que l’éditeur est dit WYSIWYG. Peut être Youcef pourra plus vous éclairer sinon contactez leur support.

      Cordialement,

  2. macase dit :

    Bonjour,
    Je suis sous wordpress, plugin wptouch installé, bien detecté par les iphone, etc..
    Mais j’ai le message suivant : Impossible d’explorer l’URL demandée.Dismiss

    J’ai contacté wptouch, et autres sur des forums, je ne trouve pas la solution. Peut etre pourriez vous m’aider.

    D’avance merci à vous,
    Excellente journée,

  3. Darknote dit :

    Bonjour,
    Il faut préciser qu’il ne suffit pas de changer un jour le thème, il faut le maintenir à jour, comme WordPress, les plugins, toujours avoir la dernière version, question de sécurité pour son site, c’est le minimum à faire.
    En ce moment
    WordPress 4.5.2
    Hueman 3.1.6 (100% traduit en français, donc les fichiers langues sont dans wp-content/languages/themes/)

    Les mises à jour sont trop souvent sous estimées, voir nier, certains disent, non cela ne sert à rien mais cela est faut, conseiller sur WordPress-fr.net
    http://www.wordpress-fr.net/faq/est-ce-important-de-faire-regulierement-les-mises-a-jour-proposees/
    WPFormation
    http://wpformation.com/mettre-a-jour-wordpress/
    WPserveur, l’hébergeur spécialisé dans WordPress, propose un système de mise à jour automatidue personnalisable.
    https://www.wpserveur.net/maj-plugins/

    Un site à jour est une site qui a toutes les dernières fonctions, un WP amélioré, un site sécurisé à 90%, les risques de failles plus faibles.

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>

Simple Share Buttons