Successfully reported this slideshow.

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

0

Share

1 of 42
1 of 42

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

0

Share

Download to read offline

Description

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.

Transcript

  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 & Layouts think 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 Bootstrap To avoid work, common bugs & cross browser compatibility issues.
  22. 22. Make it Responsive Tricks of the Trade
  23. 23. Navigation To 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 Resize Test it for Real on Real Devices
  28. 28. Pornography for Developers Some ideas & problems to think about
  29. 29. Social Media Buttons They 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 Speaker www.64notes.com/speaking/wcpune-2013 www.64notes.com king@kingsidharth.com @kingsidharth
  34. 34. Questions or Threats? Thank You!

Description

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.

Transcript

  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 & Layouts think 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 Bootstrap To avoid work, common bugs & cross browser compatibility issues.
  22. 22. Make it Responsive Tricks of the Trade
  23. 23. Navigation To 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 Resize Test it for Real on Real Devices
  28. 28. Pornography for Developers Some ideas & problems to think about
  29. 29. Social Media Buttons They 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 Speaker www.64notes.com/speaking/wcpune-2013 www.64notes.com king@kingsidharth.com @kingsidharth
  34. 34. Questions or Threats? Thank You!

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×