How Mobile Changed The Design World Forever: History Of Responsive Design
Have you ever heard of i-Mode? No? Well of course you have heard of its little brother WAP from back when you first checked an e-mail on a mobile phone. Right from the beginning our mobile Internet experience was founded on these failed concepts. Painstakingly recoding websites to an inferior platform was a failure. Luckily a failure that we have long forgotten. The future is a design world where we also forget many other failed attempts and finally see the first signs of the mobile Internet that changed web design forever. It’s time to find out the history of this revolution.
Moving On From WAP and i-Mode – The ‘Fully Capable Device’
Thinking back to the days of WAP and i-Mode it’s not hard to see why users were so frustrated. Difficult to navigate text only sites or poorly formatted mobile only sites that didn’t bear any resemblance to the Internet they’d fallen in love with at home weren’t much to set people’s imaginations free. So we moved on to the revolution that started it all – ‘The Fully Capable Device’ such as the iPhone.
“I believe the iPhone (a phone that uses the traditional TCP/IP model) is closer to the mobile phone of the future, compared with the latest Japanese mobile phones.” i-mode’s creator, Takeshi Natsuno
The problem with these fully capable devices initially were that websites were not at all compatible with comfortable use on a small screen. Users went from not being able to see anything because it wasn’t there in the first place (WAP) to not being able to see anything because of the brutal amount of scrolling and zooming that was needed! There’s little point ranking number one with great search engine optimization if your users can’t enjoy the site! Let’s give credit where it’s due however - these first devices set users free and made designers face up to the fact that users wanted the ‘real Internet’ on their mobile devices and those devices were now fully capable of delivering it.
Making It Fit – Specialist Mobile Browsers
All this scrolling and zooming led the software developers at Opera to realise that a better alternative might be to rearrange the content into one nice, neat column. Text was re-sized, excessive graphics and formatting were scaled or removed and menus made more touch friendly. On some of the less capable devices out there with really tiny screens this little browser was a revolution. To most of the better devices it solved a problem in an acceptable manner but hardly brought the joy of surfing beautiful sites to mobile users. The success of these browsers is as much a symptom of a failure to adapt by the design community as it is a feature of the success of Opera – users had to choose between a site with no adaption to mobile use or one that was hacked into shape by software.
Putting The Pieces Together: Responsive Design
Luckily things have started to move in the right direction. Designers can see the benefits of one easy to view column to mobile users on small devices – the huge popularity of Opera Mini proves this. However they also must capture vibrant colour, styles and a design that users love if they are to keep their online following as users move into the mobile world.
Sites that rely on generic templates (such as the WPTouch plug in for WordPress) to make their mobile sites or those that simply rely on users reprocessing their sites into a vaguely acceptable format by their browser miss a huge opportunity. Those who embrace that opportunity and allow their site to respond to the viewing size of devices – always looking great and always being appropriate to the user experience of that device - will grab an increasing share of this mobile market. Those who do not adapt will be left behind.
The Core Principles of Responsive Design for Mobiles
Responsive design was driven by mobile devices – they were the first devices so small that they required something to be done to content to make it easier for users to consume. The reason it’s a design revolution is that some sites now display better on notebooks and huge screens than they ever did when a 960 pixel fixed width was used as standard.
By responding to the screen size (browser window) available, this design technique allows one set of high quality content and high quality features to be shared by all device users – now and in the foreseeable future. Some of the tips from Opera are taken on board - usually a nice one flowing column is used- sometimes a site even scales in steps moving one sidebar for netbooks then dropping them both to one column for tablets and phones. Perhaps the menu has nice big square finger-friendly buttons on a smaller screen (most likely to be a touch device) but has a flowing, graphics based menu with drop downs on a wide screen HD monitor. Images will automatically fit the columns no matter what size of device is being used. Designers have a real challenge in ensuring that content looks great and is enjoyable to consume on all devices, responsive design by allowing them to cater for the viewing area allows them a simple, yet elegant solution.
Finally mobile users can dream of the ‘Real Internet’ on their phones. The good news is it’s just around the corner.