Remember those 2D effects used to create depth in the early video games? Where the…
Future proofing with responsive website design
As we hurtle toward the end of 2012, we look back at a year where a lot has happened in our industry. Browsing on smart phones became even faster with the 4G enabled devices, retina displays with double the resolution size of other devices featured on the iPhone 4S and then iPhone 5, Windows 8 was released encouraging the world to become ‘touch’ friendly, and many new mobile and tablet devices flew into the market bringing with them a host of new screen resolutions that we humble website developers had to start worrying about.
The crux of the matter
With each smart phone, tablet or desktop monitor being available in multiple sizes or screen resolutions, the online industry faces a dilemma that could shape how we build websites in the future. How will we respond to a world of mobile centric computing and how will our websites look and function on all these different devices?
For a couple of years now we have tackled the issues of browsing websites via smart phones, by creating either a separate mobile website or even mobile application that would be shown to users browsing from those devices. Both these options seemed like good ideas because you could give mobile users a design that isn’t just a squished down version of the main website – its layout was purpose designed and built for mobile screen sizes. Text was easier to read, buttons were big enough to click on and images were viewable without zooming.
Sure, these separate mobile sites or apps were much better than having to use a full desktop website on a tiny device, but there are a number of issues that need consideration for both approaches:
Mobile websites – When a separate website (still built in HTML/CSS) is created specifically for mobile users, generally with a 320px width. The downsides for this approach are:
- You need to create a completely separate website for mobile, with its own wireframe, design and development process, often meaning double the costs
- When you need to redesign or even make simple content changes to your site, you need to make the update across both the desktop version and the mobile version
- Because the mobile and desktop sites will be completely separate, they will also be accessed via separate URLs, making it difficult for those on mobiles to share links with their others on a desktop PC
- When you have separate URLs for the desktop site and the mobile site, the SEO value of the site is split between those two URLs. Effectively this decreases your websites SEO value
- They still do not cater for tablet devices – tablets will still show the main desktop version of the site.
Mobile apps – When an application is made specifically to be downloaded and installed on an user’s mobile device for accessing information outside of a web browser. The downsides for this approach are:
- Content is not searchable by Google so generally users already need to know about your brand and services
- Getting customers to download your app is a big hurdle as they are making a commitment to store your app on their device
- You will need to create a separate app for iOS, Android, Windows for Mobile, and maybe even Blackberry if you want your app to be available to most users
- Like the mobile website, apps often need to be kept up to date with new content separately from the main website, and if you have to cater for all the mobile platforms mentioned above, then that’s a lot of repeated updates!
- Users have to update their apps before seeing any content updates, so you are being heavily reliant on your users.
Generally speaking, if you have a site that is purely information based, do not waste your time with a mobile app. And although mobile websites are more cost effective and efficient, what about the ever growing number of tablet users? Seems impossible to cater for all of them, right?
Enter responsive design…
Just last year, an Ethan Marcotte coined a new term called Responsive Design which was hailed as THE solution to tackle these exact issues of multiple device sizes and how our websites look and work on them. Responsive design techniques allows web developers to build a site in a way that makes it resize and reorganise its elements appropriately, to be optimally viewed on all web enabled devices – from desktop PCs to mobile phones, and everything in between. Users get similar experiences as when they are viewing a custom mobile website. It is not about having a pixel perfect design for each possible device, but about delivering a coherent quality experience to the users no matter how large or small their display may be. And yes, you only need to build one website that can work across all devices.
A site designed to be responsive, uses techniques to adapt the layout to the viewing environment – it resizes text and images as necessary, and reflows elements on the page so that for example: image B will appear below image A when on mobile sizes, rather than next to image A when on desktop devices.
Since it’s inception last year, responsive design has taken off. Big online brands such as Microsoft, Time, About, and Starbucks (just to name a few) have all made their websites responsive, and this list will only grow. Responsive design was even listed as the #2 Top Web Design Trend for 2012 by .net magazine.
Although it may be more expensive to develop a responsive website vs. a standard fixed width site, it is more cost-effective than creating sites (or apps) for separate devices and cheaper to maintain.
We don’t have a crystal ball to into the future to see what kind of screen sizes or devices we will be using next decade, let alone in the next few years. But we can make predictions. According to Moore’s law, computer processing power doubles every two years, so be prepared to see much more powerful mobile and tablet devices, leading to an increase in people using them to perform everyday tasks. A study by Microsoft Tag even predicts that by 2014, mobile internet should take over desktop internet usage. We can also predict that as we become more reliant on these new technologies, more and more sizes of smart phones and tablets will be released each year. This is an exciting time but also a time for action in the realm of website development.
The challenge we now have is to ensure that our websites have a consistent look and work well across both desktop, tablet and mobile devices (and all the size variations of those devices), or else we risk our websites being redundant before they are even launched.
Fortunately it seems that we do have solution now and it comes in the form of responsively designed websites. Responsive design help to future proof your website against the inevitable onslaught of new device sizes we will see in the years to come. It gives us an opportunity to improve the user experience of websites across all devices which will result in higher conversions, engagement, and better customer service, leading to improved commercial outcomes.
How do you intend on addressing the increasing need for your website to be user-friendly across mobile devices? To find out more about responsive design, feel free to get in touch or post a comment below.
Meg is a Project Manager/Producer at Cornerstone with a special interest in conversion rate optimisation. She has a business analysis background and thinks the web would be a better place if everyone looked at their web statistics daily.