I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Basic Responsive Design Patterns

mobile / responsive design

Estimated reading time: 2 minutes, 40 seconds

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 (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 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.