Responsive Website Development Using A Mobile-First Strategy

When the World Wide Web first started out websites were generally only viewed on huge desktop PCs with heavy CRT monitors. At the time these monitors had comparably low resolutions to what we have today. The most common resolutions were 640x480 and 800x600, and eventually, this worked its way up to 1024x768 which became the standard size considered when designing websites.

But it's just not that simple anymore:

 “By the end of 2013, it is anticipated there will be 44 million smartphone connections in the UK, up from 36 million in 2012. This means that over 50% of adults in the UK will own a smartphone” (Portio Research, January 2013).

With the evolution of smartphones and tablet devices, the way people access the internet has changed. We should no longer cater solely for desktop (i.e. keyboard, mouse and a big screen) web browsing. A website designed for a 1024 x 768 screen means people viewing the site on mobile have to constantly pinch, zoom and scroll around to get what they need from the site.

An Early Solution – Separate Domains

An early solution to the problem was to build separate websites for mobile devices, usually under the 'm' or 'mobile' sub domains of the main site. This normally means double the development and double the maintenance time needed to keep both sites up to date. With the rapid growth of the tablet market, questions arise about whether tablet users should see a ‘full’ website or a mobile version.

A Better Way – Mobile First Responsive Websites

An alternative solution is to create a responsive website using the Mobile First approach. With this approach you design and create one website to display all content on a mobile device with limited resolutions and reduced capabilities, like no Flash or JavaScript, then through the use of progressive enhancement techniques, such as using CSS3 media queries, change how the content is displayed to be more appropriate to the device viewing the website. Media queries allow the loading of different CSS files based on device resolutions, giving you the opportunity to change the sizes of different elements on your website. 

Mobile phones are generally subject to slower connection speeds than ADSL or cable and can also be restricted by a data contract limiting monthly bandwidth usage. There are two problems when it comes to designing a website for desktops and mobiles – load times and pictures! Mobile visitors will not appreciate your site if it's slow and uses up a lot of a data allowance on big pictures. But, if you only have small images then people visiting your website on a desktop are going to be disappointed. So what’s a developer to do? A great idea is to use mobile-first responsive website images.

Using JavaScript and multiple copies of an image in different sizes means you can display the smallest image to all devices; if a bigger screen is detected the image can be replaced with its larger counterpart. Using JavaScript image tags means images can be changed after the page has loaded and people probably won’t even notice you slotting it in. 

Remember, it’s not unusual for a web page to contain 50 or more images. If the original files were used the mobile would have to download around two and a half megabytes of information! Displaying the images created for desktop means the download would be over one megabyte, but with the images optimized for mobile saving, it’s only 700KB. Over half a megabyte of someone’s precious data limit is saved and the speed of loading increases by doing this. You can see the benefits of progressively enhancing images on your site - but this is just one of the tools in our toolbox for providing the best possible user experience!

What The Future May Bring

Over the next few years, it’s likely that we’ll see devices getting both smaller and bigger. We might see head-mounted computers, like Google's "Project Glass", or something like an “iGlass/iPatch” from Apple! Then the other extreme is TV with its sizes, screen resolutions and capabilities ever-expanding - and of course, these will be connected to the web. How are we going to optimize for screens of vast resolutions designed to be viewed from a distance? Consideration of how content is presented to the viewer across multiple devices will become an essential requirement - responsive web design is one possible solution for us to overcome these challenges.