Elements of Responsive Web Design

“So, I’ve been hearing about Responsive Web Design. What is
it, exactly?”

– Ethan Marcotte, Responsive Web Design “We can embrace the
flexibility inherent to the web, without surrendering the control we require as designers. All by embedding standards-based technologies in our work, and by making a slight change in our philosophy toward online design.”

We can use the fluidity of HTML, CSS and Javascript
to create designs that provide optimal experiences by responding to device context.

“Ok, but why should I care about Responsive Web Design?”

For years, we designed for this…

…and then this happened.

Responsive Web Design gives us the tools to handle the
ever-increasing number of devices in the wild in a future-friendly* fashion. * http://futurefriend.ly/

“Well, how do I implement a responsive site?”

Elements of Responsive Design

Elements of Responsive Design 1 Fluid Grids Fg

Elements of Responsive Design 1 Fluid Grids Fg 2 Flexible
Images Fi

Elements of Responsive Design 1 Fluid Grids Fg 2 Flexible
Images Fi 3 Media Queries Mq

Here’s some basic, responsive boilerplate <!DOCTYPE html> <html> <head>
<meta charset="utf-‐8"> <meta name="viewport" content="width=device-‐width, initial-‐scale=1.0"> </head> <body> … </body> </html>

Let’s add a simple grid <!DOCTYPE html> <html> <head>
<meta charset="utf-‐8"> <meta name="viewport" content="width=device-‐width, initial-‐scale=1.0"> <link rel="stylesheet" href="grid.css"> </head> <body> <div class="grid"> <div class="col-‐2-‐3"> … </div> <div class="col-‐1-‐3"> … </div> </div> </body> </html> Hat tip to @chriscoyier and http://css-tricks.com/dont-overthink-it-grids/

And now some styles to make the grid work *,
*:after, *:before { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } .grid { padding: 1em 0 1em 1em } .grid:after { content: ""; display: table; clear: both; } [class*='col-‐'] { float: left; padding-‐right: 1em; } .col-‐2-‐3 { width: 66.66% } .col-‐1-‐3 { width: 33.33% } Hat tip to @chriscoyier and http://css-tricks.com/dont-overthink-it-grids/

Fluid grids scale to the device… …but our layout doesn’t
quite work.

Let’s use a media query to refine the layout. *,
*:after, *:before { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } .grid { padding: 1em 0 1em 1em } .grid:after { content: ""; display: table; clear: both; } [class*='col-‐'] { float: left; padding-‐right: 1em; } @media screen and (min-‐device-‐width: 480px ) { .col-‐2-‐3 { width: 66.66% } .col-‐1-‐3 { width: 33.33% } } Hat tip to @chriscoyier and http://css-tricks.com/dont-overthink-it-grids/

And now the layout responds accordingly. Two columns about @
480px and above Single column below 480px

Now, let’s make our images flex. *, *:after, *:before {
-‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } .grid { padding: 1em 0 1em 1em } .grid:after { content: ""; display: table; clear: both; } [class*='col-‐'] { float: left; padding-‐right: 1em; } img { max-‐width: 100% } // yep, that’s it @media screen and (min-‐device-‐width: 480px ) { .col-‐2-‐3 { width: 66.66% } .col-‐1-‐3 { width: 33.33% } }

And now our images can flex with the layout. Two
columns about @ 480px and above Single column below 480px

Of course, this requires scaling a single, larger image. There’s
a lot of work going on to find better solutions for flexible images, such as the <picture> element.

There’s a lot more to it, but that covers the
basics* of Responsive Web Design. *Your mileage may vary. Support for IE quirks will require more work!

Buzz phrases to consider when thinking responsively Mobile First Design
for the constraints of mobile devices first and craft your design to respond as capabilities increase. Content Out Design responsive sites around content needs. Progressive Enhancement Start with a simple core and add features when capabilities appear on various devices. Speed Wins Design for the fastest display you can; eject everything you don’t need.

Jeffrey Zeldman, Responsive Design. I don’t think that word means
what you think it means. http://bit.ly/oP8eei “...the purpose behind “responsive design”—the concept of what it strives to achieve—should be separated from the specific techniques used to achieve it. As the worldwide community embraces [Ethan’s] idea (and as new methods of CSS layout become practical), the techniques of responsive design will continue to improve and, dare I say it, adapt.”

The original concept is fine, but it only addresses some
needs. We need to broaden our notion of ‘responsive’.

Other approaches to being responsive Adaptive Web Design http://www.lullabot.com/articles/responsive-adaptive-web- design
RESS: Responsive Design + Server Side Components http://www.lukew.com/ff/entry.asp?1392

Some Responsive Design Tools Adobe Shadow labs.adobe.com/technologies/shadow/ Aptus In the
Mac App Store Firefox 15 getfirefox.com Gridset gridsetapp.com ZURB Foundation foundation.zurb.com

“Ok, I get it! So all of my sites should
be responsive from now on, right?”

Ok, maybe not “always”. Ask your doctor if an alternative
approach may be right for you.

Thanks! Questions?

Principal Consultant, Mobile Practice Lead [email protected] @stonehippo George White

Elements of Responsive Web Design

Elements of Responsive Web Design

More Decks by George White

Other Decks in Technology

Featured

Transcript