responsive web design primer - nagw 2014

Responsive Web Design PrimerPresented by Adrian Roselli for the National Association of Government Web Professionals

About Adrian Roselli

• Co-written four books.• Technical editor

for two books.• Written over fifty

articles, most recentlyfor .net Magazine andWeb Standards Sherpa.

Great bedtime reading!

About Adrian Roselli

• Member of W3C HTML Working Group, W3C Accessibility Task Force, five W3C Community Groups.

• Building for the web since 1994.• Founder, owner at Algonquin Studios (

AlgonquinStudios.com).• Learn more at AdrianRoselli.com.• Avoid on Twitter @aardrian.

I warned you.

What We’ll Cover

• Background• Techniques• Measuring• Code Examples• Future• Questions (ongoing!)

Background

Context

• 77% of mobile searches occur at home/work.• 81% are done due to speed/convenience.

Mobile Search Moments Study, Google, March 2013

Context

• Many use internet mostly/only via a smartphone:• 50% of teens (aged 12-17).• 45% of young adults (aged 18-29)

The Rise of the Mobile-Only User, Harvard Business Review, May 2013

Context

• Many use internet mostly/only via a smartphone:• 51% of black Americans.• 42% of Hispanic Americans.• 24% of white Americans.

The Rise of the Mobile-Only User, Harvard Business Review, May 2013

Context

• Many use internet mostly/only via a smartphone:• ~40% of people with household income of less

than $30,000.• ~40% of people with less than a college education.

The Rise of the Mobile-Only User, Harvard Business Review, May 2013

Context

“Healthcare, non-profit, and government institutions which need to reach these populations should be aware that their audience is mobile-only*.”

— Karen McGrane

* The data state these users are mostly mobile, not exclusively mobile, though some sub-set is.

Trends

• Number of North American mobile-only internet users:• 2010: 2.61 million• 2011: 4.21 million• 2012: 6.55 million• 2013: 14.26 million• 2014: 38.78 million• 2015: 55.65 million

Number of mobile-only internet users in selected regions from 2010 to 2015 (in millions)

Where do people use mobile devices?

• 84% at home.• 80% during misc. downtime throughout day.• 76% waiting in lines or for appointments.• 69% while shopping.• 64% at work.• 62% (84%) while watching TV.• 47% during commute.• 75% in the bathroom.

http://www.lukew.com/ff/entry.asp?1263

Options

Options

• Do nothing.• Make an m-dot site.• Go responsive.

Option: Do Nothing

• Mobile browsers can already handle sites.• User can zoom as appropriate.• Better than a half-hearted approach.• Be aware Flash/Silverlight won’t work.

Option: Make an M-dot Site

• m.domain.tld.• It’s not responsive.• Relies on browser detection.• Can split SEO/SEM efforts.• You’ll have to maintain two sites.• Doesn’t allow for context switching.

Option: Go Responsive

• Responsive Web Design (RWD).• Also known as Adaptive Web Design.• Often misunderstood, mis-described.• This is why you’re here.

What RWD Is

• A method to adjust styles based on factors such as:• Screen size,• Screen orientation,• Pixel density,• Contrast setting,• Media (print, television, etc.).

What RWD Isn’t

• It does not excel at, or is incapable of, telling us:• User bandwidth,• Input device,• Viewing context,• Browser features.

“Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”

https://developers.google.com/webmasters/smartphone-sites/

Techniques

A Responsive Workflow

1. Content inventory.2. Content reference wireframes.3. Design in text (structured content).4. Linear design (mobile first).5. Breakpoint graph.6. Design for various breakpoints.7. HTML design prototype.8. Present prototype screenshots.9. Present prototype after revision.10. Document for production.

http://www.slideshare.net/stephenhay/mobilism2012

Strategies

• Mobile First.• Responsive Retrofit.• Responsive M-dot.• Piecemeal.

http://bradfrostweb.com/blog/post/responsive-strategy/

Strategy: Mobile First

• Present all your content (content first!).• Build for smallest display.• Layer support for larger screens on top.• Minimize impact of large files (giant images in

particular).• Can take extra time, be hard to sell to

