Getting Down & Dirty with Responsive Web Design
-
Upload
martinridgway -
Category
Business
-
view
2.933 -
download
1
Transcript of 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