Getting Down & Dirty with Responsive Web Design

NT102: Getting Down and Dirty with Responsive Web Design

Martin Ridgway, Perficient - Lead User Experience Designer

About Perficient

Perficient (perficient.com) is a leading information technology consulting firm

serving clients throughout North America. We help clients implement business-

driven technology solutions that integrate business processes, improve worker

productivity, increase customer loyalty and create a more agile enterprise to better

respond to new business opportunities.

Perficient Solutions, Expertise and Services

Perficient brings deep solutions expertise and offers a complete set of flexible services to help clients implement business-driven IT solutions

Business-Driven SolutionsEnterprise PortalsSOA and Business Process ManagementBusiness IntelligenceUser-Centered Custom ApplicationsCRM SolutionsEnterprise Performance ManagementCustomer Self-ServiceeCommerce & Product Information

ManagementEnterprise Content ManagementIndustry-Specific SolutionsMobile TechnologySecurity Assessments

Perficient Services End-to-End Solution Delivery IT Strategic Consulting IT Architecture Planning Business Process & Workflow Consulting Usability and UI Consulting Custom Application Development Offshore Development Package Selection, Implementation and

Integration Architecture & Application Migrations Education

Perficient XD

STRATEGY & IDEATION

RESEARCH & ANALYSIS

CREATIVE & INTERACTION DESIGN

INNOVATION &IMPLEMENTATION

• Envisioning Workshops• Industry Trend Forecasting • Media Research Analysis • Strategies for:

• Digital Campaigns• Brand Loyalty & eCRM • Social Media &

Governance • Content & Engagements• Mobile

• Contextual Inquiry/Interviews

• Brand Identity Assessment & Competitive Benchmarking

• User Profiles and Personas

• Card Sorting for Information Architecture

• Heuristic Evaluation & Usability Testing

• Web & Campaign Analytics

• Visual Design

• Information Architecture & Interaction Design

• Mobile Design

• Digital Publishing

• Marketing Campaigns and Content

• Iterative Prototype Design

• Search Engine Optimization

• UI Development

• Mobile Development

• Emerging Platforms

SOCIALCAMPAIGNS

& CONTENT MOBILE

TL;DR

What we’ll be covering today

• There’s something big on the horizon

• What we can do - just what is Responsive Web Design anyway?

• Examples please - show me this new hotness

• Drawbacks and criticisms – it’s not all roses, right?

• The business case for Responsive Web Design

• Down and dirty with the code – implementing a Responsive Web Design

There’s something coming

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows.”

(He founded Adaptive Path as well as Typekit, and has worked for Google. He’s clever. Take heed.)

JEFFREY VEEN SAYS:

Remember when…

…it was just this?

That time has gone

The landscape’s getting more diverse

As of February 2012,

• There are 1.2 billion mobile Web users worldwide

• Mobile devices account for 8.49% of global website hits

• Many mobile Web users are mobile-only

And by 2015,

• Paying by mobile will be worth over $1 trillion

• Mobile commerce will reach $119 billion• US mobile commerce will be worth $31

billion

Source: MobiThinking - http://bit.ly/a2f9uO

With each passing day, the way society uses the Internet changes:

So what can we do?

One possible solution

Well, no.

• That’d be silly• And expensive• …but mostly silly.

Seriously dude…what can we do?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows.Responsive Web Design represents a fundamental shift in how we’ll build websites for the decade to come.”

(Told you he’s clever)

LUCKILY, MY FRIEND* JEFF SAYS:

* may not really be my friend

The pretty serious technology

A responsive example

Responsive websites adapt (and respond) to

their environment.

Same site, different experiences.

Or, to put it another way

One website, many screens

Why?

• One solution to rule them all• One codebase means one set of metrics for all users• A responsive design allows for greater consistency of brand across

all experiences

How?

Be pragmatic!

• Review your traffic logs and determine what mobile devices are accessing your site today

• Test your site on those devices and determine where the experience breaks down

• Develop an action plan to address common issues, such as:

• Content that is only accessible when a user hovers over something• Controls that are too small to manipulate on touch screens• Popup (or modal) windows that are unusable on small screens• A lot of heavy graphics and media

Examples please!

Boston Globe

bostonglobe.com

St. Paul’s School, London

stpaulsschool.org.uk

Arizona State University

asuonline.asu.edu

Any drawbacks?

*

* may actually be a few drawbacks

Yelp

Why not Responsive Web Design?

3 reasons not to:1. Load time2. Integration with 3rd party applications3. The big one…

