Getting Down & Dirty with Responsive Web Design

NT102: Getting Down and Dirtywith 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 Business-Driven Solutions Perficient Services Enterprise Portals  End-to-End Solution Delivery SOA and Business Process Management  IT Strategic Consulting Business Intelligence  IT Architecture Planning User-Centered Custom Applications  Business Process & Workflow Consulting CRM Solutions  Usability and UI Consulting Enterprise Performance Management  Custom Application Development Customer Self-Service  Offshore Development eCommerce & Product Information  Package Selection, Implementation and Management Integration Enterprise Content Management  Architecture & Application Migrations Industry-Specific Solutions  Education Mobile Technology Security Assessments Perficient brings deep solutions expertise and offers a complete set of flexible services to help clients implement business-driven IT solutions

Perficient XD STRATEGY & RESEARCH CREATIVE & INNOVATION & IDEATION & ANALYSIS INTERACTION DESIGN IMPLEMENTATION• Envisioning Workshops • Contextual Inquiry/Interviews • Visual Design • Search Engine Optimization• Industry Trend Forecasting • Brand Identity Assessment & • Information Architecture & • UI Development• Media Research Analysis Competitive Benchmarking Interaction Design • Mobile Development• Strategies for: • User Profiles and Personas • Mobile Design • Emerging Platforms • Digital Campaigns • Card Sorting for Information • Digital Publishing • Brand Loyalty & eCRM Architecture • Marketing Campaigns and • Social Media & • Heuristic Evaluation & Content Governance Usability Testing • Content & Engagements • Iterative Prototype Design • Web & Campaign Analytics • Mobile CAMPAIGNS SOCIAL MOBILE & CONTENT

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’ssomething coming

J E F F R E Y V E E N SAYS :“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.)

Remember when… …it was just this?

That time has gone

The landscape’s getting more diverseWith each passing day, the way society usesthe Internet changes: 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

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?

LU C K I LY, M Y F R I E N D * J E F F SAYS :“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.”* may not really be my friend (Told you he’s clever)

The prettyserious 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

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 money than building a desktop site ONLY

But…

The business case Less time, less effort and therefore less money to build responsively, than building separate experiences for desktop iPhone and iPad iPhone site Time to develop iPad site vs A responsive website that works with every device Desktop site (and that’s just for the desktop and two other devices!)

Not everyone agrees

L I K E JA KO B N I E L S E N * FO R E X A M P L E* photograph may actually be Leslie Nielsen

JA KO B * , T H I S I S BA D A DV I C E“Good mobile user experience requires a different design than whats needed to satisfy desktop users.Two designs, two sites, and cross-linking to make it all work.”* photograph may still actually be Leslie Nielsen Source: http://www.useit.com/alertbox/mobile-vs-full-sites.html

Responses to Nielsen Serious Not-so serious “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 professional Source: http://bit.ly/HNvjFB

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 TheoryResponsive Web Design is 3 things • A flexible grid • Flexible images and media • Media queries - Ethan Marcotte Source: http://www.alistapart.com/articles/responsive-web-design

CAUTIONCONTAINS MATH

Our base grid #wrap 960px #main 900px 900px

Target ÷ Context = Result

A flexible grid – Calculating teh awsum #wrap 960px #main 900px Target ÷ Context = Result 900px 900 960 0.9375 0.9375 * 100 = 93.75%

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 #wrap #main 900px #pri #sec 660px 220px 900px 660 ÷ 900 = 0.7333333 220 ÷ 900 = 0.2444444 73.3333% 24.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? #wrap #main #pri #sec 180px 660px { .thumb 900px 1 2 3 4 5 6 { 40px 180 ÷ 660 = 0.27272727272727 27.272727272727%

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 This: <img src=“who-win.jpg” width=“300” height=“550” alt=“Doctor Win”> Becomes this: <img src=“who-win.jpg” alt=“Doctor Win”> And add this to your CSS: img { max-width:100%; }

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 belowSo 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’s the 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 sourceAnd 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

https://twitter.com	33
https://si0.twimg.com	11
https://twimg0-a.akamaihd.net	6

Getting Down & Dirty with Responsive Web Design

by martinridgway on Aug 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 50

Statistics