Andrew Lewis, Digital Content Delivery Manager

Responsive web at the V&A

Julian Harley, Lead Developer

Responsiveness is all about the userOr more

specifically, my contextual needs at any one time

Screen sizeCost of dataBattery life

Self-consciousness

Used when urgent

On the fly attitude

Connection speed

Effort to use

The characteristics of mobile context

Mobileis

only one

context

Mobile responsive displays

Visit-planning content mapped to consumer

device use

1. Visit Us2. What’s On3. Exhibitions4. All Visits August 2011 – August 2013

Desktop

Mobile

Tablet

Considering evidence

Planning a visit Finding specific information

Casual browsing Book or buy something

Geographic location

Planning a visit Finding specific information

Casual browsing Book or buy something

UK

USA

Navigation people use when planning a visit

Visit practicalities41.3%

Other 13.4%

General content8.5%

Finding out what is on36.8%

www.vam.ac.uk/b/blog/digital-media/google-analytics-event-tracking

Header Footer

Megamenu Related content Related images

Planning a visit

Finding info (professional)

Casual browsing

Finding info (personal)

• Tablet-optimised (primary use method)• SVG vector graphics for tiny download over mobile • Mobile responsive (small screen scaling/matches

aspect ratio)• Large-screen responsive (scales up with no loss of

quality)• Digital-asset driven content (collection/event data via

APIs)• Platform independent HTML5

(iPhone, iPad, Android, Blackberry)

V&A Digital Map (beta)

Optimisation versus responsiveness

Data-driven flexibility

Data-driven flexibility

Iterative development – beta phases

Rationale and evidence• The experience of mobile changes behaviour• Use evidence of behaviour to design• % mobile uptake varies a lot – prioritise• Mobile is not only context – tablets different

Design and process• Responsive will reshape your site• Iterate, improve and adapt thinking as you go• Optimisation different from responsive• Data-driven decouples display from content• Just start doing it…

Tips, advice, thoughts, free code and more

on the V&A Digital Media blog…

www.vam.ac.uk/digital