{"id":1119,"date":"2017-03-27T11:44:51","date_gmt":"2017-03-27T15:44:51","guid":{"rendered":"https:\/\/www.sharpinnovations.com\/blog\/?p=1119"},"modified":"2017-03-27T11:44:51","modified_gmt":"2017-03-27T15:44:51","slug":"3-effective-and-beautiful-mobile-navigations","status":"publish","type":"post","link":"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/","title":{"rendered":"3 Effective and Beautiful Mobile Navigations"},"content":{"rendered":"

Sometimes the most subtle design decisions can vastly improve or hurt the overall user experience in the world of web design. In a field constantly subject to new visual design trends, user expectations, and form factor changes, it can be tough to keep up with the most effective solutions for seemingly simple pieces of functionality like a website\u2019s navigation menu. Some tried and true methods tend to stick around, but that doesn\u2019t mean that they\u2019re always the best for your current users.<\/p>\n

On mobile devices, especially, the requirements are constantly evolving. Navigations need to look great and work well on a 10\u201d tablet, a 6\u201d \u201cphablet\u201d, or a 4\u201d phone. Let\u2019s take a look at some reliable navigation options that focus on ease of use while still complementing your website design across a multitude of mobile devices.<\/p>\n

Hamburger Menu<\/strong><\/p>\n

\"hamburger <\/a>A very popular option right now is what\u2019s known as the hamburger menu, referred to as such due to the icon with three horizontal lines stacked on top of each other. This icon has become synonymous with mobile navigations and is sometimes utilized on full desktop sites. It provides an easy way to access a site\u2019s menu without obstructing the design in a largely universally recognized way. Hamburger menus have been in use for several years now but have exploded in popularity recently with the advent of responsive websites.<\/p>\n

Bottom Navigation<\/strong> <\/p>\n

\"trifecta <\/a>As we\u2019ve mentioned on our blog before, Progressive Web Apps<\/a> are a great alternative to traditional mobile apps for a multitude of reasons. As mobile sites become less recognizable as traditional websites and venture towards a more app-like interface, a bottom navigation can be a great option. This achieves the same effect as the hamburger menu in that users are accustomed to a bottom navigation in some of their favorite apps, while a bottom navigation provides a unique visual alternative to your more widely used hamburger menu. Bottom navigation also offers some added convenience, allowing you to place your most frequently visited pages within a single tap\u2019s reach without having to open up any menus. The primary downside to the bottom navigation over other options is the extra consumption of vertical space, but generally people use their mobile devices in portrait mode \u2013 particularly cell phones \u2013 so this isn\u2019t typically a problem. Depending upon your design, however, you\u2019ll want to take this into consideration. Additionally, you can only fit so many links comfortably into that area so, traditionally, one of the buttons is reserved for a hamburger menu.<\/p>\n

Scrolling Navigation<\/strong><\/p>\n

A scrolling navigation is an interesting concept that works in the same vein as the bottom navigation but removes the limitation of how many items you can list along the bottom of the screen, and this allows you to fully move away from a hamburger menu. The key here is to make sure you include some form of indicator to the user so they know that section can be scrolling horizontally. This could include having one of the buttons reside slightly off the screen, adding an arrow or fade to the bar towards the far right, a scroll bar just above the nav, or any other visual prompt. This unique take on the bottom navigation still allows you to provide quick access to the most popular pages on your site while presenting the rest of your navigation in an effective manner.<\/p>\n

Those are just a few examples of great mobile navigations to make your responsive site beautiful and easy to navigate. The web design community is always coming out with new, unique ways to distinguish their projects from the rest, so next time you\u2019re ready for a website refresh or just want to improve upon your current website, take a look at your navigation!<\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes the most subtle design decisions can vastly improve or hurt the overall user experience in the world of web design. In a field constantly subject to new visual design trends, user expectations, and form factor changes, it can be tough to keep up with the most effective solutions for seemingly simple pieces of functionality…<\/p>\n","protected":false},"author":8,"featured_media":1129,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,4],"tags":[215,214,212,213,183,216],"class_list":["post-1119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-web-design","category-website-design","tag-bottom-navigation","tag-hamburger-menu","tag-mobile-navigation","tag-mobile-navs","tag-progressive-web-apps","tag-scrolling-navigation"],"yoast_head":"\n3 Effective and Beautiful Mobile Navigations - Sharp Innovations Blog<\/title>\n<meta name=\"description\" content=\"Sometimes the most subtle design decisions can vastly improve or hurt the overall user experience in the world of web design. In a field constantly subject to new visual design trends, user expectations, and form factor changes, it can be tough to keep up with the most effective solutions for seemingly simple pieces of functionality...\" \/>\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.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Effective and Beautiful Mobile Navigations - Sharp Innovations Blog\" \/>\n<meta property=\"og:description\" content=\"Sometimes the most subtle design decisions can vastly improve or hurt the overall user experience in the world of web design. In a field constantly subject to new visual design trends, user expectations, and form factor changes, it can be tough to keep up with the most effective solutions for seemingly simple pieces of functionality...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/\" \/>\n<meta property=\"og:site_name\" content=\"Sharp Innovations Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-27T15:44:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2017\/03\/Effective-and-Beautiful-Mobile-Navigations-Header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Greg Lauver\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Greg Lauver\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/\",\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/\",\"name\":\"3 Effective and Beautiful Mobile Navigations - Sharp Innovations Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#website\"},\"datePublished\":\"2017-03-27T15:44:51+00:00\",\"dateModified\":\"2017-03-27T15:44:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sharpinnovations.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 Effective and Beautiful Mobile Navigations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#website\",\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/\",\"name\":\"Sharp Innovations Blog\",\"description\":\"Web Design, Development, and Internet Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sharpinnovations.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e\",\"name\":\"Greg Lauver\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g\",\"caption\":\"Greg Lauver\"},\"description\":\"Greg started his career with Sharp Innovations in the Client Support Specialist role, evolving over the years into Account Management, Design, Project Management, Sales, and other duties, eventually becoming a partner in 2023. He is currently VP of Account Management & Sales, focusing his energy on ensuring our top 20 clients are served with excellence. His dedication towards exceptional customer service and care for the clients he works with has been recognized time and time again. Greg appreciates the diverse nature of his role and continues to explore new ways he can serve Sharp Innovations and our clients.\",\"sameAs\":[\"https:\/\/plus.google.com\/112086464633132586125\"],\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/author\/glauver\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 Effective and Beautiful Mobile Navigations - Sharp Innovations Blog","description":"Sometimes the most subtle design decisions can vastly improve or hurt the overall user experience in the world of web design. In a field constantly subject to new visual design trends, user expectations, and form factor changes, it can be tough to keep up with the most effective solutions for seemingly simple pieces of functionality...","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.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/","og_locale":"en_US","og_type":"article","og_title":"3 Effective and Beautiful Mobile Navigations - Sharp Innovations Blog","og_description":"Sometimes the most subtle design decisions can vastly improve or hurt the overall user experience in the world of web design. In a field constantly subject to new visual design trends, user expectations, and form factor changes, it can be tough to keep up with the most effective solutions for seemingly simple pieces of functionality...","og_url":"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/","og_site_name":"Sharp Innovations Blog","article_published_time":"2017-03-27T15:44:51+00:00","og_image":[{"width":800,"height":400,"url":"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2017\/03\/Effective-and-Beautiful-Mobile-Navigations-Header.jpg","type":"image\/jpeg"}],"author":"Greg Lauver","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Greg Lauver","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/","url":"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/","name":"3 Effective and Beautiful Mobile Navigations - Sharp Innovations Blog","isPartOf":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/#website"},"datePublished":"2017-03-27T15:44:51+00:00","dateModified":"2017-03-27T15:44:51+00:00","author":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e"},"breadcrumb":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.sharpinnovations.com\/blog\/2017\/03\/3-effective-and-beautiful-mobile-navigations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sharpinnovations.com\/blog\/"},{"@type":"ListItem","position":2,"name":"3 Effective and Beautiful Mobile Navigations"}]},{"@type":"WebSite","@id":"https:\/\/www.sharpinnovations.com\/blog\/#website","url":"https:\/\/www.sharpinnovations.com\/blog\/","name":"Sharp Innovations Blog","description":"Web Design, Development, and Internet Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sharpinnovations.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e","name":"Greg Lauver","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g","caption":"Greg Lauver"},"description":"Greg started his career with Sharp Innovations in the Client Support Specialist role, evolving over the years into Account Management, Design, Project Management, Sales, and other duties, eventually becoming a partner in 2023. He is currently VP of Account Management & Sales, focusing his energy on ensuring our top 20 clients are served with excellence. His dedication towards exceptional customer service and care for the clients he works with has been recognized time and time again. Greg appreciates the diverse nature of his role and continues to explore new ways he can serve Sharp Innovations and our clients.","sameAs":["https:\/\/plus.google.com\/112086464633132586125"],"url":"https:\/\/www.sharpinnovations.com\/blog\/author\/glauver\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/1119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/comments?post=1119"}],"version-history":[{"count":2,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/1119\/revisions"}],"predecessor-version":[{"id":1124,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/1119\/revisions\/1124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/media\/1129"}],"wp:attachment":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/media?parent=1119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/categories?post=1119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/tags?post=1119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}