Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 176.000 folks.

Quick summary ↬ This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction.

Design patterns often have a bad reputation. They are often considered to be quick, lazy, off-the-shelf solutions that are applied blindly without consideration of the context of a problem. Solutions such as the almighty off-canvas navigation, the floating label pattern or carousels for featured products are some of the prominent ones.

This article isn’t about these patterns, though. This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction. Please note that this article isn’t technical; it explores interesting UX patterns out in the wild, rather than code samples. Beware: You will not be able to unsee what you are about to see, and that’s probably a good thing.

Further Reading on slots empire bonus codes Mag:

  • , but only few of them are responsive, although Ferrari’s car builder stands out from the crowd because of its features; for example, you can switch between a daylight and night view, as well as design two versions of a car at the same time and see the comparison live.

    When it comes to a multi-step process, we can always break it down by displaying one section at a time, with the navigation conveniently placed at the bottom of the screen. We can use slider panes in case we can’t display all available options, and use extra navigation dropdown menus for extra details. We can then repackage these modules to better fill the available screen, from smaller to larger viewports. The result is a flexible, responsive car builder without bells and whistles, but with a straightforward and well-organized interface.

    Responsive Mega DropDown Navigation

    In one of his essays, Jason Fried, the creative mind behind Basecamp, stated that “much of the tension in product development and interface design comes from trying to balance the obvious, the easy, and the possible.” It might sound like a very general observation, but in practice, it proves to be consistently valuable. In fact, whenever we attempt to organize and design navigation, we try to group navigation items into exactly these three buckets. The way you group them defines how the navigation will be displayed throughout the website. Now, what do they stand for?

    • The obvious is all about features and navigation items that should always be within reach of the user. It reflects the essence of the website, and it is expensive because it requires pixels on the screen. Think about the most important sections or features of your website; if they belong to the obvious group, they should always remain visible.
    • The easy is all about features and sections used frequently but not all of the time. This is where we, as designers, have to balance the critical and non-critical, and these items are often hard to define. Usually, they are candidates for primary navigation items that are accessible with a click of a button or a dropdown menu toggle.
    • The possible is all about parts of the website that are sometimes or rarely used and usually do not require a spotlight. They should be accessible but not front and center, and probably hidden. These items usually work well in secondary navigation.

    Now, what if we apply this separation of concerns to navigation? In simple cases, we could heavily prioritize the “obvious” (for example, search and the most trafficked sections of the website) and display it in all resolutions; we could reveal the “easy” navigation options with progressive disclosure (for example, with a “Menu” button or toggle); and we could provide access to the “possible” on a separate page, once users click on one of the subsections in “Menu,” rather than right in the navigation bar. More often than not, displaying the possible within the main navigation isn’t necessary or helpful. However, the decision for or against it would have to depend on hard data: metrics and usability tests.

    World Wildlife Fund chose exactly this approach. Instead of displaying the same depth of navigation in all views, it chose to prioritize the important ones and show the rest only when required. In a large view, the upper navigation bar features seven sub-dropdown menus. On a small screen, you’d see only two links (“Donate” and “About”) displayed prominently, with a hamburger icon concealing a list with the main-level navigation areas, but not the links that are displayed on a large screen on hover. These areas are still accessible when the user drills down to the section page, but not right away.

    In this case, the obvious could be “Donate” and “Adopt”; the easy could be the main categories in the hamburger menu; and the possible could be the areas accessible in each separate section.

    You could ask yourself, Why do we hide these sections in the navigation menu if we could just display them with a set of accordions? Wouldn’t it be better if the user could jump to the section of their choice right away, with a few clicks right in the navigation? After all, if the navigation items are hidden, then we would expect lower engagement and traffic for them. That’s true, but with more focused navigation, we should expect higher engagement and traffic for the navigation items that are immediately visible. Besides, do you always want to present the rich content of a section as a list of plain links?

    Still, in some situations, making such items immediately visible is useful, especially if many users return often to the website, or even to specific sections of the website. The data should dictate whether such items should go in the easy or possible bucket. Indeed, that’s where going back and forth usually is unavoidable.

    This strategy could be applied to regular navigation as well as to mega dropdown menus. The latter are a common choice for any large website with dozens of sections, and it’s a good way to display a wide variety of products and sections at a glance. Well, it works well on the desktop at least, where there is enough space, but the view is quite narrow on mobile. What can we do there? We have a few options.

    The Guardian uses a combination of the mega dropdown menu and the “priority+” pattern to display as many items as possible in any given viewport, and then those items are put in a dropdown menu whenever they don’t fit anymore. On narrow screens, the layout is made linear, with all navigation options presented in a long list, the current selection being displayed at the very top.

    The Financial Times chose to transform its large detailed view into a tabbed menu. Instead of displaying all items in an almost endless list of links, each group acts as a tab, so sub-navigation is revealed upon tap or click.

    The Institute for Faith, Work & Economics uses a similar technique for simpler navigation. It displays secondary navigation on hover on wide screens and uses the available space to display secondary navigation on the right side of the navigation panel on narrow screens. To indicate the secondary navigation, an arrow points to the right. That arrow might need to be larger, though.

    Food & Company rearranges the list of items based on the viewport. On large screens, images prominently drive users to the point of interest. On narrow screens, the images are replaced with text, and items are organized in a slightly more compact way.

    EuroVision has a consistent grouping of navigation items and lets flexbox take care of filling in the space intelligently and automatically. The result isn’t always perfect, but it’s quite straightforward, without much hassle for the layout.

    The simplest way to arrange a mega dropdown menu is by stacking the sections on top of each other in a simple linear view. However, users might benefit from a more compact view with grouped items and a tabbed view.

    Adding nested accordions to reveal more than three sublevels of navigation at once usually could be a warning sign that something isn’t quite right and that perhaps the navigation could be simplified. Next time, start with a minimal amount of navigation, test usability with real users, and then add levels of navigation only when absolutely necessary. Not every off-canvas drawer has to be a collection of archived items that nobody really needs.

    Responsive Content Mosaics

    Sometimes navigation takes slightly different forms, though. What if you want to build a prominent “feature” area that has to be displayed in a more appealing and interesting way on a landing page? Usually, you would want to stay away from perfect ol’ square boxes or circles, perfectly aligned in your perfect grid. How can we break the grid with an unusual arrangement an items, and how do we keep the items responsive?

    An ordinary way of making, well, anything responsive is by turning it into a vertical stack of sections. Indeed, Sapporo does exactly that. Admittedly, the mosaic isn’t repeated multiple times throughout the page, so turning each section into a block seems to work well in this case.

    This might not be the optimal solution for all websites, though. Typekit features a complex content mosaic pattern, with blocks of content arranged in quite a unique shape. There are many blocks on the page, so lining them vertically would make for a very long page. Instead, Typekit designers chose to turn the content mosaic into a set of sliders in narrow views. Users can swipe to the left or right to explore the sections. It would have been helpful to add “previous” and “next” toggles in the upper-right corner of each slider, though, so that users can easily navigate between these sections.

    Another way to solve the same problem would be to readjust the pattern to keep the metaphor but provide a slightly different view. The FIFA World Football Museum displays content blocks as spheres, inspired by the official ball used by FIFA. Each sphere is a hexagon, and the edges of the sphere are used as connectors between the blocks.

    On large screens, the hexagons are larger and display content on hover. On narrow screens, the content is displayed right away, but not the entire content. With changes in the viewport, the hexagons are rearranged, but the metaphor remains.

    TPS Real Estate uses floating areas with masked videos to feature available properties. While the page is loading, the floor plans are used as skeleton screens; as content becomes available, it gets populated into the areas, replacing the floor plans.

    On larger screens, the content blocks grow on hover; on smaller screens, they turn into cards. Additionally, the user can choose between different views: the tiles view, the map view or the list view. Not all features are available on all screens, though: A 360-degree view doesn’t show up in narrow views but is displayed on wide screens (for obvious reasons — it requires Flash).

    An obvious way to make a content mosaic responsive is by turning it into a list of block elements. Consider using a slider, or rearrange the tiles into different views, so that users can switch to the view of their preference.

    Responsive Maps And Charts

    In general, even advanced content mosaics aren’t as detailed as a large map or a non-trivial data visualization. In some scenarios, maps can be used as content filters — for example, to let users visually select a region of a city of their choice to buy a property. Obviously, an input field would make the input easier — but only if users know what they are looking for. What if you want to visually display a price range for the city areas using colors and text, so that the user can click on an area of interest and zoom into it?

    The problem with a map is that, when scaled down, we often lose the almighty 44 × 44-pixel touch target, which is required for comfortable and precise navigation. One idea would be to display a low-fidelity view of the map on narrow screens and progressively enhance it with more detail on larger screens.

    Another option would be to accept less precise input and prompt users to specify input if it’s ambiguous. For example, the world map on the Kremlin’s website allows users to select multiple countries at once, and then prompts you with a data list asking for the country of interest. Additionally, traditional interface controls for zooming in and out are available as well, but selecting “Andorra” with them would be an exercise in patience, whereas selecting a region and choosing a country from a short list of options would be faster and easier. The website has a dozen other useful patterns, and we’ve featured them in a case study on the Kremlin’s website last year. Worth a read!

    This pattern can be useful for data visualization in general. Whenever a news website features elections, highlighting how the general public has voted in regions of a city, state or country, we could present a data list in both narrow and wide views, allowing users to select their area of interest.

    Another interesting option to apply to maps would be to change the fidelity of the map entirely, moving away from a precise representation to a slightly more general one. That’s what CNN decided to do for its political “Delegate Estimate” map. Instead of representing each state at an accurate size relative to others, CNN depicts each state with exactly the same width and height, with abbreviations and the delegates count represented in a state-by-state breakdown. It might not be precisely representative, but it does communicate the purpose of the map visually and works relatively well on mobile — probably better than a long tabular list of states aligned vertically would have.

    Responsive Art Direction

    Changing the views and the fidelity of components for different screens is one of the cornerstones of responsive art direction. It’s common to assume that in web design, art direction is usually an exception for special pages, such as landing pages. That’s where we definitely want to ensure that a product is presented perfectly. So, changing the visuals to better match the screen is worth the effort.

    Sometimes it’s not just preferable but necessary. Emirates airlines doesn’t have a responsive website; it uses a separate mobile website instead. But the content on both websites is remarkably similar, albeit quite different in terms of art direction.

    The main images at the top of the screen differ depending on the language the user chooses to access the website. On an international English version, the woman is looking from right to left, with a drink resembling a cocktail in her right hand. The metaphor is carried over to the mobile website as well.

    In the mobile Arabic version of the website, the woman is looking from left to right, with a glass of orange juice in her left hand. The image is different altogether on the desktop Arabic version.

    Also interesting is that on the Emirates website, in a mobile view, critical items such as booking a flight and checking in aren’t highlighted with color or buttons, but are simply taller than other items — another little technique that could be applied in a variety of scenarios.

    Another area where responsive art direction might be necessary is storytelling. As an integral part of its website, Kobe Marathon QBB uses a series of cartoon strips to tell the story of a character running through Tokyo. The images change between narrow and wide screens, and so do the background images across the pages.

    You could take the idea even further and allow users to zoom into a frame of a comic strip to view only one frame at a time, as Al Jazeera does. When the user taps on one of the frames in a mobile view, the frame gets larger and comes into focus, removing everything else. To move through the frames, users can then just swipe to the left or right.

    Art direction is beneficial for landing pages, but it could be useful for multilingual projects or any website that involves some sort of storytelling.

    Summary

    Design patterns deserve more credit and attention than they usually receive. Looking into how our colleagues solve common problems helps us to avoid losing time and to get on the right track faster.

    Complex interfaces can be broken down into simpler components and reshuffled to better fit various screens. Mega dropdown menus could be transformed into a set of tabs or into grouped navigation areas for narrow views. With complex content mosaics, we could turn content blocks into sliders and allow users to switch between views. For maps and complex infographics, users could select multiple countries at once and specify their selection in the second step. Responsive art direction isn’t easy, but it could dramatically improve landing pages and any project involving storytelling.

    Next time, we’ll look into examples of more complex navigation, with filters, switchers between maps and list views, comparison tables, and responsive PDFs. Stay tuned, and if you happen to know of a responsive design pattern worth highlighting, please share it on Twitter or in the comments below. And if you’re looking for a few more patterns to use, we’ve got a little responsive design book that you might find useful.

    slots empire bonus codes
 Editorial (al)