Elements ofResponsiveWeb Design
“So, I’ve been hearing about  Responsive Web Design.    What is it, exactly?”
“We can embrace the flexibility inherent to the web,without surrendering the control we require as designers.All by embedd...
We can use the fluidity of HTML, CSS andJavascript to create designs that provide optimal experiences by responding to dev...
“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 handlethe ever-increasing number of devices in the wild in             a futur...
“Well, how do I implement a responsive site?”
Elements of Responsive Design 1 Fg                  2                  Fi                                  3              ...
Here’s some basic, responsive boilerplate<!DOCTYPE html><html><head>     <meta charset="utf-8">     <meta name="viewport" ...
Let’s add a simple grid<!DOCTYPE html><html><head>     <meta charset="utf-8">     <meta name="viewport" content="width=dev...
And now some styles to make the grid work *:before {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;   ...
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: bord...
And now the layout responds accordingly. Single column below 480px   Two columns about @ 480px and above
Now, let’s make our images flex.*:before {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;   box-sizing...
And now our images can flex with the layout.  Single column below 480px   Two columns about @ 480px and above
Of course, this requires scaling a single, larger                       image.There’s a lot of work going on to find bette...
There’s a lot more to it, but that covers the basics* of              Responsive Web Design.               *Your mileage m...
Buzz phrases to consider when thinking            responsivelyMobile FirstDesign for the constraints of mobile devices fir...
“...the purpose behind “responsive design”—the conceptof what it strives to achieve—should be separated fromthe specific t...
The original concept is fine, but it only addresses some needs. We need to broaden our notion of                  ‘respons...
Other approaches to being responsiveAdaptive Web Designhttp://www.lullabot.com/articles/responsive-adaptive-web-designRESS...
Some Responsive Design Tools    Adobe Shadow    labs.adobe.com/technologies/shadow/    Aptus    In the Mac App Store    Fi...
“Ok, I get it!  So all of my sites should beresponsive from now on, right?”
YES
Ok, maybe not “always”.Ask your doctor if an alternative approach          may be right for you.
Thanks! Questions?
George WhitePrincipal Consultant, Mobile Practice Leadgeorge@cantina.co@stonehippo
Upcoming SlideShare
Loading in...5
×

Mobile Monday Presentation: Responsive Web Design

1,321

Published on

Real world aspects of implementing flexible, mobile and future-friendly sites through responsive design.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,321
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Monday Presentation: Responsive Web Design

  1. 1. Elements ofResponsiveWeb Design
  2. 2. “So, I’ve been hearing about Responsive Web Design. What is it, exactly?”
  3. 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 ourwork, and by making a slight change in our philosophytoward online design.” – Ethan Marcotte, Responsive Web Design
  4. 4. We can use the fluidity of HTML, CSS andJavascript to create designs that provide optimal experiences by responding to device context.
  5. 5. “Ok, but why should I care about Responsive Web Design?”
  6. 6. For years, we designed for this…
  7. 7. …and then this happened.
  8. 8. Responsive Web Design gives us the tools to handlethe ever-increasing number of devices in the wild in a future-friendly* fashion. http://futurefriend.ly/
  9. 9. “Well, how do I implement a responsive site?”
  10. 10. Elements of Responsive Design 1 Fg 2 Fi 3 MqFluid Grids Flexible Images Media Queries
  11. 11. 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>
  12. 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. 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. 14. Fluid grids scale to the device……but our layout doesn’t quite work.
  15. 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. 16. And now the layout responds accordingly. Single column below 480px Two columns about @ 480px and above
  17. 17. Now, let’s make our images flex.*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: bing: 1em 0 1em 1em }{ content: ""; display: table; clear: both;}-] { float: left; padding-right: 1em;}dth: 100% } // yep, that’s itn and (min-device-width: 480px ) { { width: 66.66% } { width: 33.33% }
  18. 18. And now our images can flex with the layout. Single column below 480px Two columns about @ 480px and above
  19. 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. 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. 21. Buzz phrases to consider when thinking responsivelyMobile FirstDesign for the constraints of mobile devices first and craft yourdesign to respond as capabilities increase.Content OutDesign responsive sites around content needs.Progressive EnhancementStart with a simple core and add features when capabilities appearon various devices.Speed WinsDesign for the fastest display you can; eject everything you don’tneed.
  22. 22. “...the purpose behind “responsive design”—the conceptof what it strives to achieve—should be separated fromthe specific techniques used to achieve it. As theworldwide community embraces [Ethan’s] idea (and asnew methods of CSS layout become practical), thetechniques of responsive design will continue to improveand, 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. 23. The original concept is fine, but it only addresses some needs. We need to broaden our notion of ‘responsive’.
  24. 24. Other approaches to being responsiveAdaptive Web Designhttp://www.lullabot.com/articles/responsive-adaptive-web-designRESS: Responsive Design + Server SideComponentshttp://www.lukew.com/ff/entry.asp?1392
  25. 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. 26. “Ok, I get it! So all of my sites should beresponsive from now on, right?”
  27. 27. YES
  28. 28. Ok, maybe not “always”.Ask your doctor if an alternative approach may be right for you.
  29. 29. Thanks! Questions?
  30. 30. George WhitePrincipal Consultant, Mobile Practice Leadgeorge@cantina.co@stonehippo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×