(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)

on

  • 9,277 views

My presentation from WordCamp Miami 2011, Beyond "Responsive Web Design". This is a totally re-worked version of my previous presentation, with a focus on how to actually implement responsive design.

My presentation from WordCamp Miami 2011, Beyond "Responsive Web Design". This is a totally re-worked version of my previous presentation, with a focus on how to actually implement responsive design.

Statistics

Views

Total Views
9,277
Views on SlideShare
7,972
Embed Views
1,305

Actions

Likes
21
Downloads
187
Comments
1

12 Embeds 1,305

http://blog.websourcing.fr 742
http://seenthis.net 413
http://wordcampmia.com 98
http://blog.notjustasquare.net 28
http://paper.li 9
http://twitter.com 3
http://coderwall.com 3
https://www.seenthis.net 3
http://94.seenthis.net 3
http://www.techgig.com 1
http://us-w1.rockmelt.com 1
http://www.seenthis.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • ritakoneh@hotmail.co.uk
    Hello My New friend
    My name is rita i saw your profile at(www.slideshare.net) and i love it i think we can click so please i will like you to email me back through my email address thus: so that i can told you more about me and give you my sweet picture so that you can know me will ok.
    Awaiting to see your lovely reply soonest.
    Miss rita ritakoneh@hotmail.co.uk
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

(Practical) Beyond Responsive Web Design (WordCamp Miami 2011) Presentation Transcript

  • 1. Beyond “Responsive Web Design” “...let a thousand devices bloom...”
  • 2. Who am I?
  • 3. Responsive Web Design?
  • 4. Ethan Marcotte (@beep), “On Being Responsive”“A responsive design iscomposed of threedistinct parts:”
  • 5. 1. A flexible grid.
  • 6. 1. A flexible grid. 2. Flexible images. Or more specifically, imagesthat work in a flexible context.
  • 7. 1. A flexible grid. 2. Flexible images. Or more specifically, imagesthat work in a flexible context. 3. Media queries.
  • 8. Great.So what do ResponsiveWeb Designs look like?
  • 9. Colly.com?
  • 10. Flexible grid Flexible images Media queries
  • 11. “Switchy” designNot responsive design
  • 12. Hicksdesign.co.uk?
  • 13. Flexible grid Flexible images Media queries
  • 14. Awesome.So why do I care?
  • 15. “RWD is just fancy tricks for mobile, and no one uses mobile anyway.”“iPhones and Android phones canbrowse the current web just fine.”
  • 16. Really? Think again.
  • 17. What is “mobile?”
  • 18. 2010: 38% of US cell phone users access the Internet on their phones (about 89 million) 53% of cell phone Internet users access websites at least once per day In 2009, only 17% of US cell phone users owned smartphoneshttp://goo.gl/YMtgf
  • 19. So how do we do this thing?
  • 20. It all starts with planning.
  • 21. Luke Wroblewski (@lukew): http://goo.gl/0kTal
  • 22. More space shouldn’t mean more stuff.
  • 23. Back to the basics: 1. A flexible grid. 2. Flexible images. 3. Media queries.
  • 24. Flexible / Fluid Grids• Size everything in ems or percentages• Flexible: Ems for everything• Fluid: Percentages for width, ems for height• The Golden Formula: target ÷ context = result
  • 25. You’re already halfway there...
  • 26. Flexible Images Two methods: foreground (<img>)and background (CSS)
  • 27. Flexible <img>s• max-width: 100%; width: 100%;• overflow: hidden;
  • 28. Flexible backgroundsUse background-position to selectively crop your backgrounds http://goo.gl/YLLC3
  • 29. Responsive Images • Uses .htaccess to look for “responsive” image requests, and feeds them a 1px transparent .gif • Then, uses JS to detect browser width and load the appropriate-size image accordinglyhttp://goo.gl/Eu3zA
  • 30. And now, the moment you’ve been waiting for...
  • 31. Media Queries• Ever make a print stylesheet before?• <link rel=”stylesheet” href=”#” media=”screen” />• <link rel=”stylesheet” href=”#” media=”print” />
  • 32. Media Queries In your HTML:<link rel=”stylesheet” href=”#” media=”screen and (min-device-width: 640px)” /> In a stylesheet: @media screen and (orientation:landscape) { #content { ... } }
  • 33. • height • color• width • color-index• device-height • monochrome• device-width • resolution• orientation • scan• aspect-ratio • grid• device-aspect-ratio
  • 34. Remember: Mobile First! • No support for media queries is the first media query • Mobile stylesheet + media queries = desktop site
  • 35. Mobile Viewports• Newer smartphones pretend to be much larger than they actually are (980px for iPhone)...• ...meaning they get your desktop stylesheet.
  • 36. Mobile Viewports<meta name=”viewport” content=”width=device-width, initial-scale=1.0” />
  • 37. Going “beyond...”
  • 38. CSS3 Transforms • rotate • skew • scale • -transform-origin
  • 39. CSS3 Transitions-transition: property duration easing • all • ease • opacity • ease-in • font-size • ease-out • text-shadow • ease-in-out • color • linear • height • cubic-bezier • width • left • top...
  • 40. CSS3 Transitionsnav li a { color: rgb(0,0,0); -webkit-transition: all 1s ease-out;}nav li a:hover { color: rgb(200,0,0); -webkit-transition: all 1s ease-in;}
  • 41. CSS3 Animation• Define keyframes in CSS• Set duration, number of iterations, animation direction, timing function• only works in webkit
  • 42. What if my phone can’t do that?
  • 43. Modernizr.js
  • 44. yepnope.js
  • 45. “The choice is not betweenusing media queries and creatinga dedicated mobile site; thechoice is between using mediaqueries and doing nothing at all.” - Jeremy Keith, “A responsive mind”
  • 46. That’s about it... Questions? @kzurawelhttp://arborwebsolutions.com