making telecom italia's website responsive alessandro canepa_2012-11-29

KWD Webranking Forum 2012

London, November 29th

TELECOM ITALIA GROUP


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?


Making an award-winning website responsive… quickly

What is Responsive Web Design?

Alessandro Canepa, Corporate Communications – Digital Identity & Web

Activities 4



Let’s start from a few buzzwords

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



Now let’s put them together


Activities 6

mobile-first

Responsive

Web Design

adaptive

liquid

grid

breakpoints

media queries

+ =



A quick demo

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

► kwd2012.telecomitalia.com

► http://bit.ly/kwd2012

http://bit.ly/kwd2012



What are its advantages?


Activities 8



Trends to be addressed

The mobile internet is expected to surpass desktop internet by 2014

Today, most visitors have a screen resolution higher than 1024x768 pixels

(in our case 75%)

Users now tend to access content through different devices in different

moments


Activities 9

Responsive Web Design

Optimized for mobile browsing

Manages large screen sizes very well

Provides a consistent cross device browsing experience



Practical advantages

ONE site to manage

No custom design to target devices


Activities 10

Unexpected advantages

Adds more possibilities in content construction

Fluid components can adapt to different widths

Requires simple and practical design solutions



How complicated it is to design and implement?


Activities 11



Design three times… and then design again

Design is quite more complicated (mobile – tablet – desktop)

Start from the mobile breakpoint (mobile-first)

At the mobile and tablet breakpoints: think touch

Testing on mobile, tablet and desktop is necessary




Implement… gradually

13

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

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

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?


Activities 15



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

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

On Internet Explorer 8 – compatibility view settings are a problem

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

16

Our solution

We dropped support for Internet Explorer 6 and 7

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

We developed a popup inviting users to adopt new generation browsers

We customized metadata code to disable IE8 compatibility view

We addressed employees with a custom message


http://www.ie6countdown.com



Editorial impact

On the content management side:

Editors need to upload two different formats for every image

Components are a slightly more complex




Questions?


Activities 18



Thank you

19

My contacts:

Twitter: @canepa

E-mail: [email protected]


making telecom italia's website responsive alessandro canepa_2012-11-29

Business