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 Practices to Respond to the Future

17,361 views

Published on

We’re entering 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 this increasingly unpredictable future. Dave Olsen and Doug Gapinski will share and examine examples that show how responsive design will help institutions rethink and adjust for the future-friendly web.

Primary topics that are covered are: understanding the reality of web development today, example RWD design patterns, and understanding how to test and optimize the performance of your RWD website.

Published in: Technology
1 Comment
62 Likes
Statistics
Notes
  • You say 'checkout basket.js. Avoid AppCache like the plague'.

    AppCache sure is a douchebag and basket.js looks nice, but basket.js is not enough for offlining webapps.

    Do you know any webapp working offline AND using basket.js?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
17,361
On SlideShare
0
From Embeds
0
Number of Embeds
181
Actions
Shares
0
Downloads
329
Comments
1
Likes
62
Embeds 0
No embeds

No notes for slide
  • DOUG\n
  • DAVE + DOUG\n\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DOUG\n
  • DOUG\n
  • DOUG - \n
  • DOUG - \n
  • DOUG\n
  • DOUG\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DAVE\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • \n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • DAVE\n
  • page weight\n
  • page weight\n
  • glowing rectangle has turned this on its head\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DOUG\n
  • DOUG\n
  • DOUG\n
  • \n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DAVE\n
  • DOUG AND DAVE\n\n
  • Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to Respond to the Future

    1. YOU RIGHT EVERYTHING NOT QUITE KNOW ANYMORE ISRETHINKING BEST PRACTICES TO RESPOND TO THE FUTURE
    2. Dave Olsen Doug GapinskiProfessional Technologist StrategistWest Virginia University mStoner @dmolsen @thedougco
    3. Doug: planning and designDave: development and performance
    4. PLEASE RETWEET#heweb12 #uad2
    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. I. RETHINK EVERYTHING
    7. Most colleges and universities are only showing ~10 to 15% traffic from mobile operating systems. Source: anecdotal from clients
    8. 55% of Facebooks monthly active user base accessesFacebook on a mobile device. Source: Facebook
    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. Sequential browsing: 90% of people begin a task on one device (most commonly asmartphone) and finish it on another. Source: Google
    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. 17% of cellphone users in the USuse their phone as their primary web browsing platform. Source: Pew Internet & American Life Project
    13. + >Mobile and tablet traffic is predicted to outpace desktop traffic by 2015 or sooner. Source: IDC
    14. 48% of prospects who visited a school with a mobile site were positively affected.Source: Noel Levitz’s “Mobile E-Expectations Report”
    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. 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. II. OUR REALITY http://flic.kr/p/8BPQ2q
    18. The first higher ed mobile web solutions were dominated by the m-dots. But those solutions don’t scale.
    19. Visitors Contributors CMS + + Developers
    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. CLIENTS WANT TO KEEP DOING WHAT THEY’VE ALWAYS DONE “ Links don’t open apps. ” — Jason Grigsby
    22. MOBILE WEB IS ALIVE & KICKING SearchEmail Social Media
    23. http://flic.kr/p/axKd6XComing to Grips Finding balance.
    24. ELEGANCE + LAZINESS
    25. http://flic.kr/p/9UmsCJ
    26. III. MAKING THE CASE
    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. Show, don’t sellbostonglobe.com weedygarden.net mediaqueri.es
    29. Source: gomobile.tamu.edu
    30. IV. PLANNING AND PATTERNS
    31. Planning is the number one way to guarantee you wind up with a high performance, good looking, fully responsive site.
    32. Ethan Marcotte,the Moses of Responsive Design
    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. 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. +
    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. 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. Styletiles: for when moodboardsare too vague and comps are too precise Source: styletil.es
    39. Sparkbox’s in-browser style prototypeWriteup: seesparkbox.com Download: github fork
    40. Design patterns provide effectiveexamples at the beginning of a projectso that you’re not rethinking the wheel. Source: Luke W
    41. Responsive design patternsSource: Brad Frost on github.com
    42. Responsive design patternsSource: Brad Frost on github.com
    43. New patterns: off canvas touch layouts Source: Luke W and Jason Weaver
    44. Source: Zurb
    45. Patterns for contemporary look and feel patterntap.comdribbble.com mobiletuxedo.com
    46. A last note on planning: plan to conduct user testing on multiple devices
    47. © Brad Frostbrad’s iceberg
    48. © Brad Frostbrad’s iceberg
    49. V. OPTIMIZATION & TESTING
    50. 1 MBThe average weight of a web page today. Flash HTML CSS Other Images JavaScript 82% Source: HTTP Archive
    51. 86%RWD sites whosesmall screen designweights the same asthe large screen.Source: Podjarny
    52. 71%Users expect yourmobile site to loadas quickly as yourdesktop site.Source: Gomez
    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. Mobile first meansperformance first(start thinking about performance at the design stage)
    55. PRIMARY PERFORMANCE ISSUES FOR RWDOver Downloading Poor NetworksDownload & Hide High LatencyDownload & Shrink Variable Bandwidth Excess DOM Packet Loss
    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. MOBILE OPTIMIZATION FOCUS 1. Reduce asset size 2. Reduce requests 3. Speed-up page render http://flic.kr/p/4zzKee
    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. 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. 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. http://flic.kr/p/a4VsPvRESS* can be a scalpelfor your responsive designs.REsponsive Design + Server Side Components
    62. toolbox, tools TESTING TOOLS Testing Toolshttp://flic.kr/p/4BZsQJ
    63. PERFORMANCE TESTING SITESWebPagetest Mobitest
    64. LEARN TO LOVE THE INSPECTOR
    65. THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET mobile bookmarklet
    66. SLOWING THINGS DOWN Charles Throttlecharlesproxy.com
    67. EMULATING MOBILE DEVICESBrowserStack Emulatorscharlesproxy.com
    68. GET YOUR HANDS ON REAL DEVICESeBayMobileKarma.comCellphone store leftoversOpen device labs http://flic.kr/p/7972f6
    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. ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
    71. Higher education professionals need to think & behave in a future-friendly way. Visit: futurefriend.ly
    72. QUESTIONS?
    73. THANKS! Dave Olsen Doug GapinskiProfessional Technologist StrategistWest Virginia University mStoner @dmolsen @thedougco

    ×