Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,281 views

Published on

A talk on Responsive Web Design (RWD) for WordPress Themes for WordCamp Pune 2013. Talking about layouts, image optimisation, typography, media queries, viewport settings etc.

Published in: Design
  • Login to see the comments

  • Be the first to like this

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

  1. 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. 2. Tweet Away!#WCPune2013@kingsidharth
  3. 3. What is Responsive Design?An approach aimed at crafting sites to provide an optimal viewing experience across a wide range of devices.
  4. 4. That’s @mashable’s btw
  5. 5. Why Responsive Design?
  6. 6. Make it Responsive the Logic
  7. 7. K.I.S.S. Keep It Simple, Stupid!Keep only bare minimum and leave out all the rest.
  8. 8. Break Points& Layoutsthink columns Desktop: 2-3 Columns Tablets: 1-2 Columns Mobile: 1 Columns
  9. 9. Rethink Order of the Elements
  10. 10. Rethink Readability & Typography
  11. 11. Rethink Images
  12. 12. http://www.fuelyourcreativity.com
  13. 13. Make it Responsive the Code
  14. 14. 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>
  15. 15. Elements<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 }
  16. 16. Class<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 }
  17. 17. ID’s<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 }
  18. 18. @media queries@media all and (min-width:500px) { … }@media (min-width:500px) { … }@media (orientation: portrait) { … }@media all and (orientation: portrait) { … }Remember Break Points?
  19. 19. View Port Setting
  20. 20. <meta name="viewport"content="width=device-width"> @-o-viewport { width: device-width; }
  21. 21. Use a CSS Framework Inuit.css Zurb Foundation Twitter BootstrapTo avoid work, common bugs & cross browser compatibility issues.
  22. 22. Make it Responsive Tricks of the Trade
  23. 23. NavigationTo Play Hide n’ Seek or Not
  24. 24. Thumb Rule:If it’s too long - hide it.
  25. 25. Kill Images on Mobile Coz it’s loading...
  26. 26. Thumb Rule:If they are not important - kill them.
  27. 27. Don’t ResizeTest it for Real on Real Devices
  28. 28. Pornographyfor DevelopersSome ideas & problems to think about
  29. 29. Social Media ButtonsThey don’t work on mobiles and some tablets
  30. 30. Responsive Design Options for Theme Backend Warning: Still in Experimental Phase
  31. 31. Responsive Design Options for Theme Backend‣ 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
  32. 32. Want to improve UX of your blog? My talk from WordCamp Baroda:www.64notes.com/speaking/wcbrd-2013
  33. 33. King Sidharth Co-Founder Web Mutiny 19+2 Years Old Entrepreneur Designer Artist Public Speakerwww.64notes.com/speaking/wcpune-2013 www.64notes.com king@kingsidharth.com @kingsidharth
  34. 34. Questions or Threats? Thank You!

×