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.

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. Tweet Away!
#WCPune2013
@kingsidharth

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?

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. Break Points
& Layouts
think columns
Desktop: 2-3 Columns
Tablets: 1-2 Columns
Mobile: 1 Columns

10. Rethink Order of
the Elements

12. Rethink Readability
& Typography

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. 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 }

19. 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 }

20. 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 }

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

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

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

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

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

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. 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

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!