2. âSo, Iâve been hearing about
Responsive Web Design.
What is it, exactly?â
3. â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.â
â Ethan Marcotte,
Responsive Web Design
4. We can use the fluidity of HTML, CSS and
Javascript to create designs that provide optimal
experiences by responding to device context.
5. âOk, but why should I care about
Responsive Web Design?â
8. 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/
12. 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/
13. And now some styles to make the grid work
*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:
ding: 1em 0 1em 1em }
{ content: ""; display: table; clear: both;}
l-'] { float: left; padding-right: 1em;}
width: 66.66% }
width: 33.33% }
Hat tip to @chriscoyier and http://css-tricks.com/dont-overthink-it-grids/
14. Fluid grids scale to the deviceâŠ
âŠbut our layout doesnât quite work.
15. Letâs use a media query to refine the layout.
after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-si
{ padding: 1em 0 1em 1em }
:after { content: ""; display: table; clear: both;}
s*='col-'] { float: left; padding-right: 1em;}
a 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/
16. And now the layout responds accordingly.
Single column below 480px Two columns about @ 480px and above
18. And now our images can flex with the layout.
Single column below 480px Two columns about @ 480px and above
19. 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.
20. 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!
21. 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.
22. â...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.â
Jeffrey Zeldman,
Responsive Design. I donât think that word means what you think it means.http://bit.ly/oP8eei
23. The original concept is fine, but it only addresses
some needs. We need to broaden our notion of
âresponsiveâ.
24. 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
25. 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
26. âOk, I get it!
So all of my sites should be
responsive from now on, right?â