Post on 02-Dec-2014
description
transcript
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