If he’s good enough to handle a talking car, endless beach babes and German pop stardom, then he’s good enough to explain mobile development technology.
Responsive web design makes the web work across desktops and phones.
Wikipedia defines Responsive Web Design as:
“An approach to web design in which a designer intends to provide an optimal viewing 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).”
Join The Hoff as he explains the ins and outs of the key elements of Responsive Web Design that will help you design once and deploy anywhere.
Fluid vs. Fixed Layout
You need to be infinitely adaptable – just like my career.
Layout creating is a critical factor when designing for scalability across multiple devices.
Fluid/liquid layouts
(to see how it works, expand/collapse your browser window while viewing this example)
- Scale as percentages/ratios
- Good for different desktop monitor resolutions
- Provide less control, odd alignments
- Long lines result in decreased readability
- Layouts visually boring
- Difficult graphic treatments, photos, banners, flash
Fixed layouts
(to see how it works, expand/collapse your browser window while viewing this example)
- Hardcoded widths give more layout control
- Too rigid/inflexible for today’s wider range of resolutions
We face an ever-growing array of mobile devices
There’s a huge variation in device type and level of web support.
- Radically different screen sizes/resolutions
- Different input requirements (finger vs. mouse)
- Differing content requirements (keep it simple, stupid)
- Navigational challenges for deep content
Enter Responsive Web Design
Design once, deploy everywhere!
- Best of both worlds, usability and stylistic control
- Layout based on width of viewport (or screen)
- Variations also can be based upon height, orientation (landscape/portrait), resolution, etc.
The Viewport Size detection determines what you see in Responsive Web Design:
Examples:
Media Queries Are Key
A media query combines a media type and a condition.
Media queries allow designers to specify the look of content by detecting conditions such as width, height, or orientation of the screen (user more specifically, the view port), and delivering a set of styles accordingly.
Inside a stylesheet:
@media screen and (max-width: 600px) {
body { background: blue; }
}
Link to a specific stylesheet:
link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”small.css”
Combine min and max width:
@media screen and (min-width: 600px) and (max-width: 900px) {
body { background: blue; }
}
Detecting device width:
The device width is the actual physical resolution of the device, not the width of the viewport.
@media screen and (max-device-width: 480px) {
body { background: green; }
}
Detecting the iPhone 4 and later:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body { background: red; }
}
Detecting orientation:
link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”
link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”
Related Meta Tags
Assert your authority!
Mobile browsers assume all sites are regular desktop sites, and that you want to see the whole thing. So they shrink it down to fit.
You have tell them otherwise:
meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1”
Navigation Options
Sites with deep content are a challenge because screen real-estate is at a premium. It’s essential to provide direct access and an understanding of content structure with intuitive mobile navigation methods.
Image credit: UX Booth
In Conclusion…
Yeah, what he said.
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”
– John Allsopp, A Dao of Web Design
