Building an effective website is a very satisfying endeavour – a thrilling marriage of creative design and technical skills. Design trends come and go in quick succession but the way that sites are built has remained relatively unaltered..... until now!
For a long time the approach has been: design a page that looks good on a “normal” sized screen and deliver the same page to everyone else (regardless of their screen size). For many years all sites were designed to work comfortably on a screen with resolution of 800x600 then from about 2007 “normal” has been considered to be1024x768 – the vast majority of websites are still built to be “fixed width” to fit this resolution.
The rapid growth of mobile devices has changed everything.
The first smartphones
When the people in white coats first managed to build a mobile phone with enough smarts to be able to run a proper web browser the “smartphone” was born. Smartphones were a big leap in technology but they still couldn’t deal with websites the same way that a desktop computer could. At the time, smartphones suffered from some basic problems:
- Smartphones often did not have any JavaScript (or else JavaScript was disabled)
- Mobile data networks were very slow (so large pages took ages to download)
- Screen sizes were small (so there was a lot of scrolling involved)
- The browser on a smartphone was not as capable as the browser on a desktop (so pages would often look different).
…in short, the phones were smart but not that smart!
The first mobile sites
The technical response to this situation was to build a separate site – the main site would detect that the person was using a mobile device and redirect them to a different site designed specifically for these early smartphones which meant: simple design, narrow width, no javascript, and no large images …… the “mobile site” was born.
Mobile sites had to run on a different domain – for example, if the main site was http://www.mydomainname.com then the mobile site would often be http://mydomainname.mobi or http://m.mydomainname.com
The transition period
Having a different website just for mobile users was a technical solution to the problems created by slow connection speeds and the fact that early smartphones had browsers that were not as capable as desktop browsers.
Responsive sites emerged as a better technical solution to the same problem.
What is a responsive site?
A “responsive website” is one that adapts automatically to the size of the viewing device being used. When viewed on a smartphone these sites will typically wrap all the content into a single column and replace unnecessarily large images with smaller versions in order to minimise download speed.
Why now?
It sounds simple, but the approach of "responsive web design" is dependent on other factors:
- Mobile browser technology: nowadays we take it for granted that the browser on your smartphone is as capable as the browser on your desktop – but for many smartphone users (particularly those using Blackberry) this was not the case.
- HTML5: it's much easier to build a responsive site if you are using HTML5
- Faster data networks: the combination of mobile data networks getting faster (3G, 4G) or being used over Wi-Fi means that we now don't need to focus on optimising page size as we used to.
Today, over half the phones in the UK are smartphones and all these have browsers that are similar to those on your desktop.
