{"id":15090,"date":"2017-09-06T10:50:51","date_gmt":"2017-09-06T08:50:51","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=15090"},"modified":"2025-08-28T10:47:30","modified_gmt":"2025-08-28T08:47:30","slug":"fondamentaux-navigation-mobile","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/","title":{"rendered":"5 fondamentaux pour une meilleure navigation mobile"},"content":{"rendered":"<p>La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur.<br \/>\nIl y a donc quelques fondamentaux \u00e0 conna\u00eetre pour optimiser l&#8217;exp\u00e9rience utilisateur sur smartphone.<\/p>\n<h2>1) Choisir le bon menu<\/h2>\n<p>Par d\u00e9finition, un \u00e9cran de smartphone contient un espace plus restreint qu&#8217;un ordinateur de bureau&nbsp;: \u00e9conomiser de la place est donc un v\u00e9ritable must en mati\u00e8re de navigation mobile.<br \/>\nL&#8217;une des mani\u00e8res les plus populaires d&#8217;y parvenir est le &#8220;menu hamburger&#8221;, nomm\u00e9 ainsi parce que la forme de son bouton rappelle un sandwich.<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-15091\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger.png\" alt=\"Utilisation du menu hamburger pour la navigation mobile\" width=\"300\" height=\"533\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger.png 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger-169x300.png 169w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger-270x480.png 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nL&#8217;application Uber est un bon exemple de son utilisation (en haut \u00e0 gauche de l&#8217;image ci-dessus). Il pr\u00e9sente diff\u00e9rents avantages&nbsp;:<\/p>\n<ul>\n<li>Il est particuli\u00e8rement discret (tout en \u00e9tant suffisamment visible pour \u00eatre remarqu\u00e9) ;<\/li>\n<li>De par sa taille et sa position, il ne nuit pas \u00e0 la navigation sur le reste de la page ;<\/li>\n<li>Il permet de hi\u00e9rarchiser l&#8217;information en &#8220;cachant&#8221; les \u00e9l\u00e9ments secondaires. Dans cet exemple, la fonction premi\u00e8re de l&#8217;application (\u00e0 savoir chercher un chauffeur pour atteindre une destination donn\u00e9e) est clairement mise en avant. Il faudra toucher le hamburger pour acc\u00e9der \u00e0 d&#8217;autres options moins importantes (voir ci-dessous).<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-15092\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger-2.png\" alt=\"Utilisation du menu hamburger pour la navigation mobile\" width=\"300\" height=\"533\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger-2.png 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger-2-169x300.png 169w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-hamburger-2-270x480.png 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nMalgr\u00e9 tout, le menu hamburger n&#8217;est pas une recette miracle, et il ne s&#8217;adapte pas \u00e0 tous les sites ou applications.<br \/>\nL&#8217;application Uber est pens\u00e9e pour remplir une fonction phare (trouver un chauffeur) mais, dans de nombreux cas, l&#8217;utilisateur va disposer de plusieurs choix. Auquel cas, le menu hamburger n&#8217;est pas forc\u00e9ment la meilleure solution.<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-15093\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets.png\" alt=\"Menu \u00e0 onglets pour la navigation mobile\" width=\"300\" height=\"533\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets.png 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets-169x300.png 169w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets-270x480.png 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nAirbnb l&#8217;a bien compris en pr\u00e9f\u00e9rant utiliser une barre d&#8217;onglets qui permet \u00e0 l&#8217;utilisateur d&#8217;acc\u00e9der rapidement aux diff\u00e9rentes options&nbsp;: trouver un logement, voir ses voyages, envoyer un message \u00e0 un h\u00f4te, etc.<br \/>\nToutefois, cette solution a aussi ses limites&nbsp;: si les options de navigation sont tr\u00e8s nombreuses, elles ne peuvent \u00eatre contenues dans une barre d&#8217;onglets (dont la taille est limit\u00e9, ne serait-ce que par le format du mobile).<br \/>\nOn peut alors utiliser un syst\u00e8me &#8220;hybride&#8221; qui combine onglets et menu hamburger, comme le fait Facebook&nbsp;:<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-15094\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets-hamburger.png\" alt=\"Menu \u00e0 onglets contenant un bouton hamburger\" width=\"300\" height=\"533\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets-hamburger.png 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets-hamburger-169x300.png 169w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/menu-onglets-hamburger-270x480.png 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nLes fonctions jug\u00e9es les plus importantes (fil d&#8217;actualit\u00e9, photos, invitations, notifications) sont visibles directement, tandis que les nombreuses options secondaires sont accessibles via un menu hamburger.<\/p>\n<blockquote>\n<ul>\n<li>Le menu hamburger est adapt\u00e9 si l&#8217;application ou le site est ax\u00e9 sur une fonctionnalit\u00e9 majeure, justifiant ainsi que les options secondaires soient cach\u00e9es.<\/li>\n<li>La barre d&#8217;onglets est le choix id\u00e9al pour les applis ayant quelques fonctionnalit\u00e9s de premier ordre (4 ou 5 tout au plus).<\/li>\n<\/ul>\n<\/blockquote>\n<h2>2) Bien mettre en \u00e9vidence les onglets<\/h2>\n<p>Si vous avez opt\u00e9 pour une barre d&#8217;onglets pour votre application mobile, il y a un certain nombre d&#8217;erreurs \u00e0 \u00e9viter pour fluidifier la navigation.<br \/>\nD&#8217;abord, il faut savoir que, bien souvent, une simple ic\u00f4ne ne suffit pas pour repr\u00e9senter un onglet (\u00e0 moins que les diff\u00e9rentes options soient \u00e9videntes et puissent \u00eatre repr\u00e9sent\u00e9es et reconnues tr\u00e8s facilement, comme c&#8217;est le cas pour Facebook).<br \/>\nPar exemple, Airbnb (voir plus haut) a pris soin de rajouter <strong>du texte en dessous de chaque ic\u00f4ne<\/strong> afin de rendre les onglets parfaitement clairs. C&#8217;est aussi le cas de la SNCF&nbsp;:<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-15096\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/barre-onglets-mobile.png\" alt=\"Barre d'onglets pour la navigation mobile\" width=\"300\" height=\"533\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/barre-onglets-mobile.png 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/barre-onglets-mobile-169x300.png 169w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/barre-onglets-mobile-270x480.png 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Dans cet exemple, on peut aussi remarquer une autre bonne pratique&nbsp;: <strong>l&#8217;onglet sur lequel se trouve l&#8217;utilisateur est mis en \u00e9vidence<\/strong>, en l&#8217;occurrence parce qu&#8217;il est d&#8217;une couleur diff\u00e9rente.<br \/>\nSi ceci est essentiel pour aider l&#8217;utilisateur \u00e0 se rep\u00e9rer, il faut aussi penser \u00e0 <strong>hi\u00e9rarchiser les onglets<\/strong>&nbsp;: comprenez par l\u00e0 que le premier d&#8217;entre eux (en partant de la gauche, du moins dans les pays occidentaux) devrait repr\u00e9senter la fonctionnalit\u00e9 la plus importante.<\/p>\n<h2>3) Bien utiliser les boutons d&#8217;action flottants<\/h2>\n<p>Le boutons flottants sont comme leur nom l&#8217;indique des boutons, souvent de forme circulaire, qui semblent flotter au dessus de l&#8217;interface d&#8217;une application mobile. On en retrouve par exemple un sur l&#8217;application Gmail&nbsp;:<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-15097\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/bouton-flottant-mobile.png\" alt=\"Bouton d'action flottant sur mobile\" width=\"300\" height=\"533\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/bouton-flottant-mobile.png 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/bouton-flottant-mobile-169x300.png 169w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/bouton-flottant-mobile-270x480.png 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nCe type de bouton sert principalement \u00e0 mettre en \u00e9vidence une action et \u00e0 aider l&#8217;utilisateur \u00e0 l&#8217;accomplir (ici, \u00e9crire un nouveau mail).<br \/>\nC&#8217;est donc un moyen efficace de guider l&#8217;utilisateur, qui pourrait se sentir d\u00e9sempar\u00e9 face \u00e0 l&#8217;interface de l&#8217;app, tout en \u00e9tant assez \u00e9conome en espace.<br \/>\nCependant, le bouton d&#8217;action pr\u00e9sente quelques faiblesses&nbsp;:<\/p>\n<ul>\n<li>Il peut cacher du contenu&nbsp;: dans l&#8217;exemple ci-dessus, le bouton emp\u00eache de lire la date de r\u00e9ception et d&#8217;appuyer sur le bouton en forme d&#8217;\u00e9toile ;<\/li>\n<li>Il peut distraire l&#8217;utilisateur et le d\u00e9tourner du contenu de la page (et pour cause, le bouton flottant est pens\u00e9 pour attirer l\u2019\u0153il) ;<\/li>\n<li>Il ne contient, en principe, qu&#8217;une ic\u00f4ne et est d\u00e9pourvu de texte, ce qui peut causer des probl\u00e8mes de compr\u00e9hension.<\/li>\n<\/ul>\n<p>Pour compenser cela, il est important de respecter ces quelques r\u00e8gles&nbsp;:<\/p>\n<ul>\n<li>Utiliser un seul bouton flottant par \u00e9cran ;<\/li>\n<li>N&#8217;en utiliser un que si cela a un int\u00e9r\u00eat ;<\/li>\n<li>Associer au bouton flottant des actions positives (\u00e9crire, cr\u00e9er, effectuer une recherche, etc.).<\/li>\n<\/ul>\n<h2>4) Penser \u00e0 la navigation en plein \u00e9cran<\/h2>\n<p>Le menu hamburger, la barre d&#8217;onglets et le bouton flottant ont en commun de r\u00e9duire l&#8217;espace consacr\u00e9 \u00e0 la navigation.<br \/>\nLa navigation plein \u00e9cran prend ce principe \u00e0 contrepied en consacrant la totalit\u00e9 de l&#8217;\u00e9cran (ou presque) \u00e0 l&#8217;interaction et donc \u00e0 la navigation. Parmi les sites mobiles qui utilisent cette technique, on peut citer Yelp&nbsp;:<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-15099\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/navigation-plein-ecran-mobile.jpg\" alt=\"Navigation plein \u00e9cran sur mobile\" width=\"600\" height=\"355\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/navigation-plein-ecran-mobile.jpg 600w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/navigation-plein-ecran-mobile-300x178.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/navigation-plein-ecran-mobile-370x219.jpg 370w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/navigation-plein-ecran-mobile-270x160.jpg 270w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/navigation-plein-ecran-mobile-570x337.jpg 570w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\nCe type d&#8217;application est pens\u00e9 comme un arbre&nbsp;: l&#8217;utilisateur choisit une branche et acc\u00e8de \u00e0 des embranchements secondaires, et ainsi de suite.<br \/>\nCe design permet au visiteur de trouver rapidement ce qu&#8217;il veut en affinant progressivement sa recherche et est donc particuli\u00e8rement adapt\u00e9 pour un outil comme Yelp.<br \/>\nLa navigation en plein \u00e9cran se distingue donc par <strong>sa simplicit\u00e9 et son efficacit\u00e9<\/strong>, du moins si l&#8217;utilisateur ne suit qu&#8217;un seul embranchement par session (cela devient plus laborieux s&#8217;il effectue des allers et retours).<br \/>\nToutefois, elle ne doit \u00eatre utilis\u00e9e que si l&#8217;application ou le site est propice \u00e0 ce type de navigation. De plus, il peut \u00eatre judicieux de l&#8217;utiliser en compl\u00e9ment d&#8217;un menu hamburger (comme le fait Yelp) pour y placer les informations secondaires.<\/p>\n<h2>5) Exploiter les possibilit\u00e9s du tactile<\/h2>\n<p>Aujourd\u2019hui, les \u00e9crans tactiles sont devenus la norme sur mobile, et le temps o\u00f9 nos t\u00e9l\u00e9phones comportaient des claviers semble bien loin.<br \/>\nCependant, toutes les possibilit\u00e9s offertes par les \u00e9crans tactiles ne sont pas forc\u00e9ment exploit\u00e9es&nbsp;: si le B.A-BA consiste \u00e0 appuyer sur des boutons et \u00e0 faire d\u00e9filer des \u00e9crans avec son pouce, d&#8217;autres gestes peuvent \u00eatre envisag\u00e9s pour faciliter la navigation mobile.<br \/>\nL&#8217;un des plus utilis\u00e9s est sans doute le &#8220;swipe&#8221;, qui consiste \u00e0 faire glisser un \u00e9l\u00e9ment sur le c\u00f4t\u00e9 pour modifier son \u00e9tat. Pour prendre un exemple tr\u00e8s simple, il suffit de &#8220;swiper&#8221; un mail vers la droite dans l&#8217;application Gmail pour l&#8217;archiver&nbsp;:<br \/>\n<img decoding=\"async\" class=\"aligncenter size-full wp-image-15101\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile.png\" alt=\"Utilisation du swipe dans la navigation mobile\" width=\"300\" height=\"533\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile.png 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile-169x300.png 169w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile-270x480.png 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nUn autre geste r\u00e9pandu consiste \u00e0 pincer l&#8217;\u00e9cran avec deux doigts. Il sert par exemple \u00e0 zoomer et \u00e0 d\u00e9-zoomer sur la carte dans des applications comme Plans, Waze, etc.<br \/>\nDe mani\u00e8re g\u00e9n\u00e9rale, il est toujours int\u00e9ressant de ne pas penser la navigation mobile comme la navigation \u00e0 la souris&nbsp;: utiliser pleinement l&#8217;\u00e9cran tactile peut jouer \u00e9norm\u00e9ment sur le confort de l&#8217;utilisateur.<br \/>\nInt\u00e9grer des gestes dans la navigation mobile requiert toutefois de prendre quelques pr\u00e9cautions, notamment&nbsp;:<\/p>\n<ul>\n<li>\u00catre p\u00e9dagogue et apprendre \u00e0 l&#8217;utilisateur les manipulations qui ne sont pas totalement intuitives (avec une petite animation, par exemple) ;<\/li>\n<li>Pr\u00e9voir une alternative pour effectuer l&#8217;action. C&#8217;est notamment ce que fait l&#8217;application de rencontre Tinder, qui permet d&#8217;aimer ou de passer un profil de deux mani\u00e8res diff\u00e9rentes&nbsp;: en faisant glisser l&#8217;\u00e9cran ou en appuyant sur le bouton d\u00e9di\u00e9 (en bas de l&#8217;\u00e9cran).<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-15102\" src=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile.jpg\" alt=\"Swipe pour la navigation mobile\" width=\"300\" height=\"424\" srcset=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile.jpg 300w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile-212x300.jpg 212w, https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/swipe-navigation-mobile-270x382.jpg 270w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Avec ces quelques conseils fondamentaux, vous aurez de quoi assurer une navigation mobile fluide et agr\u00e9able pour vos utilisateurs. Pensez \u00e9galement \u00e0 essayer l&#8217;un de nos <a href=\"https:\/\/www.codeur.com\/blog\/optimisation-responsive-navigation\/\" target=\"_blank\" rel=\"noopener\">outils pour optimiser la navigation mobile<\/a> de votre site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur. Il y a donc quelques fondamentaux \u00e0 conna\u00eetre pour optimiser l&#8217;exp\u00e9rience utilisateur sur smartphone. 1) Choisir le bon menu Par d\u00e9finition, un \u00e9cran de smartphone contient un espace plus restreint qu&#8217;un ordinateur de bureau&nbsp;: \u00e9conomiser de la [&hellip;]<\/p>\n","protected":false},"author":69,"featured_media":15107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[21],"tags":[39],"class_list":["post-15090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-conseils"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>5 fondamentaux pour une meilleure navigation mobile<\/title>\n<meta name=\"description\" content=\"La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur. Il y a donc quelques fondamentaux\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 fondamentaux pour une meilleure navigation mobile\" \/>\n<meta property=\"og:description\" content=\"La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur. Il y a donc quelques fondamentaux\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"Codeur.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-06T08:50:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-28T08:47:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"C\u00e9dric Reymbaut\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeur\" \/>\n<meta name=\"twitter:site\" content=\"@codeur\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"C\u00e9dric Reymbaut\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"5 fondamentaux pour une meilleure navigation mobile\",\"datePublished\":\"2017-09-06T08:50:51+00:00\",\"dateModified\":\"2025-08-28T08:47:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/\"},\"wordCount\":1392,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg\",\"keywords\":[\"Conseils\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/\",\"name\":\"5 fondamentaux pour une meilleure navigation mobile\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg\",\"datePublished\":\"2017-09-06T08:50:51+00:00\",\"dateModified\":\"2025-08-28T08:47:30+00:00\",\"description\":\"La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur. Il y a donc quelques fondamentaux\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg\",\"width\":850,\"height\":423,\"caption\":\"Fondamentaux de la navigation mobile\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.codeur.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graphisme\",\"item\":\"https:\/\/www.codeur.com\/blog\/graphisme\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Webdesign\",\"item\":\"https:\/\/www.codeur.com\/blog\/graphisme\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"5 fondamentaux pour une meilleure navigation mobile\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#website\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"name\":\"Codeur.com\",\"description\":\"codeur\",\"publisher\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeur.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#organization\",\"name\":\"Codeur.com\",\"url\":\"https:\/\/www.codeur.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"contentUrl\":\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png\",\"width\":2560,\"height\":465,\"caption\":\"Codeur.com\"},\"image\":{\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/fr-fr.facebook.com\/codeurfreelance\/\",\"https:\/\/x.com\/codeur\",\"https:\/\/www.linkedin.com\/company\/codeur\/\",\"https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\",\"name\":\"C\u00e9dric Reymbaut\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"caption\":\"C\u00e9dric Reymbaut\"},\"description\":\"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/\"],\"url\":\"https:\/\/www.codeur.com\/blog\/author\/cedric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 fondamentaux pour une meilleure navigation mobile","description":"La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur. Il y a donc quelques fondamentaux","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/","og_locale":"fr_FR","og_type":"article","og_title":"5 fondamentaux pour une meilleure navigation mobile","og_description":"La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur. Il y a donc quelques fondamentaux","og_url":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/","og_site_name":"Codeur.com","article_publisher":"https:\/\/fr-fr.facebook.com\/codeurfreelance\/","article_published_time":"2017-09-06T08:50:51+00:00","article_modified_time":"2025-08-28T08:47:30+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg","type":"image\/jpeg"}],"author":"C\u00e9dric Reymbaut","twitter_card":"summary_large_image","twitter_creator":"@codeur","twitter_site":"@codeur","twitter_misc":{"\u00c9crit par":"C\u00e9dric Reymbaut","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#article","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"5 fondamentaux pour une meilleure navigation mobile","datePublished":"2017-09-06T08:50:51+00:00","dateModified":"2025-08-28T08:47:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/"},"wordCount":1392,"commentCount":0,"publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg","keywords":["Conseils"],"articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/","url":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/","name":"5 fondamentaux pour une meilleure navigation mobile","isPartOf":{"@id":"https:\/\/www.codeur.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg","datePublished":"2017-09-06T08:50:51+00:00","dateModified":"2025-08-28T08:47:30+00:00","description":"La navigation mobile poss\u00e8de des caract\u00e9ristiques propres et ne peut pas \u00eatre pens\u00e9e comme la navigation sur ordinateur. Il y a donc quelques fondamentaux","breadcrumb":{"@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#primaryimage","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2017\/09\/conseils-navigation-mobile.jpg","width":850,"height":423,"caption":"Fondamentaux de la navigation mobile"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeur.com\/blog\/fondamentaux-navigation-mobile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.codeur.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Graphisme","item":"https:\/\/www.codeur.com\/blog\/graphisme\/"},{"@type":"ListItem","position":3,"name":"Webdesign","item":"https:\/\/www.codeur.com\/blog\/graphisme\/webdesign\/"},{"@type":"ListItem","position":4,"name":"5 fondamentaux pour une meilleure navigation mobile"}]},{"@type":"WebSite","@id":"https:\/\/www.codeur.com\/blog\/#website","url":"https:\/\/www.codeur.com\/blog\/","name":"Codeur.com","description":"codeur","publisher":{"@id":"https:\/\/www.codeur.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeur.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.codeur.com\/blog\/#organization","name":"Codeur.com","url":"https:\/\/www.codeur.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","contentUrl":"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2022\/04\/logo-codeur-com.png","width":2560,"height":465,"caption":"Codeur.com"},"image":{"@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/fr-fr.facebook.com\/codeurfreelance\/","https:\/\/x.com\/codeur","https:\/\/www.linkedin.com\/company\/codeur\/","https:\/\/www.youtube.com\/channel\/UCgj9ySM9xy3gdL8qBafl9Uw"]},{"@type":"Person","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c","name":"C\u00e9dric Reymbaut","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.codeur.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","caption":"C\u00e9dric Reymbaut"},"description":"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.","sameAs":["https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/"],"url":"https:\/\/www.codeur.com\/blog\/author\/cedric\/"}]}},"_links":{"self":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/15090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/comments?post=15090"}],"version-history":[{"count":0,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/posts\/15090\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media\/15107"}],"wp:attachment":[{"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/media?parent=15090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/categories?post=15090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeur.com\/blog\/wp-json\/wp\/v2\/tags?post=15090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}