UI patterns and responsive design

Internet Architects Logo

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 :-)

More news

How to get on top of your website’s performance

Picture of running contest with athlete in starting blocks

A faster website only bears fruit. Like we’ve told before: your customers’ time is your money. As your website loads faster, less people will abandon your website, they will stay longer and ultimately your bounce rate will benefit. A good performing website even impacts SEO, making sure it’ll be easier for (potential) customers to find you. A faster website improves conversion, it increases visitor satisfaction and it reduces visitor abandonment.

more about this news article