Responsive Web Design: One Size No Longer Fits All

R E S P O N S I V E W E B D E S I G NOne Size No Longer Fits All

ABOUT PERFIC IENT

Perficient 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.

• Founded in 1997

• Public, NASDAQ: PRFT

• 2011 Revenue of $260 million

• 20 major market locations throughout North AmericaAtlanta, Austin, Charlotte, Chicago, Cincinnati, Cleveland, Columbus, Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis, Minneapolis, New Orleans, Philadelphia, San Francisco, San Jose, St. Louis and Toronto

• 1,800+ colleagues

• Dedicated solution practices

• 600+ enterprise clients (2011) and 85% repeat business rate

• Alliance partnerships with major technology vendors

• Multiple vendor/industry technology and growth awards

PERFIC IENT PROFILE

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

OUR SOLUTIONS EXPERTISE & SERVICES

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

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

& CONTENTMOBILE

OUR SPEAKER

• Lead User Experience Designer in Perficient’s XD practice.

• Martin has over a decade of experience in creating award-winning online interfaces for global multi-national companies.

• His deep industry experience as a consultant has provided him with a broad knowledge of topics important to today’s web development landscape, and the landscape of the near future.

• His accent is only slightly off-putting.

Martin Ridgway

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• The nitty-gritty – getting down with

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 T IME HAS GONE

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

THE LANDSCAPE ’S GETT ING MORE D IVERSE

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

THE WHY’S AND THE HOW’S

• 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

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:

Why?

How?

• 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

1. Load time

2. Integration with 3rd party applications

3. The big one…

WHY NOT RESPONSIVE WEB DESIGN?

3 reasons not to:

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

BUT…

THE BUSINESS-CASE

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

deviceDesktop site

iPad site

iPhone site

Tim

e t

o de

velo

p

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

vs

NOT EVERYONE AGREES

LIKE 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

“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

Serious Not-so serious

• 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?

CONCLUSIONS

THE NITTY-GRITTY

* You guys, after this bit

*

• A flexible grid• Flexible images and media. Or rather, images and media that work in a flexible context• Media queries

- Ethan Marcotte

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

THE THEORY

Responsive Web Design is 3 things

CAUTIONCONTAINS

MATH

A FLEXIBLE GRID

900px

900px

960px#wrap

#main

Target / Context = Result

A FLEXIBLE GRID

900px

900px

960px#wrap

#main

Target / Context = Result

0.9375 * 100 = 93.75%

900 960 0.9375

A FLEXIBLE GRID

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

}

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

}

A FLEXIBLE GRID

900px

900px

#wrap

#main

#pri #sec

660px 220px

660 / 900 = 0.733333373.3333%

220 / 900 = 0.244444424.4444%

A FLEXIBLE GRID

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

}

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

}

A FLEXIBLE GRID

900px

#wrap

#main

#pri #sec

660px

1 2 3

4 5 6

{180px

.thumb

180 / 660 = 0.2727272727272727.272727272727%

{

40px

A FLEXIBLE GRID

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

}

FLEXIBLE TYPOGRAPHY

body {font-size:100%; /* 100% = 16px */

}

h1 {font-size:1.5em; /* 24px/16px=1.5 */

}

h2 {font-size:1.25em; /*20px/16px=1.25 */

}

p {font-size:0.75em; /* 12px/16px=0.75 */

}

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 MEDIA

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

}

MEDIA QUERIES

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

body {color:red;

}

}

MEDIA QUERIES

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

body {color:red;

}

}

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.

MEDIA QUERIES

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


/* mobile device media query */

}


/* tablet device media query */

}


/* desktop media query (for new browsers) */

}

A NEW WORKFLOW

A NEW WORKFLOW

Information architecture•Usually a sitemap

Low-fidelity wireframes•Simple sketches•Illustrates various screen sizes

Fully-responsive HTML/CSS prototype•Production-ready code•Less duplication of effort

Visual design•Either in the browser, or in Photoshop – whatever you’re comfortable with!

CMS integration / content addition

“Stay committed to your decisions,

but stay flexible in your approach.”

- Tom Robbins, novelist

QUESTIONS?

[email protected]

THANK YOU

mailto:[email protected]

Responsive Web Design: One Size No Longer Fits All

Technology

Transcript of Responsive Web Design: One Size No Longer Fits All