responsive web design, ux considerations @ digital shoreditch festival

Responsive Web DesignUX Considerations

Responsive Web Design (RWD)

1 | What exactly is responsive web design?

2 | Should every website be responsive?

3 | The responsive design workflow.

1 | What exactly is responsive web design?

What is responsive web design?

A design approach that aims to provide a consistent and easily accessible experience on all devices and screen sizes.

“We’re faced with a greater number of devices, input modes, and browsers than ever before. Therefore, rather than tailoring disconnected designs, we should treat them as facets of the same experience.”

What is responsive web design?

Ethan Marcotte, 2010.

Fluid layout

Flexible media

Media queries

RWD 3 key components

Fluid layout

Non-fixed layout, with percentage-based fluid columns.

1

/* * Four-column grid active * ---------------------------------------- * Margin | # 1 2 3 4 | Margin * 5.5% | % 25 50 75 100 | 5.5% */

Fluid layout

Column percentages based on the amount of EM's as opposed to pixels.

1

Pixels

VS

EM’s

Fluid layout

Content defines the breaking points.

1

Should also be fluid and scale with the browser’s dimensions.

Scale in measurements but also in file sizes.

Should render sharply on the smallest and biggest screens.

Flexible media

Icons, graphics, images & videos

2

Flexible media2

Icons and graphics as symbol fonts.

Flexible media2

The average size of an image on a web page is 788kB. All images add up to 62% of the total file size of a website.

An Event Apart: Responsive and Responsible / by Luke Wroblewski.

Flexible media2

Use video platforms that already successfully handle videos across devices.

Flexible media… and content2

Ensure hierarchy and relationships stay truthful to messaging and strategy.

Content should also be fluid


Content Everywhere: Strategy and Structure for Future-

Ready Content / by Sara Wachter-Boettcher.


Interdigitation Trent Walton

Content choreographyJordan Moore

Flexible media… and content

Create once, publish everywhere

2

Nissan team @ Critical Mass.

From a single CMS. Highly structured content. Systematically defined in modules.

Media queries3

Allow to readjust a layout when certain physical conditions are present.

RWD 3 key components

Beyond Squishy: The Principles of Adaptive Design / by Brad Frost.

Device feature detection User Agents Server-side components (RESS) Inter-device communication API’s Conditional or lazy loading Platform optimisation Performance Etc…

…below the tip

Performance

“If somebody cannot load your website, they will never even know how it is to use it.” Anna Debenham

Performance

“When someone builds a 4MB responsive site, blame the

implementation, not the technique.”

Tim Kadlec

Performance

“You want a huge header image at the top of the page? Sure, but that’s a 100kB of your budget used up, so you’ll have to loose a weight or two of webfont to bring things back under the limit.” Mark Perkins

2 | Should every website be responsive?

Device diversity

Future proof

Today's internet usage

Input methods diversity

Consistent brand messaging

5 key reasons for RWD

Device diversity

We cannot think of the web in terms

of devices.

1

“People thinking RWD is mobile design, tablet design,

game console design, or even futuristic-screen-on-your-fridge

design are mistaken.” Elliot Jay Stocks

Device diversity1

Future proof

The web is not static.

2

Today's internet usage3

The Mobile Consumer: A Global Snapshot 2013 / by Nielsen.

How many users perform web browsing on their mobiles?


The Mobile Consumer: A Global Snapshot 2013 / by Nielsen.

How many users perform mobile shopping?


“By 2015, the ITU predicts mobile traffic will exceed desktop traffic, and the ‘mobile-mostly’ group already make up a staggering 20% of users in the US and UK.” Stephanie Rieger

The other end of the spectrum: game consoles. 51% of children aged 12-17 own a

portable game console. 80% of children aged 12-17 own a TV

game console. 1 in 8 adults access internet on a

console.


Playing with Game Console Browsers / by Anna Debenham.

Input methods

Users access websites using a variety of input modes.

4

Consistent brand message

Across multiple experiences and platforms, all from a single content management system.

5

3 | The Responsive Design workflow.

RWD, a more expensive approach?

More time + more effort & skills =

higher cost for the client.

RWD, a more expensive approach? There’s a cost too for ignoring the multitude

of devices currently accessing websites.

Creating an experience for each one, or some, of those devices will also add extra time & money.

Multiple content strategies, deployments, and code bases to maintain, keep adding up to the cost…

RWD workflow, getting it right

Our current design workflow needs to change. Prototyping fluid layouts, instead of

wireframing multiple viewports. Working closer with content strategy. Exchanging / expanding skill sets.

RWD workflow, getting it right

Project planning needs to adapt as well.Set an optimisation budget upfront.Consider which elements require client sign off. Define relevant deliverables.

Conclusion

RWD represents an exciting challenge, and the opportunity to create not only user interfaces, but full online experiences.

Thank youMichelle Constante

http://michelleconstante.com

@michellula