RESPONSIVE WEB Design

responsive design
http://www.flickr.com/photos/dwonderwall/3341419492
pragmatic
making the best of old and new techniques
This presentation is
•
part case study
•
part lessons learned
•
part future-thinking
browser.nokia.com
A small campaign site introducing three new web
browsers for Nokia devices.
THE CASE STUDY
sadly no longer online as
of February 2013 :-(
iPad
Chrome
Opera Mini
Nokia N97
Site goals:
•
Inform end-users and industry
•
Prompt end-users to update their browser
•
Experiment with responsive design to support
a global audience and wide range of target devices.
Call to action: Update your browser!
THE CASE STUDY

70+ target Nokia devices
Symbian^3/Anna/MeeGo
Touch (+ many w/ keyboards)
2008-present
WebKit browser
11 devices
Series 60
Touch and non-touch
2006-present (S60 3rd FP 1/2)
WebKit browser
45 devices
Series 40
Touch and non-touch
2008-present (~S40 6th Edition)
WebKit browser or
Nokia proxy browser
23 devices
new browser
being promoted
+ all the usual suspects
v. 7+
mobile
desktop
many Nokia users on S40 feature
phones still use Opera Mini
v 6.0+
legacy and/or XHTML-MP browsers
Internet Browser
Obigo
Windows Mobile

UC Web
< v 5.0
no support was planned for
initially
Nokia S40 Lite
Browser
popular Chinese
proxy browser
Part 1: The design process
http://www.flickr.com/photos/jordanfischer/63832583
You can’t get there from here
Designing only pixel perfect mock-ups makes it
difficult near-impossible to then think responsively.
an emerging process
sketches/IA basic visual
mockups
“live”
responsive
mockup
more
sketches
“live”
responsive
mockup
small visual mockups
to discuss specific
stylistic issues
“live” responsive
mockup to “reality check”
performance and

progressive enhancement
etc
ok?
yes
no
content first
sketches/IA basic visual
mockups
“live”
responsive
mockup
more
sketches
“live”
responsive
mockup
small visual mockups
to discuss specific
stylistic issues
“live” responsive
mockup to “reality check”
performance and
progressive enhancement
etc
ok?
yes
no
message/
brand/
strategy

copy
draft 1
copy
draft 2
If it’s layout prototype it.
( on real devices to clarify changes in context and the
impact of native capabilities and viewport conditions)
If it’s visual design mock it up
( but then prototype to determine performance, impact
of native fonts and em values, viewport conditions etc.)
PAIN POINT
Too many to mention.
Mental models in particular are getting in the way.
We (our teams, our clients, their marketing departments
etc.) still presume and expect we can control too much.
We have lots of counterproductive
behaviours we need to unlearn.
•
Creating elaborate workarounds to suit (what you
perceive) as edge case screen sizes or devices.
•
Agonising over small differences in rendering and
alignment (remember each device you haven’t tested
on will have its own quirks.)
•
Creating elaborate reference lists of screen sizes,
pixel densities in the belief that with enough data
you can design for each device.
etc
Part 2: The CSS strategy

http://www.flickr.com/photos/wscullin/3770015203
Mobile first
Design for (the simplest) mobile browser first.
TECHNIQUE
the fact that it may
be mobile doesn’t
really maer
The absence of a media query
is in fact, the first media query.
Bryan Rieger, Rethinking the Mobile Web
“
fully flexible with default
styles for navigation, fonts,
content and not defined
through media queries
begin with a lightweight default
A
B
C
key word here
is ‘dened’ see
slide 26
Embrace the cascade
Don’t merely swap style sheets let it cascade.
This results in smaller subsequent style sheets,
less duplication in declarations and is more efficient for
the browser to parse (as it’s only dealing with deltas).
TECHNIQUE
each style sheet augments the others
augment original

style sheet with
(only) the style
changes that are
needed to enhance
the layout
A
B
C
xx px to xxx px
breakpoint breakpoint
A
B
C
< xx px wide
(or unable to
understand further
instructions)
style sheet 1
A
B
C
xx px to xxx px
A
B
C
>xxx px wide
breakpoint breakpoint
A
B
C

< xx px wide
(or unable to
understand further
instructions)
augment
once
again for
TVs etc.
breakpoint
style sheet 1 style sheet 2
each style sheet augments the others
TECHNIQUE
Use major and minor breakpoints
Create media queries inside of media queries.
Why we call them major and minor breakpoints
major layout
changes
content or
component-specific
tweaks
a common approach
One style sheet with media
queries on the inside.
styles.css
@media {
(min-width: 480px)
}
@media {
(min-width: 640px)
}

@media {
(min-width: 768px)
}
@media {
(min-width: 320px)
}
1 css le = 1 hp request,
but includes unnecessary
style data that all devices
end up downloading