Responsive Web Design PrimerPresented by Adrian Roselli for University at Buffalo CIT Professional Development

About Adrian Roselli

• Co-written four books.• Technical editor

for two books.• Written over fifty

articles, most recentlyfor .net Magazine andWeb Standards Sherpa.

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.

What We’ll Cover

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

Background

College Search Process

• 78% have regular access to a mobile device.• 43% use mobile device for all web browsing.• 68% have viewed college web sites on mobile.• 73% expressed interest in downloading

campus-specific applications for schools.• Expect this mobile-centric trend to continue

once enrolled.

http://www.noellevitz.com/papers-research-higher-education/2013/ug/2013-e-expectations-reporthttp://campustechnology.com/Articles/2013/09/12/Without-Mobile-First-Strategy-Kiss-Students-Goodbye.aspx

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.

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

Options

Do Nothing

• Mobile browsers can already handle sites.• User can zoom as appropriate.• Better than a half-hearted approach.

Make an m-dot Site

• Something like m.domain.tld.• It’s not responsive.• Relies on UA sniffing.• Can split SEO efforts.• Maintaining two sites.

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

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

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…

http://opensignal.com/reports/fragmentation.php

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

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/

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 same/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.

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.• Account for giant screens.• Remember televisions.• 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/

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

“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

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.• Test some more.• Screen shots are your friend.• Emulators (or window resizing) don’t suffice.

Measuring

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

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

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

Questions

Resources

• eduStyle Awards 2012, 2013:• http://www.edustyle.net/awards/2013/winners.php#39• http://www.edustyle.net/awards/2012/winners.php#46

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

• BBC Mobile Accessibility Guidelines v0.8• 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 University at Buffalo CIT Professional Development