Un site mobile friendly, c'est bien – le mobile first, c'est mieux

Fièrement rédigé par Hugo le 5 novembre 2018
Temps de lecture : 10 mins

    Design, contenu, conversion, ergonomie, performance… Ô combien d’éléments auxquels il faut penser lorsque l’on conçoit son site web !

    Sans doute vous a-t-on mentionné, parmi les caractéristiques-phares d’un site performant, l’expression “mobile-friendly”.

     Et c’est un fait : le fait d’avoir un site web adapté aux formats mobiles est aujourd’hui crucial.

     Seulement, savez-vous réellement pourquoi ? Et connaissez-vous vraiment les éléments à soigner pour disposer d’un site aux petits oignons, sur tous les supports utilisés par vos prospects ?

    Dans cet article, faisons un tour d’horizon de l’univers du “mobile-friendly”, et introduisons son cousin, plus performant et plus innovant : le mobile first.

    Au sommaire : 

    Pourquoi construire son site en l’adaptant au format mobile ?

    Le “mobile-friendly” est mort, vive le “mobile first” ? 

    Quelles sont les caractéristiques d'un site pensé en mobile first ?

    Comment vous assurer que votre site est adapté à la navigation mobile ?

    Par où commencer pour refondre votre site en mobile first ?

      mobile-design-responsive-portable

    Pourquoi construire son site en l’adaptant au format mobile ?

    Une navigation mobile en plein essor

    Tout d’abord, partons du point central, qui devrait immédiatement vous faire saisir l’importance du mobile : vos prospects naviguent sur leur smartphone ou leur tablette quotidiennement. Non seulement pour leur consultation personnelle d’Internet, mais aussi pour faire leurs recherches BtoB.

    L’étude Baromobile 2018, lancée par OmnicomMediaGroup, signale que les Français passent en moyenne 1h42 sur leur smartphone par jour, et se connectent en moyenne 23 fois dans la journée.

    En somme, la situation est simple : vos prospects utilisent leurs mobiles pour consulter les réseaux sociaux, les sites d’information… mais aussi votre site web.

    Or, avez-vous déjà consulté sur votre smartphone un site qui n’est pas optimisé pour la navigation mobile ? Si oui, il y a fort à penser que l’expérience n’était pas fameuse : textes trop longs, trop petits, colonnes qui dépassent hors du champ de votre écran, éléments cliquables trop proches les uns des autres…

     

    via GIPHY

    En bref, il s’agit donc pour votre entreprise de ne pas louper le coche du mobile.

     

    Optimiser son SEO

    Mais ce n’est pas la seule raison qui justifie l’importance du mobile. Google, qui se soucie profondément de l’expérience qu’il propose aux internautes qui utilisent son moteur de recherche, suit également cette tendance mobile.

    Depuis 2016, le géant du web annonce clairement qu’il privilégie, dans les résultats de recherche, les sites web ayant un affichage mobile-friendly. 

    Pour être concret, cela signifie que si vos concurrents ont un site mobile-friendly et pas vous, ils risquent grandement de vous dépasser… et ce, quels que soient les autres efforts de référencement que vous déployez à côté.

    Autant de raisons, si ce n’est déjà fait, de revoir son site en mobile-friendly… ou peut-être en mobile first?

     mobile-design-responsive-portable3

     

    Le “mobile-friendly” est mort, vive le “mobile first” ?

    Le Mobile Friendly : un site qui s’adapte à la navigation mobile 

    Depuis des années déjà, les développeurs de sites web prônent le fait de construire des sites web “mobile-friendly”. Mais qu’est-ce donc que ce nouvel anglicisme ?

    On dit qu’un site est mobile-friendly lorsque son design s’adapte naturellement aux différents types d’écrans (mobile et tablette) en plus des écrans de bureau (aussi appelés “desktop”).

    C’est notamment le cas des sites qui, lors de leur création, ont été pensés en responsive design. Avec cette technique de développement web, les différents blocs du site se déplacent et s’adaptent en fonction de l’écran sur lequel ils s’affichent. Le webdesigner qui emploie cette technique décide de hiérarchiser l’apparition des blocs, pour faire apparaître tel contenu avant tel autre afin d’optimiser l’expérience utilisateur : votre en-tête avant votre premier titre, un bloc de description avant un bloc de pricing…

    En somme, la conception d’un site “mobile-friendly” part d’un site conçu pour desktop, et l’adapte pour le mobile.

    Mais il existe une technique de développement bien plus adaptée aux usages de vos prospects aujourd’hui, et qui promet des sites bien plus performants : le mobile first.

    Le Mobile First, ou penser son site dès l’origine pour le mobile

    Le webdesigner qui conçoit un site en mobile first va, lui, prendre la réflexion à l’envers. Il va d’abord penser le site et l’optimiser pour la navigation mobile. Puis créer toute l’ergonomie et le design en fonction de ce type d’écrans. C’est seulement une fois cette première étape achevée qu’il va décliner le site pour les écrans de bureau. Penser mobile first c’est donc changer complètement d’axiome et évoluer dans un nouveau référentiel plaçant le mobile au coeur de la conception de site.

    Or, au vu de l’évolution toujours plus rapide des technologies mobiles, avec des écrans dont les tailles et performances ne cessent de croître au fil des sorties des nouveaux smartphones, il vous faut privilégier ce type de conception de site web.

    Le mobile first, aussi appelé “mobile-design”, c’est l’assurance d’un site qui souscrit, non seulement aux attentes de vos utilisateurs, mais aussi à celles, toujours changeantes et plus contraignantes, de Google et consorts.

    Maintenant que vous êtes au fait de la nécessité de passer au mobile first, voyons donc ce qu’une telle technique implique sur votre site web.

    mobile-design-responsive-portable2 

    Quelles sont les caractéristiques d'un site pensé en mobile first?

    Dans un premier temps, un site conçu en mobile first va s’assurer que tout le site soit visible directement sur l’écran du visiteur, quelle que soit sa taille. L’objectif : éviter le “pinch-to-zoom”, cette action que fait l’utilisateur pour zoomer ou dézoomer en rapprochant ou en écartant deux doigts sur son écran mobile.

    Par conséquent, un site pensé en mobile first va s’appliquer à :

    • Penser la largeur des pages en fonction de la taille des écrans mobiles ;
    • Rédiger les textes de sorte à ce qu’ils soient clairement lisibles dès l’affichage de la page sur l’écran ;
    • Penser le site dans la hauteur et non dans la largeur, en faisant en sorte que vos différents blocs s’enchaînent de manière cohérente et storytellée ;
    • Créer des visuels adaptés au mobile, que l’on discerne au premier coup d’oeil depuis son smartphone ou sa tablette.

    Mutation de la fonction commerciale pour la prospection digitale

    Mais le mobile first ne s’arrête pas là. L’idée est vraiment de concevoir une expérience utilisateur totalement adaptée à la navigation mobile.

    Vont notamment être impactés :

    • Votre menu de navigation. Très souvent, il va passer d’un design en barre horizontale à ce que l’on appelle un “burger menu”. Sans doute avez-vous déjà vu ces fameux “burger menus”, qui se déplient au clic sur mobile ou tablette, et permettent de gagner en ergonomie et en facilité de navigation.
    • Vos formulaires. Ils vont avoir une place prédominante sur vos pages de conversion, comme les pages contact ou les Landing Pages. Le but est clairement de faire en sorte que vos prospects puissent les remplir aisément, en toute agilité, sur des écrans plus petits.
    • Vos liens et vos call-to-actions. Quoi de plus énervant que de vouloir cliquer à un endroit du site, depuis son mobile, et d’atterrir sur le mauvais lien par erreur ? En mobile first, vos CTA et liens hypertextes, ne doivent pas être trop rapprochés les uns des autres, pour vous éviter de perdre bêtement des visiteurs. .
    • Les technologies utilisées sur votre site web. Certaines, comme Flash, ne sont pas lisibles par les navigateurs mobile : il vous faudra donc prendre garde à les éviter et vous concentrer sur d'autres technologies.

    Si ces quelques lignes directrices semblent simples en soi, le mobile first nécessite en réalité des compétences spécifiques et un état d’esprit très particulier.

    Mais avant de trouver le designer parfait pour mettre votre site d’équerre en matière de mobile, et si on faisait le point sur votre site actuel ?

    mobile-design-responsive-ordinateur2 

    Comment vous assurer que votre site est adapté à la navigation mobile ? 

    Nous vous l’avons expliqué plus haut : si votre site web est déjà mobile-friendly, vous risquez moins, à court terme, de vous faire pénaliser par les moteurs de recherche.

    Alors, votre site, est-il adapté à la navigation mobile ?

    Pour le vérifier, commencez par réaliser deux tests très simples :

    • Agrandissez ou réduisez la fenêtre de votre navigateur sur votre écran de bureau, et voyez comment vos pages web s’y adaptent.
    • Saisissez-vous de votre smartphone, et prenez la mesure du côté “mobile-friendly” de votre site actuel en imitant le parcours d’un de vos prospects.

    Si l’expérience que vous vivez lors de ces tests ne vous convient pas, il est certain qu’elle déplaira également à vos prospects mobinautes !

     

    via GIPHY

    Pour aller plus loin dans l’analyse de votre site actuel, vous pouvez également utiliser l’outil de test de Google spécifiquement dédié à cela. Après avoir entré la page dont vous souhaitez analyser le caractère “mobile-friendly”, vous obtiendrez une analyse globale de de la page, ainsi qu’un rapport plus détaillé dans la Google Search Console si besoin.

    Envisagez également d’utiliser un outil comme Dareboost, qui vous proposera des conseils et recommandations techniques d’ordre général pour améliorer votre expérience mobile. Vous en sortirez avec des actions concrètes à mener, comme réduire le poids de vos images, ou encore optimiser le temps de chargement de vos pages et du premier octet.

    5 éléments à surveiller comme le lait sur le feu concernant l’optimisation technique de votre site

    • Limiter le temps de chargement de ses pages à 4 secondes maximum
    • Réduire le poids de ses pages web au maximum et rester sous les 1,5Mo
    • S’assurer que la partie immédiatement visible de son site s’affiche en moins de 1 seconde
    • Faire baisser son speedindex à moins de 1000
    • Mettre en place un lazyloading, qui permet d’afficher en priorité les ressources vues en premier par l’internaute afin d’optimiser le temps de chargement des pages

     NB : Le speedindex est un indice de performance qui retranscrit la vitesse à laquelle se charge la partie visible sans scroll d’une page web. Google recommande de ne pas dépasser 1000.

     

    via GIPHY

    Les résultats de ces différents tests vous font conclure qu’il faut pratiquer une refonte de votre site web ? Pas de panique, on vous explique par où entreprendre cette grande aventure.

    Ou pour les plus pressés, vous pouvez aussi directement contacter nos experts.

     mobile-design-responsive-ordinateur


    Par où commencer pour refondre votre site en mobile first?

    Ça y est, vous souhaitez construire votre site autour du mobile first.

    Désormais, il va vous falloir convoquer un véritable webdesigner.

    Sa première mission : faire des tests de votre site actuel sur toutes les tailles d’écrans et de navigateurs disponibles, via mobile et tablette. Ce premier audit va lui permettre de savoir quelles modifications apporter pour vous livrer un site mobile-first.

    Par la suite, votre webdesigner va vous proposer des maquettes mobile-first, où il pensera tous les éléments de votre nouveau site dans la perspective du mobile. Dessus, vous verrez apparaître tous les éléments abordés précédemment : menus, encarts, call-to-actions, ou encore formulaires optimisés pour le mobile.

    Toutefois, ce moment-clé peut également être l’occasion de procéder à une refonte globale de votre site web. Tant qu’à faire, autant en optimiser la conversion commerciale, ou encore moderniser l’image de marque de votre entreprise sur le web avec un design plus adapté aux usages de vos prospects d’aujourd’hui.

    L’objectif : vous différencier de vos concurrents, en proposant une expérience utilisateur inégalée, homogène sur tous les types d’écrans, et clairement orientée bénéfice visiteur !

    Etude de cas ventes btob en Europe

    Découvrez tous nos articles sur le même sujet : Stratégie digitale Marketing Digital BtoB SEO SEA et référencement

    Trouvez votre bonheur !