Bien entendu il ne s’agit que d’une moyenne ! Si on regarde les chiffres de l’\u00e9tude en d\u00e9tail, on peut constater que dans certains secteurs, comme celui de l’\u00e9nergie, des services publics, de la construction et de la finance par exemple, le trafic provient pratiquement \u00e0 parts \u00e9gales du desktop et du mobile. Mais dans l’ensemble, on peut dire que le trafic desktop est vraiment en chute libre…<\/strong> D’o\u00f9 l’int\u00e9r\u00eat d’avoir un site web adapt\u00e9 au format mobile ! <\/p>\n\n\n\n Pour y arriver, certaines entreprises se tournent encore vers le responsive retrofitting. Mais l’approche mobile-first est nettement plus recommand\u00e9e de nos jours ! <\/p>\n\n\n\n Si vous vous int\u00e9ressez au trafic mobile, il y a fort \u00e0 parier que vous ayez d\u00e9j\u00e0 entendu le terme responsive design quelque part : il s’agit d’une c\u00e9l\u00e8bre technique de d\u00e9veloppement permettant d’adapter automatiquement l’affichage d’un site \u00e0 la taille de l’\u00e9cran.<\/p>\n\n\n\n En revanche, l’expression responsive retrofitting vous est peut-\u00eatre encore \u00e9trang\u00e8re car elle est plus r\u00e9cente. En pratique, elle d\u00e9signe simplement l’une des variantes du responsive design. Plus pr\u00e9cis\u00e9ment : l’approche consistant \u00e0 essayer de faire rentrer le contenu de la version desktop d’un site sur l’\u00e9cran d’un mobile. Avec plus ou moins de succ\u00e8s car les pages les plus lourdes ont tendance \u00e0 \u00ab\u00a0d\u00e9border\u00a0\u00bb sur mobile comme le montre d’ailleurs avec humour l’illustration ci-dessous :<\/p>\n\n\n\n En r\u00e8gle g\u00e9n\u00e9rale, on est donc contraint de supprimer une partie du contenu de la page pour la faire \u00ab\u00a0entrer\u00a0\u00bb dans les \u00e9crans plus petits. C’est pourquoi on parle aussi de \u00ab\u00a0graceful degradation\u00a0\u00bb. <\/p>\n\n\n\n A l’inverse, l’approche mobile-first consiste \u00e0 penser directement votre site pour le mobile.<\/strong> Vous pouvez ensuite enrichir progressivement la pr\u00e9sentation des contenus et l\u2019exp\u00e9rience utilisateur en fonction de l\u2019espace disponible sur son \u00e9cran.<\/p>\n\n\n\n On peut donc voir le mobile-first comme une nouvelle approche du responsive design, le principe restant toujours d’adapter l’apparence et les fonctions de votre site \u00e0 l’appareil de chaque utilisateur. Mais au lieu de passer du desktop au mobile vous passez du mobile au desktop. Ce qui fait une vraie diff\u00e9rence ! <\/p>\n\n\n\n Il existe plusieurs bonnes raisons de concevoir directement votre site pour les mobiles ! Miser sur une approche mobile-first vous permettra :<\/p>\n\n\n\n A terme, cela devrait \u00e9galement vous permettre d’augmenter votre taux de conversion et votre chiffre d’affaires. En effet, meilleure exp\u00e9rience utilisateur + meilleure visibilit\u00e9 sur Google = plus de ventes concr\u00e9tis\u00e9es !<\/p>\n\n\n\n \u00ab\u00a0Les professionnels se connectent sur leur PC\u00a0\u00bb, \u00ab\u00a0pas besoin de m’inqui\u00e9ter du mobile dans mon secteur\u00a0\u00bb… Telles sont les phrases qu’on entend souvent dans le secteur BtoB. Mais le trafic mobile concerne tout le monde ! <\/p>\n\n\n\n M\u00eame si vos clients ont plut\u00f4t tendance \u00e0 utiliser leur ordinateur dans le cadre de leur travail, n’oubliez pas l’algorithme de Google. Il est vraiment con\u00e7u pour prioriser les sites adapt\u00e9s aux mobiles. Vous perdrez donc beaucoup en visibilit\u00e9 si votre site est seulement adapt\u00e9 aux ordinateurs. <\/strong>Or qui dit mauvaise visibilit\u00e9 sur Google dit aussi perte de clients ! D’o\u00f9 la n\u00e9cessit\u00e9 d’adapter votre site au mobile, d’une mani\u00e8re ou d’une autre…<\/p>\n\n\n\n Si vous n’avez pas encore con\u00e7u le site de votre entreprise, la question ne se pose pas vraiment. En effet, on peut difficilement trouver mieux que le mobile-first \u00e0 l’heure actuelle. <\/p>\n\n\n\n En revanche, si vous avez d\u00e9j\u00e0 un site, la question est plus d\u00e9licate. Premi\u00e8re chose \u00e0 faire : bien v\u00e9rifier d’o\u00f9 provient votre trafic, en utilisant par exemple Google Analytics.<\/strong> Les \u00e9tudes soulignent toutes le poids du trafic mobile mais comme dit plus haut, la part du trafic desktop est toujours importante dans certains secteurs. Si vous constatez que les internautes vous rendent surtout visite depuis leur ordinateur, vous pouvez vous contenter d’adapter votre site desktop avec les techniques de responsive design \u00ab\u00a0classiques\u00a0\u00bb. <\/p>\n\n\n\n M\u00eame combat si vous avez la chance d’avoir d\u00e9j\u00e0 un site desktop tr\u00e8s \u00e9pur\u00e9 car vous ne devriez pas avoir grand mal \u00e0 l’adapter au format mobile ! <\/p>\n\n\n\n Votre site accueille surtout des mobinautes ? Alors passez plut\u00f4t au mobile-first, quitte \u00e0 effectuer une refonte compl\u00e8te… A plus forte raison si votre \u00ab\u00a0ancien\u00a0\u00bb site desktop est tr\u00e8s lourd ! Dans les faits, vous pouvez dissimuler plusieurs \u00e9l\u00e9ments sur mobile mais n’oubliez pas que l\u2019ensemble du fichier CSS sera quand m\u00eame charg\u00e9, informations pour l’affichage desktop comprises. Cela peut donc drastiquement ralentir le chargement de votre site sur les appareils mobiles, ce qui est vraiment nuisible \u00e0 l’exp\u00e9rience utilisateur. C’est pourquoi il vaut mieux tout reprendre \u00e0 z\u00e9ro en pensant avant tout aux mobinautes dans ce genre de cas. <\/p>\n\n\n\n Bien entendu, vous pouvez aussi cr\u00e9er une application mobile en compl\u00e9ment de votre \u00ab\u00a0gros\u00a0\u00bb site desktop ! Vous serez loin d’\u00eatre la premi\u00e8re marque \u00e0 faire ce choix. <\/p>\n\n\n\n Mais gardez tout de m\u00eame \u00e0 l’esprit que les applications mobile ne sont pas r\u00e9pertori\u00e9es sur Google : les internautes doivent aller directement les rechercher sur le PlayStore ou l’App Store.<\/strong> Vous devrez donc communiquer largement \u00e0 son sujet pour les avertir de son existence. Notamment via :<\/p>\n\n\n\n Un site mobile-first est fondamentalement minimaliste. L’essentiel, rien que l’essentiel. Ainsi, vous vous assurerez que votre site reste parfaitement lisible m\u00eame sur les plus petits \u00e9crans. Et qu’il ne sera pas trop lent \u00e0 charger !<\/p>\n\n\n\n Cela implique notamment :<\/p>\n\n\n\n Autant dire que la conception d’un site mobile-first demande un vrai temps de r\u00e9flexion, pour d\u00e9terminer ce que vous devez absolument afficher \u00e0 l’\u00e9cran.<\/strong> Au besoin, n’h\u00e9sitez pas \u00e0 faire discr\u00e8tement un tour sur le site de vos plus gros concurrents pour vous inspirer !<\/p>\n\n\n\n Pas plus de 2 typographies diff\u00e9rentes sur votre site mobile-first. R\u00e9sistez \u00e9galement aux polices d’\u00e9criture tarabiscot\u00e9es. Certes, elles peuvent \u00eatre tr\u00e8s \u00e9l\u00e9gantes mais votre priorit\u00e9 est de vous assurer que votre contenu soit parfaitement lisible m\u00eame sur les plus petits \u00e9crans. Ne choisissez donc que des polices simples et faciles \u00e0 lire !<\/strong><\/p>\n\n\n\n Quid de la taille des polices ? Les avis divergent l\u00e9g\u00e8rement selon les sp\u00e9cialistes. Mais \u00e0 titre indicatif, la soci\u00e9t\u00e9 de conseils Viaretina recommande<\/a> : <\/p>\n\n\n\n Il est \u00e9galement recommand\u00e9 : <\/p>\n\n\n\n Une bonne hi\u00e9rarchie visuelle vous aidera \u00e0 :<\/p>\n\n\n\n Pour parvenir \u00e0 vos fins, pensez surtout \u00e0 : <\/p>\n\n\n\n Naviguer au doigt, ce n’est pas du tout la m\u00eame chose qu’avec une souris ! Pour assurer un bon confort d’utilisation, veillez \u00e0 ce que vos \u00e9l\u00e9ments cliquables fassent au moins 44 pixels en hauteur et en largeur.<\/strong> <\/p>\n\n\n\n Les photos en format paysage et les graphiques complexes ne s’affichent pas correctement sur les petits \u00e9crans. Adaptez-vous aux utilisateurs mobile en proposant des images faciles \u00e0 lire sur leurs appareils !<\/p>\n\n\n\n Vos images ne doivent pas \u00e9galement \u00eatre trop lourdes \u00e0 charger sinon elles risquent de ralentir s\u00e9rieusement vos pages. Au besoin, vous pouvez utiliser un outil en ligne pour les compresser<\/a> au maximum. Gardez \u00e9galement \u00e0 l’esprit que certains formats sont naturellement plus lourds que d’autres. C’est pourquoi on utilise rarement les images PNG dans une d\u00e9marche mobile-first par exemple. <\/p>\n\n\n\n On utilise de pr\u00e9f\u00e9rence le JPEG ou le WebP, un format d’image de nouvelle g\u00e9n\u00e9ration mis \u00e0 la disposition du public par Google lui-m\u00eame. <\/strong>Ses points forts ? Etre encore plus l\u00e9ger que les fichiers JPEG tout en prenant en charge la transparence et les animations ! Autant dire qu’il est en train de devenir LE format de r\u00e9f\u00e9rence sur le Net. Plusieurs outils, comme Convertio<\/a>, vous permettent d’ailleurs d\u00e9j\u00e0 de convertir vos images en WebP.<\/p>\n\n\n\n Le saviez-vous ? La moiti\u00e9 des internautes quittent une page si elle met plus de 3 secondes \u00e0 s’afficher. Et les mobinautes ? Ils sont encore plus impatients. Certains d’entre eux s’attendent \u00e0 une quasi imm\u00e9diatet\u00e9 ! Dans l’id\u00e9al vos pages ne devraient donc pas mettre plus d’une seconde \u00e0 charger sur mobile…<\/p>Source : fasterize<\/cite><\/blockquote>\n\n\n\n Dans le m\u00eame ordre d’id\u00e9e : <\/p>\n\n\n\n Si nous vous avons d\u00e9j\u00e0 pr\u00e9sent\u00e9 plusieurs bonnes pratiques, adopter une d\u00e9marche mobile-first implique de ma\u00eetriser un certain nombre de comp\u00e9tences techniques. Vous n’avez pas le budget n\u00e9cessaire pour faire appel \u00e0 un prestataire ?<\/p>\n\n\n\n Dans ce cas, envisagez s\u00e9rieusement une formation que vous pourrez financer \u00e0 l’aide de votre CPF (Compte Personnel de Formation) ou de l’un des nombreux autres dispositifs de financement disponibles<\/a>.<\/p>\n\n\n\n Pas la peine d’attendre la rentr\u00e9e de septembre. Si vous optez pour une formation en ligne, vous pouvez commencer \u00e0 monter en comp\u00e9tences \u00e0 n’importe quel moment de l’ann\u00e9e<\/strong>. Sans parler du fait que vous vous \u00e9pargnerez de nombreux d\u00e9placements inutiles…<\/p>\n\n\n\n Parmi les formations 100% en ligne disponibles, citons notamment la formation responsive web design<\/a>, qui pr\u00e9sente les principes fondamentaux du mobile-first et les diff\u00e9rentes techniques de d\u00e9veloppement n\u00e9cessaires. <\/p>\n\n\n\n Mais vous souhaitez peut-\u00eatre d\u00e9velopper plut\u00f4t une application mobile pour votre entreprise ? Dans ce cas il existe d’autres formations int\u00e9ressantes comme l’Executive Bachelor Concepteur D\u00e9veloppeur d’Applications<\/a> par exemple. Il vous donnerait toutes les cl\u00e9s pour cr\u00e9er autant d’applications mobiles s\u00e9curis\u00e9es que vous le souhaitez !<\/p>\n\n\n\nUne approche mobile-first, c’est quoi ? Quelles diff\u00e9rences avec le responsive retrofitting ? <\/h2>\n\n\n\n
![\"mobile-first](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2024\/09\/responsive-strategy-paysage-FR.jpg\")
Pourquoi faut-il vous tourner vers le mobile-first ? <\/h2>\n\n\n\n
Quid du BtoB ? <\/h3>\n\n\n\n
Et pour les entreprises qui ont d\u00e9j\u00e0 un site ? <\/h3>\n\n\n\n
![\"Le](\"https:\/\/media4.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExdXFoamRpNmoyYXRveTJrd2UxZGt0YmRvY2phdGZ5aTBwcHFqOTFsNCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/fKqBFh5pebTrycP2wo\/giphy.webp\")
<\/figure><\/div>\n\n\n\nL’application mobile, une autre alternative<\/h4>\n\n\n\n
Comment concevoir un site mobile-first : les grandes bases \u00e0 conna\u00eetre <\/h2>\n\n\n\n
Concentrez-vous sur l’essentiel<\/h3>\n\n\n\n
![\"Analyser](\"https:\/\/media3.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExYnFzYWRsMHIydGQxcmc4b3BrNXR0bzhpNTE3a3B4NXZmbnh5NWZ1dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/RIspRd5jMtzXvttZGX\/giphy.webp\")
<\/figure><\/div>\n\n\n\nDans une approche mobile-first, soignez la lisibilit\u00e9<\/h3>\n\n\n\n
![\"Pour](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2024\/09\/mobile-first-taille-des-polices.png\")
Hi\u00e9rarchisez votre contenu<\/h3>\n\n\n\n
Adaptez la navigation pour un usage au doigt<\/h3>\n\n\n\n
Soyez vigilant(e) avec vos images<\/h3>\n\n\n\n
Pour aller plus loin <\/h2>\n\n\n\n