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.
How to plan responsive web services
Victoria and Albert Museum
Andrew Lewis
Digital Content Delivery Manager
Museums and t...
Banner
A B
E F
C D
Before you start typing…
MW2014 paper: bit.ly/mw14al
slides:
@rosemarybeetlefollow:
(Tweet me if I missed something)
bit.l...
User contexts
User contexts
Not technology…
Nor gadgets…
Nor app platforms…
Some basics
What are responsive web services?
A responsive web service is one
that adjusts automatically
to suit the different ways your
audiences choose to access it
Multiple user contexts of a museum visit
Discovery Journey Being hereAwareness
Activity: social digital
Location: anywhere...
Optimisation
brick
Heavy
Rough
Orangey
Porous
Flat
Hand-sized
Stable on each side
Dense material
Quite brittle
Cheap
characteristics
phone
Takes photos, videos audio
Allows remote speech
Has a rechargeable battery
Quite light, easily breakable
Pocket-size...
Why make things responsive?
53% of all adults regular media multi-taskers
UK OFCOM. Communications Market Report 2013.
(published August 2013)
81% tab...
Google. The New Multi-Screen World. Understanding cross-platform
consumer behaviour (published August 2012)
Google. The New Multi-Screen World. Understanding cross-platform
consumer behaviour (published August 2012)
Planning
Service
Development
Cycle
Understand
audience needs
Adjust
services
Decide
priorities
Digital
unpredictability
Consumer trends
Your brain
Continuous enhancement Innovation from disruption
Continuous
enhancement
within known
user context
Disruptive innovation
makes new
user contexts possible
The disruption of usable touch navigation
User context – planning on the go
User context – phone as visual diary
User context – comfy sofa time
User context – uncomfy conference time
User contexts change as digital does
The contexts of voice??
Useful approaches
Research
bit.ly/mw14al2
There is a lot of evidence out there
Communities- eg @museweb, @MuseumCN, @ukmcg)
Rocking the
hat, Nancy!
User data
Measuring success
KPI
Largeness of KPI
Content format segmentation….
Device segmentation….
Trend analysis within segments….
Visit practicalities
41.3%
Other 13.4%
General
content
8.5%
Finding out
what is on
36.8%
Intention analysis within segment...
UK
bit.ly/mw14al3
Basic technical stuff
(with subtitles for the technically minded)
Start with simple web stuff
(progressive enhancement)
Display changes as screen size changes
(fluid-grid responsive frameworks are cool)
@media screen and (max-width: 640px) {
...
Banner
A CB
Banner
A B
E F
C D
A
B
C
Banner
Scaling and positioning of images
Dual-modes for task optimisation
Responsive to orientation
Responsive to zoom scale
Responsive for large screens
Separate user-design from technology
(Decouple front end from backend data)
Search the Collections (STC)
Mobile STC
Website auto-display module
Furniture gallery digital label
Digital map
One chair....
Options for change
Invest in your services
for your audiences
Add to procurement guidance
Visitor Information
Optimisation - quick wins based on data
To wrap
Banner
A B
E F
C D
User contexts Strategic prioritisation
Fluid grids Investment
Thank you
Victoria and Albert Museum
@rosemarybeetle
www.vam.ac.uk/digital
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
How to plan responsive web services
Upcoming SlideShare
Loading in …5
×

How to plan responsive web services

1,635 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
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.WritePaper.info ⇐ and place your order
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×