1

Executing for Every Screen

Build, launch and sustain products for your customers and business

@shoobe01 #float2012

22

Responsive design is wrong.

And also, the best thing ever.

33

Responsive design isn’t new.• Fluid, liquid, elastic• Media queries• CSS• Percents and points

44

But that’s okay.• Buzzwords work• Design, plan, execute for multiple screens• Principles are sound

55

Device detection and server-side software.

66

RESS isn’t new, either.• Device detection• Customized presentation• Scale and chunk• More efficient for everyone

77

Build products for people. Not for platforms.

88

Select the most popular platform.

99

Which web?• Trends• Analytics• Familiarity

1010

Why do I need two of these?

1111

Lies, damned lies, and statistics.

1212

Know your market• Buzz is not data• Extrapolation errors• Tribalism and fanboys• Your analytics are probably wrong

1313

You are screwing yourself.• Wasting time• Wasting resources• Missing opportunities

1414

Fragmentation is great.

1515

Design for every platform, and every screen.

1616

1717

Design beyond pixels.

1818

Avoid DIPs• Em and percent• Point• Inch• mm• Twip• Etc.

1919

Respond to more than scale.

2020

2121

Simpler:Link to email.

2222User choice. Contextually.

2323

2424

Use device capabilities.

2525

Create products, not projects.

2626

Principles > Patterns > Templates > Pages

2727

2828

2929

Features != pages• Features are features• States, views• Context and conditionality

3030

First, ask questions.• What is the product?• What is the one main feature?• What problem does it solve? • Who will use it?

3131

I don’t ask:• What platform?• What technology?• Is it feasible?

3232

Get principles.Get buy in.Share with everyone.

3333

Design systems.Design ecosystems.

3434

Everyone designs.SoftwareStorageNetworksInterfacesRulesMessagingTrainingMarketingExecution

3535

Design for every screen.

3636

Design for every screen.• Gather – Collect info• Define – Personas, objectives• List – All possible features• Filter – Keep only what you need• Group – Cluster and establish dependencies• Prioritize – Earlier and higher, in system or backlog• Arrange – Notional interfaces

3737

Then design for each screen.

3838

Then design for each screen.• What platform?• What technology?• Is it feasible?

3939

Design to make decisions.• Platforms and technologies.• Business rules.• Storage and transport.• Access and security.• Interoperability and legacy systems.

4040

Customize each platform.• Do not degrade.• Do not enhance.• Never exclude or simplify.

4141

Execute for every screen

4242

Data and services first.• Design, plan.• Data and services first.• Then shared interfaces.• Prioritize major platforms.

4343

Build for the future.

4444

Be lazy, and cheap.• Build things once.• Fix things once.• Buy fewer servers.• Be stingy with data transfer.

4545

Platform teams should borrow and cheat.

4646

Multi-platform plans:• Serial.• Parallel.• Staggered.

4747

4848

Serial• Slow.• Inefficient.• Loss of control.• Opaque to users.• Loss of marketing opportunities.

4949

5050

Parallel• Resource strain.• Inefficient test.• No opportunity for changes.• Bugs re-appear.• Blown schedules.

5151

5252

5353

5454

Staggered• Inherently multi-platform.• Shared features built first.• Formalizes collaboration.• Fewer bugs.• Easily traceable.

5555

Living with your product.

5656

Change happens• Bugs• Catastrophic success• Competition• Leadership direction• Constant improvement• Market pressures

5757

Planning your second release.

5858

Planning your second release.• Bugs• Catastrophic success• Competition• Leadership direction• Constant improvement• Market pressures

5959

Stick to your principles• Enterprise principles.• Financial or sales targets.• Satisfaction, recognition, referral.• User needs.• Design objectives.

6060

Listen.• Usability research• Analytics• Marketing research• Ratings• Reviews• Forums

6161

Move carefully. • Do not over-react.• Understand the true scale. • Plan before committing resources.• Consider consequences.

6262

Change your principles.

6363

Plan and launch as you live.

6464

Don’t copy anything I’ve done.

6565

Principles > Patterns > Templates

6666

Principles > Practices > Tactics

6767

Responsive,native,physical,buildable,extensible.

68

Steven Hoober

steven@4ourth.com

+1 816 210 0455

@shoobe01

shoobe01 on:

www.4ourth.com