Your SlideShare is downloading. ×
Make it Responsive! the logic, the code & tricks of trade
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Make it Responsive! the logic, the code & tricks of trade

833

Published on

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.

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.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
833
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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
  • 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?
  • 6. Make it Responsive the Logic
  • 7. K.I.S.S. Keep It Simple, Stupid!Keep only bare minimum and leave out all the rest.
  • 8. Break Points& Layoutsthink columns Desktop: 2-3 Columns Tablets: 1-2 Columns Mobile: 1 Columns
  • 9. Rethink Order of the Elements
  • 10. Rethink Readability & Typography
  • 11. Rethink Images
  • 12. http://www.fuelyourcreativity.com
  • 13. Make it Responsive the Code
  • 14. 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>
  • 15. 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 }
  • 16. 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 }
  • 17. 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 }
  • 18. @media queries@media all and (min-width:500px) { … }@media (min-width:500px) { … }@media (orientation: portrait) { … }@media all and (orientation: portrait) { … }Remember Break Points?
  • 19. View Port Setting
  • 20. <meta name="viewport"content="width=device-width"> @-o-viewport { width: device-width; }
  • 21. Use a CSS Framework Inuit.css Zurb Foundation Twitter BootstrapTo avoid work, common bugs & cross browser compatibility issues.
  • 22. Make it Responsive Tricks of the Trade
  • 23. NavigationTo Play Hide n’ Seek or Not
  • 24. Thumb Rule:If it’s too long - hide it.
  • 25. Kill Images on Mobile Coz it’s loading...
  • 26. Thumb Rule:If they are not important - kill them.
  • 27. Don’t ResizeTest it for Real on Real Devices
  • 28. Pornographyfor DevelopersSome ideas & problems to think about
  • 29. Social Media ButtonsThey don’t work on mobiles and some tablets
  • 30. Responsive Design Options for Theme Backend Warning: Still in Experimental Phase
  • 31. 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
  • 32. Want to improve UX of your blog? My talk from WordCamp Baroda:www.64notes.com/speaking/wcbrd-2013
  • 33. King Sidharth Co-Founder Web Mutiny 19+2 Years Old Entrepreneur Designer Artist Public Speakerwww.64notes.com/speaking/wcpune-2013 www.64notes.com king@kingsidharth.com @kingsidharth
  • 34. Questions or Threats? Thank You!

×