Mobile Monday Presentation: Responsive Web Design


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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.
  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
  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
  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
  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.
  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 Design Responsive Design + Server SideComponents
  25. 25. Some Responsive Design Tools Adobe Shadow Aptus In the Mac App Store Firefox 15 Gridset ZURB Foundation
  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