Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Establishing Performance Contexts

2,238 views

Published on

Segmenting your site to target specific user performance contexts

Published in: Technology

Establishing Performance Contexts

  1. 1. Establishing performance contexts Ian Feather - @ianfeather
  2. 2. Performance at ! !
  3. 3. We don’t know how important speed is to our users at a given time
  4. 4. It’s not that hard to get fast
  5. 5. It’s not that hard to get fast
  6. 6. It’s not that hard to get fast
  7. 7. It’s not that hard to get fast
  8. 8. You can use these techniques to optimise (to a certain extent)
  9. 9. Total: weight: 674 KB ! Until you scroll down the page…
  10. 10. !
  11. 11. Performance vs Design is all about compromise
  12. 12. Performance vs Design is all about compromise
  13. 13. You can only get as fast as the design allows
  14. 14. Performance Contexts
  15. 15. We have to accept there are things we don’t know
  16. 16. We are constantly required to make assumptions…
  17. 17. Assumption 1: Users on mobile devices want a different experience to those on desktop
  18. 18. Assumption 1: Users on mobile devices want a different experience to those on desktop Viewport !== context Viewport !== network
  19. 19. Assumption 2: Users want every site to load within X seconds
  20. 20. Assumption 2: Users want every site to load within X seconds Users want a site to load in-line with their expectations
  21. 21. Serving the same experience across multiple unknowns is a compromise
  22. 22. Currently we don’t have the tools to do anything about this
  23. 23. But… ! The Web is for everyone
  24. 24. How can we determine a user’s performance context?
  25. 25. Why not ask them?
  26. 26. Hostel Mode
  27. 27. http://blog.chriszacharias.com/page-weight-matters
  28. 28. “We even burned through our monthly data plans in 40 minutes.”
  29. 29. Light Mode Default
  30. 30. Segmenting in to two ‘modes’ can be very powerful but…
  31. 31. Are we still making assumptions?
  32. 32. Did we ever ask users with retina screens if they want a slower experience?
  33. 33. And are we still compromising?
  34. 34. We can’t leverage the best of the platform… whilst limiting page weight.
  35. 35. Light Mode Default
  36. 36. Light Mode Default Enhanced
  37. 37. Segmenting allows us to design focused User Experiences
  38. 38. Asking the user
  39. 39. How could this look?
  40. 40. Implementation Advice
  41. 41. Don’t build three different websites!
  42. 42. Abstract out the development complexity
  43. 43. if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window && 'classList' in document.documentElement && lpHostelMode() !== "light") { } Global feature switches
  44. 44. Authoring must stay the same <div class=“my-module”> <h1>{{ moduleTitle }}</h1> {{ img_tag(moduleImage) }} <p>{{ moduleContent }}</p> </div>
  45. 45. Use helpers to abstract switches def img_tag(image_url, opts={}) return if @hostelMode ! image_tag(image_url, opts) end
  46. 46. Stateless vs Stateful
  47. 47. Consider the preloader
  48. 48. Future: Could the browser expose these user options?
  49. 49. Recap
  50. 50. You can only get as fast as the design allows
  51. 51. Your application may be entirely inaccessible to parts of the world
  52. 52. Segmenting the user experience can be very powerful
  53. 53. Don’t guess. Ask.
  54. 54. Don’t do it at the expense of complexity
  55. 55. Thank you Ian Feather - @ianfeather
  56. 56. Creative Commons ! Arrano : https://flic.kr/p/4WjZDf Patrick Quinn-Graham (thepatrick): ! https://flic.kr/p/Tk4Ha Leonardo Rizzi (L1010913): https://flic.kr/p/cVRiZm !

×