Responsive Web Design, as explained by David Hasslehoff

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.

Hoff

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

Hoff

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

fluidlayout

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

fixedlayout

We face an ever-growing array of mobile devices

Hoff

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

Hoff

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:

viewport

Examples:

Media Queries Are Key

Hoff

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

Hoff

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.

mobilebrowsers

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.

mobilenavigation

Image credit: UX Booth

In Conclusion…

Hoff

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

Nathan Cross

About Nathan Cross

Nathan is a senior developer whose forte is creating squeaky clean code that leverages the latest and cross-browser and device compatibility. He’s well versed in responsive design, HTML5, and data-driven CMS development.
This entry was posted in Responsive Design, UI/UX and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*