Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive design 101


Published on

This is a presentation I gave at the 2013 Publishing Conference, which took place in Athens, Greece.

Published in: Design
  • Be the first to comment

Responsive design 101

  1. 1. Hi! This powerpoint was used for a live presentation, which is why it has minimal text on the slides (I tend to stick to imagesand facts, while I make the point verbally). For Slideshare, I have added these rather “ugly” subtitles, to explain the point ofeach slide and make the presentation more useful!
  2. 2. Source: Westminster Forum Project “The future of mobile”There is no doubt we are moving towards a predominantly mobile world when it comes to Internet access.
  3. 3. Source: China Internet Network Information Centre (CINIC)Mobile has already replaced the PC as the most common way to access the web in China, while we are seeing an increasingnumber of “mobile only” web users, especially amongst developing countries. There are many great presentations here onSlideshare on the shift towards the mobile web.
  4. 4. Source: ComScoreComScore predicts that by the end of 2013, mobile phones will overtake PCs as the most commonly used device to accessthe Internet on a global level.
  5. 5. Source: Westminster Forum Project “The future of mobile” Source: Study by Pew Research Center Project for Excellence & The Economist Group, 2011Tablets are on the rise as well, and are set to overtake PC sales within 3 years. An interesting note on the way tablet (andmobile) users access the news, is that 60% of them mainly use their browser, while 23% use their apps. Something to thinkabout when deciding on a mobile strategy…
  6. 6. Source: CacalysGreece may still be behind in mobile web penetration, but the same trends seem to apply here as well. Smartphone importsincreased by 14% in 2012, vs the previous year.
  7. 7. Mobile web is growing X8 faster than PC web in Greece Source: CacalysAnd the good news (for mobile) is, that the mobile web is growing 8 times faster than the PC web in Greece. So, it seems weare looking at the same situation here as we are globally.
  8. 8. The only certainty is, that something is changing. Many things have already changed and many things will continue to do soin the next years. The important thing for advertisers and publishers, is to make sure they are adaptable to that change inorder to survive.
  9. 9. But here’s the problem. More so today than ever, we are faced with extreme device fragmentation, a multitude ofdevices, and resolutions which make it difficult to keep up. Desktop monitors are getting bigger, new tablets are appearingin all shapes and sizes, while there are number of other gaming devices that users also use to access the web. So, the milliondollar question is, how do you decide what technology or trend to invest in?
  10. 10. Responsive DesignResponsive design offers a sensible solution to that problem. It’s not the one and only answer to all our problems, but it isnevertheless a very sound approach to this multi-device era. It has been a very hot topic the last couple of years and willcontinue to dominate the web design world for quite a few more.
  11. 11. The term was coined by Ethan Marcotte in his now famous article in “A list apart”, where he explains the need for the webdesign & development industry to change the way it creates websites.
  12. 12. The buzz around the term has since then dominated the web. We were a bit late to pick up the trend in Greece, but asshown in the graph above, it has surpassed all “mobile site” related keywords according to Google Trends.
  13. 13. is one of my favourite examples of responsive design and I often use it to demonstrate the virtues of thistechnique. This is largest resolution the website caters for, with a large carousel, promo links beneith it and a left hand mainnavigation menu.
  14. 14. Notice how the description from the promo links has now disappeared and the main image is slightly smaller. This is done ina very clever way, since the sides of the photo have been cropped, leaving the main subject matter of the image nice andlarge for users to see.
  15. 15. This is the breakpoint where the main navigation is moved to the top of the page, in order to facilitate smaller resolutions,like tablets for example.
  16. 16. The site is truly in “mobile” mode now, you can see the promo links have gone, the menu has lost it’s images and thecontent beneath the carousel has been reduced to fit the screen nicely.
  17. 17. Last but not least, this is the mobile version looking very much like what you would expect of a mobile site. Single columnlayout, with menu at the top and the content nice and clear beneath it.
  18. 18. Remember, this is one site!
  19. 19. Many large brands, as well as many smaller ones have already implemented responsive design sites…
  20. 20. I suggest you visit for more inspiration. It is the largest collection of responsive design sites out there, displayedin a lovely gallery. More inspiration:
  21. 21. It is interesting to note that the online publishing world has been one of the first industries to take on responsive design sofast and there are many examples of large publishers or content sites that are already live with their new responsive sites.Here are just a few examples.
  22. 22. This is a short case study for one of our clients,, which is the largest price comparison site in Greece and the firstresponsive site to be launched here, in March 2012.
  23. 23. As with all responsive site projects, we work on fluid grids, wireframes and prototypes long before we move on to thedesign stage. We try out various layouts constantly checking how they will adapt to various screen resolutions. We alwaysbegin with the smallest screen first and then build up to the largest versions of the design.
  24. 24. Mobile traffic (smartphones and tablets) has seen tremendous growth since the launch of the new site, with many repeat visitors using the site more often. The growth rate itself was much higher post launch, than it was before. However, it is impossible to know how much growth we would have achieved without the new responsive site… which is why we need to look at Google user behaviour and site performance metrics to truly understand the value of the new site. Source: other AnalyticsSource: Google Analytics
  25. 25. Here are some really valuable stats. Pages per visit are up, average duration is also up by a staggering 30% for tablets andbounce rate has gone down for all mobile traffic. These numbers show the real value of the new site. Users are much moreengaged and are enjoying a positive experience on the site, leading to these improved stats.Source: Google Analytics
  26. 26. Responsive web design is not the one and only approach to mobile. What it really does, is help us create beautiful websitesthat adapt to all shapes and sizes allowing users to interact with our site in the best possible way, no matter how they areaccessing it.