{"id":90875,"date":"2022-09-26T02:21:48","date_gmt":"2022-09-26T02:21:48","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/4-facons-de-lancer-une-conception-de-site-web-mobile\/"},"modified":"2022-09-26T02:21:48","modified_gmt":"2022-09-26T02:21:48","slug":"4-facons-de-lancer-une-conception-de-site-web-mobile","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/4-facons-de-lancer-une-conception-de-site-web-mobile\/","title":{"rendered":"4 fa\u00e7ons de lancer une conception de site Web mobile"},"content":{"rendered":"<div>\n<p> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5480\" title=\"responsive website design\" alt=\"\" width=\"640\" height=\"360\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/4-formas-de-lanzar-un-diseno-de-sitio-web-movil.jpg\"\/><\/p>\n<p>Avec la navigation Internet mobile qui devrait d\u00e9passer l&#8217;utilisation traditionnelle de l&#8217;Internet de bureau d\u00e8s 2014, selon une \u00e9tude rapport\u00e9e par l&#8217;\u00e9quipe marketing de Smart Insights, avoir un site Web qui s&#8217;affiche correctement dans un environnement mobile devient moins un probl\u00e8me de luxe pour les entreprises d&#8217;aujourd&#8217;hui et plus un &#8220;must have&#8221;.<\/p>\n<p>Et lorsqu&#8217;il s&#8217;agit de cr\u00e9er et de lancer une version adapt\u00e9e aux mobiles du contenu de votre site, vous avez plusieurs options diff\u00e9rentes.  Vous pouvez:<\/p>\n<ul>\n<li>Cr\u00e9ez une version mobile distincte de votre site qui r\u00e9side sur votre &#8220;m.domain.com&#8221;<\/li>\n<li>Utilisez un plugin pour cr\u00e9er automatiquement une version mobile de votre site \u00e0 la vol\u00e9e<\/li>\n<li>D\u00e9veloppez et publiez une application mobile contenant les m\u00eames informations que votre site Web.<\/li>\n<li>Utilisez un mod\u00e8le de conception Web r\u00e9actif qui se redimensionne en fonction d&#8217;un certain nombre de crit\u00e8res diff\u00e9rents.<\/li>\n<\/ul>\n<p>Examinons chacune de ces options plus en profondeur&#8230;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Versions_de_sites_mobiles_independantes\"><\/span>Versions de sites mobiles ind\u00e9pendantes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le lancement de versions autonomes de votre site Web implique la cr\u00e9ation de deux copies distinctes de votre site Web\u00a0: une qui se trouve sur votre URL principale et une qui est activ\u00e9e pour s&#8217;afficher sur votre sous-domaine &#8220;m.domain.com&#8221; chaque fois que votre site d\u00e9tecte qu&#8217;il est affich\u00e9 dans un navigateur mobile.  .  Malheureusement, il y a deux probl\u00e8mes principaux avec cette approche :<\/p>\n<ul>\n<li>Des versions de site distinctes vous permettent uniquement de cr\u00e9er une version de site mobile, ce qui ne vous servira \u00e0 rien lorsqu&#8217;il s&#8217;agira d&#8217;accueillir la myriade d&#8217;appareils num\u00e9riques diff\u00e9rents utilis\u00e9s aujourd&#8217;hui.  Disons que vous concevez la version mobile de votre site pour qu&#8217;elle soit belle sur l&#8217;iPhone 5. C&#8217;est tr\u00e8s bien pour certains utilisateurs, mais cela risque d&#8217;ali\u00e9ner les utilisateurs de tablettes ou de smartphones avec des tailles d&#8217;\u00e9cran diff\u00e9rentes.<\/li>\n<li>Construire des versions de site sur plusieurs URL n&#8217;est pas id\u00e9al du point de vue du r\u00e9f\u00e9rencement.  Bing s&#8217;est clairement prononc\u00e9 en faveur des solutions \u00e0 URL unique, et bien que Google ait \u00e9t\u00e9 plus circonspect sur la question, il est facile de voir \u00e0 quel point l&#8217;optimisation d&#8217;une version du site est moins compliqu\u00e9e et pr\u00e9sente moins de possibilit\u00e9s d&#8217;erreurs que l&#8217;optimisation de plusieurs versions du site. .<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Plugins_de_sites_mobiles\"><\/span>Plugins de sites mobiles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u00c9tant donn\u00e9 que les versions de site mobile ne sont pas vraiment une option, qu&#8217;en est-il des plugins de site mobile\u00a0?  Des outils comme &#8220;WP Touch&#8221; sont disponibles gratuitement et simplifient la cr\u00e9ation de sites mobiles en vous permettant d&#8217;installer un logiciel simple et d&#8217;activer automatiquement des versions de sites mobiles qui s&#8217;affichent correctement dans un certain nombre d&#8217;environnements diff\u00e9rents.<\/p>\n<p>Du point de vue du r\u00e9f\u00e9rencement, il s&#8217;agit d&#8217;une alternative beaucoup plus solide \u00e0 la cr\u00e9ation de sites distincts pour accueillir les appareils mobiles.  Cependant, il y a une faiblesse cl\u00e9 dont il faut \u00eatre conscient avec les plugins de site mobile\u00a0: la perte d&#8217;\u00e9l\u00e9ments de marque importants.<\/p>\n<p>Jetez un \u0153il \u00e0 la banni\u00e8re suivante sur la page d&#8217;accueil de WP Touch Pro :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5481\" title=\"wptouch banner\" alt=\"\" width=\"600\" height=\"244\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639674008_264_4-formas-de-lanzar-un-diseno-de-sitio-web-movil.jpg\"\/><\/p>\n<p>Bien que le bureau soit bien con\u00e7u et bien marqu\u00e9 avec des polices et des jeux de couleurs distinctifs, l&#8217;interface mobile perd tout cet attrait visuel.  Bien que WPTouch et des outils similaires offrent la possibilit\u00e9 de contr\u00f4ler certains \u00e9l\u00e9ments visuels, ils ne se rapprochent pas de la reproduction de votre site de bureau, ce qui co\u00fbte \u00e0 votre entreprise la puissance qu&#8217;offre une pr\u00e9sence Web bien marqu\u00e9e.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Developpement_dapplications_mobiles\"><\/span>D\u00e9veloppement d&#8217;applications mobiles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Donc, si afficher correctement le contenu de votre site Web de bureau dans un environnement mobile est si compliqu\u00e9, pourquoi ne pas ignorer compl\u00e8tement le processus et publier simplement les informations de votre site via une application mobile ?<\/p>\n<p>Eh bien, pas si vite\u2026 Une \u00e9tude d&#8217;octobre 2012 du Pew Research Center a r\u00e9v\u00e9l\u00e9 que 60 % des internautes pr\u00e9f\u00e9reraient lire les actualit\u00e9s dans leurs navigateurs mobiles, plut\u00f4t que via des applications Web :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5482\" title=\"pew mobile research\" alt=\"\" width=\"380\" height=\"300\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/4-formas-de-lanzar-un-diseno-de-sitio-web-movil.png\"\/><\/p>\n<p>Bien que l&#8217;\u00e9tude ne porte que sur la consommation des m\u00e9dias, on peut dire sans risque de se tromper qu&#8217;\u00e9tant donn\u00e9 cette pr\u00e9f\u00e9rence manifeste pour la lecture de texte via les navigateurs mobiles, les applications mobiles ne devraient jamais \u00eatre consid\u00e9r\u00e9es comme un v\u00e9ritable substitut aux versions de sites Web mobiles.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conception_de_site_Web_reactif\"><\/span>Conception de site Web r\u00e9actif<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La derni\u00e8re option, et celle pr\u00e9f\u00e9r\u00e9e par la plupart des internautes et des r\u00e9f\u00e9renceurs, lorsqu&#8217;il s&#8217;agit de cr\u00e9er des sites Web mobiles, est connue sous le nom de &#8220;conception de site Web r\u00e9actif&#8221;.<\/p>\n<p>Fondamentalement, une conception de site Web r\u00e9actif est une conception de site qui modifie automatiquement ses param\u00e8tres d&#8217;affichage, en fonction du type d&#8217;appareil affichant le site.  Si un visiteur du site Web arrive sur le site \u00e0 l&#8217;aide d&#8217;un ordinateur de bureau, la mise en page du site s&#8217;affiche en pleine largeur.  Mais si le site d\u00e9tecte qu&#8217;il est affich\u00e9 sur un appareil mobile, il s&#8217;aligne automatiquement pour s&#8217;afficher correctement dans le nouveau navigateur.<\/p>\n<p>Cela se produit en raison de la pr\u00e9sence de deux technologies importantes\u00a0: la grille fluide et les requ\u00eates multim\u00e9dia CSS3.<\/p>\n<p>Alors que de nombreux sites sont con\u00e7us sur une base de pixels fixes, ce qui signifie que la mise en page a une largeur d\u00e9finie qui ne changera pas, quel que soit l&#8217;endroit o\u00f9 elle est affich\u00e9e, les mises en page de sites r\u00e9actifs utilisent un &#8220;<strong>grille fluide<\/strong>.  \u00ab Les grilles de fluides repr\u00e9sentent une avanc\u00e9e par rapport aux conceptions de distribution de liquide pr\u00e9c\u00e9dentes, car elles sont con\u00e7ues en proportions plut\u00f4t qu&#8217;en pourcentages arbitraires.  Lorsque des grilles fluides sont utilis\u00e9es, la mise en page de votre site Web se redimensionne automatiquement en fonction du changement proportionnel des r\u00e9solutions d&#8217;\u00e9cran.<\/p>\n<p>Bien s\u00fbr, les proportions ne peuvent vous mener que tr\u00e8s loin.  Si votre site Web utilise une mise en page \u00e0 3 colonnes, le redimensionnement de la mise en page de votre site sur un \u00e9cran de navigateur mobile de 300 pixels se traduira par une mise en page assez \u00e9troite.<\/p>\n<p>C&#8217;est l\u00e0 que <strong>Requ\u00eates m\u00e9dia CSS3<\/strong> En particulier, les conceptions de sites Web r\u00e9actifs utilisent la requ\u00eate multim\u00e9dia de largeur minimale, qui permet aux sites Web d&#8217;offrir conditionnellement diff\u00e9rents ensembles de CSS en fonction de la taille d\u00e9tect\u00e9e du navigateur.  Par exemple, les requ\u00eates peuvent \u00eatre configur\u00e9es pour d\u00e9clencher diff\u00e9rentes r\u00e8gles CSS lorsqu&#8217;elles d\u00e9tectent des navigateurs inf\u00e9rieurs \u00e0 320\u00a0px, 480\u00a0px, 600\u00a0px, 768\u00a0px, 900\u00a0px ou 1\u00a0200\u00a0px, ce qui repr\u00e9sente la plupart des diff\u00e9rentes tailles d&#8217;\u00e9cran disponibles sur les ordinateurs de bureau et les appareils mobiles d&#8217;aujourd&#8217;hui.<\/p>\n<p>Poursuivant avec notre pr\u00e9c\u00e9dent exemple de mise en page \u00e0 3 colonnes, la combinaison de la grille liquide avec les requ\u00eates multim\u00e9dias permet aux concepteurs de d\u00e9finir un point de &#8220;rupture&#8221;, o\u00f9 le style du site Web change radicalement.  Au lieu de redimensionner la disposition \u00e0 3 colonnes \u00e0 une taille d&#8217;\u00e9cran diff\u00e9rente, les requ\u00eates multim\u00e9dias permettent aux concepteurs de passer \u00e0 une disposition \u00e0 une seule colonne d\u00e8s qu&#8217;il est d\u00e9termin\u00e9 que la disposition ne s&#8217;affiche plus correctement.<\/p>\n<p>Et, mieux encore, parce que tout cela se produit \u00e0 partir d&#8217;une seule conception de site, il n&#8217;y a aucun des probl\u00e8mes de r\u00e9f\u00e9rencement qui r\u00e9sulteraient autrement de l&#8217;affichage de ces diff\u00e9rentes versions sur des sous-domaines de site Web distincts.<\/p>\n<p>La conception de sites Web r\u00e9actifs n&#8217;est pas une solution parfaite, mais c&#8217;est la meilleure que nous ayons actuellement.  Selon Jeffrey Veen, auteur de &#8220;The Art and Science of Web Design&#8221;:<\/p>\n<p style=\"padding-left: 30px;\">&#8220;Chaque jour, le nombre d&#8217;appareils, de plates-formes et de navigateurs qui doivent fonctionner avec votre site augmente.  La conception Web r\u00e9active repr\u00e9sente un changement fondamental dans la fa\u00e7on dont nous cr\u00e9erons des sites Web pour la prochaine d\u00e9cennie.<\/p>\n<p>Pour cr\u00e9er une version de site Web r\u00e9actif, vous avez deux options diff\u00e9rentes.  Vous pouvez:<\/p>\n<ul>\n<li>Passez \u00e0 un th\u00e8me r\u00e9actif pr\u00e9-construit (qui est largement disponible via des services comme ThemeForest), ou<\/li>\n<li>Engagez un d\u00e9veloppeur Web pour cr\u00e9er une version r\u00e9active de votre site actuel.<\/li>\n<\/ul>\n<p>Passer \u00e0 un th\u00e8me r\u00e9actif est l&#8217;alternative la moins ch\u00e8re, mais cela peut signifier perdre certains des \u00e9l\u00e9ments de marque trouv\u00e9s dans la conception actuelle de votre site (puisque le remplacement de votre th\u00e8me ou mod\u00e8le implique de modifier une toute nouvelle conception \u00e0 partir de z\u00e9ro).  Si vous n&#8217;\u00eates pas attach\u00e9 \u00e0 la conception de votre site actuel, cela pourrait \u00eatre une excellente approche pour maintenir les co\u00fbts bas tout en continuant \u00e0 accueillir les utilisateurs de sites Web mobiles.<\/p>\n<p>D&#8217;un autre c\u00f4t\u00e9, bien que l&#8217;embauche d&#8217;un d\u00e9veloppeur Web pour personnaliser le code de la nouvelle version de votre site Web r\u00e9actif puisse \u00eatre plus co\u00fbteuse, les co\u00fbts en valent souvent la peine pour \u00e9conomiser sur les maux de t\u00eate du d\u00e9veloppement et pr\u00e9server la marque du site Web sur lequel vous avez travaill\u00e9 si dur. cr\u00e9er.  .<\/p>\n<p>Peu importe laquelle de ces deux options de conception de sites r\u00e9actifs vous choisissez, tant que vous choisissez !  La navigation sur les sites Web mobiles et la conception de sites Web r\u00e9actifs sont la voie de l&#8217;avenir.  Ne risquez pas de perdre des visiteurs mobiles sur votre site parce que vous ne pouvez pas vous r\u00e9soudre \u00e0 appuyer sur la g\u00e2chette de ce type de technologie puissante\u00a0!<\/p>\n<p>Image\u00a0: Matts\u00a0Macintosh<\/p>\n<\/p><\/div>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/fr\/4-facons-de-lancer-une-conception-de-site-web-mobile\/#Versions_de_sites_mobiles_independantes\" >Versions de sites mobiles ind\u00e9pendantes<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/fr\/4-facons-de-lancer-une-conception-de-site-web-mobile\/#Plugins_de_sites_mobiles\" >Plugins de sites mobiles<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/fr\/4-facons-de-lancer-une-conception-de-site-web-mobile\/#Developpement_dapplications_mobiles\" >D\u00e9veloppement d&#8217;applications mobiles<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/fr\/4-facons-de-lancer-une-conception-de-site-web-mobile\/#Conception_de_site_Web_reactif\" >Conception de site Web r\u00e9actif<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>Avec la navigation Internet mobile qui devrait d\u00e9passer l&#8217;utilisation traditionnelle de l&#8217;Internet de bureau d\u00e8s 2014, selon une \u00e9tude rapport\u00e9e par l&#8217;\u00e9quipe marketing de Smart Insights, avoir un site Web qui s&#8217;affiche correctement dans un environnement mobile devient moins un probl\u00e8me de luxe pour les entreprises d&#8217;aujourd&#8217;hui et plus un &#8220;must have&#8221;. Et lorsqu&#8217;il s&#8217;agit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":90876,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[699,353,1588,144,649,66,345],"class_list":["post-90875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","tag-conception","tag-facons","tag-lancer","tag-mobile","tag-site","tag-une","tag-web"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/90875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=90875"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/90875\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/90876"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=90875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=90875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=90875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}