Presentation from session "Responsive Web on Mobile" 7th Museums & Mobile Online Conference on Tuesday, October 15th, 2013. http://www.museumsmobile.com/

1. Responsive web at the V&A
Andrew Lewis, Digital Content Delivery Manager
Julian Harley, Lead Developer

2. Responsiveness is all about the user
Or more specifically,
my contextual needs
at any one time

3. The characteristics of mobile context
Screen size
Mobile
Cost of data
Battery life
is
Self-consciousness
Usedonly
when urgent
On the fly attitude
one
Connection speed
Effort to use
context

4. Mobile responsive displays

5. Considering evidence
1.
2.
3.
4.
Visit Us
What’s On
Exhibitions
All Visits
Desktop
Mobile
Tablet
Visit-planning content
mapped to consumer
device use
August 2011 – August 2013

6. Planning a visit
Casual browsing
Finding specific information
Book or buy something

7. Geographic location
Planning a visit
Finding specific information
UK
USA
Casual browsing
Book or buy something

8. Navigation people use when planning a visit
Other 13.4%
General
content
8.5%
Visit practicalities
41.3%
Finding out
what is on
36.8%
www.vam.ac.uk/b/blog/digital-media/google-analytics-event-tracking

9. Casual browsing
Planning a visit
Finding info (professional)
Finding info (personal)
Header
Footer
Megamenu
Related content
Related images

10. Optimisation versus responsiveness
V&A Digital Map
(beta)
•
•
•
•
•
•
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)

11. Data-driven flexibility

12. Data-driven flexibility

13. Iterative development – beta phases

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

15. Tips, advice, thoughts, free code and more
on the V&A Digital Media blog…
www.vam.ac.uk/digital