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

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

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?
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
12. Rethink Readability & Typography
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
24. <meta name="viewport" content="width=device-width"> @-o-viewport { width: device-width; }
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
31. Thumb Rule: If it’s too long - hide it.
32. Kill Images on Mobile Coz it’s loading...
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!