Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design & WordPress

5ef4c4c2ba2bae0ac22e66a879288bee?s=47 Mark Mitchell
January 20, 2012

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

5ef4c4c2ba2bae0ac22e66a879288bee?s=128

Mark Mitchell

January 20, 2012
Tweet

Transcript

  1. Responsive Web Design & WordPress

  2. World at large.

  3. Pixel-perfect.

  4. Everything is broken.

  5. None
  6. None
  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

  28. None
  29. None
  30. None
  31. None
  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