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
190
Design Portfolio Masterclass
kingsidharth
0
430
History & Future of Money, Currency, & Capitalism
kingsidharth
0
190
Accountability for Personal Growth
kingsidharth
0
240
Don't be Biased
kingsidharth
0
370
Know Shit About Design @ Startup Saturday Mumbai
kingsidharth
0
790
A Crash Course in Typography — WordCamp Baroda 2014
kingsidharth
2
760
User Experience Design Lessons from Pornography
kingsidharth
0
870
What to do with your life - TEDxTirupati 2013
kingsidharth
2
620
Other Decks in Design
See All in Design
Rayout Pattern 01
one0
0
370
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
180
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
Design System for training program
mct
0
160
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.6k
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
600
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
570
Night Shift concept 9/15/2024
cpineda57
0
750
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
140
Tableau曲線表現講座(2024.11.21)
cielo1985
0
170
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Unsuck your backbone
ammeep
669
57k
Adopting Sorbet at Scale
ufuk
73
9.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A better future with KSS
kneath
238
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
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!