Posted on 5 January 2016
According to statistics, back in good ol' 2010, only around 3% of global web traffic was served to a mobile phone. Fast forward to 2015, and that percentage has jumped to 33%. The Internet is not just for viewing on desktop computers anymore. Due to increasing accessibility and faster services, more and more people are surfing the web on their mobile device.
All this has big implications for us web designers and developers. We've got to deliver a product that looks great on the device that is being used to access it. With 33% of global traffic at stake, we don't want our clients missing out on customers.
So, what can we do? One solution is to design and build our 'regular' desktop size website and then go about making a second one for mobile that is only loaded up if it detects that a mobile device is being used to access it. Perhaps we could decide to cater for tablet users as well and create another website somewhere in the middle. This is what's known as 'adaptive' web design.
One problem nowadays is that there are so many screen sizes out there. Huge widescreen desktops, laptops, large tablets, small tablets and a whole host of different size mobile phone type devices. This is not to mention that most products these days offer a portrait or landscape view, changing the dimensions of the viewport on a single device! It seems quite apparent that going down the adaptive web design path and creating separate websites for every device we might be able to think of is just not practical and, let's face it, probably quite tedious.
Enter 'responsive' design. Let's forget about specific devices and make sure that our website looks nice at every conceivable screen size! This involves taking a very fluid approach, throwing out pixels for percentages and watching in awe as our websites reimagine themselves as we excitedly drag the browser window up and down. The holy grail of this approach is the beautifully philosophical phrase 'device agnostic'. You'll never know what device is being used to view your website, so don't think about specific proportions.
It sounds pretty great as an idea, but it turns out that putting a device agnostic approach into practise can be difficult, especially when working to deadlines. From a design point of view, we want to visualise something. At IO42, when we sit down and craft a beautiful design for a website, we need something to go by. We have to pick some actual screen size to get started and it'll probably be something on the desktop end of the spectrum. Once we've got a nice looking design and our website's colour palette, element themes and photography are in place we can think about mocking up a mobile version. Once again, we will pick some dimensions. We'll try and think 'responsively' for our mobile version, making sure the content is the same as the desktop design, however there are common things that need to change. A nav menu doesn't work so well on a mobile device, for example, and it is common to collapse them down in to a simple graphic called a 'burger menu' that a user can click on (tap on!) to expand and see the hidden nav options.
After designing, our website enters the development phase and the website is built with a nice fluid grid structure and images that automatically resize in the aforementioned browser. But how do we implement screen size specific changes like the 'burger menu'? For this we break out a CSS technique called a 'media query'. In our code, we tell the browser to do something only if it is above or below a certain dimension. For practical reasons, it's good to keep 'media queries' to a minimum, so a series of 'break points' are decided upon. A break point is a certain screen size at which we want certain changes to happen so that the website continues to work properly on smaller and smaller devices. The question is, how should these points be decided? One solution is to have a break point at a popular screen dimension, one for tablet and one for mobile, for example. Another solution is to have a break point where ever the site 'breaks' and content starts to look bad or lay on top of each other. The former solution takes us back into 'adaptive' design territory as we are faced with the same task of thinking about just how many screen sizes there are out there. The latter solution is unfocussed and often means lots of break points at points that are not meaningful. This means that they are very site specific and hard to re-use in other places.
It's a difficult one, and the best approach is probably a mix of everything I've spoken about above. Most of all, 'responsiveness' needs to be at the forefront of everyone's mind, from the designers to the developers. A designer should design a page that has content laid out in such a way that it as easy as possible to make responsive. This may require a lot more communication and back and forth between the design and development teams, but in the end, it minimises how many break points a developer needs to use to make the design 'fit' into different spaces. So, like in every walk of life, working together is the answer!