Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Responsive Web Design
Sayanee
May 15, 2012
Technology
3
240
Responsive Web Design
Sayanee
May 15, 2012
Tweet
Share
More Decks by Sayanee
See All by Sayanee
Podcasting with Jekyll
sayanee
2
720
Rails API
sayanee
5
430
Learning with Open Source
sayanee
3
280
ECMAScript 6 - part 1
sayanee
3
340
ECMAScript 6 - part 2
sayanee
1
230
Minimalist Designer behind the curious Developer
sayanee
8
340
Responsive Web Design for Beginners
sayanee
9
900
Travel to Balkans + Hungary
sayanee
2
180
Styling with SASS
sayanee
9
520
Other Decks in Technology
See All in Technology
AWS ChatbotでEC2インスタンスを 起動できるようにした
iwamot
0
120
AWSの基礎を学ぼうで学んだ9種類のDBを勝手にふりかえる
98lerr
2
720
ISUCON で使えるツールを作った
shotakitazawa
0
350
次期LTSに備えよ!AOS 6.1 HCI Core 編
smzksts
0
170
一人から始めるプロダクトSRE / How to start SRE in a product team, all by yourself
vtryo
4
2.4k
組織でPower Virtual Agentsを導入するために知っておきたいこと
miyakemito
0
1.6k
LINE WORKS API 2.0について
mmclsntr
0
110
#BabylonJS5 の祭ツイートまとめ Let's take a look at what people create with the latest #BabylonJS5
chomado
0
790
Oracle Database Technology Night #55 Oracle Autonomous Database 再入門
oracle4engineer
PRO
1
120
Google Cloud Updates 2022/04/01 - 2022/04/15
no24oka
1
110
2022年度ロボットフロンティア第1回
ryuichiueda
0
140
プルリク作ったらデプロイされる仕組み on ECS / SRE NEXT 2022
carta_engineering
1
120
Featured
See All Featured
Six Lessons from altMBA
skipperchong
14
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
Optimizing for Happiness
mojombo
365
63k
Atom: Resistance is Futile
akmur
255
20k
Writing Fast Ruby
sferik
612
57k
How to name files
jennybc
39
58k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Designing for humans not robots
tammielis
241
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Transcript
RESPONSIVE WEB DESIGN codes + slides Tuesday, May 15, 12
@sayanee_ Tuesday, May 15, 12
RESPONSIVE WEB DESIGN Tuesday, May 15, 12
RESPONSIVE WEB DESIGN adaptive fluid flexible flowing Tuesday, May 15,
12
RESPONSIVE WEB DESIGN adaptive fluid flexible flowing device-agnostic optimised-viewing Tuesday,
May 15, 12
EXAMPLES Media Queries Happy Cognition Simple Bits Responsive 2010 Duster
Theme Shelf Foundry Theme Tileables Mr. Simon Colly Tuesday, May 15, 12
TOOLS Tuesday, May 15, 12
TOOLS Browser Tuesday, May 15, 12
TOOLS Browser Text Editor Tuesday, May 15, 12
TOOLS Browser Text Editor Simulator Tuesday, May 15, 12
TOOLS Browser Text Editor Simulator Tuesday, May 15, 12
TOOLS Browser Text Editor Simulator Coding Tuesday, May 15, 12
#1 fluid layout #2 media queries #3 flexible media Tuesday,
May 15, 12
#1 fluid layout Tuesday, May 15, 12
#1 fluid layout 1280px Tuesday, May 15, 12
#1 fluid layout 1280px 960px Hola! Travel with me devices
footer Tuesday, May 15, 12
#1 fluid layout 1280px 960px Hola! Travel with me 600px
devices main footer Tuesday, May 15, 12
#1 fluid layout 1280px 960px Hola! Travel with me 600px
300px devices main sidebar footer Tuesday, May 15, 12
#1 fluid layout think in pixels percentages target / context
= result Tuesday, May 15, 12
#1 fluid layout 1280px 960px Hola! Travel with me 600px
300px devices main sidebar footer Tuesday, May 15, 12
#1 fluid layout 1280px 960px Hola! Travel with me 600px
300px devices main sidebar footer /1280px = 75% / 960px= 62.5% /960px = 31.25% 960px / 960px = 100% 960px / 960px = 100% Tuesday, May 15, 12
#2 media queries min-width landscape 1024px portrait 768px 1280px landscape
960px portrait 640px four layouts 1200px 1024px 768px 600px Tuesday, May 15, 12
#2 media queries 1200px 1024px 768px 600px Tuesday, May 15,
12
#2 media queries 1200px 1024px 768px 600px @media screen and
(max-width: ){} /* desktop */ in style.css : @media screen and (max-width: ){} /* iPad landscape */ @media screen and (max-width: ){} /* iPad portrait */ @media screen and (max-width: ){} /* iPhone */ Tuesday, May 15, 12
#2 media queries 1200px 1024px 768px 600px @media screen and
(max-width: ){} /* desktop */ in style.css : @media screen and (max-width: ){} /* iPad landscape */ @media screen and (max-width: ){} /* iPad portrait */ @media screen and (max-width: ){} /* iPhone */ in index.html, inside <head> : <meta name="viewport" content="width = device-width" /> Tuesday, May 15, 12
#3 flexible media img, embed, object, video { max-width:100% }
Tuesday, May 15, 12
#3 flexible media flexible heading using fittext.js Tuesday, May 15,
12
OTHER RESOURCES Blog posts: 1. Think Vitamin 2. A-List Apart
3. Smashing Magazine 4. Fluid Images 5. Web Designer Wall 6. CSS Tricks 7. Six Revisions 8. fittext.js Books: 1. by Ethan Marcotte Videos: 1. Nettuts Tuesday, May 15, 12
codes + slides Tuesday, May 15, 12
@sayanee_ Tuesday, May 15, 12