How to plan responsive web services

1,395 views

Published on

Help to plan responsive web services. The main focus is mobile-responsive and tablet-responsive displays. It also considers more generally what responsive-design means and the importance of understanding specific user contexts (like tablet use on a comfy sofa)

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,395
On SlideShare
0
From Embeds
0
Number of Embeds
104
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Information scientist with 13 years managing projects and live digital services in museums and public libraries. BSc Cybernetics & Control Engineering, MSc Information and Library Studies, chartered librarian, makes stuff…Joined the Victoria and Albert Museum in 2008. Currently Digital Content Delivery Manager, previously Senior Web Content Manager.Projects – large-scale website redesign, content programme management, self-issue services,automated telephone renewal systems, public access computer services, online information, game development, SMART cards, multi-authority procurement and digitisation projects, etc.
  • PAUSE to ask levels of knowledge
  • Information scientist with 13 years managing projects and live digital services in museums and public libraries. BSc Cybernetics & Control Engineering, MSc Information and Library Studies, chartered librarian, makes stuff…Joined the Victoria and Albert Museum in 2008. Currently Digital Content Delivery Manager, previously Senior Web Content Manager.Projects – large-scale website redesign, content programme management, self-issue services,automated telephone renewal systems, public access computer services, online information, game development, SMART cards, multi-authority procurement and digitisation projects, etc.
  • How to plan responsive web services

    1. 1. How to plan responsive web services Victoria and Albert Museum Andrew Lewis Digital Content Delivery Manager Museums and the Web 4 March 2014
    2. 2. Banner A B E F C D
    3. 3. Before you start typing… MW2014 paper: bit.ly/mw14al slides: @rosemarybeetlefollow: (Tweet me if I missed something) bit.ly/mw14alss
    4. 4. User contexts
    5. 5. User contexts Not technology… Nor gadgets… Nor app platforms…
    6. 6. Some basics
    7. 7. What are responsive web services?
    8. 8. A responsive web service is one that adjusts automatically to suit the different ways your audiences choose to access it
    9. 9. Multiple user contexts of a museum visit Discovery Journey Being hereAwareness Activity: social digital Location: anywhere Screen: mobile Activity: leisurely discovery Location: home Screen: tablet Activity: wayfinding Location: on the move Screen: mobile Activity: leisurely discovery Location: Museum Screen – none/gallery screens/ mobile Twitter, Facebook, etc Digital map,What’s On Mobile optimised Visit Us page The awesome V&A
    10. 10. Optimisation
    11. 11. brick Heavy Rough Orangey Porous Flat Hand-sized Stable on each side Dense material Quite brittle Cheap characteristics
    12. 12. phone Takes photos, videos audio Allows remote speech Has a rechargeable battery Quite light, easily breakable Pocket-sized Touch enabled, finger-sized Expensive/valuable Has model-specific features Replaces pre-planning Taken everywhere characteristics
    13. 13. Why make things responsive?
    14. 14. 53% of all adults regular media multi-taskers UK OFCOM. Communications Market Report 2013. (published August 2013) 81% tablet owners multi-task with other media and TV More than half of adults own a smartphone Digital changes behaviour
    15. 15. Google. The New Multi-Screen World. Understanding cross-platform consumer behaviour (published August 2012)
    16. 16. Google. The New Multi-Screen World. Understanding cross-platform consumer behaviour (published August 2012)
    17. 17. Planning
    18. 18. Service Development Cycle Understand audience needs Adjust services Decide priorities Digital unpredictability
    19. 19. Consumer trends
    20. 20. Your brain Continuous enhancement Innovation from disruption
    21. 21. Continuous enhancement within known user context
    22. 22. Disruptive innovation makes new user contexts possible
    23. 23. The disruption of usable touch navigation
    24. 24. User context – planning on the go
    25. 25. User context – phone as visual diary
    26. 26. User context – comfy sofa time
    27. 27. User context – uncomfy conference time
    28. 28. User contexts change as digital does
    29. 29. The contexts of voice??
    30. 30. Useful approaches
    31. 31. Research
    32. 32. bit.ly/mw14al2 There is a lot of evidence out there
    33. 33. Communities- eg @museweb, @MuseumCN, @ukmcg) Rocking the hat, Nancy!
    34. 34. User data
    35. 35. Measuring success KPI Largeness of KPI
    36. 36. Content format segmentation….
    37. 37. Device segmentation….
    38. 38. Trend analysis within segments….
    39. 39. Visit practicalities 41.3% Other 13.4% General content 8.5% Finding out what is on 36.8% Intention analysis within segments….
    40. 40. UK
    41. 41. bit.ly/mw14al3
    42. 42. Basic technical stuff (with subtitles for the technically minded)
    43. 43. Start with simple web stuff (progressive enhancement)
    44. 44. Display changes as screen size changes (fluid-grid responsive frameworks are cool) @media screen and (max-width: 640px) { your code here… }
    45. 45. Banner A CB Banner A B E F C D A B C Banner
    46. 46. Scaling and positioning of images
    47. 47. Dual-modes for task optimisation
    48. 48. Responsive to orientation
    49. 49. Responsive to zoom scale
    50. 50. Responsive for large screens
    51. 51. Separate user-design from technology (Decouple front end from backend data)
    52. 52. Search the Collections (STC) Mobile STC Website auto-display module Furniture gallery digital label Digital map One chair. One authoritative digital asset. Powered by APIs
    53. 53. Options for change
    54. 54. Invest in your services for your audiences
    55. 55. Add to procurement guidance
    56. 56. Visitor Information Optimisation - quick wins based on data
    57. 57. To wrap
    58. 58. Banner A B E F C D User contexts Strategic prioritisation Fluid grids Investment
    59. 59. Thank you Victoria and Albert Museum @rosemarybeetle www.vam.ac.uk/digital

    ×