Making an award-winning website responsive… quickly
-
Upload
alessandro-canepa -
Category
Documents
-
view
379 -
download
2
description
Transcript of Making an award-winning website responsive… quickly
![Page 1: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/1.jpg)
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
![Page 2: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/2.jpg)
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?
![Page 3: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/3.jpg)
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
![Page 4: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/4.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
Let’s start from a few buzzwords
4 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
![Page 5: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/5.jpg)
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 5
mobile-first
Responsive Web Design
adaptive
liquid
grid
breakpoints
media queries
+ =
![Page 6: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/6.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
A quick demo
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 6
► kwd2012.telecomitalia.com
► http://bit.ly/kwd2012
![Page 7: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/7.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
What are its advantages?
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 7
![Page 8: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/8.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
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
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 8
Responsive Web Design u Optimized for mobile browsing
u Manages large screen sizes very well
u Provides a consistent cross device browsing experience
![Page 9: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/9.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
Practical advantages u ONE site to manage
u No custom design to target devices
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 9
Unexpected advantages u Adds more possibilities in content construction
u Fluid components can adapt to different widths
u Requires simple and practical design solutions
![Page 10: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/10.jpg)
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 10
![Page 11: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/11.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
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
11 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
![Page 12: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/12.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
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
![Page 13: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/13.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
Fast Project Stats
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 13
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
![Page 14: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/14.jpg)
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 14
![Page 15: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/15.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
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
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
![Page 16: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/16.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
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
16 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities
![Page 17: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/17.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
Questions?
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 17
![Page 18: Making an award-winning website responsive… quickly](https://reader036.fdocuments.us/reader036/viewer/2022081404/557c722ad8b42a494c8b47f6/html5/thumbnails/18.jpg)
KWD Webranking Forum 2012 Making an award-winning website responsive… quickly
Thank you
18
My contacts:
Twitter: @canepa
E-mail: [email protected]
Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities