Making an award-winning website responsive… quickly

TELECOM ITALIA GROUP

KWD Webranking Forum 2012 London, November 28th 2012

Corporate Communications - Digital Identity & Web Activities

Making an award-winning website responsive… quickly Alessandro Canepa

Corporate Communications – Digital Identity & Web Activities Alessandro Canepa

Responsive Web Design ►  What is it? ►  What are its advantages? ►  How complicated is it to design and implement? ►  What problems derive from its adoption? How were these

resolved?

KWD Webranking Forum 2012 Making an award-winning website responsive… quickly

What is Responsive Web Design?

Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 3


Let’s start from a few buzzwords

4 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities


Now let’s put them together


mobile-first

Responsive Web Design

adaptive

liquid

grid

breakpoints

media queries

+ =


A quick demo


►  kwd2012.telecomitalia.com

►  http://bit.ly/kwd2012


What are its advantages?



Trends to be addressed u  The mobile internet is expected to surpass desktop internet by 2014

u  Today, most visitors have a screen resolution higher than 1024x768 pixels (in our case 75%)

u  Users now tend to access content through different devices in different moments


Responsive Web Design u  Optimized for mobile browsing

u  Manages large screen sizes very well

u  Provides a consistent cross device browsing experience


Practical advantages u  ONE site to manage

u  No custom design to target devices


Unexpected advantages u  Adds more possibilities in content construction

u  Fluid components can adapt to different widths

u  Requires simple and practical design solutions


How complicated it is to design and implement?



Design three times… and then design again u  Design is quite more complicated (mobile – tablet – desktop)

u  Start from the mobile breakpoint (mobile-first)

u  At the mobile and tablet breakpoints: think touch

u  Testing on mobile, tablet and desktop is necessary



Implement… gradually

12

FASE 1

Home Pages Hub Pages (2nd level) Error page

FASE 2 Search engine Press releases/notes

FASE 3 Article Pages Interactive pages

July 2012

November 2012

December 2012

Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities


Fast Project Stats


2350 total cups of espresso drunk

6 internal team members working on this project

2 languages

169 conference calls

6 work locations

120 total cups of tea drunk

15 wireframes

67 graphic proposals

321 gigabytes of data used

212 total cups of cappuccino drunk

27 external team members working on this project

7 online version releases

from February 2012 to a few days ago

13 releases in staging

560 images uploaded


What problems derive from its adoption? How were these resolved?



The browser problem: Internet Explorer 6 and 7 (and 8) u  Internet Explorer 6 and 7 do not support Responsive Web Design well

u  Targeting a custom design just for IE6 and IE7 is time consuming and expensive

u  On Internet Explorer 8 – compatibility view settings are a problem

u  A significant number of our internal stakeholders (employees) have IE6

15

Our solution u  We dropped support for Internet Explorer 6 and 7

u  We embraced Microsoft IE6 Countdown initiative (www.ie6countdown.com)

u  We developed a popup inviting users to adopt new generation browsers

u  We customized metadata code to disable IE8 compatibility view

u  We addressed employees with a custom message



Editorial impact

On the content management side:

u  Editors need to upload two different formats for every image

u  Components are a slightly more complex



Questions?



Thank you

18

My contacts:

Twitter: @canepa

E-mail: [email protected]


Documents

Making an award-winning website responsive… quickly