Responsive Web Design
RWD Definition
“Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”
Layout For Various Screen Sizes
IN THE PAST
AND PRESENT
The Viewport Meta Tag
Don't forget to add the Viewport Meta Tag to the head section of you HTML files. With this tag the browser can detect mobile devices and control zooming. Below is the most common version of it. Copy and paste this between the head tags of your HTML markup:
HTML code:
<meta content="width=device-width, initial-scale=1.0" name="viewport">
The example below shows how the viewport tag effects a layout.
There's no viewport tag in place on the left. The layout appears zoomed out which makes it necessary to zoom in if you want to read or use the navigation.
There's a viewport tag in the middle which makes the layout appear scaled 1:1 ("un-zoomed"). Horizontal scrolling is necessary to read or navigate.
The right example has viewport tag and media queries: No horizontal scrolling and easy to navigate. A size-optimized design.
Articles
- Ethan Marcotte's article from 2010 (started it all...)
- Frameworks (Principles for RWD)
- The Infinite Grid
- Beginners guide on treehouse
Responsive Design Patterns:
- 5 Really Useful Responsive Web Design Patterns
- Multi-Device Layout Patterns
- Responsive Navigation Patterns
- Responsive Navigation Patterns (examples)
- Responsive Navigation Patterns 2
- Complex Navigation Patterns for Responsive Design