1. Responsive design sync №1Will Shown
16 January 2014

2. Scope of this session
• Just covering the fundamentals.
• Not focusing heavily on specific Prime details
(for now).
• These are strategies to use so you have a
responsive design in your back pocket.

3. The basics

4. What is ‘responsive design’?
“Rather than creating disconnected designs, each tailored to
a particular device or browser, we should instead treat them
as facets of the same experience.
…In short, we need to practice responsive web design.”
—Ethan Marcotte, Responsive Web Design

5. What does responsive design entail?
• The same features should be usable and beautiful
on any canvas
• Any canvas should provide users with an equivalent
experience

6. Some good examples:

7. MediaQueri.es

8. BBC Radio iPlayer

9. SBNation

10. Global News

11. What makes facets of an experience
‘equivalent’?
• Feature parity
• Content parity (if it’s relevant)
• Marginal differences in discoverability

12. The BBC Radio iPlayer meets those criteria
• Feature parity
• Content parity (where it’s relevant)
• Marginal differences in discoverability

13. What makes facets of an experience ‘equally
usable’?
• Usable with any combination of keyboard mouse
and touch
• Legible, always

14. Even video games can be equally usable!

15. Mythbustin’

16. “Responsive design is expensive.”
Responsive design is not expensive if it’s done right.

17. “Responsive design is hard.”
Responsive design is not hard either, if it’s done right.

18. Long story short: if responsive design becomes more
difficult or more expensive than your usual methods, then
something isn’t right.

19. “Responsive design is easy! I’ll just give the
user less on smaller canvases.”

20. Responsive design doesn’t work
that way!
I’m sure those windmills
will keep them cool!
WINDMILLS DO NOT
WORK THAT WAY.

21. Remember the core principle is to treat each canvas as a
“facet of the same experience.”
If the design for a different canvas is a tacked-on
consideration, it’s just a different experience altogether.
(Not that you didn’t already know that.)

22. How it’s done: mobile first

23. ‘Mobile first’ is a euphemism for starting the design
process with the most constrained canvas in mind.
After mobile, designing for less constrained canvases is all
downhill.

24. Let’s design something responsive together, starting with
the mobile canvas.

25. Now that we have a great mobile design, let’s adapt it to a
slightly less constrained canvas.

26. Can we make this better for even bigger canvases?

27. See how easy that was?

28. Summary:
1. Design for the most constrained canvas first.
2. Loosen the constraints until you can make just
incremental changes that will improve usability –
that is the next breakpoint.
3. Repeat step 2 until you’re satisfied!

29. Appendix: Important Stuff

30. Legibility

31. What legibility isn’t:
• “16 pixels!”
• “So, it’s 16px on desktop, 14px on tablet, and 12px
on mobile. Done!”
• “They can just zoom in, right?”

32. See if you can find the actual measure of legibility:

33. Points if you chose φ!

34. Communicating responsive designs

35. Are those really pixels you’re pushing?

36. • Responsive designs can’t be defined in pixels
since canvases have such various pixel densities
(‘DPI’/’PPI’)
• Measure your designs in terms of columns (if there’s
a grid), the smallest legible font size, or physical
lengths (inches, points, etc).
• MSN devs use ‘rem’: 1rem = 10/96in; 9.6rem = 1in

37. • MSN devs will convert any unit of measure in your
designs to their ‘rem’ during development.
• The MSN devs’ rem is special because it changes
size depending on dpi.
• Multiply .ai, .psd, and web/CSS pixels by 1/10 to
get MSN devs’ rems.

38. • Sometimes dev, pm, or test won’t have access to
Illustrator.
• In these cases, create a visual system of
communication that makes it obvious to an outsider
the relationship between the dimensions and type
styles you use.
• Think ‘red lines’, but precise and unambiguous.

39. Bloomberg
AP Photo, Sergei Grits
Obama Aims to Tackle Pollution,
Climate Change
WORLD
USA Today
ABC News
Deadly Derailment in
Quebec Underlines Oil
Debate
Clashes by Egypt
Army, Protesters Kill
at Least 54
BBC News
Protests Follow
School Meal Deaths
MORE WORLD
The New York Times 15 mins ago
South African President Jacob Zuma
canceled a trip to neighboring
Mozambique on Thursday, intensifying
speculation about a deterioration in the ...
Reuters
Panama Calls in U.N. to Inspect
North Korean Arms Ship
Mandela Still Critical, Zuma
Cancels Mozambique Trip
The Miama Herald 38 mins ago
Corruption Getting
Worse, Says Poll
Reuters
Analysis of iPod-recorded
Audio Track the Struggles of
Endangered Species
The Verge 4 hours ago
Cities of the Happiest Workers
BUSINESS
MarketWatch 2 hours ago
Same-sex Couples: Celebrate,
Then Call A CPA
South Korea's M
Touted as World
The New York Times 15
Christopher Gre
T2
T3
s1
T3
s2
R
T3
s0
T1
T0
T0
G0
G0G1
H
G1S0
G1
H
G1S0
G1
H
G1S0
S0
G1
H
G1
S1
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
“Blue lines” for Entity Cluster

40. B
Obama Aims to Tackle Pollution,
Climate Change
WORLD
USA Today
Sout
canc
Man
Can
T
Citi
T2
T3
s1
R
T3
s0
T1
T0
G0
G1
H
G1S0
G1
H
G1S0
S1
G1Expose the underlying structure; let dev do the mathAP Photo, Sergei Grits
nge
School Meal D
MORE WORLD
The New York Times
South African President Jacob Zuma
canceled a trip to neighboring
Mozambique on Thursday, intensifying
speculation about a deterioration in the ...
spect
The Miama Herald 38 mins ago
Corruption Ge
Worse, Says Po
Reuters
Analysis of iPod-recorded
Audio Track the Struggles of
Endangered Species
The Verge 4 hours ago MarketWatch 2 hours ago
Same-sex Couples: Celebrate,
Then Call A CPA
T3
s1
T3
s2
R
T3
s0
T0
G1
H
G1
evel 1
G1
H
G1
G1
H: 1px
S0
: 300px
S1
: 2 (S0
+ G1
) + H
G0
: 4 (G1
)
G1
: 20px
G1
H
G1

41. Bloomberg
Grits
Clashes by Egypt
Army, Protesters Kill
at Least 54
BBC News
Protests Follow
School Meal Deaths
MORE WORLD
The New York Times 15 mins ago
South African President Jacob Zuma
canceled a trip to neighboring
Mozambique on Thursday, intensifying
speculation about a deterioration in the ...
Mandela Still Critical, Zuma
Cancels Mozambique Trip
The Miama Herald 38 mins ago
Corruption Getting
Worse, Says Poll
Reuters
Cities of the Happiest Workers
MarketWatch 2 hours ago
Same-sex Couples: Celebrate,
Then Call A CPA
So
To
T2
T3
s1
T3
s2
R
T0
G1
H
G1
G1
H
G1
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
G1
G1
H
Provide a visual guide for type styles
The V
R: Sitka level 1
T0
: Segoe UI all-caps level 1
T1
: Sitka level 5
T2
: Sitka level 3
T3
: Segoe UI level 0
s0
: @colorG, italic
s1
: @colorG
s2
: @color4
H
S
S
G
G

42. Thanks!