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

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!