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
Slide 2
Slide 2 text
#WCPune2013
@kingsidharth
Tweet Away!
Slide 3
Slide 3 text
What is Responsive Design?
An approach aimed at crafting sites to
provide an optimal viewing
experience across a wide range of
devices.
Slide 4
Slide 4 text
That’s @mashable’s btw
Slide 5
Slide 5 text
Why Responsive Design?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Make it Responsive
the Logic
Slide 8
Slide 8 text
K.I.S.S.
Keep It Simple, Stupid!
Keep only bare minimum and leave out all
the rest.
div {
flirt: yes;
}
All Humans { are flirt }
Elements
Slide 19
Slide 19 text
.boy {
flirt: yes;
}
All Boys { are flirt }
Class
Slide 20
Slide 20 text
#kingsidharth {
flirt: yes;
}
King Sidharth { is a flirt }
ID’s
Slide 21
Slide 21 text
@media queries
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }
Remember Break Points?
Slide 22
Slide 22 text
View Port Setting
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
@-o-viewport {
width: device-width;
}
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Use a CSS
Framework
Inuit.css
Zurb Foundation
Twitter Bootstrap
To avoid work, common bugs & cross
browser compatibility issues.
Slide 27
Slide 27 text
Make it Responsive
Tricks of the Trade
Slide 28
Slide 28 text
Navigation
To Play Hide n’ Seek or Not
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Thumb Rule:
If it’s too long - hide it.
Slide 32
Slide 32 text
Kill Images on
Mobile
Coz it’s loading...
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Thumb Rule:
If they are not important - kill them.
Slide 35
Slide 35 text
Don’t Resize
Test it for Real on Real Devices
Slide 36
Slide 36 text
Pornography
for Developers
Some ideas & problems to think about
Slide 37
Slide 37 text
Social Media
Buttons
They don’t work on mobiles and some
tablets
Slide 38
Slide 38 text
Responsive Design
Options for
Theme Backend
Warning: Still in Experimental Phase
Slide 39
Slide 39 text
‣ 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
Slide 40
Slide 40 text
Want to improve
UX of your blog?
My talk from WordCamp Baroda:
www.64notes.com/speaking/wcbrd-2013
Slide 41
Slide 41 text
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