Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Make it Responsive! the logic, the code & trick...
Search
King Sidharth
February 23, 2013
Design
6
6.7k
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
Designing for Many Worlds
kingsidharth
0
230
Design Portfolio Masterclass
kingsidharth
0
490
History & Future of Money, Currency, & Capitalism
kingsidharth
0
220
Accountability for Personal Growth
kingsidharth
0
310
Don't be Biased
kingsidharth
0
470
Know Shit About Design @ Startup Saturday Mumbai
kingsidharth
0
830
A Crash Course in Typography — WordCamp Baroda 2014
kingsidharth
2
810
User Experience Design Lessons from Pornography
kingsidharth
0
910
What to do with your life - TEDxTirupati 2013
kingsidharth
2
670
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
880
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
340
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
250
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
790
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
210
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
400
kintone_aroma
kintone
0
130
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Language of Interfaces
destraynor
162
25k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Being A Developer After 40
akosma
91
590k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Why Our Code Smells
bkeepers
PRO
340
57k
Gamification - CAS2011
davidbonilla
81
5.5k
Rails Girls Zürich Keynote
gr2m
95
14k
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
[email protected]
@kingsidharth
Questions or Threats? Thank You!