It’s not a pattern, it’s a state
As user experience designers, we take pride in tackling recurring design challenges with common solutions.
Navigation menus, tab bars, sign-up forms, wizards and accordions: these solutions are called “UI patterns”,
and many of them have been backed up over the years by extensive research and user testing. In short, UI
patterns are the hammers and nails we use to craft a usable and intuitive interface.
Only, with the current plethora of web-accessing devices sporting all kinds of screen dimensions and pixel
densities, that interface is adrift. Put bluntly, any web page component needs to be able to fit into any gap. And
that same gap can be huge or small, horizontally or vertically oriented, expanded or collapsed, depending on
the physical size of the browsing device.
The learning curve
This reality imposes new design challenges that we’re slowly learning to cope with. At the same time though, we’re learning that a lot of UI patterns, the once-so-trusted tools we relied upon, don’t cut it in a responsive context.
Take ‘layout grids’, for example. What looks like a 3-column horizontal layout on a widescreen desktop computer, will probably have to be arranged as a 3-row vertical layout on a smartphone browser. So what do you call the pattern? A ‘3-column grid’ is clearly inaccurate.
Same goes for patterns that used to assume a horizontal (‘carousel’, ‘tab pane’) or vertical (‘accordion’) orientation, like in the e-commerce product page example below:
The body text sections – highlighted in green – are arranged differently according to the available screen real-estate.
A page section that acts like a tab pane in one responsive context, might need to act like an accordion in another. Conversely, components that have no need for this kind of ‘overflow patterns’ when they have enough breathing room, might need to adopt carousel or accordion behaviour as soon as they are squeezed into a tinier space.
States in perennial transition
Which brings us to the crux of this article : quite a few of those once reliable tools – grids, tabs, carousels, … – are now merely a temporary UI state on a specific page section that might vanish and reappear depending on context. That doesn’t mean we have to throw these patterns out the window, but we’ll have to find better ways to decouple the way something looks from the actual content it encloses; to dynamically add and remove decoration without bolting UI assumptions into our source code.
What to do then? Clever people are working on partial solutions that are slowly being incorporated by browser vendors, like new semantic HTML elements, CSS columns, CSS grids and flexible boxes, CSS regions, web components and far-future thought experiments like element queries.
So, chances are that the web won’t be fully and semantically responsive until we can remove all layout indicators (div, I’m looking at you) from our web page source code and inject them dynamically on an as-needed basis. Which makes it kind of ironic that, the more we start to rely on room-agnostic UI patterns, the closer we will probably get to the way HTML pages were constructed in the early 1990s. No layout assumptions, just content that flows and scales without limits. A 20 year learning curve and a smartphone revolution just to get things right.
Exciting times :-)