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
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.
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
There are several options for handling the layout of extra complementary content:
- It may be hidden using
display: none, although this has issues for accessibility and SEO
- It could be filtered by PHP using client detection, and not added as an
- Content could be pushed to the bottom of the page
- 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.
Keep in mind that mobile 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.