Mobile Monday Presentation: Responsive Web Design

Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Elements ofResponsiveWeb Design
  • 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 ourwork, and by making a slight change in our philosophytoward online design.” – Ethan Marcotte, Responsive Web Design
  • 4. We can use the fluidity of HTML, CSS andJavascript to create designs that provide optimal experiences by responding to device context.
  • 5. “Ok, but why should I care about Responsive Web Design?”
  • 6. For years, we designed for this…
  • 7. …and then this happened.
  • 8. Responsive Web Design gives us the tools to handlethe ever-increasing number of devices in the wild in a future-friendly* fashion.
  • 9. “Well, how do I implement a responsive site?”
  • 10. Elements of Responsive Design 1 Fg 2 Fi 3 MqFluid Grids Flexible Images Media Queries
  • 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. 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. 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. 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
  • 16. And now the layout responds accordingly. Single column below 480px Two columns about @ 480px and above
  • 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. 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 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. “...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. The original concept is fine, but it only addresses some needs. We need to broaden our notion of ‘responsive’.
  • 24. Other approaches to being responsiveAdaptive Web Design Responsive Design + Server SideComponents
  • 25. Some Responsive Design Tools Adobe Shadow Aptus In the Mac App Store Firefox 15 Gridset ZURB Foundation
  • 26. “Ok, I get it! So all of my sites should beresponsive from now on, right?”
  • 27. YES
  • 28. Ok, maybe not “always”.Ask your doctor if an alternative approach may be right for you.
  • 29. Thanks! Questions?
  • 30. George WhitePrincipal Consultant, Mobile Practice