Mobile Monday Presentation: Responsive Web Design
Post on 15-Jan-2015
1213 Views
Preview:
DESCRIPTION
Transcript
Elements ofResponsiveWeb Design
“So, I’ve been hearing aboutResponsive 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 aboutResponsive 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
1Fluid Grids
Fg2
Flexible Images
Fi3
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 aboveSingle 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 aboveSingle 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 FirstDesign for the constraints of mobile devices first and craft your design to respond as capabilities increase.
Content OutDesign responsive sites around content needs.
Progressive EnhancementStart with a simple core and add features when capabilities appear on various devices.
Speed WinsDesign 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 Designhttp://www.lullabot.com/articles/responsive-adaptive-web-design
RESS: Responsive Design + Server Side Componentshttp://www.lukew.com/ff/entry.asp?1392
Some Responsive Design Tools
Adobe Shadowlabs.adobe.com/technologies/shadow/
AptusIn the Mac App Store
Firefox 15getfirefox.com
Gridsetgridsetapp.com
ZURB Foundationfoundation.zurb.com
“Ok, I get it!So all of my sites should be
responsive from now on, right?”
YES
Ok, maybe not “always”.
Ask your doctor if an alternative approachmay be right for you.
Thanks!Questions?
Principal Consultant, Mobile Practice Lead
george@cantina.co@stonehippo
George White
top related