Responsive web at the V&A
Andrew Lewis, Digital Content Delivery Manager

Julian Harley, Lead Developer
Responsiveness is all about the user
Or more specifically,
my contextual needs
at any one time
The characteristics of mobile context
Screen size
Mobile
Cost of data
Battery life
is
Self-consciousness
Usedonly
when urg...
Mobile responsive displays
Considering evidence
1.
2.
3.
4.

Visit Us
What’s On
Exhibitions
All Visits

Desktop
Mobile
Tablet

Visit-planning content...
Planning a visit

Casual browsing

Finding specific information

Book or buy something
Geographic location

Planning a visit

Finding specific information
UK
USA

Casual browsing

Book or buy something
Navigation people use when planning a visit
Other 13.4%
General
content
8.5%

Visit practicalities
41.3%

Finding out
what...
Casual browsing

Planning a visit

Finding info (professional)

Finding info (personal)

Header

Footer

Megamenu

Related...
Optimisation versus responsiveness

V&A Digital Map
(beta)

•
•
•
•
•
•

Tablet-optimised (primary use method)
SVG vector ...
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 up...
Tips, advice, thoughts, free code and more
on the V&A Digital Media blog…

www.vam.ac.uk/digital
Upcoming SlideShare
Loading in …5
×

Making your website responsive for Mobile users - some starter things you should consider

483 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Making your website responsive for Mobile users - some starter things you should consider

  1. 1. Responsive web at the V&A Andrew Lewis, Digital Content Delivery Manager Julian Harley, Lead Developer
  2. 2. Responsiveness is all about the user Or more specifically, my contextual needs at any one time
  3. 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. 4. Mobile responsive displays
  5. 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. 6. Planning a visit Casual browsing Finding specific information Book or buy something
  7. 7. Geographic location Planning a visit Finding specific information UK USA Casual browsing Book or buy something
  8. 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. 9. Casual browsing Planning a visit Finding info (professional) Finding info (personal) Header Footer Megamenu Related content Related images
  10. 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. 11. Data-driven flexibility
  12. 12. Data-driven flexibility
  13. 13. Iterative development – beta phases
  14. 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. 15. Tips, advice, thoughts, free code and more on the V&A Digital Media blog… www.vam.ac.uk/digital

×