Making your website responsive for Mobile users - some starter things you should consider
Download as PPTX, PDF0 likes563 views
The document discusses the importance of responsive web design at the V&A by emphasizing user context, particularly on mobile devices. It outlines characteristics such as screen size and usage patterns, while detailing planning and navigation statistics for visitors. The need for iterative development and data-driven design is highlighted to enhance user experience across different devices.
Making your website responsive for Mobile users - some starter things you should consider
- 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
- 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)
- 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