Intro.deck.0-3

Responsive design sync №1Will 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.

The basics

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

Some good examples:

MediaQueri.es

BBC Radio iPlayer

SBNation

Global News

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

Even video games can be equally usable!

Mythbustin’

“Responsive design is expensive.”

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

“Responsive design is hard.”

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

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

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

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.)

How it’s done: mobile first

‘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.

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

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

Can we make this better for even bigger canvases?

See how easy that was?

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!

Appendix: Important Stuff

Legibility

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?”

See if you can find the actual measure of legibility:

Points if you chose φ!

Communicating responsive designs

Are those really pixels you’re pushing?

• 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


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



WORLD

USA Today

ABC News



BBC News


MORE WORLD



Reuters








BUSINESS






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



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



WORLD

USA Today

ABC News



BBC News


MORE WORLD



Reuters








BUSINESS






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



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



WORLD

USA Today

ABC News



BBC News


MORE WORLD



Reuters








BUSINESS






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



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



WORLD

USA Today

ABC News



BBC News


MORE WORLD



Reuters








BUSINESS






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



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

Thanks!

Intro.deck.0-3

Documents

Transcript of Intro.deck.0-3