Responsive Design Example 1: A 2-column design with header and footer

Responsive web sites modify their design or layout to match the dimensions of the viewport, without overflowing. To experience the responsive design of these examples, open them in a phone or tablet, or squish your desktop browser to a very narrow width.

Links to the Examples

Key Features of this Responsive Design

The viewport meta tag is set as follows, to ensure the text on small devices will be big enough to read, and that the browser will not shrink the design: <meta name="viewport" content="width=device-width, initial-scale=1">
There are three breakpoints: desktop, tablet, and phone. The breakpoints are designated in the CSS with the @media (max-width) property. In this example, the breakpoint for tablet is set to 1000px. The breakpoint for the phone is set to 700px. These values are somewhat arbitrary, and are specific to the needs of this particular design.
The desktop view has a static width of 1000px. The tablet and phone views are set to 100% wide, so they always fill the width of the screen.
The menu items on the desktop view have long text phrases. The tablet view has shortened versions of those phrases to avoid overlapping or wrapping of the menu. The phone view has the longer names again, but they are each presented on their own line.
Classes are applied to menu items (class="desktop", class="tablet", and class="phone"). In the default desktop view, the tablet and phone classes are set to display: none. At the tablet breakpoint, the desktop and phone classes are set to display: none. At the phone breakpoint, the desktop and tablet classes are set to display: none.
The desktop view has two columns (with CSS float in the main content area. The tablet and phone views have only one column (CSS is set to float: none). With floating turned off, the content that was on the right moves below the content that was on the left.
The graphics on tablet and phone views are set to a maximum width of 100%, and the height is set to auto. In particular, this prevents the top logo from being too wide when the viewport is very narrow.
In the defalt desktop view, the floating graphic in the middle of the content (the image of the books) has the text wrapping around it, but in the tablet and phone views, the image is set to float: none, because otherwise the wrapped text can look awkward and be difficult to read.

Accessibility Considerations

Ensure that users do not need to scroll from side to side at any screen size.
Ensure that the flow of the text is readable, and that floating images don't cause overly narrow sections of wrapped text.
Ensure users can zoom in (don't disable zoom).
Ensure the font size is large enough to read for average users without zooming in.
Ensure the navigation is compact and easy to read at all screen sizes.