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
Responsive Web Design Recap
Search
14islands
October 01, 2015
Design
8
1.4k
Responsive Web Design Recap
Responsive Web Design has been around for a while. How about a recap?
14islands
October 01, 2015
Tweet
Share
More Decks by 14islands
See All by 14islands
Construindo interfaces interativas com React
14islands
0
73
Sneaky Santa
14islands
0
48
Innovation & Prototyping
14islands
0
160
Google Santa Tracker: Present Bounce
14islands
0
240
Lessons learned using WordPress as a CMS
14islands
2
950
The good, the bad and the ugly with responsive web design
14islands
4
1.9k
Faster Responsive Websites
14islands
2
330
Performance as design: doing responsive responsibly
14islands
32
8k
Other Decks in Design
See All in Design
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
2.9k
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
Rayout Pattern 01
one0
0
1.5k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
aya_murakami_portfolio
ayakaimi1101
0
1.1k
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
870
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Writing Fast Ruby
sferik
628
61k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Typedesign – Prime Four
hannesfritz
40
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
4 Signs Your Business is Dying
shpigford
182
22k
Music & Morning Musume
bryan
46
6.3k
Speed Design
sergeychernyshev
25
780
Designing for humans not robots
tammielis
250
25k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Transcript
None
RESPONSIVE WEB DESIGN RECAP
WHAT
None
None
None
Design and development should respond to the user’s behavior and
environment based on screen size, platform and orientation.
WHY
There are more devices connected than people in the world
today. http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets More people have access to mobile than to running
water and toothbrushes.
Get your content ready to go anywhere because it’s going
to go everywhere. - http://bradfrost.com/blog/web/for-a-future-friendly-web/
IT’S ABOUT CONTENT-FIRST
http://commons.wikimedia.org/wiki/File:Content_is_like_water.png
IT’S ABOUT BEING FUTURE FRIENDLY
https://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422
IT’S ABOUT CONSISTENCY
http://opensignal.com/reports/fragmentation.php (2012)
None
SO WHAT CAN WE DO?
DO NOTHING OPTION 1
None
None
None
None
BUILD AN APP OPTION 2
http://xkcd.com/1174/
http://appvswebsite.com/
DO BOTH (IF YOU CAN)
BUILD A SEPARATE MOBILE SITE OPTION 3
None
None
None
GO RESPONSIVE OPTION 4
HOW
4 GIFS TO WARM UP http://blog.froont.com/9-basic-principles-of-responsive-web-design/
None
None
None
None
3 STEPS RECIPE
1. FLUID WIDTH 2. FLEXIBLE MEDIA 3. MEDIA QUERIES
ADAPTIVE VS FLUID EXAMPLE
MAKING IT FLUID TARGET / CONTEXT = RESULT
None
300px
300px 940px
300px 940px 300/940 = 0.319148936
300px 940px 300/940 = 0.319148936 31.9148936%
1. FLUID WIDTH 2. FLEXIBLE MEDIA 3. MEDIA QUERIES
LET MEDIA TAKE MORE AVAILABLE SPACE
1. FLUID WIDTH 2. FLEXIBLE MEDIA 3. MEDIA QUERIES
Print Monochrome Width Height Aspect Ratio Orientation And more…
Print Monochrome Width Height Aspect Ratio Orientation And more… @media
(min-width: 600px) { <something awesome here> }
LOAD ME NOT YET NOT YET
LOAD ME NOT YET NOT YET
LOAD ME NOT YET NOT YET
LOAD ME LOAD ME LOAD ME
Know your Breakpoints
Breakpoints. Break. Points. Points at which things break in your
design. http://www.markboulton.co.uk/journal/theinbetween “
Start small.
Increase the width.
Identify problems.
Add a breakpoint and fix it.
Keep going!
The importance of MOBILE FIRST
None
None
None
IGNORING MOBILE FIRST WILL PROBABLY BITE YOU LATER
ITS OK TO DESIGN IT IN THE BROWSER
UX Design Code
The web’s greatest strength, is often seen as a limitation,
as a defect. http://alistapart.com/article/dao
It is the nature of the web to be flexible.
http://alistapart.com/article/dao
It should be our role as designers and developers to
embrace this flexibility, and produce pages which, by being flexible, are accessible to all. http://alistapart.com/article/dao
The journey begins by letting go of control, and becoming
flexible. http://alistapart.com/article/dao
None