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

  • View

  • Download

Embed Size (px)


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.

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

  • 1. Beyond Responsive Web Design...let a thousand devices bloom...

2. Who am I? 3. Responsive Web Design? 4. Ethan Marcotte (@beep), On Being ResponsiveA responsive design iscomposed of threedistinct parts: 5. 1. A exible grid. 6. 1. A exible grid.2. Flexible images. Or more specically, imagesthat work in a exible context. 7. 1. A exible grid.2. Flexible images. Or more specically, imagesthat work in a exible 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 oneuses mobile anyway.iPhones and Android phones canbrowse the current web just ne. 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 shouldnt mean more stu. 23. Back to the basics:1. A exible 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. Youre already halfway there... 26. Flexible ImagesTwo methods: foreground ()and background (CSS) 27. Flexible s max-width: 100%; width: 100%; overow: hidden; 28. Flexible backgroundsUse background-position to selectively crop your backgrounds http://goo.gl/YLLC3 29. Responsive Images Uses .htaccess to lookfor responsive imagerequests, and feedsthem a 1pxtransparent .gif Then, uses JS todetect browser widthand load theappropriate-size imageaccordinglyhttp://goo.gl/Eu3zA 30. And now, the moment youve been waiting for... 31. Media Queries Ever make a print stylesheet before? 32. Media QueriesIn your HTML: 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 rst 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 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 Dene keyframes in CSS Set duration, number of iterations, animation direction, timing function only works in webkit 42. What if my phone cant 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. Thats about it...Questions?@kzurawelhttp://arborwebsolutions.com