Successfully reported this slideshow.

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

62

Share

Upcoming SlideShare
Continuous Deployment
Continuous Deployment
Loading in …3
×
1 of 73
1 of 73

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

62

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

  1. YOU RIGHT EVERYTHING NOT QUITE KNOW ANYMORE IS RETHINKING BEST PRACTICES TO RESPOND TO THE FUTURE
  2. Dave Olsen Doug Gapinski Professional Technologist Strategist West Virginia University mStoner @dmolsen @thedougco
  3. Doug: planning and design Dave: 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 Facebook's monthly active user base accesses Facebook on a mobile device. Source: Facebook
  9. “...we actually have more people on a daily basis using mobile web Facebook than we have using our iOS or Android apps combined.” Source: Mark Zuckerburg @ Disrupt 2012
  10. Sequential browsing: 90% of people begin a task on one device (most commonly a smartphone) and finish it on another. Source: Google
  11. + Mobile “on the go” is a myth: 81% of 18-24 year olds use their mobile device while watching TV. Source: Pew Internet & American Life Project
  12. 17% of cellphone users in the US use 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 to deliver content on multiple devices exists. We must be proactive in creating great experiences for audiences on all devices.
  16. After the launch of a responsive home 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 Search Email Social Media
  23. http://flic.kr/p/axKd6X Coming 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 College Spring Arbor University Herzing University St. Joseph’s College
  28. Show, don’t sell bostonglobe.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 the other 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 the conditionals server, not the device.
  35. +
  36. Planning: full wireframes for each breakpoint Pros: 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 mind because it provides the most detail later • with a slow-decision group, can bog down length of process
  37. Planning: responsive prototypes Pros: Cons: • gets specific about repositioning and • requires someone on the team have content without promising every detail front-end skills • one asset per template instead of three • may not preclude the need for more or four detailed wireframes
  38. Styletiles: for when moodboards are too vague and comps are too precise Source: styletil.es
  39. Sparkbox’s in-browser style prototype Writeup: seesparkbox.com Download: github fork
  40. Design patterns provide effective examples at the beginning of a project so that you’re not rethinking the wheel. Source: Luke W
  41. Responsive design patterns Source: Brad Frost on github.com
  42. Responsive design patterns Source: 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.com dribbble.com mobiletuxedo.com
  46. A last note on planning: plan to conduct user testing on multiple devices
  47. © Brad Frost brad’s iceberg
  48. © Brad Frost brad’s iceberg
  49. V. OPTIMIZATION & TESTING
  50. 1 MB The average weight of a web page today. Flash HTML CSS Other Images JavaScript 82% Source: HTTP Archive
  51. 86% RWD sites whose small screen design weights the same as the large screen. Source: Podjarny
  52. 71% Users expect your mobile site to load as quickly as your desktop site. Source: Gomez
  53. “ The way in which CSS media queries have been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for small screens.” Source: Jason Grigsby on Speakerdeck
  54. Mobile first means performance first (start thinking about performance at the design stage)
  55. PRIMARY PERFORMANCE ISSUES FOR RWD Over Downloading Poor Networks Download & Hide High Latency Download & 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 secs Source: 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 SIZE HTML & CSS Use mod_gzip or mod_deflate to make sure text-based compression 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 RENDER Avoid 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/a4VsPv RESS* can be a scalpel for your responsive designs. REsponsive Design + Server Side Components
  62. toolbox, tools TESTING TOOLS Testing Tools http://flic.kr/p/4BZsQJ
  63. PERFORMANCE TESTING SITES WebPagetest Mobitest
  64. LEARN TO LOVE THE INSPECTOR
  65. THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET mobile bookmarklet
  66. SLOWING THINGS DOWN Charles Throttle charlesproxy.com
  67. EMULATING MOBILE DEVICES BrowserStack Emulators charlesproxy.com
  68. GET YOUR HANDS ON REAL DEVICES eBay MobileKarma.com Cellphone store leftovers Open 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-level Android, 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 Gapinski Professional Technologist Strategist West Virginia University mStoner @dmolsen @thedougco

Editor's Notes

  • 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
  • ×