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
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
190
Wolf and the seven goatkids
_limex_
PRO
0
480
Apple HIGのススメ
temoki
0
100
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
210
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
250
PRDがデザインプロセスを高速化した話
tooomo
1
350
社内管理画面のデザインもプロダクトデザイン
takanorip
4
750
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.4k
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
320
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.4k
1人歩きする営業資料作成
yutoshukuya
2
160
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.4k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Side Projects
sachag
451
41k
A designer walks into a library…
pauljervisheath
201
23k
A Tale of Four Properties
chriscoyier
153
22k
BBQ
matthewcrist
80
8.8k
Writing Fast Ruby
sferik
622
60k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Gamification - CAS2011
davidbonilla
77
4.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
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.