With the surge in smart phones, tablet devices and netbooks and better mobile internet, more people than ever are accessing the web on the move. Traditionally people would be accessing the web via a desktop computer which was a fairly standard web experience. However the huge range of devices people are now accessing the web with means that what was a fairly standard web experience could now be vastly different depending on the device being used.
Let’s take the following example to highlight the problems that can arise. Imagine accessing a large magazine website with lots of content, such as the Guardian’s website. If the same design was used both for desktop users and mobile users, users would struggle to find and navigate all the content. On a small screen the user would be required to scroll lots: up/down, left/right. Designing this content for just a smaller screen would combat this problem but it would also be wasteful for larger screens. A compromise needs to be found.
We used to create a website design with a single screen resolution in mind, usually 1024×768, but to provide the best viewing experience for our audience we now we have to create a website design with multiple screen resolutions in mind.
There are a couple of solutions to combating the “mobile” problem.
Creating separate websites
This was the option web designers were more likely to take a couple years ago. It would involve making an entirely different website design optimised for users e.g. creating a website for desktop users and another website for users on mobile phones. This has another benefit too though. Mobile users can get charged a lot of downloading webpages and so as website designers we should take the responsibility to minimise the files we require our audience to download. By creating a mobile version we can limit the number of files the users need to download by keeping the essential content and removing excess images etc.
Responsive web design
Creating an additional design can be costly and time consuming though. Responsive web design is where the layout of the webpage responds dynamically to the screen size of the device. Responsive web design has really come into it’s own over the last twelve months or so due to the development of a number of tools which makes the process easier. About.com is an excellent example of this method for dealing with different size devices. If you resize the browser window you can see how the layout changes.
