Alessandro Canepa at Telecom Italia shares his experiences from Telecom Italia's way towards a responsive corporate website. At KWD Webranking Forum London 2012.

1. KWD Webranking Forum 2012
London, November 29th

2. TELECOM ITALIA GROUP
KWD Webranking Forum 2012
London, November 28th 2012
Making an award-winning
website responsive… quickly
Alessandro Canepa
Corporate Communications - Digital Identity & Web Activities

3. 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?
Corporate Communications – Digital Identity & Web Activities
Alessandro Canepa

4. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
What is Responsive Web Design?
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 4

5. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Let’s start from a few buzzwords
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 5

6. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Now let’s put them together
adaptive
liquid Responsive
grid Web Design
mobile-first + =
breakpoints
media queries
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 6

7. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
A quick demo
► kwd2012.telecomitalia.com
► http://bit.ly/kwd2012
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 7

8. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
What are its advantages?
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 8

9. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
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
Responsive Web Design
 Optimized for mobile browsing
 Manages large screen sizes very well
 Provides a consistent cross device browsing experience
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 9

10. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Practical advantages
 ONE site to manage
 No custom design to target devices
Unexpected advantages
 Adds more possibilities in content construction
 Fluid components can adapt to different widths
 Requires simple and practical design solutions
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 10

11. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
How complicated it is to design and implement?
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 11

12. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
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
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 12

13. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Implement… gradually
Home Pages
FASE 1 Hub Pages (2nd level) July 2012
Error page
FASE 2 Search engine
November 2012
Press releases/notes
Article Pages
FASE 3 December 2012
Interactive pages
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 13

14. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Fast Project Stats from February 2012 to a few days ago
2350 6 27 2 169 6
total cups of espresso drunk internal team external team languages conference calls work locations
members members
working on this working on this
project project
212 15 67 13 7 321
total cups of
cappuccino drunk
wireframes graphic releases in online version gigabytes of data
proposals staging releases used
120 560
total cups of images uploaded
tea drunk
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 14

15. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
What problems derive from its adoption?
How were these resolved?
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 15

16. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
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
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
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 16

17. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Editorial impact
On the content management side:
 Editors need to upload two different formats for every image
 Components are a slightly more complex
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 17

18. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Questions?
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 18

19. KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Thank you
My contacts:
Twitter: @canepa
E-mail: alessandro.canepa@telecomitalia.it
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 19