Responsive Design: What is it? How do we do it? How much will it cost?

RESPONSIV

E DESIG

N

NC

TE

CH

4G

OO

D |

JU

NE

7,

20

13

QUICK IN

TRODUCTI

ON

WH

O A

M I

?

Karin Tracy• VP, Creative

Services• Lead strategy,

UX, design• Dog lover

GOOD MORNING!

• Technology & creative services company

• Focus on nonprofits• Experts in open

source technologies• Offices in DC,

Baltimore, LA, Portland OR

• Clients nationwide• @ConfluenceCorp

4 practices

1. Technology consulting

2. Creative solutions

3. Open source development

4. Salesforce

CONFLUENCE

SMALL SAMPLE OF OUR CLIENTS

SMALL SAMPLE OF OUR CLIENTS

WHAT

SHALL

WE

TALK

ABOUT?1. What is responsive

design?2. Responsive design

examples3. Process/workflow4. Retrofitting site to

RD5. Level of effort

WHAT

IS R

ESPONSIV

E

DESIGN?

SE

CT

I ON

1

1. Heard of responsive design?

2. Considering responsive design?

3. Actively planning responsive?

4. Already have responsive in place?

SHOW OF HANDS

RESPONSIVE DESIGN IS…

“a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computers monitors to mobile phones).”

– Wikipedia

“a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computers monitors to mobile phones).”

Ethan MarcotteCoined term responsiveA List Apart, 2010

2013: THE YEAR OF RESPONSIVE DESIGN

“For those of us who create websites and services, all of this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”

– Pete Cashmore

Pete CashmoreFounder/CEO - Mashable

“For those of us who create websites and services, all of this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”

– Pete Cashmore

GETTING READY FOR 2014

http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx

Mobile site

1. Different versions of one site

2. Multiple codebase

Adaptive design

1. Sniffs for specific end device

2. Loads pre-defined layout based on result

WHAT RESPONSIVE DESIGN IS NOT

RESPONSIV

E DESIG

N

PRIN

CIPLE

S

SE

CT

I ON

2

• CSS3: content, layout tailored to screen size

• Specify width, height, orientation (landscape/portrait), resolution

1. MEDIA QUERIES DEFINE BREAKPOINTS

<!-- CSS media query on a link element -->

<link rel="stylesheet" media=”(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->

<style>

@media (max-width: 600px) {

  .facet_sidebar {

    display: none;

  }

}

</style>

MEDIA QUERY CODE

Consists of

1. Media type• Screen• All

2. Expression• Orientation• Min-width• Max-width• Device-aspect ratio• Device-height• Device-width

<link rel="stylesheet" media="screen and (color)" href="example.css" />

COMBINING EXPRESSIONS

And/Or/Not

1. And = AND

2. Comma = OR

3. Not = NOT@media screen and (color), projection and

(color) { … }

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

COMMON SIZE BREAKPOINTS/BREAKRANGES

• Breakpoints – base them on content/layout

• Not based on device!• # of layouts can range

from 2-5 (ish)• 320 – 480 pixels Phone• 768 – 1025 pixels Tablet• > 1024 Desktop

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }

@media only screen and (min-device-width :768px) and (max-device-width : 1024px) { … }

@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: portrait) { … }

@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: landscape) { … }

• Ability to scale = dependent on fluid design

• No more fixed width; pixels

• Think in percentages and proportion

2. FLUID GRID

Photo credit: Robert Couse-Baker, Creative Commons

2. FLUID GRID

3. IMAGES & VIDEOS RESIZE

Issues:

1. Have to serve largest version of image to cover all scaled amounts OR

2. Use media queries to serve different images per screensize

To start:

1. No width/height attributes on <img> tag

2. Add img {max-width: 100%;} to CSS

3. IMAGES & VIDEOS RESIZE - WORKAROUNDS

Icon fonts• Scalable font• Often open

source

Adaptive Images• Add .htaccess, 1

php file, javascript call

• Properly sized images created on the fly

• www.adaptive-images.com

4. REMOVE NON ESSENTIAL CONTENT

Photo credit: jonasginter, Creative Commons

• Mobile-first mantra• Focus/concentrate

“must” have content for small sizes

• Ask your audience!• Review analytics to

validate

• RD isn’t about mobile!

• It’s about device size.

• What experience is appropriate for small, medium, large?

• Don’t make assumptions that can’t be validated

5. RETHINK NAVIGATION FOR SMALL SCREENS

• Ask yourself:• What width is

too narrow to tap easily?

• Clue to breakpoint size

5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE PADDING

Source: http://responsivenavigation.net

5. RETHINK NAVIGATION FOR SMALL SCREENS – SELECT MENU

Source: http://responsivenavigation.net

5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE TOGGLE MENU

Source: http://responsivenavigation.net

5. RETHINK NAVIGATION FOR SMALL SCREENS – MULTI-TOGGLE MENU

Source: http://responsivenavigation.net

5. RETHINK NAVIGATION FOR SMALL SCREENS – OFF CANVAS SLIDE MENU

Source: http://responsivenavigation.net

EXAMPLES O

F

RESPONSIV

E DESIG

N

SE

CT

I ON

3

WORLD WILDLIFE FUND

www.wildlife.org

Source: http://mediaqueri.es

WATER.ORG

www.water.org

Source: http://mediaqueri.es

MERCY CORPS

www.mercycorps.org

BOSTON GLOBE

www.bostonglobe.com

Source: http://mediaqueri.es

NEW YORK TIMES

www.nytimes.com | www.nytimes.com/marketing/prototype/

NY PUBLIC LIBRARY

www.nypl.org

Source: http://mediaqueri.es

ST. PAUL’S SCHOOL

http://www.stpaulsschool.org.uk

Source: http://mediaqueri.es

