how to plan responsive web services

How to plan responsive web services

Victoria and Albert Museum

Andrew LewisDigital Content Delivery ManagerMuseums and the Web 4 March 2014

Banner

A B

E F

C D

Before you start typing…

MW2014 paper:bit.ly/mw14al

slides:

@rosemarybeetlefollow:

(Tweet me if I missed something)

bit.ly/mw14alss

User contexts

User contextsNot technology…

Nor gadgets…Nor app platforms…

Some basics

What are responsive web services?

A responsive web service is

one that adjusts

automatically

to suit the different ways

your audiences choose to

access it

Multiple user contexts of a museum visit

Discovery Journey Being hereAwareness

Activity: social digital

Location: anywhere

Screen: mobile

Activity: leisurely discoveryLocation: homeScreen: tablet

Activity: wayfindingLocation: on the move

Screen: mobile

Activity: leisurely discoveryLocation: Museum

Screen – none/gallery screens/mobileTwitter, Facebook, etc Digital map, What’s On Mobile optimised Visit Us page The awesome V&A

Optimisation

brick

HeavyRoughOrangeyPorousFlatHand-sizedStable on each sideDense materialQuite brittleCheap

characteristics

phone

Takes photos, videos audioAllows remote speechHas a rechargeable batteryQuite light, easily breakablePocket-sizedTouch enabled, finger-sizedExpensive/valuableHas model-specific featuresReplaces pre-planningTaken everywhere

characteristics

Why make things responsive?

53% of all adults regular media multi-taskers

UK OFCOM. Communications Market Report 2013. (published August 2013)

81% tablet owners multi-task with other media and TV

More than half of adults own a smartphone

Digital changes behaviour

Google. The New Multi-Screen World. Understanding cross-platform consumer behaviour (published August 2012)

Google. The New Multi-Screen World. Understanding cross-platform consumer behaviour (published August 2012)

Planning

ServiceDevelopment

Cycle

Understandaudience needs

Adjustservices

Decide priorities

Digitalunpredictability

Consumer trends

Your brainContinuous enhancement Innovation from disruption

Continuousenhancementwithin known user context

Disruptive innovationmakes new

user contexts possible

The disruption of usable touch navigation

User context – planning on the go

User context – phone as visual diary

User context – comfy sofa time

User context – uncomfy conference time

User contexts change as digital does

The contexts of voice??

Useful approaches

Research

Research

bit.ly/mw14al2

There is a lot of evidence out there

Communities- eg @museweb, @MuseumCN, @ukmcg)

Rocking the hat, Nancy!

User data

Measuring success

KPI

Largeness of KPI

Get bigger for ever

Content format segmentation….

Device segmentation….

Trend analysis within segments….

Visit practicalities41.3%

Other 13.4%

General content8.5%

Finding out what is on36.8%

Intention analysis within segments….

UK

bit.ly/mw14al3

Usercontext

s

Basic technical stuff

(with subtitles for the technically minded)

Start with simple web stuff

(progressive enhancement)

Display changes as screen size changes

(fluid-grid responsive frameworks are cool)@media screen and (max-width: 640px) { your code here… }

}

Banner

A CB

Banner

A B

E F

C D

A

B

C

Banner

Scaling and positioning of images

Dual-modes for task optimisation

Responsive to orientation

Responsive to zoom scale

Responsive for large screens

Separate user-design from technology

(Decouple front end from backend data)

Search the Collections (STC)

Mobile STC

Website auto-display module

Furniture gallery digital label

Digital map

One chair. One

authoritative digital asset.Powered by

APIs

Options for change

Invest in your services

for your audiences

Add to procurement guidance

Visitor Information

Optimisation - quick wins based on data

To wrap

Banner

A B

E F

C D

User contexts Strategic prioritisation

Fluid grids Investment

Thank you

Victoria and Albert Museum

@rosemarybeetle

www.vam.ac.uk/digital