Upload
comprend
View
559
Download
0
Embed Size (px)
Citation preview
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 4
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Let’s start from a few buzzwords
5 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Now let’s put them together
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 6
mobile-first
Responsive
Web Design
adaptive
liquid
grid
breakpoints
media queries
+ =
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
A quick demo
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 7
► kwd2012.telecomitalia.com
► http://bit.ly/kwd2012
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
What are its advantages?
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 8
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
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 9
Responsive Web Design
Optimized for mobile browsing
Manages large screen sizes very well
Provides a consistent cross device browsing experience
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Practical advantages
ONE site to manage
No custom design to target devices
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 10
Unexpected advantages
Adds more possibilities in content construction
Fluid components can adapt to different widths
Requires simple and practical design solutions
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
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
12 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
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
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
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
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
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
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
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
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
17 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Questions?
Alessandro Canepa, Corporate Communications – Digital Identity & Web
Activities 18
KWD Webranking Forum 2012
Making an award-winning website responsive… quickly
Thank you
19
My contacts:
Twitter: @canepa
E-mail: [email protected]
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities