YOU                                 RIGHT EVERYTHING                     NOT QUITE              KNOW                      ...
Dave Olsen           Doug GapinskiProfessional Technologist     StrategistWest Virginia University      mStoner         @d...
Doug: planning                     and designDave: development and performance
PLEASE RETWEET#heweb12 #uad2
EVERYTHING YOU KNOW IS NOT QUITE RIGHT ANYMORE         I. Rethink everything               II. Our reality          III. M...
I. RETHINK EVERYTHING
Most colleges and universities are only showing ~10 to 15% traffic from mobile operating systems.      Source: anecdotal f...
55% of Facebooks monthly  active user base accessesFacebook on a mobile device.       Source: Facebook
“...we actually have more peopleon a daily basis using mobile webFacebook than we have using ouriOS or Android apps combin...
Sequential browsing:  90% of people begin a task on  one device (most commonly asmartphone) and finish it on another.     ...
+ Mobile “on the go” is a myth:81% of 18-24 year olds use theirmobile device while watching TV. Source: Pew Internet & Ame...
17% of cellphone users in the USuse their phone as their primary    web browsing platform. Source: Pew Internet & American...
+          >Mobile and tablet traffic is predicted    to outpace desktop traffic        by 2015 or sooner.              So...
48% of prospects who visited a   school with a mobile site were        positively affected.Source: Noel Levitz’s “Mobile E...
We can see that the need todeliver content on multiple      devices exists.  We must be proactive increating great experie...
After the launch of a responsivehome page for WVU mobile traffic   increased from 11% to 22%       in less than a month.  ...
II. OUR REALITY                  http://flic.kr/p/8BPQ2q
The first higher ed mobile web solutions    were dominated by the m-dots.    But those solutions don’t scale.
Visitors       Contributors CMS           +           +               Developers
VISITORS WILL STILL RELY ON TRADITIONAL MEANS OF ACCESS“ Not every mobile device will have   your app on it but every mobi...
CLIENTS WANT TO KEEP DOING WHAT THEY’VE ALWAYS DONE    “ Links don’t open apps. ”              — Jason Grigsby
MOBILE WEB IS ALIVE & KICKING                 SearchEmail                                   Social Media
http://flic.kr/p/axKd6XComing to Grips       Finding balance.
ELEGANCE + LAZINESS
http://flic.kr/p/9UmsCJ
III. MAKING THE CASE
100% SUCCESS RATE FOR SELLING JUST BY TALKING ABOUT IT   Responsive Redesigns in Progress         Retrofits in Progress   ...
Show, don’t sellbostonglobe.com                                        weedygarden.net                  mediaqueri.es
Source: gomobile.tamu.edu
IV. PLANNING AND PATTERNS
Planning is the number one way to guarantee    you wind up with a high performance,      good looking, fully responsive si...
Ethan Marcotte,the Moses of Responsive Design
PLANNING FOR FUNDAMENTALS  A flexible      The design has fluid layout elements        grid      that change based on brow...
PLANNING FOR ADVANCED FUNDAMENTALS  Advanced      A basic fluid grid is the priority; but to be fully  elements      respo...
+
Planning: full wireframes for each breakpointPros:                                         Cons• most thorough method     ...
Planning: responsive prototypesPros:                                       Cons:• gets specific about repositioning and   ...
Styletiles: for when moodboardsare too vague and comps are too precise             Source: styletil.es
Sparkbox’s in-browser style prototypeWriteup: seesparkbox.com   Download: github fork
Design patterns provide effectiveexamples at the beginning of a projectso that you’re not rethinking the wheel.           ...
Responsive design patternsSource: Brad Frost on github.com
Responsive design patternsSource: Brad Frost on github.com
New patterns: off canvas touch layouts Source: Luke W and Jason Weaver
Source: Zurb
Patterns for contemporary look and feel                                             patterntap.comdribbble.com            ...
A last note on planning: plan to conduct    user testing on multiple devices
© Brad Frostbrad’s iceberg
© Brad Frostbrad’s iceberg
V. OPTIMIZATION & TESTING
1 MBThe average weight of a web page today.                                          Flash                                ...
86%RWD sites whosesmall screen designweights the same asthe large screen.Source: Podjarny
71%Users expect yourmobile site to loadas quickly as yourdesktop site.Source: Gomez
“ The way in which CSS mediaqueries have been promoted for mobile hides tough problems  and gives developers a falsepromis...
Mobile first meansperformance first(start thinking about performance at the design stage)
PRIMARY PERFORMANCE ISSUES FOR RWDOver Downloading               Poor NetworksDownload & Hide                 High Latency...
THE LATENCY EFFECT   The average web site requires 85 requests...                 Cable Modem                             ...
MOBILE OPTIMIZATION FOCUS                            1. Reduce asset size                            2. Reduce requests   ...
1. REDUCING ASSET SIZEHTML & CSS Use mod_gzip or mod_deflate to make sure text-basedcompression assets are compressed for ...
2. REDUCING REQUESTS    Browser The simplest way to reduce requests is to make sure the      cache browser doesn’t need to...
3. SPEEDING-UP PAGE RENDERAvoid DOM By using JS to modify the DOM you can cause  reflows & unnecessary reflows & repaints ...
http://flic.kr/p/a4VsPvRESS* can be a scalpelfor your responsive designs.REsponsive Design + Server Side Components
toolbox, tools            TESTING TOOLS                         Testing Toolshttp://flic.kr/p/4BZsQJ
PERFORMANCE TESTING SITESWebPagetest                   Mobitest
LEARN TO LOVE THE INSPECTOR
THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET        mobile bookmarklet
SLOWING THINGS DOWN   Charles                         Throttlecharlesproxy.com
EMULATING MOBILE DEVICESBrowserStack                   Emulatorscharlesproxy.com
GET YOUR HANDS ON REAL DEVICESeBayMobileKarma.comCellphone store leftoversOpen device labs                                ...
HOW TO DECIDE WHICH TO GET                 Base on:      Example:   WiFi-capable, Analytics         Rank, OS, Screen      ...
ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
Higher education professionals need to think & behave in a    future-friendly way.        Visit: futurefriend.ly
QUESTIONS?
THANKS!       Dave Olsen                     Doug GapinskiProfessional Technologist               StrategistWest Virginia ...
Upcoming SlideShare
Loading in …5
×

Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices to Respond to the Future

1,987 views
1,849 views

Published on

We’ve entered a new era where an increasing number of devices with wildly divergent features— including phones, tablets, game consoles, and TVs—are connected to the Internet. As the way people access the Internet changes, there is an urgent need to rethink how we use the web to communicate.

This doesn't mean creating separate solutions for each device but rather preparing our existing content to meet an unpredictable future. Responsive web design means changing how we plan and evaluate performance. Dave Olsen and Doug Gapinski share and examine examples to help institutions rethink and adjust for the future-friendly web.

Presenters
Dave Olsen
Professional Technologist, West Virginia University

Doug Gapinski
Strategist, mStoner

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,987
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices to Respond to the Future

  1. 1. YOU RIGHT EVERYTHING NOT QUITE KNOW ANYMORE ISRETHINKING BEST PRACTICES TO RESPOND TO THE FUTURE
  2. 2. Dave Olsen Doug GapinskiProfessional Technologist StrategistWest Virginia University mStoner @dmolsen @thedougco
  3. 3. Doug: planning and designDave: development and performance
  4. 4. PLEASE RETWEET#heweb12 #uad2
  5. 5. EVERYTHING YOU KNOW IS NOT QUITE RIGHT ANYMORE I. Rethink everything II. Our reality III. Making the case IV. Planning + patterns V. Optimization + testing
  6. 6. I. RETHINK EVERYTHING
  7. 7. Most colleges and universities are only showing ~10 to 15% traffic from mobile operating systems. Source: anecdotal from clients
  8. 8. 55% of Facebooks monthly active user base accessesFacebook on a mobile device. Source: Facebook
  9. 9. “...we actually have more peopleon a daily basis using mobile webFacebook than we have using ouriOS or Android apps combined.” Source: Mark Zuckerburg @ Disrupt 2012
  10. 10. Sequential browsing: 90% of people begin a task on one device (most commonly asmartphone) and finish it on another. Source: Google
  11. 11. + Mobile “on the go” is a myth:81% of 18-24 year olds use theirmobile device while watching TV. Source: Pew Internet & American Life Project
  12. 12. 17% of cellphone users in the USuse their phone as their primary web browsing platform. Source: Pew Internet & American Life Project
  13. 13. + >Mobile and tablet traffic is predicted to outpace desktop traffic by 2015 or sooner. Source: IDC
  14. 14. 48% of prospects who visited a school with a mobile site were positively affected.Source: Noel Levitz’s “Mobile E-Expectations Report”
  15. 15. We can see that the need todeliver content on multiple devices exists. We must be proactive increating great experiences for audiences on all devices.
  16. 16. After the launch of a responsivehome page for WVU mobile traffic increased from 11% to 22% in less than a month. Source: WVU analytics
  17. 17. II. OUR REALITY http://flic.kr/p/8BPQ2q
  18. 18. The first higher ed mobile web solutions were dominated by the m-dots. But those solutions don’t scale.
  19. 19. Visitors Contributors CMS + + Developers
  20. 20. VISITORS WILL STILL RELY ON TRADITIONAL MEANS OF ACCESS“ Not every mobile device will have your app on it but every mobile device will have a browser. ” — Jason Grigsby
  21. 21. CLIENTS WANT TO KEEP DOING WHAT THEY’VE ALWAYS DONE “ Links don’t open apps. ” — Jason Grigsby
  22. 22. MOBILE WEB IS ALIVE & KICKING SearchEmail Social Media
  23. 23. http://flic.kr/p/axKd6XComing to Grips Finding balance.
  24. 24. ELEGANCE + LAZINESS
  25. 25. http://flic.kr/p/9UmsCJ
  26. 26. III. MAKING THE CASE
  27. 27. 100% SUCCESS RATE FOR SELLING JUST BY TALKING ABOUT IT Responsive Redesigns in Progress Retrofits in Progress UC Hastings University of Rochester Webster University Manhattan College Drake University Miami University Whittier CollegeSpring Arbor University Herzing University St. Joseph’s College
  28. 28. Show, don’t sellbostonglobe.com weedygarden.net mediaqueri.es
  29. 29. Source: gomobile.tamu.edu
  30. 30. IV. PLANNING AND PATTERNS
  31. 31. Planning is the number one way to guarantee you wind up with a high performance, good looking, fully responsive site.
  32. 32. Ethan Marcotte,the Moses of Responsive Design
  33. 33. PLANNING FOR FUNDAMENTALS A flexible The design has fluid layout elements grid that change based on browser size.Conditional The design uses one or more techniques images and to scale images and media so that theother media design performs well across devices. Media Conditional code that changes items on a queries page based on device detection or browser width.
  34. 34. PLANNING FOR ADVANCED FUNDAMENTALS Advanced A basic fluid grid is the priority; but to be fully elements responsive we must often cover slideshows, tables, tabs, multi-column type, custom widgets, forms, and more. Touch Touch input is a critical development input component as we move away from a mouse- first model of human-computer interaction RESS and Heavy lifting for user agent detection and server-side conditional media deployment is done by theconditionals server, not the device.
  35. 35. +
  36. 36. Planning: full wireframes for each breakpointPros: Cons• most thorough method • takes the longest• no page element left unexplored • in some cases, wireframes don’t• may be the best solution for retrofitting preclude the group changing their mindbecause it provides the most detail later • with a slow-decision group, can bog down length of process
  37. 37. Planning: responsive prototypesPros: Cons:• gets specific about repositioning and • requires someone on the team havecontent without promising every detail front-end skills• one asset per template instead of three • may not preclude the need for moreor four detailed wireframes
  38. 38. Styletiles: for when moodboardsare too vague and comps are too precise Source: styletil.es
  39. 39. Sparkbox’s in-browser style prototypeWriteup: seesparkbox.com Download: github fork
  40. 40. Design patterns provide effectiveexamples at the beginning of a projectso that you’re not rethinking the wheel. Source: Luke W
  41. 41. Responsive design patternsSource: Brad Frost on github.com
  42. 42. Responsive design patternsSource: Brad Frost on github.com
  43. 43. New patterns: off canvas touch layouts Source: Luke W and Jason Weaver
  44. 44. Source: Zurb
  45. 45. Patterns for contemporary look and feel patterntap.comdribbble.com mobiletuxedo.com
  46. 46. A last note on planning: plan to conduct user testing on multiple devices
  47. 47. © Brad Frostbrad’s iceberg
  48. 48. © Brad Frostbrad’s iceberg
  49. 49. V. OPTIMIZATION & TESTING
  50. 50. 1 MBThe average weight of a web page today. Flash HTML CSS Other Images JavaScript 82% Source: HTTP Archive
  51. 51. 86%RWD sites whosesmall screen designweights the same asthe large screen.Source: Podjarny
  52. 52. 71%Users expect yourmobile site to loadas quickly as yourdesktop site.Source: Gomez
  53. 53. “ The way in which CSS mediaqueries have been promoted for mobile hides tough problems and gives developers a falsepromise of a simple solution for designing for small screens.” Source: Jason Grigsby on Speakerdeck
  54. 54. Mobile first meansperformance first(start thinking about performance at the design stage)
  55. 55. PRIMARY PERFORMANCE ISSUES FOR RWDOver Downloading Poor NetworksDownload & Hide High LatencyDownload & Shrink Variable Bandwidth Excess DOM Packet Loss
  56. 56. THE LATENCY EFFECT The average web site requires 85 requests... Cable Modem Cell Network (20ms latency) (200ms latency) http://flic.kr/p/6xQPdi 0.4 seconds 4.2 secsSource: Guy Podjarny & HTTP Archive 10 times slower!
  57. 57. MOBILE OPTIMIZATION FOCUS 1. Reduce asset size 2. Reduce requests 3. Speed-up page render http://flic.kr/p/4zzKee
  58. 58. 1. REDUCING ASSET SIZEHTML & CSS Use mod_gzip or mod_deflate to make sure text-basedcompression assets are compressed for transfer. Image Use a service like kraken.io to optimize images.compression Also use CSS sprites as appropriate. Try to avoid When possible, think about avoiding images. images Implement with CSS or SVG. Minification Use a minifying service to make sure text-based assets are as small as possible. If using PHP use Minify. If using a Mac check out CodeKit. MicroJS or, Avoid using bulky frameworks if you’re using them for even better, simple tasks like selectors. Try microjs.com to find Vanilla JS libraries that may be smaller & more suitable. JavaScript also blocks the rendering of the page.
  59. 59. 2. REDUCING REQUESTS Browser The simplest way to reduce requests is to make sure the cache browser doesn’t need to make them. Make sure assets are bring cached on the browser.Concatenate Combine similar files together in one or multiple larger JS & CSS files to reduce requests. May harm performance too.localStorage Google & Bing use HTML5‘s localStorage as an enhancement to the browser cache. Check out basket.js. Avoid AppCache like the plague! data: URI For small images & fonts try embedding them in your CSS file by using the data: URI. Conditional Use a resource loader like Modernizr.load to loading conditionally include JavaScript & CSS files.
  60. 60. 3. SPEEDING-UP PAGE RENDERAvoid DOM By using JS to modify the DOM you can cause reflows & unnecessary reflows & repaints of your browser. They repaints slow down page render time as well as burn battery. Defer Use HTML5’s script defer & async attributes to delay loading of downloading files. Can also insert script elements into JavaScript the DOM using the onLoad event. Lazy load Comment out JavaScript that isn’t required at page load. JavaScript Uncomment & eval() when required.Touch beats While not directly related to page render, by making onClick sure your links use a Touch event rather than an onClick event user interactions will speed up by 300ms. Avoid SM Try using simple links to services rather than utilizing the widgets JavaScript widgets. They’re performance hogs.
  61. 61. http://flic.kr/p/a4VsPvRESS* can be a scalpelfor your responsive designs.REsponsive Design + Server Side Components
  62. 62. toolbox, tools TESTING TOOLS Testing Toolshttp://flic.kr/p/4BZsQJ
  63. 63. PERFORMANCE TESTING SITESWebPagetest Mobitest
  64. 64. LEARN TO LOVE THE INSPECTOR
  65. 65. THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET mobile bookmarklet
  66. 66. SLOWING THINGS DOWN Charles Throttlecharlesproxy.com
  67. 67. EMULATING MOBILE DEVICESBrowserStack Emulatorscharlesproxy.com
  68. 68. GET YOUR HANDS ON REAL DEVICESeBayMobileKarma.comCellphone store leftoversOpen device labs http://flic.kr/p/7972f6
  69. 69. HOW TO DECIDE WHICH TO GET Base on: Example: WiFi-capable, Analytics Rank, OS, Screen iPod Touch Dimensions, & Cost Samsung Fascinate + HTC Thunderbolt + Suggested focus: iPod Touch, mid-levelAndroid, high-end Android, a tablet, Blackberry, $438 Windows Phone 7
  70. 70. ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
  71. 71. Higher education professionals need to think & behave in a future-friendly way. Visit: futurefriend.ly
  72. 72. QUESTIONS?
  73. 73. THANKS! Dave Olsen Doug GapinskiProfessional Technologist StrategistWest Virginia University mStoner @dmolsen @thedougco

×