thinking holistically about mobile-responsive services

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