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: Everything has Changed
Search
Swwweet
June 17, 2012
Technology
6
660
Responsive Web Design: Everything has Changed
Presentation by @htmlboy at Drupal Developers Day Barcelona 2012.
Swwweet
June 17, 2012
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
310
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
480
Mobile First: as difficult as doing things right
swwweet
223
9.3k
One Size Fits None
swwweet
12
830
One Size Fits None - From the Front 2013
swwweet
2
690
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
550
Other Decks in Technology
See All in Technology
Culture Deck
optfit
0
410
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
260
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.3k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
400
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.2k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
3k
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
100
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
380
Classmethod AI Talks(CATs) #16 司会進行スライド(2025.02.12) / classmethod-ai-talks-aka-cats_moderator-slides_vol16_2025-02-12
shinyaa31
0
100
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.7k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
KATA
mclloyd
29
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Building Adaptive Systems
keathley
40
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Unsuck your backbone
ammeep
669
57k
It's Worth the Effort
3n
184
28k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Transcript
RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN everything
has changed Javier Usobiaga #DrupalDevDays
@htmlboy @htmlboy @htmlboy I work at Swwweet.com
WHAT IS responsive web design? WHAT IS responsive web design?
WHAT IS respoNsive web design?
WHAT IS THE web? WHAT IS THE web? WHAT IS
THE web?
CONTROL CONTROL CONTROL a tale of obsession
1990s 1990s 1990s the web is 800px wide
2000s 2000s 2000s the web is 1024px wide
2007 2007 2007 + the web is 1024px & 320px
wide
2010 2010 2010 + + the web is 1200px &
320px & 768px wide
2012 2012 2012 + + the web is 1200px &
320px & 768px & 1800px wide +
2012 2012 2012 + + 320px? +
2012 2012 2012 the web is 256px & 320px &
426px & 480px & 560px & 640px & 768px & 800px & 960px & 1024px & 1280px & 1440px & 1600px & 1800px… + + + +
ENOUGH! ENOUGH! ENOUGH!
ENOUGH! ENOUGH! ENOUGH! it’s time to accept the web’s nature
THE WEB IS THE WEB IS THE WEB IS fluid
universal multidevice
first act RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB
DESIGN
2012.dconstruct.org
mediaqueri.es
BUT HOW? BUT HOW? BUT HOW? flexible grids flexible media
@media queries
GRIDS GRIDS GRIDS 16% 16% 16% 16% 16% 16% 16%
16%
target context ÷ result GRIDS GRIDS GRIDS
.grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%} GRIDS GRIDS GRIDS
MEDIA MEDIA MEDIA img, video{ max-width:100% }
MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES @media screen and (max-width:320px){
.side_column{ width: 100%; float: none; } }
MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES change the layout change
the styles increase the font size
RESPoNSIVE challenges RESPoNSIVE challenges Responsive challenges second act
Navigation Navigation Navigation
Navigation Navigation Navigation menu contact work about contact work about
bit.ly/rwd-nav
LAYOUT LAYOUT layout 1 2 3 4 6 5
3 2 LAYOUT LAYOUT layout 1 3 1 2 4
5 6
LAYOUT LAYOUT layout
IMAGES IMAGES images wide screens high-res screens small screens
IMAGES IMAGES images bigger images javascript loading sever-side solutions
bit.ly/rwd-images
IMAGES IMAGES images CSS3 SVG icon fonts
workflow workflow workflow third act
WATERFALL WATERFALL WATERFALL UX / IA DESIGN VISUAL DESIGN DEV
BOSS
Hi, I want a website… WATERFALL WATERFALL WATERFALL
Sure thing! WATERFALL WATERFALL WATERFALL
First things first. We’ll need some wireframes to set the
structure. WATERFALL WATERFALL WATERFALL
Some color and shiny things… WATERFALL WATERFALL WATERFALL
A bit of CSS, a dash of JS... And voilà,
our job here is done! WATERFALL WATERFALL WATERFALL
Er... guys... WATERFALL WATERFALL WATERFALL
FAIL fail Fail
responsive responsive Responsive
ten tips ten tips ten tips fourth act
1. Communication Between the whole team, during the whole project.
2. Design & dev, together A lot of decissions have
to be taken along the way.
3. Micro-deliveries Client takes part actively and makes decisions.
4. Content first Make an inventory of the content and
find its limitations.
5. Find the critical points Navigation, images, ads, information hierarchy…
6. Mobile first The small screen is the first limit.
7. Reference sketches Make basic sketches to help with the
hierarchy of the content.
8. Prototype fast The sooner you start coding your HTML,
the better.
9. Design in the browser Make design decisions as you
see the result on the browser.
10. All screens at once When developing, always think about
all screen sizes.
TO RECAP TO RECAP TO RECAP
TO RECAP TO RECAP TO RECAP you can’t control the
web
TO RECAP TO RECAP TO RECAP you can’t control the
web RWD is a viable solution
TO RECAP TO RECAP TO RECAP you can’t control the
web RWD is a viable solution if we change our mentality
thanks! thanks! thanks! Javier Usobiaga · http://Swwweet.com · @htmlboy