Your SlideShare is downloading. ×
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
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

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

8,742

Published on

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.

Published in: Design
1 Comment
21 Likes
Statistics
Notes
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,742
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
188
Comments
1
Likes
21
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. 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

×