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 full-size slide

  2. #WCPune2013
    @kingsidharth
    Tweet Away!

    View full-size 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 full-size slide

  4. That’s @mashable’s btw

    View full-size slide

  5. Why Responsive Design?

    View full-size slide

  6. Make it Responsive
    the Logic

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Rethink Order of
    the Elements

    View full-size slide

  10. Rethink Readability
    & Typography

    View full-size slide

  11. Rethink Images

    View full-size slide

  12. http://www.fuelyourcreativity.com

    View full-size slide

  13. Make it Responsive
    the Code

    View full-size slide

  14. CSS Crash Course




    View full-size slide





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

    View full-size slide





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

    View full-size slide





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

    View full-size slide

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

    View full-size slide

  19. View Port Setting

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Make it Responsive
    Tricks of the Trade

    View full-size slide

  23. Navigation
    To Play Hide n’ Seek or Not

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. ‣ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Questions or
    Threats?
    Thank You!

    View full-size slide