GEORGE MASON U SCHOOL OF LAW

www.law.gmu.edu

Source: http://mediaqueri.es

SMASHING MAGAZINE

www.smashingmagazine.com

Source: http://mediaqueri.es

STUFF AND NONSENSE

stuffandnonsense.co.uk

Source: http://mediaqueri.es

RESPONSIV

E DESIG

N

PROCESS

SE

CT

I ON

4

DISCOVERY • Research

• Information Architecture

• Content Strategy

• Industry research

• Brand research

• Marketing review

• Analytics review

DISCOVERY: RESEARCH

• Existing site content review

• R.O.T.• Device size-

specific content

• Site map

DISCOVERY: IA/CONTENT STRATEGY

DESIG

N• User Experience

(UX)• Wireframes

(Interaction design)

• Visual design (Interface design)

• Sketches -- site structure, hierarchy

• Breakpoint/range decision

• Content-driven decisions

DESIGN: USER EXPERIENCE (UX)

Photo credit: Kemeny_x, Creative Commons

• Communicate functionality / process

• Gray boxes• Interactive is

best• Isn’t design

DESIGN: WIREFRAMES (INTERACTION DESIGN)

DESIGN: INTERACTION DESIGN

• Design decisions• Color• Typography• Detailed choices• Photoshop vs.

Style Tiles vs. design in the browser

DESIGN: USER INTERFACE DESIGN

DESIGN: USER INTERFACE DESIGN

DEVELO

P • Templates• jQuery• CMS

integration

• HTML5• CSS3• Media queries

for breakpoints

• jQuery – no Flash

DEVELOP: TEMPLATES/JQUERY

• HTML/CSS integrate with any CMS

• Confluence commitment to open source systems (WordPress, Drupal, Joomla!)

DEVELOP: CMS INTEGRATION

TESTI

NG/QA • Test, test and

more test

• Must test on actual devices!

• Beg, borrow, [steal]

• Use online testing, too

• Track bugs for each breakpoint

DEVELOP: TESTING

TRAIN

ING/D

OCUMENTA

TION

• Clear understanding of content per breakpoint

• High enough image resolution

CONTENT

MIGRAT

ION

• No different than fixed design

LAUNCH

You d

id it

!

Photo credit: Express Monorail, Creative Commons

RETROFIT

TING A

N

EXISTI

NG SIT

E

SE

CT

I ON

5

PROS• Separate codebase• No legacy issues from

existing code• Feels “app-like”• Can be good for

microsite, event, conference, etc.

• Works better for sites that can serve limited content to phones

CONS• Not future

friendly• Support costs

for updating two sites

• Content parity (if necessary) is work

RETROFITTING: DEDICATED MOBILE SITE

Cost: Low to moderate

PROS• One codebase• Future friendly• Tools available

(RWD Retrofit, MobifyJS)

• Can “buy” you another 12-16 months before redesign

CONS• Relies on existing

clean, semantic markup

• Hard to use framework tools (Bootstrap, Zurb, etc.) and existing markup

• Extensive testing/QA cycle necessary

RETROFITTING: RESPONSIVE RESKINNING

Cost: Moderate to high

PROS• Holistic approach• Content first

thought• Supports widest

variety of end users• One codebase• Future friendly• Tools available for

IE 7/8 compliance

CONS• Extensive

testing/QA cycle necessary

• Testing on real devices - $

RETROFITTING: DECIDING ON RWD

Cost: High at present

LEVEL O

F EFF

ORT/C

OST

SE

CT

I ON

6

Elements that add time

• Learning curve (will lessen into 2014)

• Content strategy for multiple views

• UX design (wireframing)

• Media queries/CSS• Testing• Project management

Level of Effort• ~80% > effort for RD

through Q2 2014• ~ 50% > following 12-18

months• May even out to ~30%

greater effort than fixed site

Other Choices• Mobile site: Potentially less

at start, future upkeep of two sites

• Adaptive-device (device specific): New devices out every month; phablets – gets mobile or desktop?

LEVEL OF EFFORT

Budget Considerations

• Discovery/education

• Understanding/buy-in from management

• Needs to be group decision

Process Considerations

• Waterfall process may not work

• Requires collaboration, iteration, experimentation

• Lots of decisions to make

LEVEL OF EFFORT

RESOURCES

SE

CT

I ON

7

Testing• MattKersley.co

m/responsive• QuirkTools.co

m/screenfly/• Screenqueri.es• BrowserStack.

com

Dealing with IE 7/8 :(

• Doesn’t support media queries / CSS3

• Respond.js (https://github.com/scottjehl/Respond)

• Modernizr.com

RESOURCES

Responsive Wireframes

• Froont• Wirefy• Jetstrap• Balsamiq• ProtoShare

Interface Design• Photoshop /

graphics editors• Style Tiles (

styletil.es)• Adobe Edge

Reflow (html.adobe.com/edge/reflow/)

RESOURCES

Layout/Grids/Frameworks

• Golden Grid System (goldengridsystem.com)

• Simple Grid (SimpleGrid.info)

• Less Framework (LessFramework.com)

Cont.• Bootstrap

(Twitter.github.io/bootstrap/)

• ZURB (Foundation.zurb.com)

• Skeleton (Getskeleton.com)

RESOURCES

Navigation• FlexNav

(github.com/indyplanets/flexnav)

• TinyNav (tinynav.viljamis.com)

• Mean Menu (meanthemes.com)

• ResponsiveNavigation.net

Reading• A List Apart• Mashable• Smashing

Magazine• ResponsiveDe

signWeekly.net

RESOURCES

QUESTIONS?

KT

RA

CY

@C

ON

FL

UE

NC

EC

OR

P . CO

M | @C

ON

FL

UE

NC

EC

OR

P