APRIL 2, 2014

@PETEBERNARDO & @352INC

RESPONSIVE WEB

DESIGN

BRIEF OVERVIEW

A website that adapts to screen size, platform and orientation.

WHAT IS RESPONSIVE DESIGN?

Device fragmentation that is only accelerating

WHY SHOULD YOU USE IT?

“Other” is about to dominate

SCREEN TRENDS

All three platforms are established now

DEVICE TRENDS

MEDIA CONSUMPTION

Source: Google/Ipsos/Sterling, 2012

MULTI-SCREEN WORLD

Source: Google/Ipsos/Sterling, 2012

MOBILE ADOPTION

Source: LukeW, 2012

MOBILE ADOPTION

Source: LukeW, 2012

WHAT ARE THE STATS?

• By 2015 more U.S. Internet users will access the

Internet through mobile devices than through

PCs or other wireline devices.

• 34% of U.S. smartphone owners, about 48

million Americans, say that they mostly go online

using their phone, rather than with a computer.

• By next year, tablet sales in the United States

will outpace those of netbooks, which were once

considered a salvation for the PC industry. Note Pew Research: Mobile Fact Sheet

Future focus, One Site/URL, Focused development

BENEFITS

Flexible Grid, Flexible Media, Media Queries

WHAT MAKES UP A RESPONSIVE DESIGN?

Let your layout and fonts

scale based on percentages

target / context = result

FLEXIBLE GRID

Scale up to container

Use largest size you'll need

FLUID MEDIA

Processed when certain

conditions are met

Produce "breakpoints"

Screen size, resolution,

orientation, and more

No added specificity

These let your design

"snap."

MEDIA QUERIES

Device Width

Small Screens Landscape

480px

7” tablets Portrait

600px

10” tablets Portrait

768px

10” tablets Landspace

1024px

Desktop Widescreen 1200px

Research, Sketch, Iterate

SUGGESTED WORKFLOW

Research Continuously

Surveys – What do your

customers want?

Analytics – What is

actually happening on

the site?

Stakeholders – How is

sports different than

local?

Brand – How do you want

to be perceived?

SUGGESTED WORKFLOW

Design Spikes

Sketch, Sketch, Sketch

Establish style guide

Focus on design patterns

over pages

SUGGESTED WORKFLOW

DESIGN PATTERNS

Iterative Development

• Agile, Lean & Scrum

• Iterative approach

• Mobile up

• Keep code light weight

• Test, test, & test

• Launch often

SUGGESTED WORKFLOW

ADDITIONAL EDUCATION

EXAMPLES

http://www.bostonglobe.com/

http://www.tampabay.com/

http://time.com/

http://law.com

http://mediaqueri.es/

APRIL 2, 2014

@PETEBERNARDO & @352INC

THANK YOU!

@352INC & @PETEBERNARDO