{
    "componentChunkName": "component---src-templates-blog-post-mdx-js",
    "path": "/blog/guardian-responsive-navigation/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Andrew J Wright"}},"mdx":{"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"The Guardian: responsive navigation we can learn from\",\n  \"description\": \"The Guardian's recent website re-design implements some (responsive) navigation design patterns that we can all learn from.\",\n  \"imageURL\": null,\n  \"date\": \"2014-12-22\",\n  \"tags\": [\"information architecture\"],\n  \"editorsNote\": \"Updated the article with comparisons to other news-sites. (Dec. 23, 2014)\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3c13968bea5185d2f4697479d13e7aad/8d68c/1-art-n-design-article.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.66666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"The Guardian\\\"\",\n    \"title\": \"The Guardian\",\n    \"src\": \"/static/3c13968bea5185d2f4697479d13e7aad/0a47e/1-art-n-design-article.png\",\n    \"srcSet\": [\"/static/3c13968bea5185d2f4697479d13e7aad/8a4e8/1-art-n-design-article.png 150w\", \"/static/3c13968bea5185d2f4697479d13e7aad/5a46d/1-art-n-design-article.png 300w\", \"/static/3c13968bea5185d2f4697479d13e7aad/0a47e/1-art-n-design-article.png 600w\", \"/static/3c13968bea5185d2f4697479d13e7aad/1cfc2/1-art-n-design-article.png 900w\", \"/static/3c13968bea5185d2f4697479d13e7aad/c1b63/1-art-n-design-article.png 1200w\", \"/static/3c13968bea5185d2f4697479d13e7aad/8d68c/1-art-n-design-article.png 1234w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Designing good navigation is hard. Often there is a complex hierarchy at play with many sections and many levels. The information architect's goal is to hide the complexity.\"), mdx(\"p\", null, \"Navigation that responds well to the growing number of device/viewport combinations is even harder to do well. Information architects and interaction designers team up to hide the complexity whilst exposing as much relevant information as possible with minimal user interactions.\"), mdx(\"h2\", null, \"The Guardian\"), mdx(\"p\", null, \"British newspaper \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.theguardian.com/\"\n  }, \"The Guardian\"), \" (beta) has employed an interesting pattern to handle the complexity of their navigation across devices and viewport sizes. It's awesome because it follows these principles:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Use simple, distinct labels \", \"\\u2192\", \" \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"\\\"I understand what's here.\\\"\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Provide signposts for wayfinding and context \", \"\\u2192\", \" \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"\\\"I know where I am.\\\"\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Show as much useful navigation as possible \", \"\\u2192\", \" \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"\\\"I know where I can go.\\\"\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Expect minimal user interactions \", \"\\u2192\", \" \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"\\\"I know what I have to do.\\\"\"))), mdx(\"p\", null, \"What's different about the Guardian's approach is that they package these features together in a tidy, efficient space that feels more welcoming and usable than any news-site navigation I've come across before. And all of this is done without the design feeling cluttered or confusing.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a0ba535833b6981fca076d1d68a204c3/21cdd/1a-art-n-design-article.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"32.666666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"The Guardian\\\"\",\n    \"title\": \"The Guardian\",\n    \"src\": \"/static/a0ba535833b6981fca076d1d68a204c3/0a47e/1a-art-n-design-article.png\",\n    \"srcSet\": [\"/static/a0ba535833b6981fca076d1d68a204c3/8a4e8/1a-art-n-design-article.png 150w\", \"/static/a0ba535833b6981fca076d1d68a204c3/5a46d/1a-art-n-design-article.png 300w\", \"/static/a0ba535833b6981fca076d1d68a204c3/0a47e/1a-art-n-design-article.png 600w\", \"/static/a0ba535833b6981fca076d1d68a204c3/1cfc2/1a-art-n-design-article.png 900w\", \"/static/a0ba535833b6981fca076d1d68a204c3/c1b63/1a-art-n-design-article.png 1200w\", \"/static/a0ba535833b6981fca076d1d68a204c3/21cdd/1a-art-n-design-article.png 1680w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"The Guardian navigation (normal) \\u2014 click to enlarge\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/84c9a3a5510a4fb86d907b71e98b9ac1/21cdd/2a-art-n-design-article-sitemap.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"32.666666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"The Guardian - 'Sitemap'\\\"\",\n    \"title\": \"The Guardian - Sitemap\",\n    \"src\": \"/static/84c9a3a5510a4fb86d907b71e98b9ac1/0a47e/2a-art-n-design-article-sitemap.png\",\n    \"srcSet\": [\"/static/84c9a3a5510a4fb86d907b71e98b9ac1/8a4e8/2a-art-n-design-article-sitemap.png 150w\", \"/static/84c9a3a5510a4fb86d907b71e98b9ac1/5a46d/2a-art-n-design-article-sitemap.png 300w\", \"/static/84c9a3a5510a4fb86d907b71e98b9ac1/0a47e/2a-art-n-design-article-sitemap.png 600w\", \"/static/84c9a3a5510a4fb86d907b71e98b9ac1/1cfc2/2a-art-n-design-article-sitemap.png 900w\", \"/static/84c9a3a5510a4fb86d907b71e98b9ac1/c1b63/2a-art-n-design-article-sitemap.png 1200w\", \"/static/84c9a3a5510a4fb86d907b71e98b9ac1/21cdd/2a-art-n-design-article-sitemap.png 1680w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"The Guardian navigation (sitemap) \\u2014 click to enlarge\"), mdx(\"h2\", null, \"Navigation areas\"), mdx(\"p\", null, \"Labelling the navigation areas reveals the structure:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\\"global\\\" navigation pointing to top-level sections,\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\\"breadcrumb\\\" navigation showing signposts to the current section,\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\\"neighbour\\\" sections revealing local navigation.\")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/261d2062497bb75d0e1d4988fd6e3ca1/f43e4/6-areas-medium.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"6%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAQ0lEQVQI1z3GQQrAIAwAwf7/bTVpRdE0CiU+ZAseelhmj4hF7U7KDS19l0vlFCXphei9/V+U1g0fk8cH7gMz276x+AACJ0X37CZYlgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"The Guardian\\\"\",\n    \"title\": \"The Guardian - Navigation zones\",\n    \"src\": \"/static/261d2062497bb75d0e1d4988fd6e3ca1/0a47e/6-areas-medium.png\",\n    \"srcSet\": [\"/static/261d2062497bb75d0e1d4988fd6e3ca1/8a4e8/6-areas-medium.png 150w\", \"/static/261d2062497bb75d0e1d4988fd6e3ca1/5a46d/6-areas-medium.png 300w\", \"/static/261d2062497bb75d0e1d4988fd6e3ca1/0a47e/6-areas-medium.png 600w\", \"/static/261d2062497bb75d0e1d4988fd6e3ca1/1cfc2/6-areas-medium.png 900w\", \"/static/261d2062497bb75d0e1d4988fd6e3ca1/f43e4/6-areas-medium.png 1120w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"The Guardian navigation labelled with purpose \\u2014 click to enlarge\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f601841eb19e1445e43870fa97ccf0f4/e17e5/7-areas-small.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"8.666666666666668%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjElEQVQI1yXMMQqDMABAUQ8nuCgILg6uHs9NyGJDoQm2RUmNFbWJg17kl9rhw59e0JoJ5zf6ceb6HLl1b1bneU3r+Zf7wPLxHPuOtRalFFpr6romiiLCMCRNU7IsOwvkw7K6jc7OCGVofoDz9ONC0w4Ibf7gsWOMQQiBlJKqqkiShDiOyfOcoigoy5IvLsV5eDvrMhQAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"The Guardian\\\"\",\n    \"title\": \"The Guardian - Navigation zones on mobile\",\n    \"src\": \"/static/f601841eb19e1445e43870fa97ccf0f4/e17e5/7-areas-small.png\",\n    \"srcSet\": [\"/static/f601841eb19e1445e43870fa97ccf0f4/8a4e8/7-areas-small.png 150w\", \"/static/f601841eb19e1445e43870fa97ccf0f4/5a46d/7-areas-small.png 300w\", \"/static/f601841eb19e1445e43870fa97ccf0f4/e17e5/7-areas-small.png 400w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"The Guardian navigation labelled with purpose on mobile \\u2014 click to enlarge\"), mdx(\"h3\", null, \"Global navigation\"), mdx(\"p\", null, \"The global navigation (including top-level sections) spans the width of the container to maximize the available space for displaying menu items. Labels are kept short (at 1 or 2 words in length) and spacing is just enough to identify each label as unique.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/images/c6c7a6c95f113a84e766f62996f3d026/0-theguardian-mobile-nav.gif\",\n    \"alt\": \"\\\"The Guardian\\\"\",\n    \"title\": \"The Guardian - Navigation zones on mobile\"\n  })), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"Side-scrolling navigation on mobile\"), mdx(\"p\", null, \"At smaller viewport sizes, the global navigation is kept in-line and can be scrolled horizontally. It is demoted in priority in favour of keeping the breadcrumb and local navigation visible.\"), mdx(\"h3\", null, \"Breadcrumb navigation\"), mdx(\"p\", null, \"The breadcrumb shows the path from home to the current section but doesn't include the current page title. This keeps it short and sweet, again, like the global navigation. It provides context for your current location and sets the tone for a great navigational addition: the neighbouring sections.\"), mdx(\"h3\", null, \"Neighbouring sections (local) navigation\"), mdx(\"p\", null, \"Neighbours of the current section are revealed in the context of the breadbrumb to create something of a local navigation. Revealing the neighbouring sections in this way is an efficient use of space that makes exploration easy and adds richness to the navigation experience without adding complexity to understanding.\"), mdx(\"h3\", null, \"All sections (sitemap) navigation\"), mdx(\"p\", null, \"The Guardian has made an interesting choice to include the \\\"hamburger\\\" navigation for all viewport sizes; resulting in:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"the structure of the website being revealed;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"simple, efficient presentation of the structure across devices;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a better experience than the global navigation on small devices.\")), mdx(\"p\", null, \"The \\\"all sections' navigation is the better go-to navigation on smaller devices and is better relegated to a supporting role on larger ones. Plus, a nice responsive labelling feature is included: the \\\"all sections\\\" label for large viewports reduces to just \\\"all\\\" (plus the \\\"hamburger\\\" icon) for smaller viewports.\"), mdx(\"h2\", null, \"Still not convinced?\"), mdx(\"p\", null, \"Just in case you weren't convinced of how great the Guardian's new navigation is, compare it to these other online news sources.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/8d68c/10-bbc-entertainment-article.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"19.333333333333332%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"BBC News\\\"\",\n    \"title\": \"BBC News - Entertainment article\",\n    \"src\": \"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/0a47e/10-bbc-entertainment-article.png\",\n    \"srcSet\": [\"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/8a4e8/10-bbc-entertainment-article.png 150w\", \"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/5a46d/10-bbc-entertainment-article.png 300w\", \"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/0a47e/10-bbc-entertainment-article.png 600w\", \"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/1cfc2/10-bbc-entertainment-article.png 900w\", \"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/c1b63/10-bbc-entertainment-article.png 1200w\", \"/static/0b7d62ffdc31277bc8a6e0a4391f9c3a/8d68c/10-bbc-entertainment-article.png 1234w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"BBC News - Entertainment article \\u2014 click to enlarge\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f87b6f278daf3df12a409ef79950b11a/8d68c/8-globe-and-mail-visarts-article.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"26.666666666666668%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"The Globe and Mail\\\"\",\n    \"title\": \"The Globe and Mail - Visual Arts article\",\n    \"src\": \"/static/f87b6f278daf3df12a409ef79950b11a/0a47e/8-globe-and-mail-visarts-article.png\",\n    \"srcSet\": [\"/static/f87b6f278daf3df12a409ef79950b11a/8a4e8/8-globe-and-mail-visarts-article.png 150w\", \"/static/f87b6f278daf3df12a409ef79950b11a/5a46d/8-globe-and-mail-visarts-article.png 300w\", \"/static/f87b6f278daf3df12a409ef79950b11a/0a47e/8-globe-and-mail-visarts-article.png 600w\", \"/static/f87b6f278daf3df12a409ef79950b11a/1cfc2/8-globe-and-mail-visarts-article.png 900w\", \"/static/f87b6f278daf3df12a409ef79950b11a/c1b63/8-globe-and-mail-visarts-article.png 1200w\", \"/static/f87b6f278daf3df12a409ef79950b11a/8d68c/8-globe-and-mail-visarts-article.png 1234w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"The Globe and Mail - Visual Arts article \\u2014 click to enlarge\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/98726a4be2b61c9764182e83799f068d/8d68c/11-nytimes-artdesign-article.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"NY Times\\\"\",\n    \"title\": \"NY Times - Art & Design article\",\n    \"src\": \"/static/98726a4be2b61c9764182e83799f068d/0a47e/11-nytimes-artdesign-article.png\",\n    \"srcSet\": [\"/static/98726a4be2b61c9764182e83799f068d/8a4e8/11-nytimes-artdesign-article.png 150w\", \"/static/98726a4be2b61c9764182e83799f068d/5a46d/11-nytimes-artdesign-article.png 300w\", \"/static/98726a4be2b61c9764182e83799f068d/0a47e/11-nytimes-artdesign-article.png 600w\", \"/static/98726a4be2b61c9764182e83799f068d/1cfc2/11-nytimes-artdesign-article.png 900w\", \"/static/98726a4be2b61c9764182e83799f068d/c1b63/11-nytimes-artdesign-article.png 1200w\", \"/static/98726a4be2b61c9764182e83799f068d/8d68c/11-nytimes-artdesign-article.png 1234w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"NY Times - Art & Design article \\u2014 click to enlarge\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\",\n      \"margin\": \"2rem 0\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/77ca9e2ce7155c7fcc736e450b2d7013/8d68c/9-wsj-somewhere-article.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"47.333333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"\\\"WSJ Online\\\"\",\n    \"title\": \"WSJ Online - Entertainment article... I think\",\n    \"src\": \"/static/77ca9e2ce7155c7fcc736e450b2d7013/0a47e/9-wsj-somewhere-article.png\",\n    \"srcSet\": [\"/static/77ca9e2ce7155c7fcc736e450b2d7013/8a4e8/9-wsj-somewhere-article.png 150w\", \"/static/77ca9e2ce7155c7fcc736e450b2d7013/5a46d/9-wsj-somewhere-article.png 300w\", \"/static/77ca9e2ce7155c7fcc736e450b2d7013/0a47e/9-wsj-somewhere-article.png 600w\", \"/static/77ca9e2ce7155c7fcc736e450b2d7013/1cfc2/9-wsj-somewhere-article.png 900w\", \"/static/77ca9e2ce7155c7fcc736e450b2d7013/c1b63/9-wsj-somewhere-article.png 1200w\", \"/static/77ca9e2ce7155c7fcc736e450b2d7013/8d68c/9-wsj-somewhere-article.png 1234w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", {\n    className: \"image-caption\"\n  }, \"WSJ Online - Entertainment article... I think \\u2014 click to enlarge\"), mdx(\"table\", {\n    className: \"table table-condensed table-striped\"\n  }, mdx(\"thead\", null, mdx(\"tr\", null, mdx(\"th\", null, \"\\xA0\"), mdx(\"th\", {\n    className: \"text-center\"\n  }, \"Guardian\"), mdx(\"th\", {\n    className: \"text-center\"\n  }, \"BBC\"), mdx(\"th\", {\n    className: \"text-center\"\n  }, \"Globe and Mail\"), mdx(\"th\", {\n    className: \"text-center\"\n  }, \"NY Times\"), mdx(\"th\", {\n    className: \"text-center\"\n  }, \"WSJ\"))), mdx(\"tbody\", null, mdx(\"tr\", null, mdx(\"th\", null, \"Use simple labels\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  })), mdx(\"tr\", null, mdx(\"th\", null, \"Provide signposts\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }), mdx(\"td\", {\n    className: \"text-center\"\n  })), mdx(\"tr\", null, mdx(\"th\", null, \"Show most navigation\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }), mdx(\"td\", {\n    className: \"text-center\"\n  })), mdx(\"tr\", null, mdx(\"th\", null, \"Minimal interaction\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }), mdx(\"td\", {\n    className: \"text-center\"\n  })), mdx(\"tr\", null, mdx(\"th\", null, \"Efficient presentation\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  }), mdx(\"td\", {\n    className: \"text-center\"\n  }, \"x\"), mdx(\"td\", {\n    className: \"text-center\"\n  })))), mdx(\"p\", null, \"As you can see, other news-sites \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"hide the navigation\"), \" in \\\"hamburgers,\\\" \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"over-stylize and encode the navigation\"), \", or \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"fail to provide any clear navigation at all\"), \" (I'm looking at you WSJ).\"), mdx(\"h2\", null, \"Summary\"), mdx(\"p\", null, \"The navigation patterns introduced in the Guardian (beta) re-design makes efficient use of space for all viewport sizes, it does a good job of reprioritizing navigation based on context, and it provides clear labels and understandable design which deliver a simple, easy to use navigation experience.\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"frontmatter":{"title":"The Guardian: responsive navigation we can learn from","subtitle":null,"imageURL":null,"date":"December 22, 2014","description":"The Guardian's recent website re-design implements some (responsive) navigation design patterns that we can all learn from.","tags":["information architecture"],"editorsNote":"Updated the article with comparisons to other news-sites. (Dec. 23, 2014)"}}},"pageContext":{"slug":"/blog/guardian-responsive-navigation/","previous":{"id":"1b62a6b1-ca5d-5d2e-9d2b-89733dc984ff","fields":{"slug":"/blog/ux-debt/"},"frontmatter":{"title":"User Experience Debt"}},"next":{"id":"37e46aa4-db39-51d9-85a2-e02b1952e4b4","fields":{"slug":"/blog/abandoning-google-inbox/"},"frontmatter":{"title":"Why I'm abandoning Google Inbox"}},"id":"63eaaf8c-9a10-5b13-b53e-60b7ca7c2448"}},
    "staticQueryHashes": ["3816294676"]}