• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Design Overview for UB CIT
 

Responsive Design Overview for UB CIT

on

  • 3,113 views

An overview for a mixed audience from the University at Buffalo CIT professional development series.

An overview for a mixed audience from the University at Buffalo CIT professional development series.

Statistics

Views

Total Views
3,113
Views on SlideShare
2,379
Embed Views
734

Actions

Likes
1
Downloads
22
Comments
0

11 Embeds 734

http://blog.adrianroselli.com 660
http://8224532143586772947_b3ab0262803714d43d4d0a39e0257a42ca271859.blogspot.com 31
http://adrianroselli.com 15
http://www.mybestcv.co.il 10
https://twitter.com 7
http://plus.url.google.com 4
http://cloud.feedly.com 2
http://www.linkedin.com 2
http://adrianroselli 1
http://www.adrianroselli.com 1
http://algonquinstudios.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Design Overview for UB CIT Responsive Design Overview for UB CIT Presentation Transcript

    • Responsive Web Design Primer Presented 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 recently for .net Magazine and Web 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-report http://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/i3lVX n2k07”
    • 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?1514 http://www.lukew.com/ff/entry.asp?1569
    • Example Layout Patterns Mostly Fluid Column Drop http://www.lukew.com/ff/entry.asp?1514 http://www.lukew.com/ff/entry.asp?1569
    • Example Layout Patterns http://www.lukew.com/ff/entry.asp?1514 http://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 breakpoints 2. Treat layout as an enhancement 3. Use major and minor breakpoints 4. Use relative sizing 5. Go beyond width 6. Use media queries for conditional loading 7. Don’t go overboard http://www.lireo.com/recap-7-habits-of-highly-effective-media-queries/
    • Ben Norris http://pic.twitter.com/3Ri0uI8gSb http://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 Primer Presented by Adrian Roselli for University at Buffalo CIT Professional Development