Part of the RWD Fundamentals Reading List

Every site will require different adaptations to narrowing viewport widths: just as there are broad shared design themes between many sites, so is there a range of patterns that might be used as a starting point for adaptive web designs.

Single Column Adaptive Page

Screenshot of a single column web page design maximised to a wide screen Screenshot of a single column web page design minimized to a narrow window
A single column web page adapting to narrow viewport width

The easiest design to adapt to narrow widths. The content container is given a width of 100%; the banner image / logo scales with a max-width of 100%. The horizontal navigation changes size under a media query rule – icons should be at least 45px × 45px for touch devices – possibly wrapping into new lines, or changing from display: inline to display: block. The margins for content decreases, while font sizes alter to retain legibility at small screen sizes.

Two-Column Pattern

Screenshot of a double column web page design minimized to a typical smartphone size
An adaptive two column design

Usually reserved for more complex sites. At wide screen sizes, navigation is vertical; as the browser window narrows, UI elements transform into a horizontal orientation.

Three-Column, Single Header Page Design

Screenshot of a triple column web page design maximized to a browser window Screenshot of a triple column web page design minimized to a smartphone
An adaptive design with left and right columns and a central content section

A design pattern associated with highly organized, “deep” sites (or pages with a lot of advertising, which is an ongoing issue in adaptive pages). A more complex version of the two-column pattern approach, but with a greater likelihood of using JavaScript (to transform a navigational list into a drop-down menu, for example), together with re-ordering or hiding content.

There are several options for handling the layout of extra complementary content:

  1. It may be hidden using display: none, although this has issues for and
  2. It could be filtered by using client detection, and not added as an include.
  3. Content could be pushed to the bottom of the page
  4. The content could be duplicated on another page that the narrow version of the page links to; the link would be hidden at greater screen sizes.

The second option will often be approached with either JavaScript or , as it frequently involves restructuring the order of page content.

Keep in mind that users increasingly expect a similar experience of a site between their smartphone and desktop computer: if hiding elements at narrow screen sizes, you will want to seriously consider if that content was necessary in the first place. Mies van der Rohe's injunction that “less is more” has never been truer in the age of responsive design.

As the capabilities of mobile platforms keep pace with modern web development, ever-more complex modes of interaction become possible, including “side swipe” or “off pane” mobile navigation of sites. I’ll address those possibilities and many others in future articles; right now, these patterns should help get you started.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.