make it responsive! the logic, the code & tricks of trade
TRANSCRIPT
Make it Responsive!the logic, the code & tricks of trade
A talk on Responsive Web Design (RWD)
for WordPress Themes
by King Sidharthfor WordCamp Pune 2013
What is Responsive Design?
An approach aimed at crafting sites to
provide an optimal viewing
experience across a wide range of
devices.
http://www.fuelyourcreativity.com
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?
Use a CSS Framework
Inuit.css
Zurb Foundation
Twitter Bootstrap
To avoid work, common bugs & cross browser compatibility issues.
‣ 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 forTheme Backend
Want to improve UX of your blog?
My talk from WordCamp Baroda:
www.64notes.com/speaking/wcbrd-2013
King SidharthCo-Founder Web Mutiny
19+2 Years Old Entrepreneur
DesignerArtist
Public Speaker
www.64notes.com/speaking/wcpune-2013
@kingsidharth