A run through of simple concepts of responsive design and how these specifically apply to mobile-responsive services. The idea that mobile technology affects social behaviour is explored and examples given of how this affects web service design for mobile phones. The idea that mobile users are not distinct from desktop and tablet users, but often the same people at different times is considered. To show how these simple concepts can be applied to usefully create mobile services, examples from live V&A mobile-responsive web designs are reviewed in terms of how they were planned based on how users behave. These include the main V&A website responsive display and the award-winning digital Explorer Map.

1. Andrew Lewis
Thinking Holistically about
Mobile-responsive Services
Museums Get Mobile!
MCG Spring Meeting
Victoria and Albert Museum
MShed, Bristol, 16 May 2014

3. Mobile-responsive?

4. A responsive web service is one
that adjusts automatically
to suit the different ways your
audiences choose to access it

6. brick
• Heavy
• Rough
• Orangey
• Porous
• Flat
• Hand-sized
• Stable on each side
• Dense material
• Quite brittle
• Cheap
characteristics

7. 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

8. 2007
Stability Disruption

10. What does mobile responsive mean?

11. Technology
Social behaviour

12. • 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

15. as digital technology changes
User contexts change
services need to be
responsive to
mobile is simply a
significant context (currently)

16. The contexts of voice??

17. The contexts of wearables??

19. User context – planning on the go

20. User context – phone as visual diary

21. User context – comfy sofa time

22. User context – uncomfy conference time

23. Department of Transport.THINK! campaign
Mobile users Tablet users
A.Lewis, random observation

24. Digital elements of a museum visit… screen use is contextual
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

27. Enough theory…

28. Keeping it simple

31. Display changes as
screen size changes
@media screen and (max-width: 640px) {
your code here… }
}

32. Banner
A CB
Banner
A B
E F
C D
A
B
C
Banner

33. Scaling and positioning of images

34. Dual-modes for task optimisation

35. Responsive to orientation

36. Responsive to zoom scale

37. Responsive for large screens

38. Visitor Information
Optimisation - quick wins based on data

39. Separate user-design
from digital assets

40. 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

41. Free stuff

42. www.vam.ac.uk/b/blog/digital-media/mobile-research-resources
Research reports are listed here :)

43. http://www.vam.ac.uk/b/blog/digital-media/responsive-website-1
Planning V&A responsive is here…

44. http://www.vam.ac.uk/b/blog/digital-media/mobile-wifi-screens
Mobile Wi-Fi review is here…

45. www.vam.ac.uk/digital

46. Andrew Lewis
Thank you…
Victoria and Albert Museum
www.vam.ac.uk/digital