People have for many years only thought about having a mobile website after their ‘main’ site was developed. This afterthought process was often referred to as mobilizing.
With the huge change in browsing behaviour brought about by smartphones, the buzz is now about responsive web design. This allows users to access your main website and see a site suited to their screen size. This is great user experience and makes content more accessible to people however they are browsing.
Web developers have been excited about this for some time, but now marketeers are cottoning on to some of the value benefits. Recently I attended the Cambridge Digital Marketing Conference, where almost every speaker touched upon mobile marketing, mobile browsing and mobile everything else. The world has gone multi screen, people don't sit down at a computer to access the internet any more. They now do it in many ways and in many different places. Reading in the Chartered Institute of Marketing e-zine you’ll see articles like ‘Marketing to the multi-screen consumer’. Marketing professionals are enthusing about the power of multi-screen/multi-channel marketing. Enter responsive web design as the champion to help brands and website owners communicate through one website to many different users, accessing it in many different ways.
Ok, back to basics, i’ll try to avoid any technical jargon.
For the last 17-18 years websites have had been pretty much fixed in width. Back in late nineties the most common monitor was a 15” cathode-ray tube beast. Users would have fired up Netscape Communicator and seen a website through a screen about 800 pixels wide.
A few years later that same user would have had a 17” flat panel screen that they would have used IE6 on. They would have been looking at sites through a screen about 1024 pixels wide.
Over the last 10 years screen resolutions have increased, which is fine for computer users to benefit from. But for marketeers, web site and product owners we have had be cautious in our approach to web development as we had to ensure that everyone could see the website on their screen. So websites pretty much became stuck at about 960-980 pixels wide, to fit the 1024px screens. This is borne out with a many thousands of templates, grids and other web design tools based on these sizes.
So websites became stuck in a rut while at the same time monitors exploded from 17” to 20”, 24” 27” and even 30”+ all with ever increasing screen resolutions. (At the same time our TV’s did pretty much the same, going from CRT’s to flat screen then on to HD ).
This wasn’t a problem though. We’d settled on a standard and it worked for all users, even though some may well have had a massive screen. We knew that a 970 pixel wide website was a perfectly viable sales, marketing and communications vehicle.
While all of this was exploding on the desktop, something else was happening, all of a sudden phones got smart, very smart. The iPhone was great, it had apps, games and we were all happy!
But what the iPhone heralded was a massive move from desktop web browsing to mobile and later tablet browsing.
The Problem. All of a sudden screens had shrunk!
So our happy world of 970 pixel-ish websites was flawed. Now users saw those sites scaled to fit their phones. Resulting in impenetrably small type that was unreadable. Fine the clever people who developed the iPhone had made that screen touch-able so users could pinch and zoom into the content. This was all well and good, but it wasn’t an optimal user experience....was it.
Luckily, those clever people who evolve, plan and define web standards (w3c, whatwg et al) had stared into a crystal ball and foreseen a world with screens tiny, huge and middling and thought ahead. They had even see into the murky future and seen people rotating screens and phones in their hands, amazing!
What they came up with were nice things called ‘media queries’. Media queries are part of the cascading style sheet specifications and are pretty straight forward. Firstly, a short piece of CSS checks the width of the screen. Based on this test the CSS chooses how the screen should be laid out. What this means is that the user can get a layout that suits their screen.
Ok, so there is one slight fly in the ointment. Your web designers and developers will have to put time in to create a layout for each screen size you want to target (we are currently doing a responsive version of this site, watch this space). This may be a reasonable piece of work, but it does have huge benefits as you will see in the next article in this series which outlined the benefits of responsive web design.