Your SlideShare is downloading. ×
0
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Making an award-winning website responsive… quickly
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Making an award-winning website responsive… quickly

369

Published on

My presentation at the KWD Webranking Forum in London on November 28th 2012

My presentation at the KWD Webranking Forum in London on November 28th 2012

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
369
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TELECOM ITALIA GROUPKWD Webranking Forum 2012London, November 28th 2012Making an award-winningwebsite responsive… quicklyAlessandro CanepaCorporate Communications - Digital Identity & Web Activities
  • 2. 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 ActivitiesAlessandro Canepa
  • 3. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyWhat is Responsive Web Design? Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 3
  • 4. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyLet’s start from a few buzzwords Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 4
  • 5. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyNow let’s put them together adaptive liquid Responsive Web Designmobile-first + grid = breakpoints media queries Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 5
  • 6. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyA quick demo►  kwd2012.telecomitalia.com►  http://bit.ly/kwd2012 Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 6
  • 7. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyWhat are its advantages? Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 7
  • 8. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyTrends to be addressedu  The mobile internet is expected to surpass desktop internet by 2014u  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 momentsResponsive Web Designu  Optimized for mobile browsingu  Manages large screen sizes very wellu  Provides a consistent cross device browsing experience Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 8
  • 9. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyPractical advantagesu  ONE site to manageu  No custom design to target devicesUnexpected advantagesu  Adds more possibilities in content constructionu  Fluid components can adapt to different widthsu  Requires simple and practical design solutions Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 9
  • 10. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyHow complicated it is to design and implement? Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 10
  • 11. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyDesign three times… and then design againu  Design is quite more complicated (mobile – tablet – desktop)u  Start from the mobile breakpoint (mobile-first)u  At the mobile and tablet breakpoints: think touchu  Testing on mobile, tablet and desktop is necessary Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 11
  • 12. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyImplement… gradually Home Pages FASE 1 Hub Pages (2nd level) July 2012 Error page FASE 2 Search engine November 2012 Press releases/notes FASE 3 Article Pages December 2012 Interactive pages Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 12
  • 13. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyFast 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 13
  • 14. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyWhat problems derive from its adoption?How were these resolved? Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 14
  • 15. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyThe browser problem: Internet Explorer 6 and 7 (and 8)u  Internet Explorer 6 and 7 do not support Responsive Web Design wellu  Targeting a custom design just for IE6 and IE7 is time consuming and expensiveu  On Internet Explorer 8 – compatibility view settings are a problemu  A significant number of our internal stakeholders (employees) have IE6Our solutionu  We dropped support for Internet Explorer 6 and 7u  We embraced Microsoft IE6 Countdown initiative (www.ie6countdown.com)u  We developed a popup inviting users to adopt new generation browsersu  We customized metadata code to disable IE8 compatibility viewu  We addressed employees with a custom message Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 15
  • 16. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyEditorial impactOn the content management side:u  Editors need to upload two different formats for every imageu  Components are a slightly more complex Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 16
  • 17. KWD Webranking Forum 2012Making an award-winning website responsive… quicklyQuestions? Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 17
  • 18. KWD Webranking Forum 2012Making an award-winning website responsive… quickly Thank youMy contacts:Twitter: @canepaE-mail: alessandro.canepa@telecomitalia.it Alessandro Canepa, Corporate Communications – Digital Identity & Web Activities 18

×