thinking holistically about mobile-responsive services
DESCRIPTION
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.TRANSCRIPT
Andrew Lewis
Thinking Holistically aboutMobile-responsive Services
Museums Get Mobile!MCG Spring Meeting
Victoria and Albert Museum
MShed, Bristol, 16 May 2014
Mobile-responsive?
A responsive web service is
one that adjusts
automatically
to suit the different ways
your audiences choose to
access it
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-sized• Touch enabled, finger-sized• Expensive/valuable• Has model-specific features• Replaces pre-planning• Taken everywhere
characteristics
2007
Stability Disruption
What does mobile responsive mean?
TechnologySocial behaviour
• 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
as digital technology changes
User contexts
change
services need to be responsive to
mobile is simply asignificant context
(currently)
The contexts of voice??
The contexts of wearables??
User context – planning on the go
User context – phone as visual diary
User context – comfy sofa time
User context – uncomfy conference time
Department of Transport. THINK! campaign
Mobile users Tablet users
A.Lewis, random observation
Digital elements of a museum visit… screen use is contextual Discovery Journey Being hereAwareness
Activity: social digital
Location: anywhere
Screen: mobile
Activity: leisurely discoveryLocation: homeScreen: tablet
Activity: wayfindingLocation: on the move
Screen: mobile
Activity: leisurely discoveryLocation: Museum
Screen – none/gallery screens/mobile
Twitter, Facebook, etc
Digital map, What’s On
Mobile-optimisedVisit Us page
The awesome V&A
Enough theory…
Keeping it simple
Display changes as
screen size changes
@media screen and (max-width: 640px) { your code here… }
}
Banner
A CB
Banner
A B
E FC D
AB
C
Banner
Scaling and positioning of images
Dual-modes for task optimisation
Responsive to orientation
Responsive to zoom scale
Responsive for large screens
Visitor Information
Optimisation - quick wins based on data
Separate user-design
from digital assets
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
Free stuff
www.vam.ac.uk/b/blog/digital-media/mobile-research-resources
Research reports are listed here :)
http://www.vam.ac.uk/b/blog/digital-media/responsive-website-1
Planning V&A responsive is here…
http://www.vam.ac.uk/b/blog/digital-media/mobile-wifi-screens
Mobile Wi-Fi review is here…
www.vam.ac.uk/digital
Andrew Lewis
Thank you…
Victoria and Albert Museum
www.vam.ac.uk/digital