stakeholders.

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Strategy: Responsive Retrofit

• Can be relatively quick to layer mobile styles to existing site.

• Can be easier to get buy-in from stakeholders.• Can learn as you go.• Can be slower for mobile devices, and offer

less support.• You’ll struggle with the content bloat.

http://webstandardssherpa.com/reviews/responsive-retrofitting/

Strategy: Responsive M-dot

• Can be a good way to test reception.• Similar to starting anew with a mobile-first

approach, but easier roll-out.• Work out the kinks in your process.• But it’s still an m-dot, with all those issues.• Without overall plan, may be difficult to scale

layout to larger screens.

Strategy: Piecemeal

• Can tackle mini- or sub-sites first.• Can target highest profile pages, get most

bang for buck.• Easier to test techniques, workflows.• However, can provide jarring experience for

users traversing entire site.

Components

• Media Queries.• Breakpoints.

Media Queries

• Feature of Cascading Style Sheets (CSS).• Allows developer to identify styles that should

apply when certain criteria are met:• Width• Height• Orientation• Etc…

• Some are browser-specific.

Breakpoints

• Points at which different media query statements kick in.• Styles are applied,• Some styles overridden.

• Could be based on known screen sizes.• Should be based on elements of the design.• Here’s why…

Android screen sizes, though a bit old now: http://opensignal.com/reports/fragmentation.php

Jason Grigsby on Twitter: https://twitter.com/grigs/status/511769628679614464

http://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422 Brad Frost

Smartphone Ownership 2013,Pew Research,June 2013

Me on Twitter: https://twitter.com/aardrian/status/509706419143458816

User Context

• One-handed? Two-handed?• Standing? Sitting?• With another device?• Mouse? Touch? Stylus? Keyboard?

User Context

http://blog.adrianroselli.com/2013/03/observing-users-with-mobile-devices.html

http://nunstakingpicswithhellokittyipad.tumblr.com/

Task/Device Switching

• 60+% of online adults use at least two devices every day.

• ~25% use three devices every day.• 40% of all online adults start an activity on one

device and finish it on another.

US smartphone engagement has overtaken desktop: stats, April 2014

Stephanie Rieger @stephanierieger“Classic multi device, stationary but mobile, bandwidth constrained, best device is the connected one scenario! pic.twitter.com/i3lVXn2k07”

Planning

• Plan to show the same content to all users.• Plan to show all content to all users.• Prioritize content for linearized pages.• Provide clear site structure.• Account for multi-use multi-input.

Example Layout Patterns

• Luke Wroblewski identifies common layout patterns:• Mostly Fluid• Column Drop• Layout Shifter• Off Canvas• Tiny Tweaks

http://www.lukew.com/ff/entry.asp?1514http://www.lukew.com/ff/entry.asp?1569

Example Layout Patterns

Mostly Fluid Column Drop

http://www.lukew.com/ff/entry.asp?1514http://www.lukew.com/ff/entry.asp?1569

Example Layout Patterns

http://www.lukew.com/ff/entry.asp?1514http://www.lukew.com/ff/entry.asp?1569

Layout Shifter

Off Canvas

Tiny Tweaks

Best Practices

• 7 Habits of Highly Effective Media Queries from Mobile UX Summit 2013:1. Let content determine breakpoints2. Treat layout as an enhancement3. Use major and minor breakpoints4. Use relative sizing5. Go beyond width6. Use media queries for conditional loading7. Don’t go overboard

http://www.lireo.com/recap-7-habits-of-highly-effective-media-queries/

Ben Norrishttp://pic.twitter.com/3Ri0uI8gSbhttp://pic.twitter.com/oaJI456xLF

Google: Common Mistakes

• Unplayable videos.• Faulty redirects.• Smartphone-only 404s.• App download interstitials.• Irrelevant cross-linking.• Page speed (both time to render and overall

page size).

https://developers.google.com/webmasters/smartphone-sites/common-mistakes

Other Gotchas

• Scrolling (example…).• Don’t forget the printed page (example…).• Page weight.• Device pixels vs. CSS pixels (all hail PPK).• Account for giant screens.• Remember televisions (for reals).• Don’t build accessibility barriers.• Don’t disable “pinch to zoom.”

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

