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) webdesign
Search
simoncoudeville
February 24, 2012
Design
13
1.1k
(responsive) webdesign
simoncoudeville
February 24, 2012
Tweet
Share
Other Decks in Design
See All in Design
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
690
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
600
Les petites aventures de CSS, saison 2025
goetter
3
4k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
140
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
390
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
780
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
セブンデックス カルチャーブック
sevendex
0
3.1k
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
LLMによるRAG評価用合成テストデータの生成
licux
6
700
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
260
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Code Reviewing Like a Champion
maltzj
521
39k
KATA
mclloyd
29
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Typedesign – Prime Four
hannesfritz
40
2.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to train your dragon (web standard)
notwaldorf
91
5.9k
Automating Front-end Workflow
addyosmani
1368
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How GitHub (no longer) Works
holman
314
140k
Transcript
Hello, I’m Simon
I ❤ Making websites
I like to do the front-end of my own designs.
Especially when it comes to responsive websites. Because so many design decisions have to be made in the browser.
Webdesigner Netlash-bSeen @simoncoudeville s.imon.be
None
None
None
None
(responsive) webdesign
Andy Clarke http://stuffandnonsense.co.uk/ Web design is responsive design. Responsive Web
Design is web design, done right.
In case you haven’t noticed, mobile is growing! ‐
Sollutions • native app • web app • mobile version
• responsive webdesign
It depends.
I ❤ apps
I ☠ mobile sites
I ☠ being redirected.
Via, tweets, Facebook, bookmark, RSS readers, ...
http://cnet.co/A3PWiW The problem is that this redirect is so stupid
that rather than figure out what you wanted to see, it just puts you at the mobile site's home page and thinks it's doing you a favor. At that point, whether you coded your site in native or HTML5 has no bearing. I can't see what I wanted to see.
And what if a user actually sees your regular site
on a mobile device?
Please don’t click here to go to the full site.
↺ The other way around.
None
None
99 viewports, iphone’s just 1
Mobile is not iphone! • Smartphones • feature phones •
tablets • nokia, Blackberry, Android, Symbian, ...
Ethan Marcotte Our sites are accessed by an increasing array
of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display.
It doesn't matter whether you have an app or a
mobile version. If you have a website, users should be abble to access it through any device. So optimize it.
Think responsively.
3. Same URL 2. Same content 1. Same website
3. Same URL 2. Same content 1. Same website
3. Same URL’s 2. Same content 1. Same website
2. different functionalities 1. different layouts
2. different functionalities 1. different layouts
What is it not? • Hiding content • display: none
David (TheLeggett) Leggett http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/ The most reasonable case for omitting
objects from a mobile site is when the object wasn’t essential to the desktop site in the first place.
The new road To enlightment.
how to start? (working draft)
1. Online strategy 2. Information architecture 3. Design 4. Front-end
design 5. Development Our proces
♛ Content is king
IA • Gather content • organization of content
Rethink • Header • Navigation • Search bar • Call
to actions • Interactions
Some tips from our IA’s • Avoid subnavigation • Overview
pages • Eliminate all unnecassary stuff • Counts as much for desktop
✒ Design
Designing in the browser
3. Content organisation before design 2. A static image doesn’t
feel like a real page 1. The browser is our canvas
3. Content organisation before design 2. A static image doesn’t
feel like a real page 1. The browser is our canvas
3. Content organisation before design 2. A static image doesn’t
feel like a real page 1. The browser is our canvas
Designing in photoshop
3. Try things not possible with only 2. No limitations
1. Photoshop as creative outlet
3. Try things not possible with only 2. No limitations
1. Photoshop as creative outlet
3. Try things not possible with only css3 2. No
limitations 1. Photoshop as creative outlet
Establish the global visual design direction
3. The designer ≠ front-end dev 2. Something to fall
back on 1. Starting point
3. The designer ≠ front-end dev 2. Something to fall
back on 1. Starting point
3. The designer ≠ front-end dev 2. Something to fall
back on 1. Starting point
Designing proportions.
3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!
3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!
3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!
Width?
4. old principles of webdesign still stand 3. Dependent of
number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
4. old principles of webdesign still stand 3. Dependent of
number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
4. old principles of webdesign still stand 3. Dependent of
number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
4. old principles of webdesign still stand 3. Dependent of
number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
Grid!
3. Make your own grid 2. Forget 960 grid system
1. Solid grid helps establish proportions
3. Make your own grid 2. Forget 960 grid system
1. Solid grid helps establish proportion
3. Make your own grid 2. Forget 960 grid system
1. Solid grid helps establish
Modular grid extension modulargrid.org
None
None
None
None
New possiblities • Go beyond 1024 • Use a 75px
margin • New layout possibilities for wider screens.
None
None
Best practice
3. Design flexible modules 2. Start with a solid grid
1. Define a maximum width
3. Design flexible modules 2. Start with a solid grid
1. Define a maximum width
3. Design flexible modules 2. Start with a solid grid
1. Define a maximum width
To the browser!
Ethan Marcotte alistapart.com Responsive webdesign consists of three components: a
fluid grid, fluid media and media queries
Fluid vs fixed Responsive vs adaptive
fluid, responsive http://dropmark.com/
4. Harder to achieve (fluid media) 3. Takes up all
the available space 2. Maximum width defined once 1. Page adapts to every possible resolution
4. Harder to achieve (fluid media) 3. Takes up all
the available space 2. Maximum width defined once 1. Page adapts to every possible resolution
4. Harder to achieve (fluid media) 3. Takes up all
the available space 2. Maximum width defined once 1. Page adapts to every possible
4. Harder to achieve (fluid media) 3. Takes up all
the available space 2. Maximum width defined once 1. Page adapts to every possible
fixed, adaptive http://mikedidthis-focus.tumblr.com/
3. Not optimizied for future screen sizes? 2. Easier to
achieve. 1. Different layouts defined in fixed widths
3. Not optimizied for future screen sizes? 2. Easier to
achieve. 1. Different layouts defined in fixed widths
3. Not optimizied for future screen sizes 2. Easier to
achieve. 1. Different layouts defined in fixed widths
CSS3 media queries
Media queries • Check for certain conditions • Apply different
styles • Usually width • Height, orientation, pixel-ratio, ... • Breakpoints
A breakpoint is the size (usually the width) at which
the layout starts to look broken, at which point a new layout is applied.
Common breakpoints • 320px (first generation smartphones portrait) • 480px
(first generation smartphones landsape) • 600px (iphone 4 portrait, kindle fire) • 768px (tablet portrait) • 960px (tablet landscape, old computers) • 1200px and up (modern computers, TV's, projectors)
Long live natural responsive web design breakpoints.
Mark Drummond http://marcdrummond.com/responsive-web-design/2011/12/29/default- breakpoints-are-dead Use awkwardness as your guideline, not
ephemeral default device widths.
http://responsivepx.com/ http://www.youtube.com/watch? v=kYpENMubJKQ
Mobile first Basic CSS is defined before the first breakpoint.
Mobile first • Typography • link colors • background colors
• margins • ...
This way the simplest version is served first so less
capable devices still serve a usable readable website.
Progressive enhancement Enhancement to the presentation and behavior of the
page.
This is my grid. There are many like it, but
this one is mine. My grid is my best friend. It is my life. I must master it as I must master my life.
Fluid design formula: (target ÷ context) x 100 = result
None
1 kolom (55 ÷ 1260) x 100 = 4.3650794
margin (25 ÷ 1260) x 100 = 1.984127
3. left to right = top to bottom (in most
cases) 2. hierarchy = HTML 1. flexible modules
3. left to right = top to bottom (in most
cases) 2. hierarchy = HTML structure 1. flexible modules
3. left to right = top to bottom (in most
cases) 2. hierarchy = HTML structure 1. flexible modules
The future is awesome! ✌
• CSS-grid • Flex Box • ...
Content should be available to as many people as possible.
The device should never be an obstacle between the user
and their goal.
What we do: webdesign.