Responsive Web Design

This is a high-level introduction to Responsive Web Design I gave to the digital agency I was working at the time. I mainly focused on the visual possibilites of adaptable designs without delving too deep into the more technical side of things. The presentation has a few embedded videos to illustrate how the designs adapt as we reduce the browser window. Drop me a line if you'd like to take a look at the original Keynote file: hi@recio-sjogren.com

Transcript

1. RESPONSIVE WEB DESIGN MANOLO RECIO-SJÖGREN
2. Hello
3. MOBILE TABLET LAPTOP MONITOR
5. MOBILE TABLET LAPTOP MONITOR
6. alistapart.com/articles/responsive-web-design
9. 1 2 3 FLEXIBLE GRID
10. website with grid on top
11. 1 2 3 FLEXIBLE IMAGES & MEDIA
12. img { max-width: 100%; }
14. img, video, object { max-width: 100%; }
15. 1 2 3 CSS MEDIA QUERIES
16. w3.org/TR/css3-mediaqueries
17. w3.org/TR/css3-mediaqueries
18. Meet your media query.
19. @media (max-device-width: 480px) and (orientation: portrait) { }
20. Some action please
27. Serious talking now
28. hicksdesign.co.uk
29. hicksdesign.co.uk
32. informationarchitects.jp
33. informationarchitects.jp
35. stephencaver.com
36. stephencaver.com
39. thinkvitamin.com
40. thinkvitamin.com
41. colly.com
42. colly.com
46. Although
48. approximations based on actual device testing - font rendering will vary... http://colly.com/ these are also mobile... WebKit WebKit slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
49. approximations based on actual device testing - font rendering will vary... http://colly.com/ these are also mobile... WebKit WebKit slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
50. http://colly.com/ *OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs. as are these... the iPhone is #1 device for OperaMini
51. http://colly.com/ 77mm 47mm expect many more tablet devices on the market soon... and these... insanely tiny! Mozilla
54. alistapart.com/articles/responsive-web-design abookapart.com/products/responsive-web-design thinkvitamin.com/library/responsive-web-design Ethan Marcotte presentation at FOWD2011 (on the server) coding.smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design/