Make it Responsive! the logic, the code & tricks of trade

67975d5fca1c85d9222b57258d938d88?s=47 King Sidharth
February 23, 2013

Make it Responsive! the logic, the code & tricks of trade

A talk on Responsive Web Design (RWD) for WordPress Themes for WordCamp Pune 2013.

67975d5fca1c85d9222b57258d938d88?s=128

King Sidharth

February 23, 2013
Tweet

Transcript

  1. Make it Responsive! the logic, the code & tricks of

    trade A talk on Responsive Web Design (RWD) for WordPress Themes by King Sidharth for WordCamp Pune 2013
  2. #WCPune2013 @kingsidharth Tweet Away!

  3. What is Responsive Design? An approach aimed at crafting sites

    to provide an optimal viewing experience across a wide range of devices.
  4. That’s @mashable’s btw

  5. Why Responsive Design?

  6. None
  7. Make it Responsive the Logic

  8. K.I.S.S. Keep It Simple, Stupid! Keep only bare minimum and

    leave out all the rest.
  9. Desktop: 2-3 Columns Tablets: 1-2 Columns Mobile: 1 Columns Break

    Points & Layouts think columns
  10. Rethink Order of the Elements

  11. None
  12. Rethink Readability & Typography

  13. None
  14. Rethink Images

  15. http://www.fuelyourcreativity.com

  16. Make it Responsive the Code

  17. CSS Crash Course <div class=”boy” id=”kingsidharth”></div> <div class=”boy” id=”aniket pant”></div>

    <div class=”boy” ></div> <div class=”girl” id=”nisthadixit”></div>
  18. <div class=”boy” id=”kingsidharth”></div> <div class=”boy” id=”aniket pant”></div> <div class=”boy” ></div>

    <div class=”girl” id=”nisthadixit”></div> div { flirt: yes; } All Humans { are flirt } Elements
  19. <div class=”boy” id=”kingsidharth”></div> <div class=”boy” id=”aniket pant”></div> <div class=”boy” ></div>

    <div class=”girl” id=”nisthadixit”></div> .boy { flirt: yes; } All Boys { are flirt } Class
  20. <div class=”boy” id=”kingsidharth”></div> <div class=”boy” id=”aniket pant”></div> <div class=”boy” ></div>

    <div class=”girl” id=”nisthadixit”></div> #kingsidharth { flirt: yes; } King Sidharth { is a flirt } ID’s
  21. @media queries @media all and (min-width:500px) { … } @media

    (min-width:500px) { … } @media (orientation: portrait) { … } @media all and (orientation: portrait) { … } Remember Break Points?
  22. View Port Setting

  23. None
  24. <meta name="viewport" content="width=device-width"> @-o-viewport { width: device-width; }

  25. None
  26. Use a CSS Framework Inuit.css Zurb Foundation Twitter Bootstrap To

    avoid work, common bugs & cross browser compatibility issues.
  27. Make it Responsive Tricks of the Trade

  28. Navigation To Play Hide n’ Seek or Not

  29. None
  30. None
  31. Thumb Rule: If it’s too long - hide it.

  32. Kill Images on Mobile Coz it’s loading...

  33. None
  34. Thumb Rule: If they are not important - kill them.

  35. Don’t Resize Test it for Real on Real Devices

  36. Pornography for Developers Some ideas & problems to think about

  37. Social Media Buttons They don’t work on mobiles and some

    tablets
  38. Responsive Design Options for Theme Backend Warning: Still in Experimental

    Phase
  39. ‣ Hide / Show / Rearrange Sections ‣ Navigation Options

    (Push-down or show-all) ‣ Define Break Points (Set Defaults for popular devices already) ‣ Lazy Load Images ‣ Kill Social Media Buttons and Fixed Elements Responsive Design Options for Theme Backend
  40. Want to improve UX of your blog? My talk from

    WordCamp Baroda: www.64notes.com/speaking/wcbrd-2013
  41. King Sidharth Co-Founder Web Mutiny 19+2 Years Old Entrepreneur Designer

    Artist Public Speaker www.64notes.com/speaking/wcpune-2013 www.64notes.com king@kingsidharth.com @kingsidharth
  42. Questions or Threats? Thank You!