Responsive design sync №1 Will Shown 16 January 2014
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.
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
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
What makes facets of an experience ‘equivalent’?
• Feature parity
• Content parity (if it’s relevant)
• Marginal differences in discoverability
The BBC Radio iPlayer meets those criteria
• Feature parity• Content parity (where it’s relevant)• Marginal differences in discoverability
What makes facets of an experience ‘equally usable’?
• Usable with any combination of keyboard & mouse and touch
• Legible, always
Long story short: if responsive design becomes more difficult or more expensive than your usual methods, then something isn’t right.
Responsive design doesn’t work that way!
I’m sure those windmills will keep them cool!
WINDMILLS DO NOTWORK THAT WAY.
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.)
‘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.
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!
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?”
• 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
• 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.
• 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.
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
ReutersAnalysis 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 Mobile Network Touted as World's Fastest
The New York Times 15 mins ago
Christopher Gregory, The New York Times
T2
T3 s1 T3 s2
R
T3 s0
T1
T0
T0
G0G0G1
H G1S0G1
H G1S0G1
H G1S0 S0
G1H G1
S1
R: Sitka level 1
T0: Segoe UI all-caps level 1T1: Sitka level 5T2: Sitka level 3T3: Segoe UI level 0
s0: @colorG, italics1: @colorGs2: @color4
G1
G1H
G1
G1H
G1
G1H
G1
G1
H: 1px
S0: 300pxS1: 2 (S0 + G1) + H
G0: 4 (G1)G1: 20px
H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
“Blue lines” for Entity Cluster
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
ReutersAnalysis 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 Mobile Network Touted as World's Fastest
The New York Times 15 mins ago
Christopher Gregory, The New York Times
T2
T3 s1 T3 s2
R
T3 s0
T1
T0
T0
G0G0G1
H G1S0G1
H G1S0G1
H G1S0 S0
G1H G1
S1
R: Sitka level 1
T0: Segoe UI all-caps level 1T1: Sitka level 5T2: Sitka level 3T3: Segoe UI level 0
s0: @colorG, italics1: @colorGs2: @color4
G1
G1H
G1
G1H
G1
G1H
G1
G1
H: 1px
S0: 300pxS1: 2 (S0 + G1) + H
G0: 4 (G1)G1: 20px
H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
Expose the underlying structure; let dev do the math
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
ReutersAnalysis 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 Mobile Network Touted as World's Fastest
The New York Times 15 mins ago
Christopher Gregory, The New York Times
T2
T3 s1 T3 s2
R
T3 s0
T1
T0
T0
G0G0G1
H G1S0G1
H G1S0G1
H G1S0 S0
G1H G1
S1
R: Sitka level 1
T0: Segoe UI all-caps level 1T1: Sitka level 5T2: Sitka level 3T3: Segoe UI level 0
s0: @colorG, italics1: @colorGs2: @color4
G1
G1H
G1
G1H
G1
G1H
G1
G1
H: 1px
S0: 300pxS1: 2 (S0 + G1) + H
G0: 4 (G1)G1: 20px
H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
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
ReutersAnalysis 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 Mobile Network Touted as World's Fastest
The New York Times 15 mins ago
Christopher Gregory, The New York Times
T2
T3 s1 T3 s2
R
T3 s0
T1
T0
T0
G0G0G1
H G1S0G1
H G1S0G1
H G1S0 S0
G1H G1
S1
R: Sitka level 1
T0: Segoe UI all-caps level 1T1: Sitka level 5T2: Sitka level 3T3: Segoe UI level 0
s0: @colorG, italics1: @colorGs2: @color4
G1
G1H
G1
G1H
G1
G1H
G1
G1
H: 1px
S0: 300pxS1: 2 (S0 + G1) + H
G0: 4 (G1)G1: 20px
H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
Provide a visual guide for type styles
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
ReutersAnalysis 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 Mobile Network Touted as World's Fastest
The New York Times 15 mins ago
Christopher Gregory, The New York Times
T2
T3 s1 T3 s2
R
T3 s0
T1
T0
T0
G0G0G1
H G1S0G1
H G1S0G1
H G1S0 S0
G1H G1
S1
R: Sitka level 1
T0: Segoe UI all-caps level 1T1: Sitka level 5T2: Sitka level 3T3: Segoe UI level 0
s0: @colorG, italics1: @colorGs2: @color4
G1
G1H
G1
G1H
G1
G1H
G1
G1
H: 1px
S0: 300pxS1: 2 (S0 + G1) + H
G0: 4 (G1)G1: 20px
H
G1
G1H
G1
G1H
G1
G1H
G1
G1H
G1
G1H