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
Kid Cowboy 103
marilutwin
0
260
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
sachi_y_portfolio
sachi337
0
250
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
280
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
200
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
570
クライアントワークにおける UXリサーチの実践
kozotaira
0
680
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
240
AIで加速するアクセシビリティのこれから
magi1125
3
540
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Faster Mobile Websites
deanohume
307
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Site-Speed That Sticks
csswizardry
10
660
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Writing Fast Ruby
sferik
628
62k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
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.