Chad Currie@smithandrobot.com

ResponsiveWeb Design

Embracing Uncertainty

Designing for More Screens

Without burning out.

or

Requisite RWD freakout photo

(Borrowed from David Blooman’s @dblooman Blog Post: http://mobiletestingfordummies.tumblr.com/post/

20056227958/testing)

Yes, there’s more to design.

Working harder can’t be the answer.

We’re just going to work differently.

Today

100:50

Definitions

Responsive

Flexible Grid

Media Queries

Fluid Images

Adaptive

Responsive Layout Device DetectionLocation Awareness

Server-side Magic

Bandwidth Awareness

Dynamic Images

Mobile Content

“RWD”A convenient short-hand for“one design, many devices”

“RWD”Generally refers to matters of layout.

“RWD”Not great for apps.

“RWD”Gets you really far in

serving lots of devices with not a lot of complexity.

This talk is (mostly) for designers.

Specifically,how does responsive influence your process?

TopicsThe current state of RWD

Resources you have now

Getting Started

Managing Your Design Process

You+ Writers+ Bosses+ Coders

Testing

Extra Credit

RWD is still changing.

“Nice responsive site.You’re doing it wrong.”

Train Your BrainDesignBlogs Books Videos

TwitterAccounts

SiteGalleries

Patten Libraries

It’s a real book: http://www.amazon.co.uk/NASA-

Space-Shuttle-Manual-Construction/

Knowing ➜ Doing

Biggest Challenge

Know-how

Organizational Will

The old days.

Define Design Develop Deploy

Now.

Define

Design Develop Deploy

Define

StartDesigning

(Where to)

?

Lock down some variables.

So you can do your job.

Start withone size.

So you can focus onthe important stuff.

Start withone size.

So you can focus onthe important stuff.

By the way

New products, like

Adobe’s Reflow are

trying to solve this with variable-canvas

design tools.

Why one size first?

That’s why.

Single-tasking.

What is a good dimension to start with?

Designing desktop first puts

off the hard decisions.

Picking an arbitrary size in the middle

is not relevant.

Picking an arbitrary size in the middle

is not relevant.

Sometimes, the hardware does matter.What does 600 pixels look like, really.

768.

It’s “hardware” relevant.

It’s close enough to 800.

It helps you establish your desktop style.

It’s tight enough to make you think ahead to phone.

768

About pixels.

When we design, we’re thinking about virtual pixels.

About pixels.“Real”Pixel

“Virtual”Retina Pixel

These aren’t your pixels.

Now youcan design.

%, please.Keep the “Flex” in

Flexible Grid.

Resist the urge to use fixed layouts.

Fixed layouts solve short term design problems,

but they add unsustainable complexity.

What are we designing?

Pages?Layouts?Widgets?

Breakpoints ≠ Layouts

Breakpoints are logic for your layouts.

Use breakpointssparingly.

There’s a pattern forming.

Sustainability.

Centralize control now.Struggle later.

Caution Words“Rollover” “We’ll fix

that with Javascript.”

“Add another breakpoint.”

“Pin” or “fixed position”

“Make it smaller” or “Limit word count”

“There’s no device for that case.”

What are we designing?

A layout of blocks.

Distributecontrol to blocks.

The grid.More than alignment.

Rows / Columns = Blocks

Blocks have their own responsive behavior, and they work together.

Don’t forget about floats. They are not on the grid, but responsive friendly.

What future are you making for yourself?Managing monolithic

pages.

Curating a system of blocks that just work.

What a block knows.A default layout behavior.

Any “family” block behaviors.

Any special device behaviors.

How to relate to other blocks.

If it might contain other special blocks.

PocketDeviceView

Laying out different states.

Mock up separate layouts for each major screen

Draft phone views in the margin of your layouts.

Lay out just one and sit very close to the coders.

Wireframe the phone, then mock up the desktop.*

Drew Clemens, Smashing Magazine. http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/

How big do you letyour desktop get?

Depends on how much time you have. Giant layouts require special care too.

Do you need a“desktop” view at all?

Nike.com has one, fluid “big screen” layout.

You+ Writer

Create a semantic language that you and your writer can share:

HeadlinesSummaries

Rich Text BodyCall to Action

SidebarMerchandizing

Callouts...

Because copy blocks are still blocks and they have responsive behavior.

You can style <br /> tags to show or hide

depending on how much space you have.

Here’s a handy writing tip.

You can style <br /> tags to show or hide

depending on how much space you have.

Here’s a handy<br />writing tip.

You+ Boss

ex·pec·ta·tions

Avoid latesurprises.

That’s why 768 is a convenient starting point.

You+ Coders

Write a block spec.

Make small HTMLtests together.

Define UI images versus content images.

(again)

Retina

Javascript swapping is a pretty good solution.

RetinaDo you need an alternate image?

3.14kb

8-bit PNGs

1.7kb

RetinaDo you need an alternate image?

http://filamentgroup.com/lab/rwd_img_compression/

Actual Size.90% JPEG95kb

1024x768 (scaled).0% JPEG (!)44kb

Retina

Ems versus Pixels.

(I don’t even know any more.)

You+ CMS

CMSs ♥Blocks.

Testing.

Make aDevice Spec.

If you don’t specify what you’ll support,

you’ll have to support everything.

Targets.3 most-

important devices you keep close

during design.

Test.5-7 devices you plan to fully support and

test thoroughly.

Support.About 15 devices you will strategically support but will not test.

If someone reposts an issue, you’ll look into it.

Watch out for this guy.

Just check the server logs.

And your answer is ...

We’re planning for 2015.

Defensive programming.design.

Expect unforeseeable cases.Plan to make adjustments.

Recommended Resources

RESPONSIVE WEB DESIGNby Ethan Marcotte

http://www.abookapart.com/products/responsive-web-design

A List ApartResponsive Topics

http://alistapart.com/topic/responsive-design

Smashing MagazineResponsive Topics

http://mobile.smashingmagazine.com/tag/responsive-design/

Wired WebmonkeyResponsive Topics

http://www.webmonkey.com/tag/responsive-design/

Brad Frost’s This is ResponsivePattern Collection

http://bradfrost.github.com/this-is-responsive/patterns.html

@RWDResponsive Twitter Topics

https://twitter.com/RWD

Responsive.isTesting Utility

http://responsive.is

Media QueriesResponsive Gallery

http://mediaqueri.es/

Stack OverflowDeveloper Community

http://stackoverflow.com/questions/tagged/responsive-design

Extra Credit

Is Responsive inherently a

compromise?

Are we allowing the technology to tell us

how to design.

How do we make our blocks not look so blocky?

Are we too focused on screen real estate.

What next big tech shift will make us run to

fix our designs?

Agile /Lean Thinking

How can we apply agile software concepts to help us

welcome uncertainty?

Conventional Project

Agile/Lean Project

Start

Start

Fail Win Fail Fail Win Win

Fail?Win?

Win

“Who the hell wants to hear actors talk?”

— H.M. Warner, Warner Brothers, 1927

Don’t read the comments.

Don’t be daunted.

Make something today.

Accept that it’s never done.

Thanks.