responsive web design: one size no longer fits all
Post on 30-Oct-2014
3.467 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
• 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
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
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
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
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:
Page 10
REMEMBER WHEN…
…IT WAS JUST THIS?
Page 11
THAT T IME HAS GONE
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:
SO WHAT CAN WE DO?
Page 14
ONE POSSIBLE SOLUTION
Page 15
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
Page 19
A RESPONSIVE EXAMPLE
Responsive websites
adapt (and respond) to
their environment.
Same site, different
experiences.
Page 20
OR, TO PUT IT ANOTHER WAY
One website, many screens
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
EXAMPLES PLEASE!
Page 23
BOSTON GLOBE
bostonglobe.com
Page 24
ST. PAUL’S SCHOOL, LONDON
stpaulsschool.org.uk
Page 25
ARIZONA STATE UNIVERSITY
asuonline.asu.edu
ANY DRAWBACKS?
*
* may actually be a few drawbacks
Page 28
YELP
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
BUT…
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
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
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
• 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
*
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
CAUTIONCONTAINS
MATH
Page 41
A FLEXIBLE GRID
900px
900px
960px#wrap
#main
Page 42
Target / Context = Result
Page 43
A FLEXIBLE GRID
900px
900px
960px#wrap
#main
Target / Context = Result
0.9375 * 100 = 93.75%
900 960 0.9375
Page 44
A FLEXIBLE GRID
#wrap {width:95%;margin:0 auto;
}
#main {width:93.75%; /* 900/960=0.9375 */margin:0 auto;
}
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
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
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
A FLEXIBLE GRID
.thumb {float:left;width:27.272727272727%; /* 180/660=0.2727272727272727 */margin-right:6.060606060606%; /* 40/660=0.06060606060606 */
}
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
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
FLEXIBLE MEDIA
img, embed, object, video {max-width:100%;
}
Page 52
MEDIA QUERIES
@media screen and (min-width:960px) {
body {color:red;
}
}
Page 53
MEDIA QUERIES
@media screen and (min-width:768px) and (orientation:landscape) {
body {color:red;
}
}
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
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) */
}
A NEW WORKFLOW
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
“Stay committed to your decisions,
but stay flexible in your approach.”
- Tom Robbins, novelist
QUESTIONS?
top related