Responsive Web Design: Creating Better Online Experiences for Mobile and Tablet Computing, and More...
January 05, 2012 / Outside The Box
The explosion of devices that people use to access web content (apps, smartphones, tablets, netbooks, web-aware gaming consoles, to name a few!) has many organizations wondering how to keep up with demands for more and more ways to engage with users online. The problem is that many of these new technologies do a tremendously poor job of rendering websites that were designed and built with the traditional desktop computer web browser in mind (try using a Blackberry phone to surf the internet and you'll see what I mean): unless a site has been specifically optimized for these types of devices, website features and functions often do not render or work properly, or the overall user experience is simply frustrating. For instance: the legibility of content on small screens can be poor; and interactive features are sometimes very difficult to use without a traditional keyboard and mouse.
Until recently, the percentage of users accessing the Web from devices other than desktop or laptop computers has been very low (in the single digits of overall Web traffic), so many organizations have chosen to not address the issue, or have built separate, limited versions of their websites to provide access to content and functionality on mobile phones. However, in 2012, you ignore this device proliferation trend at your own peril: credible industry analysts expect mobile Web access to overtake desktop browsing in as early as three to five years.
Responsive Design: Smart, Device-Aware User Interfaces
So, how to address this challenge? Build an app? Great, but how many devices do you want to build an app for? Android, Apple iPhone, Apple iPad, Blackberry, Windows Mobile? Unless you are creating very simple applications for phone/tablet use, you're likely looking at building and maintaining separate solutions for each target platform, using different technologies. This can be prohibitively expensive; and you're still not addressing the fact that most users (regardless of their device of choice) will still be visiting your website, regardless of whether they have downloaded your app as well. A solution is still needed to create a "smart" website solution that works for our new multi-device world. Enter Responsive Design. Responsive Design is a new way to provide an optimized user experience for your website on any device, that does not require creating separate applications or websites for each platform you are targeting. Imagine a site that reconfigures its web page layouts automatically, based on how big the web browser window is on your desktop computer, or the size of your mobile phone's screen. Imagine a website where features that are designed for specific devices are shown and hidden automatically, based on what platform they were designed for. Imagine imagery and video content that dynamically changes resolution to match the output capabilities of your tablet device or laptop.
Responsive Design in Action
Well, better yet, let's experience it in person: the new ecentricarts' website was built using Responsive Design. If you want to see Responsive Design in action, either have a look at our site on your computer and your mobile phone simultaneously, or grab your desktop browser window and shrink it down into a narrow column. Voila! The site reconfigures itself automatically to match the format of your device or browser.
When we started our site redesign effort in 2011, one of our objectives was to deliver an optimized experience for mobile phone site visitors. Rather than take the traditional route of creating a completely separate mobile site, we instead developed one website (using our favourite content management system, Kentico), and integrated a responsive design interface with a default layout that supports desktop, laptop and tablet-based browsers, but that reconfigures dynamically when you view the site on a mobile device.
Key Business and End User Benefits of Responsive Design
While this approach introduced some additional costs compared to designing and building strictly for traditional web browsers and computers, the immediate and long-term benefits are clear: we have only one website to manage and serve all our visitors; a responsive design solution eliminated the need to build device specific apps; and the size of our potential audience is much greater.
It's important to point out that Responsive Design isn't the answer for all online requirements, nor is it exclusively a web-specific design methodology: device-specific apps have their place in our new, complex internet ecosystem, and apps themselves can benefit tremendously from the incorporation of Responsive Design principles. However, for making your core Web presence accessible and impactful for all your online users, it is a great new technique.
If you're interested in learning more about Responsive Design and how it can benefit your organization's online presence, get in touch with us. We'd be happy to share our experiences with this exciting new approach.