Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

King Sidharth
February 23, 2013

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

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

King Sidharth

February 23, 2013
Tweet

More Decks by King Sidharth

Other Decks in Design

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
    [email protected]
    @kingsidharth

    View Slide

  42. Questions or
    Threats?
    Thank You!

    View Slide