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
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
150
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
270
harutaka Vision Deck
zenkigenforrecruit
0
220
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
350
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
1.2k
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
550
Bulletproof Design System with TypeScript
takanorip
7
4.1k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.5k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
GraphQLとの向き合い方2022年版
quramy
49
14k
For a Future-Friendly Web
brad_frost
180
9.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Visualization
eitanlees
148
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
What's in a price? How to price your products and services
michaelherold
246
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
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.