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
180
Design Portfolio Masterclass
kingsidharth
0
410
History & Future of Money, Currency, & Capitalism
kingsidharth
0
170
Accountability for Personal Growth
kingsidharth
0
220
Don't be Biased
kingsidharth
0
330
Know Shit About Design @ Startup Saturday Mumbai
kingsidharth
0
770
A Crash Course in Typography — WordCamp Baroda 2014
kingsidharth
2
750
User Experience Design Lessons from Pornography
kingsidharth
0
870
What to do with your life - TEDxTirupati 2013
kingsidharth
2
600
Other Decks in Design
See All in Design
PdMを始めたUIデザイナーのリアルな課題
muture
0
750
Du Bois Challenge 2024 Recap
ajstarks
1
140
Making impact with your craft with sociotechnical design
xinyao
1
170
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
710
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
800
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
1.9k
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
260
最速で価値を届けるUXリサーチ
degudegu2510
5
1.2k
Credence
lratmansunu
0
230
Speed Design
sergeychernyshev
22
460
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
330
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
480
Featured
See All Featured
Web development in the modern age
philhawksworth
205
10k
The Mythical Team-Month
searls
218
43k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
5
210
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
The Cult of Friendly URLs
andyhume
76
6k
Large-scale JavaScript Application Architecture
addyosmani
509
110k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Bash Introduction
62gerente
608
210k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
We Have a Design System, Now What?
morganepeng
49
7.1k
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!