{"id":369914,"date":"2023-04-26T09:53:00","date_gmt":"2023-04-26T06:53:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=369914"},"modified":"2023-04-26T10:06:17","modified_gmt":"2023-04-26T07:06:17","slug":"mobile-first-design-quest-ce-que-cest-et-pourquoi-cest-important","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/mobile-first-design-quest-ce-que-cest-et-pourquoi-cest-important\/","title":{"rendered":"Mobile-First Design &#8211; Qu&rsquo;est-ce que c&rsquo;est et pourquoi c&rsquo;est important"},"content":{"rendered":"\n<p>L&rsquo;automne 2018 a \u00e9t\u00e9 une p\u00e9riode difficile pour les sp\u00e9cialistes du marketing en ligne, les blogueurs, les agences num\u00e9riques\u2026 essentiellement pour tous ceux dont le pain et le beurre viennent du domaine en ligne. Pourquoi? Parce que c&rsquo;est \u00e0 ce moment-l\u00e0 que le g\u00e9ant des moteurs de recherche, Google, a commenc\u00e9 \u00e0 d\u00e9ployer son <strong>indexation mobile d&rsquo;abord<\/strong>. Cela n&rsquo;a certainement pas \u00e9t\u00e9 une surprise puisque le <strong><a href=\"https:\/\/searchengineland.com\/google-search-algorithm-adds-mobile-friendly-factors-app-indexing-ranking-215573\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">&quot;Mobilegeddon&quot;<\/a><\/strong> de 2015 a d\u00e9j\u00e0 introduit la priorisation des sites Web qui s&rsquo;affichent bien sur les appareils mobiles. La conception ax\u00e9e sur le mobile \u00e9tait d\u00e9j\u00e0 une chose, mais Google a quand m\u00eame r\u00e9ussi \u00e0 semer la panique.<\/p>\n<p>Mais revenons un instant en arri\u00e8re et examinons ce que signifie r\u00e9ellement &quot;mobile-first&quot;.<\/p>\n<h2>La conception Mobile-First expliqu\u00e9e<\/h2>\n<p>En bref, la conception ax\u00e9e sur le mobile est le type de conception qui <strong>donne la priorit\u00e9 aux appareils mobiles<\/strong>. En g\u00e9n\u00e9ral, cela inclut les smartphones et les tablettes ou tout appareil dot\u00e9 d&rsquo;un \u00e9cran plus petit. Pour bien comprendre ce concept, il faut d&rsquo;abord parler de responsive web design ou <strong>RWB<\/strong>. Dans RWB, nous permettons essentiellement au Web et \u00e0 toutes ses formes et contenus de s&rsquo;adapter \u00e0 des \u00e9crans plus petits sans perte de qualit\u00e9. Cela doit \u00e9galement \u00eatre fait d&rsquo;une mani\u00e8re que les gens trouvent pratique ou confortable. Lorsqu&rsquo;elle est effectu\u00e9e correctement, la conception r\u00e9active signifie que l&rsquo;utilisateur n&rsquo;a pas besoin de zoomer, de faire d\u00e9filer ou de faire d\u00e9filer l&rsquo;\u00e9cran pour afficher tout le contenu du site.<\/p>\n<p>De toute \u00e9vidence, avec le degr\u00e9 auquel les recherches mobiles ont d\u00e9pass\u00e9 celles des ordinateurs de bureau, il est naturel qu&rsquo;un site Web soit r\u00e9actif. Ce n&rsquo;est m\u00eame pas une question de survie du plus fort. C&rsquo;est plus simple que \u00e7a. Si votre site Web n&rsquo;est pas r\u00e9actif, il pourrait tout aussi bien \u00eatre inexistant. Les gens n&rsquo;ont ni le temps ni la patience pour les sites Web qui ne r\u00e9pondent pas.<\/p>\n<p>Mais il y a plus ici que la simple r\u00e9activit\u00e9. Lors du d\u00e9veloppement d&rsquo;un produit, les concepteurs prenaient la version de bureau comme point de d\u00e9part. Ensuite, apr\u00e8s avoir finalis\u00e9 cette version particuli\u00e8re, ils ont essentiellement abandonn\u00e9 certains \u00e9l\u00e9ments afin d&rsquo;optimiser le produit pour mobile.<\/p>\n<p>Aujourd&rsquo;hui, le processus est diff\u00e9rent. <strong>\u00ab\u00a0L&rsquo;avancement progressif\u00a0\u00bb<\/strong> est un principe largement utilis\u00e9 dans la conception, qui prend la version mobile comme point de d\u00e9part. Et c&rsquo;est exactement ce que signifie &quot;mobile-first&quot;. La conception commence \u00e0 partir de l&rsquo;extr\u00e9mit\u00e9 mobile, puis s&rsquo;\u00e9tend progressivement \u00e0 des versions plus avanc\u00e9es.<\/p>\n<h2>Indexation mobile d&rsquo;abord<\/h2>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 pr\u00e9c\u00e9demment, en 2018, Google a lanc\u00e9 une toute nouvelle fa\u00e7on d&rsquo;indexer les sites. L&rsquo;indexation est importante car c&rsquo;est l&rsquo;un des m\u00e9canismes que Google utilise pour d\u00e9cider du classement de votre site Web sur les pages de r\u00e9sultats des moteurs de recherche.<\/p>\n<p>Donc, fondamentalement, l&rsquo;indexation mobile d&rsquo;abord signifie que lorsque Google d\u00e9ploie ses crawlbots, ils vont d&rsquo;abord rechercher la version mobile de votre site, puis celle de bureau. Notez que la version mobile n&rsquo;est pas la seule \u00e0 \u00eatre index\u00e9e et class\u00e9e. Votre version de bureau est \u00e9galement prise en compte, mais seulement apr\u00e8s la version mobile. Si votre site Web n&rsquo;a pas de version mobile, cela aura un impact n\u00e9gatif important sur le classement de votre site Web. Pas seulement \u00e7a. La qualit\u00e9 de l&rsquo;exp\u00e9rience mobile offerte par votre site Web est \u00e9galement un facteur.<\/p>\n<p>Et c&rsquo;est pourquoi le mobile-first doit \u00eatre pris tr\u00e8s, tr\u00e8s au s\u00e9rieux par tout propri\u00e9taire de site Web.<\/p>\n<h2>Comment optimiser pour Mobile-First<\/h2>\n<p>Alors vous vous \u00eates procur\u00e9 un <a href=\"https:\/\/themewp.inform.click\/fr\/top-15-des-themes-wordpress-reactifs-gratuits-pour-2022\/\" title=\"th\u00e8me responsive\">th\u00e8me responsive<\/a> sympa? Bien. La r\u00e9activit\u00e9 est extr\u00eamement importante. Mais ne pensez-vous pas une seconde que votre travail d&rsquo;optimisation pour le mobile se termine l\u00e0. C&rsquo;est plus compliqu\u00e9 que \u00e7a.<\/p>\n<p>Que vous donniez \u00e0 votre ancien site WordPress un nettoyage de printemps ou que vous en construisiez un tout nouveau, vous pouvez faire certaines choses pour le rendre plus attrayant pour les robots d&rsquo;exploration de Google et l&rsquo;indexation mobile d&rsquo;abord.<\/p>\n<ul>\n<li><strong>Optimisez la vitesse de votre site Web<\/strong><\/li>\n<\/ul>\n<p>Google d\u00e9teste les sites Web lents. Pas vraiment. Il a un penchant particulier pour les sites Web qui sont lents \u00e0 charger. Depuis l&rsquo;\u00e9t\u00e9 2018, Google donne officiellement la priorit\u00e9 aux sites Web rapides, c&rsquo;est donc certainement quelque chose \u00e0 penser.<\/p>\n<p>M\u00eame si votre site Web est un peu lent, ne vous inqui\u00e9tez pas. Il y a beaucoup de choses que vous pouvez faire pour l&rsquo;acc\u00e9l\u00e9rer. Par exemple, vous pouvez utiliser l&rsquo;un des excellents <a href=\"https:\/\/themewp.inform.click\/fr\/meilleurs-plugins-de-mise-en-cache-wordpress-et-comment-les-installer\/\" title=\"plugins de mise en cache\">plugins de mise en cache<\/a> qui cr\u00e9ent une version compatible HTML de votre site afin qu&rsquo;il se charge plus rapidement. Vous pouvez \u00e9galement compresser tous vos fichiers afin qu&rsquo;ils soient t\u00e9l\u00e9charg\u00e9s dans la taille la plus faible et la plus l\u00e9g\u00e8re possible. Enfin, prenez le temps de parcourir votre site Web et de rechercher d&rsquo;\u00e9ventuelles erreurs techniques, telles que des liens bris\u00e9s, des pages trop satur\u00e9es, etc.<\/p>\n<p>En ce qui concerne l&rsquo; <strong>optimisation pour les moteurs de recherche (SEO)<\/strong>, en supposant que vous appliquez d\u00e9j\u00e0 toutes les meilleures pratiques dans le domaine, il y a quelques \u00e9l\u00e9ments suppl\u00e9mentaires \u00e0 garder \u00e0 l&rsquo;esprit.<\/p>\n<p>D&rsquo;une part, vous devez assurer la parit\u00e9 du contenu entre les versions de votre site. Ceci s&rsquo;applique en particulier aux liens internes, aux donn\u00e9es structur\u00e9es, aux balises, etc. Assurez-vous \u00e9galement que vos serveurs peuvent g\u00e9rer le taux de crawl. C&rsquo;\u00e9tait un probl\u00e8me lors du d\u00e9ploiement de l&rsquo;indexation mobile-first, mais un nombre surprenant de sites Web ne s&rsquo;est toujours pas adapt\u00e9 \u00e0 la nouvelle activit\u00e9 d&rsquo;exploration.<\/p>\n<p>Enfin, surveillez r\u00e9guli\u00e8rement l&rsquo;\u00e9tat de votre indexation et assurez-vous que <strong>robots.txt<\/strong> est valid\u00e9 et que les fichiers journaux de votre serveur sont en ordre.<\/p>\n<ul>\n<li><strong>Optez pour un framework responsive<\/strong><\/li>\n<\/ul>\n<p>Oui, nous avons dit plus t\u00f4t que l&rsquo;utilisation d&rsquo;un th\u00e8me r\u00e9actif, construit sur un framework r\u00e9actif, n&rsquo;est pas suffisant pour une bonne optimisation mobile first. Mais cela reste l&rsquo;un des facteurs essentiels, nous avons donc pens\u00e9 qu&rsquo;il fallait le r\u00e9it\u00e9rer.<\/p>\n<p>Bootstrap et Foundation sont actuellement les frameworks les plus populaires et sans doute les meilleurs responsive, alors optez pour un th\u00e8me utilisant l&rsquo;un d&rsquo;entre eux. Ils sont id\u00e9aux pour traduire la conception de votre site Web sur des \u00e9crans plus petits avec un risque minimal de probl\u00e8mes et de bogues. De plus, ils le font \u00e0 la fois au niveau du front-end et du back-end, ce qui r\u00e9duit consid\u00e9rablement la charge de travail des d\u00e9veloppeurs.<\/p>\n<ul>\n<li><strong>Optimisez votre navigation, votre contenu et vos interactions<\/strong><\/li>\n<\/ul>\n<p>Trouver cet \u00e9quilibre parfait entre pas assez de contenu et trop de contenu est le mal commun de tous les sites Web mobiles. Pourtant, c&rsquo;est une bataille que nous devons continuer \u00e0 mener. Les visiteurs ont besoin d&rsquo;informations, et ils ont besoin qu&rsquo;elles soient pr\u00e9sent\u00e9es de mani\u00e8re claire et simple. L&rsquo;encombrement est inacceptable. <strong>Organisez votre contenu de<\/strong> mani\u00e8re \u00e0 pouvoir dire ce que vous avez \u00e0 dire, \u00e9laborer des strat\u00e9gies pour vos appels \u00e0 l&rsquo;action, et rien d&rsquo;autre.<\/p>\n<p>Tenez \u00e9galement compte de la navigation de votre site Web. Si c&rsquo;est trop compliqu\u00e9, cela ne fonctionnera tout simplement pas pour le mobile.<\/p>\n<p>Ensuite, si votre barre de navigation sur ordinateur est longue, vous devez la raccourcir dans votre version mobile. Envisagez d&rsquo;agrandir votre texte et de transformer vos liens en boutons faciles \u00e0 appuyer.<\/p>\n<p>Enfin, voyez si vos mises en page sont correctement optimis\u00e9es pour les actions manuelles courantes, telles que toucher et balayer.<\/p>\n<p>C&rsquo;est une \u00e9tape tout \u00e0 fait logique mais cela ne fera pas de mal de le souligner une fois de plus. Vous devez toujours v\u00e9rifier et tester tout sur votre site. M\u00eame si vous n&rsquo;avez apport\u00e9 aucune modification r\u00e9cemment, envisagez de faire un test occasionnel juste pour voir si tout fonctionne bien.<\/p>\n<p>De nos jours, la plupart des gens utilisent des navigateurs modernes ou des navigateurs optimis\u00e9s pour les mobiles. Cependant, un pourcentage \u00e9tonnant d&rsquo;internautes utilisent encore des versions de navigateur plus anciennes, et vous devez \u00e9galement y penser. Vous voulez que votre site Web soit aussi beau sur un ancien iPhone 4s que sur le nouveau Huawei P20.<\/p>\n<p>Testez simplement la r\u00e9activit\u00e9 de la conception de votre site Web et n&rsquo;oubliez pas les tests fractionn\u00e9s A\/B, en particulier pour vos pages de destination. Bien entendu, avant toute chose, <a href=\"https:\/\/themewp.inform.click\/fr\/comment-modifier-la-version-mobile-du-site-wordpress\/\" title=\"personnalisez la version mobile de votre site\">personnalisez la version mobile de votre site<\/a>, et pr\u00e9parez-la pour les utilisateurs.<\/p>\n<p>Le mobile-first est une tendance qui va perdurer pendant un certain temps, et c&rsquo;est la r\u00e9alit\u00e9 que nous devons tous accepter. Par \u00ab\u00a0nous\u00a0\u00bb, nous entendons toutes les personnes impliqu\u00e9es dans la cr\u00e9ation et la gestion d&rsquo;un site Web. Designers, d\u00e9veloppeurs, administrateurs, experts SEO, \u00e9diteurs, r\u00e9dacteurs &#8211; tout le monde doit se rappeler de donner la priorit\u00e9 au mobile. Bien s\u00fbr, cela ne veut pas dire que nous devrions n\u00e9gliger les versions de bureau. C&rsquo;est juste que la conception ax\u00e9e sur le mobile doit \u00eatre prise au s\u00e9rieux.<\/p>\n<p>Nous esp\u00e9rons que vous avez trouv\u00e9 cet article utile. Si vous l&rsquo;avez aim\u00e9, n&rsquo;h\u00e9sitez pas \u00e0 consulter \u00e9galement certains de ces articles\u00a0!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous \u00eates-vous d\u00e9j\u00e0 demand\u00e9 ce que signifie la conception ax\u00e9e sur le mobile et pourquoi c&rsquo;est important\u00a0? Lisez la suite pour d\u00e9couvrir tout ce que vous devez savoir sur ce concept important.<\/p>\n","protected":false},"author":1,"featured_media":364053,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-369914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/369914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=369914"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/369914\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/364053"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=369914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=369914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=369914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}