{"id":34762,"date":"2020-12-23T12:36:44","date_gmt":"2020-12-23T20:36:44","guid":{"rendered":"http:\/\/www.bruceclay.com\/blog\/?p=34762"},"modified":"2023-08-31T16:56:39","modified_gmt":"2023-08-31T23:56:39","slug":"mobile-friendly-navigation","status":"publish","type":"post","link":"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/","title":{"rendered":"How to Create a Mobile-Friendly Navigation in 7 Steps"},"content":{"rendered":"<p>We are officially living in a mobile-first world. Google has switched to a mobile-first index \u2014 which means Google ranks your website based on your <em>mobile<\/em> content, relevance, and UX.<\/p>\n<p>Your mobile navigation (menus and internal links) contributes to all three and must work for users and for <a href=\"https:\/\/www.bruceclay.com\/seo\/search-engine-optimization\/\">SEO<\/a>.<\/p>\n<p>Good mobile navigation makes it easy for people to find what they need without bogging down page speed or cluttering the screen. Your mobile menu and other navigation links also need to keep PageRank flowing to the important pages that you want to rank well in search.<\/p>\n<p>Site navigations historically included everything on a site in huge, multi-tiered lists. On mobile, that approach doesn\u2019t work. It looks cluttered. It requires scrolling. And it causes your visitors to bounce away.<\/p>\n<div class=\"responsive-video\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/NNHBOgX3eI8?rel=0&amp;showinfo=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span style=\"width: 0px;overflow: hidden;line-height: 0\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/div>\n<p><em>Bruce explains why mobile navigation decisions affect SEO and UX.<\/em><\/p>\n<p>Make life easier for people visiting your business site on a mobile device.<\/p>\n<p><strong>Here are seven mobile-friendly navigation best practices:<\/strong><\/p>\n<ol>\n<li><a href=\"#keep-mobile-navigation-short-sweet\"><strong>Keep mobile navigation short and sweet<\/strong><\/a><\/li>\n<li><a href=\"#list-most-important-pages-first\"><strong>List the most important pages first<\/strong><\/a><\/li>\n<li><a href=\"#think-search-part-your-navigation\"><strong>Think of search as part of your navigation<\/strong><\/a><\/li>\n<li><a href=\"#make-your-navigation-intuitive\"><strong>Make your navigation intuitive<\/strong><\/a><\/li>\n<li><a href=\"#thoughtful-fonts-contrast\"><strong>Be thoughtful about fonts and contrast<\/strong><\/a><\/li>\n<li><a href=\"#design-for-touch\"><strong>Design for touch<\/strong><\/a><\/li>\n<li><a href=\"#design-multi-screen-mobile-user\"><strong>Design for the multi-screen mobile user<\/strong><\/a><\/li>\n<\/ol>\n<p><a href=\"#faq-how-can-I-optimize-website-navigation-mobile-users-enhance-user-experience-seo\"><strong>FAQ: How can I optimize my website&#8217;s navigation for mobile users to enhance user experience and SEO?<\/strong><\/a><\/p>\n<p>Note: All of the mobile navigation tips mentioned in this article equally apply to separate mobile sites, responsive design sites, and sites that dynamically serve web pages. If you\u2019re not sure what that means or which mobile platform is best for you, read our <a href=\"https:\/\/www.bruceclay.com\/blog\/mobile-design-cheat-sheet\/\">Cheat Sheet for Mobile Design<\/a>.<\/p>\n<h2>7 Mobile Navigation Best-Practice Steps for UX &amp; SEO<\/h2>\n<h3><a id=\"keep-mobile-navigation-short-sweet\"><\/a>Step 1: Keep Mobile Navigation Short and Sweet<\/h3>\n<p>Many mobile phone screens are only 720 pixels wide in portrait mode.<\/p>\n<p>Designing mobile navigation means designing for a small screen size. With limited real estate available, there\u2019s no room for clutter. Get right to the point, then cut the fat.<\/p>\n<p>Keep your labels as short as possible while still communicating clearly. But also limit the <em>number<\/em> of options in your mobile menus.<\/p>\n<p>Ask yourself, what links need to be included to help your user complete priority tasks? What elements from the desktop navigation aren\u2019t relevant in the mobile environment?<\/p>\n<p>To save your user from <a href=\"https:\/\/neilpatel.com\/blog\/too-many-choices\/\" target=\"_blank\" rel=\"noopener noreferrer\">decision paralysis<\/a>, we recommend you <strong>limit your mobile navigation to four to eight items<\/strong> on the top level. Your mobile navigation menu is not the place to link to every page in your site.<\/p>\n<p>To keep it short and sweet, you may even consider adding a top-of-page logo that navigates to the homepage and leaving the Home button out of your navigation together (as on the BCI website below).<\/p>\n<figure id=\"attachment_87486\" aria-describedby=\"caption-attachment-87486\" style=\"width: 722px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87486\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/mobile-bruceclay.com_.png\" alt=\"Mobile menu navigation on BruceClay.com.\" width=\"722\" height=\"640\" \/><figcaption id=\"caption-attachment-87486\" class=\"wp-caption-text\">BCI&#8217;s mobile navigation<\/figcaption><\/figure>\n<p>Some mobile menus require multi-level navigation to aid user experience. This is more common with ecommerce websites. If you must go there, keep it as simple as possible. Don\u2019t add more than one sublevel of drop-down functionality.<\/p>\n<p>If your navigation must include more items, a vertically oriented navigation activated from a menu icon is the best option.<\/p>\n<p>If your mobile user\u2019s typical needs are very limited, consider using a static navigation that runs across the top of your design, as we see on the GameStop mobile site:<\/p>\n<figure id=\"attachment_42975\" aria-describedby=\"caption-attachment-42975\" style=\"width: 360px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-42975\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2018\/01\/2018-01-gamestop-mobile-nav.jpg\" alt=\"GameStop mobile view icons\" width=\"360\" height=\"615\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-gamestop-mobile-nav.jpg 360w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-gamestop-mobile-nav-176x300.jpg 176w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><figcaption id=\"caption-attachment-42975\" class=\"wp-caption-text\">GameStop uses static navigation across the top of its mobile-friendly view.<\/figcaption><\/figure>\n<p>Navigation that requires horizontal scrolling probably won\u2019t be mobile-friendly. Some sites have the resources to design a sleek image-based carousel type of interface, such as what Google uses for certain search results. That might be an exception but consider your audience.<\/p>\n<h3><a id=\"list-most-important-pages-first\"><\/a>Step 2: List the Most Important Pages First<\/h3>\n<p>Your website users don\u2019t have a lot of time \u2014 or patience. How can you help them get to the right place faster?<\/p>\n<p>To design your mobile site navigation, first think about the following:<\/p>\n<ul>\n<li>What are your most important pages?<\/li>\n<li>What are the top category pages outlined in your <a href=\"https:\/\/www.bruceclay.com\/seo\/siloing\/\">siloing strategy<\/a>?<\/li>\n<li>What are the most common actions taken by site visitors using smartphones?<\/li>\n<li>What pages of your website most effectively satisfy a mobile user\u2019s needs?<\/li>\n<\/ul>\n<p>The answers to these questions influence not just which items go in your main menu, but also which links and calls to action you should put on each page.<\/p>\n<p><strong>You&#8217;ll want to keep your main navigation menu consistent throughout the site<\/strong>. It should point to the top four to eight landing pages (such as main category pages).<\/p>\n<p>A short-and-sweet mobile nav is a win-win for SEO and your users. It preserves the flow of link equity to your most important pages while also helping users get around.<\/p>\n<p><strong>Once users arrive on a page, contextual links can move them to wherever makes sense.<\/strong> These links can be added within the body content of each page in a comfortable way.<\/p>\n<p>For instance, a long blog post may have multiple sections and thousands of words. Have mercy on your mobile users \u2014 don\u2019t make them scroll to find what may be pertinent to them. Some ideas:<\/p>\n<ul>\n<li>Give anchor links at the top that jump a reader to the different sections below (as I did at the top of this article). This may also help search engines identify fragments of your content that answer specific search queries.<\/li>\n<li>Show a TL;DR summary at the top of a long article. If readers want more detail, they\u2019ll scroll down.<\/li>\n<li>Include useful calls to action and links to related pages within the body copy where they make sense.<\/li>\n<\/ul>\n<p>The mobile navigation model I\u2019m describing \u2014 a short, consistent main menu coupled with contextual links that vary per page \u2014 actually supports siloing better than the massive structured menus of old. A parent only links to their children, maintaining a clear hierarchy and intuitive flow. Internal links allow PageRank to flow to topically related pages naturally.<span class='bctt-click-to-tweet'><span class='bctt-ctt-text'><a href='https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.bruceclay.com%2Fblog%2Fmobile-friendly-navigation%2F&#038;text=This%20mobile%20navigation%20model%20%E2%80%94%20a%20short%2C%20consistent%20main%20menu%20coupled%20with%20contextual%20links%20that%20vary%20per%20page%20%E2%80%94%20actually%20supports%20siloing%20better%20than%20a%20massive%2C%20multi-tiered%20menu.&#038;via=BruceClayInc&#038;related=BruceClayInc' target='_blank'rel=\"noopener noreferrer\">This mobile navigation model \u2014 a short, consistent main menu coupled with contextual links that vary per page \u2014 actually supports siloing better than a massive, multi-tiered menu. <\/a><\/span><a href='https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.bruceclay.com%2Fblog%2Fmobile-friendly-navigation%2F&#038;text=This%20mobile%20navigation%20model%20%E2%80%94%20a%20short%2C%20consistent%20main%20menu%20coupled%20with%20contextual%20links%20that%20vary%20per%20page%20%E2%80%94%20actually%20supports%20siloing%20better%20than%20a%20massive%2C%20multi-tiered%20menu.&#038;via=BruceClayInc&#038;related=BruceClayInc' target='_blank' class='bctt-ctt-btn'rel=\"noopener noreferrer\">Click To Tweet<\/a><\/span><\/p>\n<p>When it comes to mobile users, quicker is always better! It will take some work for you to make each page deliver the most appropriate navigation options. But you\u2019ll improve user experience and, no doubt, your ROI by giving visitors a more direct path to what they need.<\/p>\n<p>While we\u2019re on the topic of \u201cquicker,\u201d remember that fast mobile pages make for a better user experience. Google announced that a page&#8217;s load speed can <a href=\"https:\/\/developers.google.com\/search\/blog\/2018\/01\/using-page-speed-in-mobile-search\" target=\"_blank\" rel=\"noopener noreferrer\">factor into your Google search rankings<\/a>, so the building of streamlined navigation is a worthwhile <a href=\"https:\/\/www.bruceclay.com\/seo\/mobile-seo\/\">mobile SEO service<\/a> to consider.<\/p>\n<p>You can test your mobile page speed with <a href=\"https:\/\/www.thinkwithgoogle.com\/feature\/testmysite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google\u2019s mobile speed test<\/a> (or use our <a href=\"https:\/\/www.bruceclay.com\/seo\/tools\/\">SEOToolSet\u00ae<\/a>).<\/p>\n<h3><a id=\"think-search-part-your-navigation\"><\/a>Step 3: Think of Search as Part of Your Navigation<\/h3>\n<p>Mobile users look at search as navigation, and you should, too.<\/p>\n<p>Consider Amazon.com. On mobile, Amazon doesn\u2019t even bother with the category drop-down menu (although it\u2019s there under \u201cDepartments\u201d if someone wants it). What\u2019s prominent at the top of the mobile view is a simple \u201cSearch\u201d box.<\/p>\n<p>Even with its massive catalog, Amazon doesn\u2019t expect users to navigate through menus to find what they need. Most of the time, customers just type in a product name and go directly to buy it.<\/p>\n<figure id=\"attachment_87482\" aria-describedby=\"caption-attachment-87482\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87482\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/amazon-search-box-e1608757279387.png\" alt=\"\" width=\"400\" height=\"426\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/amazon-search-box-e1608757279387.png 400w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/amazon-search-box-e1608757279387-282x300.png 282w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><figcaption id=\"caption-attachment-87482\" class=\"wp-caption-text\">The Search box is Amazon&#8217;s most mobile-friendly navigation option.<\/figcaption><\/figure>\n<p>On mobile, your search box is often the most direct route to what a user needs.<\/p>\n<p>Set it up and make sure it works well!<\/p>\n<h3><a id=\"make-your-navigation-intuitive\"><\/a>Step 4: Make Your Navigation Intuitive<\/h3>\n<p>Your customers work hard enough; navigating your site should not be work.<\/p>\n<p>To make your navigation intuitive, menu language should always be written in a way that lets the user know what to expect. It should be clear what the item does if it\u2019s a dropdown and exactly where it goes if it\u2019s a link.<\/p>\n<p>If you are using symbols to convey information to your users, make sure they are clear and conventional symbols. For instance, if your menu items drop-down, use an intuitive symbol like a plus sign (<strong>+<\/strong>) or an arrow (<strong>&gt;<\/strong>) to let your users know that they can click to see more options.<\/p>\n<p>Another best practice example would be using a magnifying glass to indicate a search feature.<\/p>\n<p>If you are using a toggle menu, use three stacked lines \u2014 the icon highlighted in the example below \u2014 to help the user easily find your main nav.<\/p>\n<figure id=\"attachment_87483\" aria-describedby=\"caption-attachment-87483\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87483\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/REI.com-mobile-hamburger-menu.jpg\" alt=\"REI mobile menu icon.\" width=\"400\" height=\"426\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/REI.com-mobile-hamburger-menu.jpg 400w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/REI.com-mobile-hamburger-menu-282x300.jpg 282w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><figcaption id=\"caption-attachment-87483\" class=\"wp-caption-text\">REI\u2019s menu opens from a hamburger icon.<\/figcaption><\/figure>\n<p>TIP: A hamburger-style menu icon like this may get more clicks if the word \u201cmenu\u201d displays below it according to <a href=\"https:\/\/conversionxl.com\/blog\/testing-hamburger-icon-revenue\/\">A\/B testing<\/a>. If your design has room, you might test this to see if it makes your mobile site more intuitive and increases clicks\/conversions.<\/p>\n<p>The goal is for your mobile navigation to make life easier by limiting thinking, scrolling, and clicking.<\/p>\n<p><strong>About Breadcrumbs in SERPs<\/strong><br \/>\nIt\u2019s worth noting that since 2015, Google has displayed URLs in its mobile search results differently than it does in desktop SERPs. The change replaces a web page\u2019s URL with a description of the page\u2019s location in a breadcrumbs-like format. If this doesn\u2019t scream the importance of siloing and a clear hierarchy, nothing does!<\/p>\n<p>Now, rather than showing a page URL, Google\u2019s mobile search results display a breadcrumb path beneath each title.<\/p>\n<p>For example, mobile search results for \u201chistory of Google\u201d include a Wikipedia result showing how the URL appeared in the past versus the current breadcrumb style<strong>:<\/strong><\/p>\n<figure id=\"attachment_42972\" aria-describedby=\"caption-attachment-42972\" style=\"width: 406px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-42972\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2018\/01\/2018-01-breadcrumbs-new.png\" alt=\"Before and after URLs in Google mobile search\" width=\"406\" height=\"82\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-breadcrumbs-new.png 406w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-breadcrumbs-new-300x61.png 300w\" sizes=\"(max-width: 406px) 100vw, 406px\" \/><figcaption id=\"caption-attachment-42972\" class=\"wp-caption-text\">How Google&#8217;s mobile search result URLs have changed<\/figcaption><\/figure>\n<p>TIP: You can control how your breadcrumb URLs appear if you add schema markup to the HTML on your pages. Refer to <a href=\"https:\/\/schema.org\/BreadcrumbList\" target=\"_blank\" rel=\"noopener noreferrer\">Schema.org\u2019s breadcrumbs structured data<\/a> for details and Google\u2019s <a href=\"https:\/\/developers.google.com\/search\/docs\/data-types\/breadcrumb\" target=\"_blank\" rel=\"noopener noreferrer\">help file on breadcrumbs<\/a>. (For more on this update and what it means, see our post-Google\u2019s<a href=\"https:\/\/www.bruceclay.com\/blog\/mobile-breadcrumb-url-structure\/\">\u00a0New Mobile Breadcrumb URLs: Making the Most of Your Site Name &amp; URL Structure<\/a>.)<\/p>\n<h3><a id=\"thoughtful-fonts-contrast\"><\/a>Step 5: Be Thoughtful about Fonts and Contrast<\/h3>\n<p>Your website users shouldn\u2019t have to zoom in to read any of the text on your mobile website, including the text within your navigation.<\/p>\n<p>Tiny text that requires zooming creates a bad user experience, and neither your website users nor <a href=\"https:\/\/developers.google.com\/search\/mobile-sites\/get-started\" target=\"_blank\" rel=\"noopener noreferrer\">Google<\/a> or <a href=\"https:\/\/blogs.bing.com\/webmaster\/2014\/11\/20\/bing-and-mobile-friends\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bing<\/a> likes poor user experiences.<\/p>\n<p>All of the text on your mobile site needs to be large enough to be read on a variety of devices without zooming. This principle needs to be a top priority that you consider as you build your mobile-friendly CSS (cascading style sheets) to control the appearance of text on various devices.<\/p>\n<p>To make your navigation text easy to read, choose a font that naturally adds enough space to distinguish between letters and is tall enough to be clearly read in a menu.<\/p>\n<p>Your font size and style also depend on your brand\u2019s style guide and what fits your unique demographic. For instance, a young audience may not struggle with smaller or condensed fonts as much as an older demographic would. The way you handle formatting such as bullet styles, capitalization, margins, captioning, and so on should also reflect what\u2019s attractive to your audience and comfortable for them to read.<\/p>\n<p>Once you decide, set up your CSS and create a written style guide to keep your content consistent.<\/p>\n<p>For designing the look of your mobile navigation, best practices can\u2019t give you a one-size-fits-all recommendation. What\u2019s important is that every word on your mobile site <strong>can be read easily without zooming<\/strong>. I recommend you perform user testing to see first-hand whether your font is tripping up users.<\/p>\n<p>Also, make sure there\u2019s sufficient contrast between your text and its background. WebAIM guidelines offer rules for color contrast (recommending a minimum ratio of 4.5 to 1). You can try their <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener noreferrer\">contrast checker tool<\/a> to see how your text treatment measures up.<\/p>\n<p>Google gives a few <a href=\"https:\/\/web.dev\/color-and-contrast-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">examples<\/a> of what different contrast ratios look like:<\/p>\n<figure id=\"attachment_42976\" aria-describedby=\"caption-attachment-42976\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-42976\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2018\/01\/2018-01-contrast-ratios.jpg\" alt=\"Examples of text-to-background contrast ratios\" width=\"600\" height=\"223\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-contrast-ratios.jpg 600w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-contrast-ratios-300x112.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-42976\" class=\"wp-caption-text\">Text needs contrast against the background for readability on a phone. (Per <a href=\"https:\/\/web.dev\/color-and-contrast-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google<\/a>)<\/figcaption><\/figure>\n<p>In addition, <a href=\"https:\/\/web.dev\/responsive-web-design-basics\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google points out<\/a> that <em>\u201cclassic readability theory suggests that an ideal column should contain 70 to 80 characters per line (about 8 to 10 words in English). Thus, each time the width of a text block grows past about 10 words, consider adding a breakpoint.\u201d<\/em><\/p>\n<p>This tip applies to body text; consider a shorter maximum length for your menu options.<\/p>\n<p>Not sure if your text is easy to read? Run your site through Google\u2019s <a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener noreferrer\">Mobile Friendly Test tool<\/a>.<\/p>\n<h3><a id=\"design-for-touch\"><\/a>Step 6: Design for Touch<\/h3>\n<p>Tablet and smartphone users rely on touchscreens to get them around websites. While a pointy mouse arrow allows users to precisely select items in tight spaces, the average finger or thumb requires a larger target to press. Many users don\u2019t hit a touchscreen exactly where they are aiming.<\/p>\n<p>Google <a href=\"https:\/\/web.dev\/accessible-tap-targets\/\" target=\"_blank\" rel=\"noopener noreferrer\">recommends<\/a> building mobile pages with a minimum touch target size of 48 pixels with a properly set viewport (more on that later). And touch targets should be spaced about 32 pixels apart, both horizontally and vertically.<\/p>\n<figure id=\"attachment_42977\" aria-describedby=\"caption-attachment-42977\" style=\"width: 360px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-42977\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2018\/01\/2018-01-touch-targets.jpg\" alt=\"Mobile touch target diagram\" width=\"360\" height=\"406\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-touch-targets.jpg 360w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-touch-targets-266x300.jpg 266w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><figcaption id=\"caption-attachment-42977\" class=\"wp-caption-text\">Buttons and touch targets should be big enough to be mobile friendly. (Per <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/accessibility\/accessible-styles#multi-device_responsive_design\" target=\"_blank\" rel=\"noopener noreferrer\">Google<\/a>)<\/figcaption><\/figure>\n<p>Build navigation buttons with a target smaller than 40 pixels, and your user experience plummets. Visitors end up sloppily navigating to the category above or below the one they want.<\/p>\n<p>Don\u2019t frustrate your users!<\/p>\n<p>Since people are so bad at hitting their tap mark much of the time, it can also help to <strong>incorporate touch feedback into your navigation<\/strong>. Your feedback could be a color change, a blink of color, a font change, or another visual cue.<\/p>\n<p>Even if it\u2019s subtle, this feedback can improve user experience by helping to reassure users that they\u2019ve selected the right item. Take a look at the example below from Search Engine Land:<\/p>\n<figure id=\"attachment_87484\" aria-describedby=\"caption-attachment-87484\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-87484\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/searchengineland.com-mobile-menu.png\" alt=\"Mobile menu color-change touch feedback on SearchEngineLand.com.\" width=\"400\" height=\"500\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/searchengineland.com-mobile-menu.png 400w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/searchengineland.com-mobile-menu-240x300.png 240w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><figcaption id=\"caption-attachment-87484\" class=\"wp-caption-text\">Color changes show which menu item is touched on SearchEngineLand.com.<\/figcaption><\/figure>\n<p>If you are using multi-tier navigation, it\u2019s also important that you <strong>make sure your drop-downs are activated by touch<\/strong> \u2014 not mouseover. Clearly, hover navigations work just fine in the desktop experience, where hovering is a possibility. But they leave mobile users stuck.<\/p>\n<p>Another touch-friendly option is to design a supplementary navigation that uses images and exaggerated graphic buttons. This type of navigation can be a great homepage asset that gets your visitor headed in the right direction quickly.<\/p>\n<figure id=\"attachment_42971\" aria-describedby=\"caption-attachment-42971\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-42971\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2018\/01\/2018-01-graphic-navigation-400px.jpg\" alt=\"Graphic buttons example\" width=\"400\" height=\"422\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-graphic-navigation-400px.jpg 400w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-graphic-navigation-400px-284x300.jpg 284w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><figcaption id=\"caption-attachment-42971\" class=\"wp-caption-text\">Vintage clothing site RustyZipper.com uses large graphic &#8220;button&#8221; with text labels for mobile-friendly navigation.<\/figcaption><\/figure>\n<p>It\u2019s important to note that graphic buttons like these should only be a supplemental option used alongside a toggle navigation or a static top navigation. You need to have a consistent navigation that the user can access at the top of every page.<\/p>\n<p>While you may be able to include this graphic navigation at the bottom of your mobile pages, it\u2019s not optimal or practical to use these big graphic buttons as your primary navigation. And always consider the load-time performance impact of images and buttons.<\/p>\n<p><strong>Be Careful with Popups<\/strong><br \/>\nYou also want to avoid intrusive interstitials \u2014 those popups that monopolize the screen when a visitor clicks through from a search result. In January 2017, Google rolled out an <a href=\"https:\/\/searchengineland.com\/google-confirms-rolling-mobile-intrusive-interstitials-penalty-yesterday-267408\" target=\"_blank\" rel=\"noopener noreferrer\">intrusive interstitial penalty<\/a> for mobile search, which may grow in importance when <a href=\"https:\/\/www.bruceclay.com\/blog\/page-experience-intrusive-interstitials\/\">intrusive interstitials<\/a> get rolled into Google\u2019s <a href=\"https:\/\/www.bruceclay.com\/blog\/page-experience-algorithm-update\/\">Page Experience<\/a> update.<\/p>\n<p>Per <a href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-seo\/common-mistakes\" target=\"_blank\" rel=\"noopener noreferrer\">Google<\/a>, <em>\u201cSince screen real-estate on mobile devices is limited, any interstitial negatively impacts the user\u2019s experience.\u201d<\/em><\/p>\n<figure id=\"attachment_42979\" aria-describedby=\"caption-attachment-42979\" style=\"width: 330px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-42979\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2018\/01\/2018-01-interstitial.jpg\" alt=\"intrusive interstitial popup example\" width=\"330\" height=\"553\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-interstitial.jpg 330w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-interstitial-179x300.jpg 179w\" sizes=\"(max-width: 330px) 100vw, 330px\" \/><figcaption id=\"caption-attachment-42979\" class=\"wp-caption-text\">Example of an intrusive interstitial popup (credit: <a href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-seo\/common-mistakes\" target=\"_blank\" rel=\"noopener noreferrer\">Google<\/a>)<\/figcaption><\/figure>\n<p>Be careful to use interactive forms and popups courteously. Some best practices for these include:<\/p>\n<ul>\n<li>Apply a delay or time interval between views so you don\u2019t annoy your visitors.<\/li>\n<li>Reduce the amount of screen space your element covers.<\/li>\n<li>Try a bar or box that scrolls in from the bottom or side.<\/li>\n<li>Avoid covering the middle of the mobile screen or obstructing your navigation elements at the top.<\/li>\n<li>Let no be no. If a user closes a form, don\u2019t display it again within a reasonable period of time (perhaps a week later).<\/li>\n<\/ul>\n<h3><a id=\"design-multi-screen-mobile-user\"><\/a>Step 7: Design for the Multi-Screen Mobile User<\/h3>\n<p>Chances are good that interested visitors come to your website using multiple devices over a short period of time.<\/p>\n<p>To help them feel confident they\u2019re in the right place, it\u2019s smart to give your mobile and desktop sites a consistent visual theme.<\/p>\n<p>Your mobile and desktop navigation, however, do not have to be \u2014 and sometimes should not be \u2014 identical twins.<\/p>\n<p>While the colors, fonts, and themes you use for your mobile and desktop navigation need to be consistent to reinforce your branding, the similarity may end there.<\/p>\n<p>Your mobile navigation needs to help users navigate around your website and accomplish tasks. Consider the content your smartphone users need and the tasks they are looking to accomplish, and then build your mobile navigation specifically for a smartphone user.<\/p>\n<ul>\n<li>What mobile-specific calls to action need to be built into your navigation to aid user experience?<\/li>\n<li>Does it make sense to include a \u201cCall\u201d button or a store locator?<\/li>\n<li>Can a mobile user easily find essential information like your address, directions, phone number, hours of operation, or other facts?<\/li>\n<\/ul>\n<p>Remember: Space is limited, mobile needs are unique, and on-the-go patience is minimal.<\/p>\n<p>Because website visitors will use a variety of devices and screen sizes, specify a viewport using the <a href=\"https:\/\/web.dev\/viewport\/\" target=\"_blank\" rel=\"noopener noreferrer\">viewport meta tag<\/a>.<\/p>\n<figure id=\"attachment_42969\" aria-describedby=\"caption-attachment-42969\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-42969\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2018\/01\/2018-01-viewport-comparison.jpg\" alt=\"Meta viewport mistake on mobile screens\" width=\"600\" height=\"328\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-viewport-comparison.jpg 600w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2018\/01\/2018-01-viewport-comparison-300x164.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-42969\" class=\"wp-caption-text\">Websites need a scalable meta viewport for correct display on smartphones.<\/figcaption><\/figure>\n<p>Common mobile mistakes include having a fixed-width viewport that doesn\u2019t scale for all devices or assuming too wide of a viewport, which forces users on small screens to scroll horizontally.<\/p>\n<h2>Mobile-Friendly is\u00a0Customer-Friendly<\/h2>\n<p>Creating a mobile-friendly navigation means creating a customer-friendly navigation that gets your personas moving in the right direction right away.<\/p>\n<p>If you build an intuitive navigation that is easy to use, your website users will be headed toward conversion happiness in no time. Build a navigation that is frustrating or confusing, and they\u2019ll be headed back to the search results and straight toward someone else\u2019s website.<\/p>\n<p>To keep your inbound visitors smiling, follow these best practices to make your mobile-friendly navigation:<\/p>\n<p class=\"wp-image-34877\">&#x2714;\u00a0Short and sweet whenever possible<br \/>\n&#x2714; Easy to read<br \/>\n&#x2714; Task-oriented<br \/>\n&#x2714; Prioritized with what&#8217;s most important listed first<br \/>\n&#x2714; Accessible and placed consistently across all pages<br \/>\n&#x2714; Clear, straightforward, and expected<br \/>\n&#x2714; Vertical if scrolling is required (never use horizontal scrolling!)<br \/>\n&#x2714; Easy on the eyes<br \/>\n&#x2714;\u00a0Finger-friendly<br \/>\n&#x2714; Fast<\/p>\n<p><em>Be a leader \u2014 share this post with friends or colleagues who are as interested in UX as you are. For more resources like this one, <a href=\"https:\/\/www.bruceclay.com\/subscribe-to-blog-updates\/\">subscribe to our blog<\/a>.<\/em><\/p>\n<p><em>EDITOR&#8217;S NOTE: We regularly update this article for the Bruce Clay Blog.<\/em><\/p>\n<p><a href=\"https:\/\/www.bruceclay.com\/blog\/mobile-seo-checklist\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37045\" src=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2015\/06\/mobile-seo-and-design-checklist.jpg\" alt=\"mobile-seo-and-design-checklist\" width=\"600\" height=\"451\" srcset=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2015\/06\/mobile-seo-and-design-checklist.jpg 600w, https:\/\/www.bruceclay.com\/wp-content\/uploads\/2015\/06\/mobile-seo-and-design-checklist-300x226.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h3><a id=\"faq-how-can-I-optimize-website-navigation-mobile-users-enhance-user-experience-seo\"><\/a>FAQ: How can I optimize my website&#8217;s navigation for mobile users to enhance user experience and SEO?<\/h3>\n<p>Mobile website navigation optimization involves a delicate balance between simplicity and functionality. A cluttered navigation menu can overwhelm users, leading to higher bounce rates. To streamline navigation, prioritize essential menu items that guide visitors to your core content. Implement collapsible menus or a well-designed hamburger menu to preserve screen real estate while providing access to secondary sections.<\/p>\n<p>Smooth transitions between pages are equally vital. Slow-loading pages can frustrate users and negatively impact SEO rankings. Compress and optimize images to minimize loading times. Leveraging lazy loading ensures that images load as users scroll, enhancing both speed and overall performance.<\/p>\n<p>The concept of &#8220;thumb-friendly&#8221; navigation holds paramount importance in mobile design. Given the limited screen space, ensure that buttons and interactive elements are appropriately sized for easy tapping. Extensive forms or intricate actions can be off-putting; simplify them to encourage user engagement.<\/p>\n<p>Structured data markup is a potent tool often overlooked in mobile optimization. Implementing schema markup enhances your website&#8217;s appearance on search engine results pages (SERPs), providing users with quick access to relevant information. Rich results, such as breadcrumbs, ratings, and product information, can significantly improve click-through rates.<\/p>\n<p>Prioritize a responsive design that adapts to various screen sizes, ensuring a consistent device experience. Regularly test your mobile site&#8217;s performance and user experience, and adapt as needed.<\/p>\n<p><strong>Step-by-Step Procedure: Optimizing Mobile Website Navigation for User Experience and SEO<\/strong><\/p>\n<ol>\n<li>Audit Current Navigation: Evaluate your website&#8217;s current mobile navigation structure to identify pain points and areas for improvement.<\/li>\n<li>Prioritize Content: Determine your core content and essential menu items. Streamline the navigation menu to focus on these key elements.<\/li>\n<li>Implement Collapsible Menus: Integrate collapsible menus or a hamburger menu to conserve space while providing access to secondary content.<\/li>\n<li>Ensure Fast Loading: Optimize images for the web and implement lazy loading to enhance page loading speeds.<\/li>\n<li>Design for Tapping: Make interactive elements, buttons, and links thumb-friendly in size to facilitate easy tapping.<\/li>\n<li>Simplify Forms and Actions: Streamline complex forms and actions, reducing friction and encouraging higher user engagement.<\/li>\n<li>Utilize Structured Data: Implement schema markup to enhance your website&#8217;s appearance on SERPs and drive click-through rates.<\/li>\n<li>Responsive Design: Develop a responsive design that adapts seamlessly to various screen sizes and orientations.<\/li>\n<li>Test Across Devices: Regularly test your mobile website on different devices to ensure consistent performance and user experience.<\/li>\n<li>Monitor Analytics: Monitor user behavior and engagement using analytics tools to identify further optimization opportunities.<\/li>\n<li>Optimize Page Speed: Continuously optimize your mobile site&#8217;s performance by minimizing code, leveraging caching, and using content delivery networks (CDNs).<\/li>\n<li>Focus on Intuition: Design intuitive navigation that anticipates user needs, making information retrieval effortless.<\/li>\n<li>Use Descriptive Labels: Use clear and concise navigation menu labels to enhance user understanding.<\/li>\n<li>Breadcrumb Navigation: Implement breadcrumb navigation for easy backtracking and improved user orientation.<\/li>\n<li>Regular Updates: Keep your website&#8217;s mobile navigation up-to-date, reflecting any changes in content or structure.<\/li>\n<li>Mobile-First Indexing: Be aware of Google&#8217;s mobile-first indexing, where the mobile version of your site is prioritized for ranking.<\/li>\n<li>User Feedback: Gather user feedback and integrate suggestions to refine your mobile navigation strategy.<\/li>\n<li>Optimize Images: Compress and optimize images to balance visual appeal and loading speed.<\/li>\n<li>A\/B Testing: To determine the most effective design, perform A\/B testing with different navigation layouts.<\/li>\n<li>Continuous Improvement: Mobile optimization is an ongoing process. Stay updated with industry trends and adapt your strategy accordingly.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re officially in a mobile-first world. Google ranks your website based on your mobile content, relevance and user experience. Your mobile navigation (menus and internal links) contribute to all three.<\/p>\n","protected":false},"author":35,"featured_media":42969,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[4],"tags":[104,1830,1827,1828,1829,107],"acf":[],"yoast_head":"<title>BruceClay - 7 Mobile-Friendly Navigation Best Practices<\/title>\n<meta name=\"description\" content=\"These 7 mobile-friendly navigation best practices show you how to make the mobile navigation work best for site visitors, improve UX and support SEO. A good nav makes it easier for your customers to find what they need using a smartphone.\" \/>\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.bruceclay.com\/blog\/mobile-friendly-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Mobile-Friendly Navigation Best Practices\" \/>\n<meta property=\"og:description\" content=\"Does your mobile site&#039;s navigation make it easy or hard for someone to find what they need? And are you sure your mobile site is passing PageRank adequately? Bruce Clay&#039;s latest post 7 Mobile-Friendly Navigation Best Practices shows you how to make the mobile navigation work best for site visitors, improve UX and support SEO.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Bruce Clay, Inc.\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-23T20:36:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-31T23:56:39+00:00\" \/>\n<meta name=\"author\" content=\"Bruce Clay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"7 Mobile-Friendly Navigation Best Practices \u2013 Bruce Clay lays out how to make your mobile nav work for visitors AND be SEO friendly.\" \/>\n<meta name=\"twitter:description\" content=\"Does your mobile site&#039;s navigation make it easy or hard for someone to find what they need? Are you sure your mobile site is passing PageRank adequately? Bruce Clay&#039;s latest post gives 7 mobile-friendly navigation best practices on how to make the mobile navigation work best for site visitors, improve UX and support SEO.\" \/>\n<meta name=\"twitter:image\" content=\"http:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2014\/12\/ModCloth-mobile-friendly-navigation-on-iPhone_1200x627.png\" \/>\n<meta name=\"twitter:creator\" content=\"@bruceclayinc\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bruce Clay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/\",\"url\":\"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/\",\"name\":\"7 Mobile-Friendly Navigation Best Practices\",\"isPartOf\":{\"@id\":\"https:\/\/www.bruceclay.com\/#website\"},\"datePublished\":\"2020-12-23T20:36:44+00:00\",\"dateModified\":\"2023-08-31T23:56:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b\"},\"description\":\"These 7 mobile-friendly navigation best practices show you how to make the mobile navigation work best for site visitors, improve UX and support SEO. A good nav makes it easier for your customers to find what they need using a smartphone.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bruceclay.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Mobile-Friendly Navigation in 7 Steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bruceclay.com\/#website\",\"url\":\"https:\/\/www.bruceclay.com\/\",\"name\":\"Bruce Clay, Inc.\",\"description\":\"SEO and Internet Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bruceclay.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b\",\"name\":\"Bruce Clay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g\",\"caption\":\"Bruce Clay\"},\"description\":\"Bruce Clay is founder and president of Bruce Clay Inc., a global digital marketing firm providing search engine optimization, pay-per-click, social media marketing, SEO-friendly web architecture, and SEO tools and education. Connect with him on LinkedIn or through the BruceClay.com website.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/bruce-clay\/\",\"https:\/\/twitter.com\/bruceclayinc\"],\"url\":\"https:\/\/www.bruceclay.com\/blog\/author\/bclay\/\"}]}<\/script>","yoast_head_json":{"title":"BruceClay - 7 Mobile-Friendly Navigation Best Practices","description":"These 7 mobile-friendly navigation best practices show you how to make the mobile navigation work best for site visitors, improve UX and support SEO. A good nav makes it easier for your customers to find what they need using a smartphone.","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.bruceclay.com\/blog\/mobile-friendly-navigation\/","og_locale":"en_US","og_type":"article","og_title":"7 Mobile-Friendly Navigation Best Practices","og_description":"Does your mobile site's navigation make it easy or hard for someone to find what they need? And are you sure your mobile site is passing PageRank adequately? Bruce Clay's latest post 7 Mobile-Friendly Navigation Best Practices shows you how to make the mobile navigation work best for site visitors, improve UX and support SEO.","og_url":"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/","og_site_name":"Bruce Clay, Inc.","article_published_time":"2020-12-23T20:36:44+00:00","article_modified_time":"2023-08-31T23:56:39+00:00","author":"Bruce Clay","twitter_card":"summary_large_image","twitter_title":"7 Mobile-Friendly Navigation Best Practices \u2013 Bruce Clay lays out how to make your mobile nav work for visitors AND be SEO friendly.","twitter_description":"Does your mobile site's navigation make it easy or hard for someone to find what they need? Are you sure your mobile site is passing PageRank adequately? Bruce Clay's latest post gives 7 mobile-friendly navigation best practices on how to make the mobile navigation work best for site visitors, improve UX and support SEO.","twitter_image":"http:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2014\/12\/ModCloth-mobile-friendly-navigation-on-iPhone_1200x627.png","twitter_creator":"@bruceclayinc","twitter_misc":{"Written by":"Bruce Clay","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/","url":"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/","name":"7 Mobile-Friendly Navigation Best Practices","isPartOf":{"@id":"https:\/\/www.bruceclay.com\/#website"},"datePublished":"2020-12-23T20:36:44+00:00","dateModified":"2023-08-31T23:56:39+00:00","author":{"@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b"},"description":"These 7 mobile-friendly navigation best practices show you how to make the mobile navigation work best for site visitors, improve UX and support SEO. A good nav makes it easier for your customers to find what they need using a smartphone.","breadcrumb":{"@id":"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bruceclay.com\/blog\/mobile-friendly-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bruceclay.com\/"},{"@type":"ListItem","position":2,"name":"How to Create a Mobile-Friendly Navigation in 7 Steps"}]},{"@type":"WebSite","@id":"https:\/\/www.bruceclay.com\/#website","url":"https:\/\/www.bruceclay.com\/","name":"Bruce Clay, Inc.","description":"SEO and Internet Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bruceclay.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b","name":"Bruce Clay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g","caption":"Bruce Clay"},"description":"Bruce Clay is founder and president of Bruce Clay Inc., a global digital marketing firm providing search engine optimization, pay-per-click, social media marketing, SEO-friendly web architecture, and SEO tools and education. Connect with him on LinkedIn or through the BruceClay.com website.","sameAs":["https:\/\/www.linkedin.com\/in\/bruce-clay\/","https:\/\/twitter.com\/bruceclayinc"],"url":"https:\/\/www.bruceclay.com\/blog\/author\/bclay\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/34762"}],"collection":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/comments?post=34762"}],"version-history":[{"count":99,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/34762\/revisions"}],"predecessor-version":[{"id":199009,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/34762\/revisions\/199009"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/media\/42969"}],"wp:attachment":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/media?parent=34762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/categories?post=34762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/tags?post=34762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}