Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Make it Responsive! the logic, the code & tricks of trade
King Sidharth
February 23, 2013
Design
6
6.3k
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
Share
More Decks by King Sidharth
See All by King Sidharth
kingsidharth
0
130
kingsidharth
0
290
kingsidharth
0
110
kingsidharth
0
110
kingsidharth
0
110
kingsidharth
0
680
kingsidharth
2
650
kingsidharth
0
810
kingsidharth
2
560
Other Decks in Design
See All in Design
andpad
0
360
jjgallaher
PRO
0
510
cyberagent_creators
2
19k
jonoda
1
680
michalis_art
0
120
juanluisbravo
0
1.2k
birnbaumcc
0
180
mollysart
0
330
uxaustralia
PRO
0
490
artyx21
1
220
shelbynicholas
PRO
1
170
mollysart
0
140
Featured
See All Featured
jasonvnalue
81
8.1k
cromwellryan
104
6.3k
danielanewman
201
20k
samlambert
237
10k
bryan
32
3.5k
scottboms
252
11k
brettharned
93
3.1k
addyosmani
312
21k
tammielis
237
23k
lara
172
9.7k
aarron
258
36k
davidbonilla
70
3.6k
Transcript
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
#WCPune2013 @kingsidharth Tweet Away!
What is Responsive Design? An approach aimed at crafting sites
to provide an optimal viewing experience across a wide range of devices.
That’s @mashable’s btw
Why Responsive Design?
None
Make it Responsive the Logic
K.I.S.S. Keep It Simple, Stupid! Keep only bare minimum and
leave out all the rest.
Desktop: 2-3 Columns Tablets: 1-2 Columns Mobile: 1 Columns Break
Points & Layouts think columns
Rethink Order of the Elements
None
Rethink Readability & Typography
None
Rethink Images
http://www.fuelyourcreativity.com
Make it Responsive the Code
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>
<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 } Elements
<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 } Class
<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 } ID’s
@media queries @media all and (min-width:500px) { … } @media
(min-width:500px) { … } @media (orientation: portrait) { … } @media all and (orientation: portrait) { … } Remember Break Points?
View Port Setting
None
<meta name="viewport" content="width=device-width"> @-o-viewport { width: device-width; }
None
Use a CSS Framework Inuit.css Zurb Foundation Twitter Bootstrap To
avoid work, common bugs & cross browser compatibility issues.
Make it Responsive Tricks of the Trade
Navigation To Play Hide n’ Seek or Not
None
None
Thumb Rule: If it’s too long - hide it.
Kill Images on Mobile Coz it’s loading...
None
Thumb Rule: If they are not important - kill them.
Don’t Resize Test it for Real on Real Devices
Pornography for Developers Some ideas & problems to think about
Social Media Buttons They don’t work on mobiles and some
tablets
Responsive Design Options for Theme Backend Warning: Still in Experimental
Phase
‣ 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
Want to improve UX of your blog? My talk from
WordCamp Baroda: www.64notes.com/speaking/wcbrd-2013
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
Questions or Threats? Thank You!