18th February 2013
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 any more:
“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 smart phones 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 a 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 whether tablet users should see a ‘full’ website or the mobile version.
A Better Way – Mobile First Responsive Websites
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.
And here are the images resized for all devices:
Image Displayed on Desktop – files/styles/list_desktop/image1.jpg (26KB)
Image Displayed on Tablets – files/styles/list_tablet/image1.jpg (16KB)
Image Displayed on Mobiles - files/styles/list_mobile/image1.jpg (14KB)
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.