http://bradfrostweb.com/blog/post/page-height-scrolling-and-responsive-web-design/

Photo of printed page from http://elliotjaystocks.com/blog/has-adaptive-design-failed-of-course-it-bloody-hasnt/

I have many techniques and examples: http://blog.adrianroselli.com/search/label/print

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/website-abandonment-happens-after-3-seconds/

Why does a typical ecommerce page take 6.5 seconds to load primary content?

Pages Are Getting Fatter

“We’ve made the internet in our image… Obese”

~ Jason Grigsby

“If your website is 15MB, it’s not HTML5, it’s stupid”

~ Christian Heilmann

https://twitter.com/wilto/status/63284673723375616

Edge Case

• Let a user “opt out” of a responsive layout.

http://blog.adrianroselli.com/2013/01/letting-mobile-users-see-desktop-view.html

Test !!

• Seriously, test.• Watch users.• Have your family and friends try it.• Get every phone, phablet, tablet, laptop, television,

printer, etc. that you can.• Browser developer tools.• Test in stores.• Test some more.• Screen shots are your friend.• Emulators (or window resizing) don’t suffice.

Code Examples

HTML

• Use both device-width and initial-scale.

• initial-scale works in Safari.• device-width works in Internet Explorer.• Both work in all other browsers.

<meta name="viewport" content="width=device-width,initial-scale=1">

CSS

• Most media queries target width.• width (min-width and max-width).• device-width (min-device-width and max-device-width).

• Use width since it targets layout viewport, works everywhere.

@media all and (min-width: 600px) {p { color: #f00; }

}

CSS Curveball

• Microsoft supports standard (@viewport), but only as prefixed style.

• Accounts for Internet Explorer on Windows 8 in “Metro” mode and “snap mode.”

@-ms-viewport { width: device-width;

}

Mobile First Example

p { color: #fff; }

@media all and (min-width: 600px) {p { color: #f00; }

}@media print {

p { color: #000; }}

Minimal Page<html><head>

<meta name="viewport" content="width=device-width,initial-scale=1"><style>

@-ms-viewport { width: device-width; }p { color: #c0c; }@media all and (min-width: 600px) {

p { color: #0c0; }}@media print {

p { color: #000; }}

</style></head><body>

<p>Hello NAGW!</p></body></html>

This is just an example that you can paste into an HTML file to see in action. Please don’t use in production.

Measuring

Google Analytics

• Look at mobile users, devices before updates.

Google Analytics

• Look at mobile users, devices before updates.• Compare with users/devices after updates.

Google Analytics

• Look at mobile users, devices before updates.• Compare with users/devices after updates.• Pay attention to changes not related to

general market trends.

Google Analytics

• Look at mobile users, devices before updates.• Compare with users/devices after updates.• Pay attention to changes not related to

general market trends.• Make sure most trafficked pages get attention.

Google Analytics

• Look at mobile users, devices before updates.• Compare with users/devices after updates.• Pay attention to changes not related to

general market trends.• Make sure most trafficked pages get attention.• Evaluate pages with high bounce rates.

Check the Data

Future

Here or on Its Way

• Responsive image techniques (@srcset, <picture>).• Chrome 38, Opera 25 so far.• Guide to <picture> and @srcset.

• Additional media query support (bandwidth, accessibility device, etc.).

• Everybody gets touch!• Alternate devices (the dreaded smart fridge).

Questions

Resources

• Check and force support:• http://modernizr.com/• http://mydevice.io/, http://mydevice.io/devices/ • http://caniuse.com/

• MediaQueri.es• http://mediaqueri.es/• http://www.printshame.com/

• BBC Mobile Accessibility Guidelines v1.0• http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml

• W3C CSS3 Media Queries, June 12, 2012• http://www.w3.org/TR/css3-mediaqueries/

• Responsive Web Design, May 25, 2010• http://alistapart.com/article/responsive-web-design

Responsive Web Design PrimerPresented by Adrian Roselli for the National Association of Government Web Professionals

Windows 8 tablet running an accordion app with a web site in “snap mode” alongside it.