Responsive Website Development Using A Mobile-First Strategy

andrew's picture
By
Andrew Jubb
| 18th February 2013
Share

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

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. For example here is our original image. It’s 51KB:

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.

You might also like

blog
Silverdisc Neuromarketing
This week we’re dipping our toes into the interesting world of neuromarketing! This is an introductory article but there is lots of information available about it on the internet if you enjoy a...
By:
Sam Rose
On: 2nd February 2018
Posted In:
Web Design & Development | CRO
blog
Online Security
Did you know that from October, Google Chrome will begin showing a security warning to users when they enter information into websites that don’t have an SSL certificate? It is important that online...
By:
Sam Rose
On: 18th September 2017
Posted In:
Web Design & Development | Security
blog
Winter in summer
You may or may not be happy to hear this, but we’re now closer to Christmas than we are to the beginning of 2017. So here are the top five most popular posts on the SilverDisc blog so far in 2016, which just may give you a little inspiration for how you’ll spend the rest of the year.
By:
Sam Rose
On: 28th July 2017
Posted In:
PPC | Microsoft Bing | SEO | Web Design & Development | Security

Why Choose SilverDisc

Track Record Of Success

As a digital marketing agency with a 25-year history, continuously getting it right for our clients is of paramount importance and we have some great references to back this up.

Credibility

Being Google Premier Partners and Bing Select Partners gives you the assurance that we’re fully trained, that we have demonstrated exceptional account management across a range of client spends and industries, and that our track record will continue.

Thought Leaders

We see where digital marketing is heading and position our clients to meet it. For example, we are so far ahead of the SEO game that we helped Google to write their webmaster guidelines, so you can enjoy SEO success without fear of being penalised.

Ethical & Honest

We have your best interests at heart and we give it to you straight, even if that’s painful to you or us. For example, we won’t spend your money marketing a website when it’s plain to us that the money would be wasted. We look for a win-win-win …

Focused

We listen to your individual needs, identify targets and work relentlessly towards meeting them, concentrating on what’s effective.

Driven

We exist to unlock the value of technology for business, and we love what we do. We have 25 straight years in digital marketing.

Friendly, Open and Giving

These words are at the core of our values. We build strong partnerships and go out of our way to help solve problems for clients, suppliers and the wider world.

Let's Get Started

Please fill in the form below or give us a call on 01536 316100

Follow SilverDisc