Hi! This powerpoint was used for a live presentation, which is why it has minimal text on the slides (I tend to stick to images and facts, while I make the point verbally). For Slideshare, I have added these rather “ugly” subtitles, to explain the point of each slide and make the presentation more useful!

There is no doubt we are moving towards a predominantly mobile world when it comes to Internet access.

Source: Westminster Forum Project “The future of mobile”

Mobile has already replaced the PC as the most common way to access the web in China, while we are seeing an increasing number of “mobile only” web users, especially amongst developing countries. There are many great presentations here on Slideshare on the shift towards the mobile web.

Source: China Internet Network Information Centre (CINIC)

Source: ComScore

ComScore predicts that by the end of 2013, mobile phones will overtake PCs as the most commonly used device to access the Internet on a global level.

Source: Study by Pew Research Center Project for Excellence & The Economist

Group, 2011

Tablets are on the rise as well, and are set to overtake PC sales within 3 years. An interesting note on the way tablet (and mobile) users access the news, is that 60% of them mainly use their browser, while 23% use their apps. Something to think about when deciding on a mobile strategy…

Source: Westminster Forum Project “The future of mobile”

Source: Cacalys

Greece may still be behind in mobile web penetration, but the same trends seem to apply here as well. Smartphone imports increased by 14% in 2012, vs the previous year.

Mobile web is growing

X8faster than PC web in Greece

Source: Cacalys

And the good news (for mobile) is, that the mobile web is growing 8 times faster than the PC web in Greece. So, it seems we are looking at the same situation here as we are globally.

The only certainty is, that something is changing. Many things have already changed and many things will continue to do so in the next years. The important thing for advertisers and publishers, is to make sure they are adaptable to that change in order to survive.

But here’s the problem. More so today than ever, we are faced with extreme device fragmentation, a multitude of devices, and resolutions which make it difficult to keep up. Desktop monitors are getting bigger, new tablets are appearing in all shapes and sizes, while there are number of other gaming devices that users also use to access the web. So, the million dollar question is, how do you decide what technology or trend to invest in?

Responsive Design

Responsive design offers a sensible solution to that problem. It’s not the one and only answer to all our problems, but it is nevertheless a very sound approach to this multi-device era. It has been a very hot topic the last couple of years and will continue to dominate the web design world for quite a few more.

The term was coined by Ethan Marcotte in his now famous article in “A list apart”, where he explains the need for the web design & development industry to change the way it creates websites.

The buzz around the term has since then dominated the web. We were a bit late to pick up the trend in Greece, but as shown in the graph above, it has surpassed all “mobile site” related keywords according to Google Trends.

Foodsense.is is one of my favourite examples of responsive design and I often use it to demonstrate the virtues of this technique. This is largest resolution the website caters for, with a large carousel, promo links beneith it and a left hand main navigation menu.

Notice how the description from the promo links has now disappeared and the main image is slightly smaller. This is done in a very clever way, since the sides of the photo have been cropped, leaving the main subject matter of the image nice and large for users to see.

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.

The site is truly in “mobile” mode now, you can see the promo links have gone, the menu has lost it’s images and the content beneath the carousel has been reduced to fit the screen nicely.

Last but not least, this is the mobile version looking very much like what you would expect of a mobile site. Single column layout, with menu at the top and the content nice and clear beneath it.

Remember, this is one site!

Many large brands, as well as many smaller ones have already implemented responsive design sites…

More inspiration: mediaqueri.es

I suggest you visit mediaqui.es for more inspiration. It is the largest collection of responsive design sites out there, displayed in a lovely gallery.

It is interesting to note that the online publishing world has been one of the first industries to take on responsive design so fast 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.

This is a short case study for one of our clients, Skroutz.gr, which is the largest price comparison site in Greece and the first responsive site to be launched here, in March 2012.

As with all responsive site projects, we work on fluid grids, wireframes and prototypes long before we move on to the design stage. We try out various layouts constantly checking how they will adapt to various screen resolutions. We always begin with the smallest screen first and then build up to the largest versions of the design.

Source: Google AnalyticsSource: Google Analytics

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 other user behaviour and site performance metrics to truly understand the value of the new site.

Source: Google Analytics

Here are some really valuable stats. Pages per visit are up, average duration is also up by a staggering 30% for tablets and bounce rate has gone down for all mobile traffic. These numbers show the real value of the new site. Users are much more engaged and are enjoying a positive experience on the site, leading to these improved stats.

Responsive web design is not the one and only approach to mobile. What it really does, is help us create beautiful websites that adapt to all shapes and sizes allowing users to interact with our site in the best possible way, no matter how they are accessing it.