responsive web design: one size no longer fits all
DESCRIPTION
Designing to allow an ever-increasing number of devices to access your website or web application is a game you can never win. There is arguably little business benefit to targeting less-widely used devices, yet web-accessible smartphones that aren't iPhones constitute a large group of users that is costly to ignore.Responsive Web Design is a new approach to the design and execution of websites and web applications that offers a way to cater to a much wider array of users and devices than would be possible otherwise. Through the use of modern web standards and a thorough execution plan it is possible to create attractive, brand-aware user experiences that work across a wide range of devices - feature phones, smartphones, tablets, netbooks, laptops and desktop computers - without requiring expensive device-centric development.This slideshow covers:• Costs and benefits of Responsive Web Design• Examples of large-scale responsive websites currently deployed• When to consider a responsive approach to your project• The skills your team should have, and the techniques they should be using, when designing responsivelyTRANSCRIPT
![Page 1: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/1.jpg)
R E S P O N S I V E W E B D E S I G NOne Size No Longer Fits All
![Page 2: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/2.jpg)
Page 2
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.
![Page 3: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/3.jpg)
Page 3
• 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
![Page 4: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/4.jpg)
Page 4
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
![Page 5: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/5.jpg)
Page 5
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
![Page 6: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/6.jpg)
Page 6
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
![Page 7: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/7.jpg)
Page 7
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
![Page 8: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/8.jpg)
THERE’S SOMETHING COMING
![Page 9: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/9.jpg)
“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:
![Page 10: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/10.jpg)
Page 10
REMEMBER WHEN…
…IT WAS JUST THIS?
![Page 11: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/11.jpg)
Page 11
THAT T IME HAS GONE
![Page 12: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/12.jpg)
Page 12
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:
![Page 13: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/13.jpg)
SO WHAT CAN WE DO?
![Page 14: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/14.jpg)
Page 14
ONE POSSIBLE SOLUTION
![Page 15: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/15.jpg)
Page 15
WELL , NO.
• That’d be silly• And expensive• …but mostly silly.
![Page 16: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/16.jpg)
SERIOUSLY, DUDE…WHAT CAN WE DO?
![Page 17: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/17.jpg)
“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
![Page 18: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/18.jpg)
THE PRETTY SERIOUS TECHNOLOGY
![Page 19: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/19.jpg)
Page 19
A RESPONSIVE EXAMPLE
Responsive websites
adapt (and respond) to
their environment.
Same site, different
experiences.
![Page 20: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/20.jpg)
Page 20
OR, TO PUT IT ANOTHER WAY
One website, many screens
![Page 21: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/21.jpg)
Page 21
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
![Page 22: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/22.jpg)
EXAMPLES PLEASE!
![Page 23: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/23.jpg)
Page 23
BOSTON GLOBE
bostonglobe.com
![Page 24: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/24.jpg)
Page 24
ST. PAUL’S SCHOOL, LONDON
stpaulsschool.org.uk
![Page 25: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/25.jpg)
Page 25
ARIZONA STATE UNIVERSITY
asuonline.asu.edu
![Page 26: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/26.jpg)
ANY DRAWBACKS?
![Page 27: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/27.jpg)
*
* may actually be a few drawbacks
![Page 28: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/28.jpg)
Page 28
YELP
![Page 29: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/29.jpg)
Page 29
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
![Page 30: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/30.jpg)
BUT…
![Page 31: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/31.jpg)
Page 31
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
![Page 32: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/32.jpg)
NOT EVERYONE AGREES
![Page 33: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/33.jpg)
LIKE JAKOB NIELSEN* FOR EXAMPLE
* photograph may actually be Leslie Nielsen
![Page 34: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/34.jpg)
* 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
![Page 35: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/35.jpg)
Page 35
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
![Page 36: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/36.jpg)
Page 36
• 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
![Page 37: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/37.jpg)
THE NITTY-GRITTY
![Page 38: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/38.jpg)
* You guys, after this bit
*
![Page 39: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/39.jpg)
Page 39
• 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
![Page 40: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/40.jpg)
Page 40
CAUTIONCONTAINS
MATH
![Page 41: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/41.jpg)
Page 41
A FLEXIBLE GRID
900px
900px
960px#wrap
#main
![Page 42: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/42.jpg)
Page 42
Target / Context = Result
![Page 43: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/43.jpg)
Page 43
A FLEXIBLE GRID
900px
900px
960px#wrap
#main
Target / Context = Result
0.9375 * 100 = 93.75%
900 960 0.9375
![Page 44: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/44.jpg)
Page 44
A FLEXIBLE GRID
#wrap {width:95%;margin:0 auto;
}
#main {width:93.75%; /* 900/960=0.9375 */margin:0 auto;
}
![Page 45: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/45.jpg)
Page 45
A FLEXIBLE GRID
900px
900px
#wrap
#main
#pri #sec
660px 220px
660 / 900 = 0.733333373.3333%
220 / 900 = 0.244444424.4444%
![Page 46: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/46.jpg)
Page 46
A FLEXIBLE GRID
#pri {float:left;width:73.33333%; /* 660/900=0.733333 */
}
#sec {float:right;width:24.44444%; /* 220/900=0.244444 */
}
![Page 47: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/47.jpg)
Page 47
A FLEXIBLE GRID
900px
#wrap
#main
#pri #sec
660px
1 2 3
4 5 6
{180px
.thumb
180 / 660 = 0.2727272727272727.272727272727%
{
40px
![Page 48: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/48.jpg)
Page 48
A FLEXIBLE GRID
.thumb {float:left;width:27.272727272727%; /* 180/660=0.2727272727272727 */margin-right:6.060606060606%; /* 40/660=0.06060606060606 */
}
![Page 49: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/49.jpg)
Page 49
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 */
}
![Page 50: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/50.jpg)
Page 50
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:
![Page 51: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/51.jpg)
Page 51
FLEXIBLE MEDIA
img, embed, object, video {max-width:100%;
}
![Page 52: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/52.jpg)
Page 52
MEDIA QUERIES
@media screen and (min-width:960px) {
body {color:red;
}
}
![Page 53: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/53.jpg)
Page 53
MEDIA QUERIES
@media screen and (min-width:768px) and (orientation:landscape) {
body {color:red;
}
}
![Page 54: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/54.jpg)
Page 54
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.
![Page 55: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/55.jpg)
Page 55
MEDIA QUERIES
/* 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) */
}
![Page 56: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/56.jpg)
A NEW WORKFLOW
![Page 57: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/57.jpg)
Page 57
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
![Page 58: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/58.jpg)
Page 58
“Stay committed to your decisions,
but stay flexible in your approach.”
- Tom Robbins, novelist
![Page 59: Responsive Web Design: One Size No Longer Fits All](https://reader035.vdocuments.net/reader035/viewer/2022062613/54538c4eaf795911308b5498/html5/thumbnails/59.jpg)
QUESTIONS?