Responsive Web Design & WordPress

Wordpress London @ Skills Matter, 19 January 2012

Complete slide notes published on http://www.withoutnations.com/2012/01/22/responsive-web-design-wordpress

Transcript

1. Responsive Web Design & WordPress
2. World at large.
3. Pixel-perfect.
4. Everything is broken.
7. How many?
8. Ebb & flow.
9. Responsive Web Design
10. 1 Flexible grid
11. (target ÷ context) × 100 = result
12. (900px ÷ 960px) × 100 = 93.75%
13. 93.75% (900px ÷ 960px) (600px ÷ 640px) (300px ÷ 320px)
14. #content { width: 900px; width: 93.75%; }
15. 2 Flexible images
16. img { max-width: 100%; height: auto; }
17. 3 Media queries
18. @media screen and (min-width: 320px) { font-size: 1.4em; }
19. 1 Flexible grid 2 Flexible images 3 Media queries
20. ©mediaqueri.es
21. ©mediaqueri.es
22. ©mediaqueri.es
23. ©mediaqueri.es
24. ©mediaqueri.es
25. By the way.
26. WordPress 3.3
27. twentyten / twentyeleven
32. Speed & experience.
33. 194.8KB 826ms onload: 844ms
34. 164.6KB 309ms onload: 317ms
35. Make it magic.
36. Hand-rolled.
37. #content { float: none; width: 100%; font-size: 1.5em; }
38. @media screen and (min-width: 768px) { #content { float: left; width: 65%; font-size: 1.4em; } }
39. if(document. documentElement. clientWidth > 600) { helloWorld(); }
40. if (matchMedia) { var mqTablet = window.matchMedia( “(min-width: 768px)”); mqTablet.addListener(newEvent); } function newEvent(mqTablet) { if (mqTablet.matches) { helloWorld(); } else { goodbyeWorld(); } }
41. Store-bought.
42. Uber / Reverie / DailyPost / Super Skeleton WP / Reaction / PixelPower / Aware / Swagger / SWIX / Knead / The Novelist / Modulo / Momento / Instyle / Lucky Times / Alternate / Gigawatt / Artboard / Entrée / SevenWonders / Propulsion / Saviour / Good Minimal / iTheme2 / BonPress / Ari / Constellation / Scherzo / Renova / Blaskan / Yoko / Responsive Twenty Ten / Frisco
43. @withoutnations