Your SlideShare is downloading. ×
0
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Monday Presentation: Responsive Web Design

1,304

Published 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.

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,304
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. http://futurefriend.ly/
  • 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 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
  • 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.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 responsiveAdaptive Web Designhttp://www.lullabot.com/articles/responsive-adaptive-web-designRESS: Responsive Design + Server SideComponentshttp://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 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 Leadgeorge@cantina.co@stonehippo

×