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
   

   View Slide

2. #WCPune2013
   @kingsidharth
   Tweet Away!
   

   View Slide

3. What is Responsive Design?
   An approach aimed at crafting sites to
   provide an optimal viewing
   experience across a wide range of
   devices.
   

   View Slide

4. That’s @mashable’s btw
   

   View Slide

5. Why Responsive Design?
   

   View Slide

6. View Slide

7. Make it Responsive
   the Logic
   

   View Slide

8. K.I.S.S.
   Keep It Simple, Stupid!
   Keep only bare minimum and leave out all
   the rest.
   

   View Slide

9. Desktop: 2-3 Columns
   Tablets: 1-2 Columns
   Mobile: 1 Columns
   Break Points
   & Layouts
   think columns
   

   View Slide

10. Rethink Order of
    the Elements
    

    View Slide

11. View Slide

12. Rethink Readability
    & Typography
    

    View Slide

13. View Slide

14. Rethink Images
    

    View Slide

15. http://www.fuelyourcreativity.com
    

    View Slide

16. Make it Responsive
    the Code
    

    View Slide

17. CSS Crash Course
    
    
    
    
    

    View Slide

18. 
    
    
    
    div {
    flirt: yes;
    }
    All Humans { are flirt }
    Elements
    

    View Slide

19. 
    
    
    
    .boy {
    flirt: yes;
    }
    All Boys { are flirt }
    Class
    

    View Slide

20. 
    
    
    
    #kingsidharth {
    flirt: yes;
    }
    King Sidharth { is a flirt }
    ID’s
    

    View Slide

21. @media queries
    @media all and (min-width:500px) { … }
    @media (min-width:500px) { … }
    @media (orientation: portrait) { … }
    @media all and (orientation: portrait) { … }
    Remember Break Points?
    

    View Slide

22. View Port Setting
    

    View Slide

23. View Slide

24. content="width=device-width">
    @-o-viewport {
    width: device-width;
    }
    

    View Slide

25. View Slide

26. Use a CSS
    Framework
    Inuit.css
    Zurb Foundation
    Twitter Bootstrap
    To avoid work, common bugs & cross
    browser compatibility issues.
    

    View Slide

27. Make it Responsive
    Tricks of the Trade
    

    View Slide

28. Navigation
    To Play Hide n’ Seek or Not
    

    View Slide

29. View Slide

30. View Slide

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

    View Slide

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

    View Slide

33. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

40. Want to improve
    UX of your blog?
    My talk from WordCamp Baroda:
    www.64notes.com/speaking/wcbrd-2013
    

    View Slide

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
    

    View Slide

42. Questions or
    Threats?
    Thank You!
    

    View Slide