Responsive web design - Westminster Abbey at SIUC 2011

17
Imogen Levy Westminster Abbey

Transcript of Responsive web design - Westminster Abbey at SIUC 2011

Imogen Levy Westminster Abbey

Royal Wedding 2.0 Playing ‘host’ to 187,533 guests Imogen Levy - Online Editor - Westminster Abbey

Royal Wedding 2.0 Playing host to 187,533 guests!

>  A bit about me >  A bit about the Abbey >  Quiz time (with prize!) >  Abbey’s Wedding Plans

•  Responsive Design •  Cloud Hosting •  Social Media •  App

>  What next? >  Questions

A bit about me…

>  Online Editor for Westminster Abbey since 2008 (Website, Intranet, Social Networks, Podcasts, Videos, Apps...)

>  Background in Interactive design >  New Media roles for BBC and Church

of England >  Baker and Swing dancer!

A bit about the Abbey…

>  Royal Peculiar – The Queen is my boss!

>  World Heritage site >  Living & Working Church >  16 Royal Weddings >  Coronations since 1066 >  Over 3,000 people buried or

memorialised

Abbey’s Wedding Plans

>  New Responsive Design >  Cloud hosting >  Twitter >  Facebook >  An app

Responsive Design ‘accepting the ebb and flow of things’

>  What? •  Web design that automatically adjusts to users resolution,

image size and scripting abilities •  New way of thinking about design •  Combining fluid grids with CSS3 media queries

Responsive Design ‘accepting the ebb and flow of things’

>  Why? •  Mobile browsing to overtake desktop browsing in 2-4yrs •  Greater number of devices •  Mobile access (to Abbey site) has increased 900% over

the past 12 months •  Mobile viewers make up 5% of the total daily hits on the

website •  Opportunity to engage with new audiences •  Good solution for small web teams •  One template fits all

Responsive Design ‘accepting the ebb and flow of things’

Responsive Design ‘accepting the ebb and flow of things’

Responsive Design ‘accepting the ebb and flow of things’

>  Lessons •  It is impossible to separate the code with the design so it

helps to be comfortable with doing both. •  It takes a lot of trial and error •  Use devices as much as possible – simulators are good

but there are always slight differences. •  Be prepared for constant tweaks (this never ends!) •  Have an endless supply of cake and tea!

Hosting

>  Cloud hosting solution for Royal Wedding >  Unknown quantity of traffic >  Pay for what you use >  On the day:

•  5000 hits a second (we normally get 5000 per day!) •  20% from mobile devices

Social Media >  From 2,000 > 13,000 twitter followers >  Twitter feed on homepage >  Westminster Abbey- world-wide trending topic >  Behind the scenes sneaky peaks >  Facebook likes from 300 > 8,000

Abbey 3D

>  First app to marry building, gaming + film production techniques

>  Version 1 for Royal Wedding proceeds to charity, exclusive content

>  In top 200 on app store on day of wedding

>  Version 2 in development – fully 3D Abbey

>  Long term aim to replace audio-guides

So what now?

>  Finish App version 2 >  Mobile Intranet project >  Web tweaks as ever >  Online archive of images/historical data >  World domination!

The end!

>  Questions?