Mobile sites are so 2007
by Chris Vogel
Go back 5 years and imagine you’re a big company. You run a massive website and everything seems to be going well until you discover what the site looks like on your brand new smartphone. It’s impossible to read anything or access the heart of your website – the experience is painful. Now you hear about this thing called a mobile website which is basically a copy of your site that is designed to fit onto the small screen of your phone. However, it doesn’t really look like your site and doesn’t show the same content because along the way someone predetermined that the on-the-go user will only need a “dumbed down” website.
Not a mere utility anymore
To be fair, mobile sites had their place when cellular bandwidth was limited and people were using their mobile web browser to quickly access a phone number, business hours or physical addresses.
But things have changed. The phone has become an integral part of our multi-screen lifestyle. We have grown accustomed to rich, compelling and beautiful interfaces – we can thank the app revolution for raising the bar to this level. Today’s businesses need to understand the value of carrying the same brand aesthetic. Also, functional goals set for their desktop website need to be met by their mobile equivalent.
But there’s a problem
Mobile sites are usually designed for a limited range of devices – a.k.a. mobile phones. Worse, the design and content layout often caters to the capabilities of a pre-smartphone device. But what happens when you have an iPad, an Android tablet or something with a high-resolution display?
These days, the vast variety of screen sizes and resolutions will torment the average mobile web developer. What used to be a simple decision (website: yes, mobile: yes/no) has become a very complex matter. Bear in mind that most mobile sites are built, updated and maintained as entirely unique entity. Sounds like a mess, no?
Imagine a site that adapts automatically
Responsive web design is the art of adapting content (text and images) to different screen sizes. It will detect how big your browser window or device display is and serve up a layout that fits best – think of it as one website using a common set of colors, textures, fonts, text and images but rendered using various content arrangements.
For example, text boxes or photos often live in four columns on a large monitor, rearrange to three columns on an iPad and on an iPhone they reorganize to a single column. The beauty of this process is a single, manageable site controlled by a single CMS which means updates are automatically cascaded across all devices.
Times are a changin’
There’s one more thing we need to contend with. The web is undergoing a radical shift of standards. Remember when standard definition televisions made the transition to HD? Yeah, it’s kind of like that.
Currently the vast majority of screens operate at a fairly low resolution (72 dots per inch in nerd speak). Apple championed the idea of increased pixel density with the advent of the iPhone 4 and iPad 3…others have followed. And with the recent introduction of the Macbook Pro retina we now have to deal with multiple resolutions across every form of device.
Exceptional responsive websites will take single and high-resolution design into consideration. Photos, icons and textures are prepared in multiple versions and intuitively load according to the detected browser resolution and client’s available bandwidth. A well-crafted responsive site is a powerful thing when ubiquitous accessibility is required.
Ready to take the plunge?
Not every site needs to be scrapped and rebuilt using responsive, retina-friendly design techniques. From our perspective only about 25% of our clients need this functionality today. The challenge is most businesses can only afford a radical site upgrade every 3-5 years so what’s decided now can greatly determine whether your website appears dated in the not-so-distant future.