More time, more effort and therefore more moneythan building a desktop site ONLY

But…

Less time, less effort and therefore less moneyto build responsively, than building separate experiences for desktop iPhone and iPad

A responsive website that works with every device

Desktop site

iPad site

iPhone site

Tim

e to

dev

elop

(and that’s just for the desktop and two other devices!)

vs

The business case

Not everyone agrees

L IKE JAKOB NIELSEN* FOR EXAMPLE

* photograph may actually be Leslie Nielsen

* photograph may still actually be Leslie Nielsen

“Good mobile user experience requires a different design than what's needed to satisfy desktop users.

Two designs, two sites, and cross-linking to make it all work.”

Source: http://www.useit.com/alertbox/mobile-vs-full-sites.html

JAKOB*, THIS IS BAD ADVICE

Responses to Nielsen

“About 25 per cent of the people who use the mobile web only use a mobile browser. They never use a desktop computer. These users are disproportionately low income, black, and Hispanic.”

- Karen McGrane, UX professionalSource: http://bit.ly/HNvjFB

Serious Not-so serious

Conclusions

• Does a responsive approach align to our site’s objectives?• Do our users expect a similar version of the website on their

phone as they do on their computer?• Do we have the time and the resources to do it?

Getting down and dirty

* You guys, after this bit

*

The Theory

• A flexible grid• Flexible images and media• Media queries

- Ethan MarcotteSource: http://www.alistapart.com/articles/responsive-web-design

Responsive Web Design is 3 things

CAUTIONCONTAINS

MATH

Our base grid

900px

900px

960px#wrap

#main

Target ÷ Context = Result

A flexible grid – Calculating teh awsum

900px

900px

960px#wrap

#main

Target ÷ Context = Result

0.9375 * 100 = 93.75%

900 960 0.9375

A flexible grid – the CSS

#wrap {width:95%;margin:0 auto;

}

#main {width:93.75%; /* 900/960=0.9375 */margin:0 auto;

}

A flexible grid – more detail to our page

900px

900px

#wrap

#main

#pri #sec

660px 220px

660 ÷ 900 = 0.733333373.3333%

220 ÷ 900 = 0.244444424.4444%

A flexible grid – CSS for our columns

#pri {float:left;width:73.33333%; /* 660/900=0.733333 */

}

#sec {float:right;width:24.44444%; /* 220/900=0.244444 */

}

A flexible grid – OK, you’re kidding, right?

900px

#wrap

#main

#pri #sec

660px

1 2 3

4 5 6

{180px

.thumb

180 ÷ 660 = 0.2727272727272727.272727272727%

{

40px

A flexible grid – you weren’t kidding

.thumb {float:left;width:27.272727272727%; /* 180/660=0.2727272727272727 */margin-right:6.060606060606%;/* 40/660=0.06060606060606 */

}

Flexible images

<img src=“who-win.jpg” width=“300” height=“550” alt=“Doctor Win”>

<img src=“who-win.jpg” alt=“Doctor Win”>

img {max-width:100%;

}

And add this to your CSS:

Becomes this:

This:

Flexible images, video and media, oh my!

img, embed, object, video {max-width:100%;

}

Media queries – the CSS bad boys of RWD

@media screen and (min-width:960px) {

body {color:red;

}

}

Media queries – multiple condition hotness

@media screen and (min-width:768px) and (orientation:landscape) {

body {color:red;

}

}

Won’t SOMEBODY thinkof the children browsers?!?

Media queries – browser support

• Works in all major browsers… …with the exception of Internet Explorer 8 and below

So what do we do about old IE?• Don’t worry about it!• …seriously you guys. Don’t.

An example CSS file supporting older browsers

/* default styles go here, stuff for older IE, etc */

@media screen and (min-width:480px) {/* mobile device media query */

}

@media screen and (min-width:768px) {/* tablet device media query */

}

@media screen and (min-width:960px) {/* desktop media query (for new

browsers) */}

OMG dude, where’sthe frameworks?

Responsive frameworks

http://foundation.zurb.com

http://semantic.gs

Responsive frameworks

http://www.getskeleton.com

http://csswizardry.com/inuitcss

Any final tips? Hints? Cheats?C’MON MAN!

View source

And try Twitter:• @rwd (Useful links)• @smashingmag (More useful links)• @beep (Ethan Marcotte)• @martinridgway (That’s me!)

“Stay committed to your decisions, but stay flexible in your approach.”

- Tom Robbins, novelist