With the large variety of screen sizes and browser widths in use today, it’s very hard for a web designer to cater to all users using traditional design techniques. Just as screens are growing larger (with desktop displays) and smaller (with mobile computing), how do you accommodate so many vastly opposing scenarios? The fact is we live in an emerging Post-Desktop era that necessitates developing a website that considers, or even caters, to the mobile phone and tablet.
Recently some smart people have addressed the problem utilizing three approaches to viewing your website on smaller – and even various systems – utilizing so-called responsive, adaptive and mobile techniques to building websites.
So why should you care, what do these terms mean, and how do you decide which one is best for your website?
Everybody’s Using Mobile Devices
If you think in terms of revenues and costs, mobile website optimization can seem like a large investment into a new buzzword that you know little about. What is the pay off? 1.2 billion people access the web from their mobile devices, and one-quarter of all web searches are from phones or tablets. It is rapidly becoming a reality if you want people to be able to use your website you need your website ready to go anywhere and everywhere. Microsoft predicts that mobile internet usage will overtake desktop by 2015. As Google puts it in their “think insights”, mobile design isn’t a trend, it’s a new era. Anecdotally, every grandmother I know owns a mobile phone and tablet, reinforced by the assertion “Canadian seniors [are] keen to join the mobile computing revolution, as much for its simplicity as for its portability”. These facts are ignored at the website owner’s peril.
What does responsive, adaptive & mobile mean?
Responsive, Adaptive and Mobile websites share overlapping goals but take a different approach to the same problem. All practices aim to address the accessibility of websites on mobile phones. Responsive and Adaptive tackle the relatively complex issue of adjusting the needs of websites changing in response to various devices; be it a desktop, laptop, tablet or mobile phone. Mobile-only websites do exactly that: target the user experience on a mobile phone. Regardless of which method you use, the bottom line is the person accessing your website has to be able to effectively navigate your website and access your content on whatever diminutive gadget they happen to be using.
Responsive Website
The responsive web design approach uses the website’s code to automatically suss out key information about the user’s device size to modify the appearance and re-flow the content in relation to the size of the device.
A responsive design will fluidly change to fit any screen or device size. A key advantage of this approach is that designers can use a single template for all devices, and use Cascading Style Sheets to control the presentation of how content is rendered on different screen sizes.
The business case for a flexible foundation means less code; and, in most cases, less time and money. Without needing to create fixed-width layouts for every dimension, the grid structure your website is built on does the heavy lifting. Your website is more future-proof by using a fluid design, as resolution breakpoints quickly become outdated. A layout that pours into the allotted space regardless of screen size automatically adjusts, resizing the grid proportionally to fit its new environment. In many cases a responsive website will still provide full access to the desktop content, although the spacing and positioning frequently changes.
Sample Responsive Website Nicom Designed & Developed: College of Licensed Practical Nurses of Nova Scotia
Adaptive Website
An adaptive website will change to fit a predetermined set of screen and device sizes. In this approach, user experiences are targeted at specific devices and contexts. Where Responsive and Adaptive differ most is in their delivery of the responsive/adaptive structures. Responsive design utilizes flexible and fluid grids; whereas, Adaptive design relies on meeting the needs of predefined screen sizes and may go so far as to address the differing needs of mobile users by serving up different content and new interfaces elements from the desktop website.
One advantage to Adaptive design is that unlike a straightforward Responsive design, the adaptive approach cuts down on load time because it only delivers the code and images needed for the user’s specific device. For instance, the iPad 3s will only receive Retina images, while lower pixel density screens get served low-res images. Adaptive websites detect a user’s device before loading a webpage and then it delivers the best version of that website for the target device.
From a design and development point of view, you often have better control over what you’re displaying when you have defined constraints; whereas, with fluid designs you have to work to account for and accept the potentially less attractive consequences of; say, overly-long line-lengths on larger resolutions.
A concept that goes hand-in-hand with Adaptive design is Progressive Enhancement. Progressive Enhancement is a somewhat philosophical notion that espouses webpages not only don’t have to look the same on every device or browser but shouldn’t look the same under differing conditions. Progressive Enhancement offers users the best possible, but not the same, experience given the inherent capabilities of their device.
In a nutshell, both Responsive and Adaptive design approaches allow websites to be viewed on mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience.
Sample Adaptive Website Nicom Designed & Developed: Offshore Energy Research Association of Nova Scotia
Mobile Website & ‘Mobile First’ Approach
The mobile context embraces more than screen sizes. Mobile-first is a design and development technique that tackles the most difficult context first: small screens with limited bandwidths. Considering the mobile experience first forces designers, developers and content editors to provide only the most vital information to their audience and get serious about trimming the fat, so to speak. By addressing the most challenging context first, upgrading from there will ensure your bases are covered as the experience scales up.
Sample Mobile Website Nicom Designed & Developed: Performance Energy Management
Which mobile website option makes sense for you?
Optimizing for every web-enabled device on earth isn’t feasible; so, there will come a time when you need to make the strategic decision as to which devices to target and browsers for which to optimize. Using website analytics and other forms of research can help you gauge which audience for which to optimize your website.
For target audiences that require unique user interactions, Adaptive or separate Mobile websites may make more sense because of the different user interactions that need to take place in the desktop vs. mobile sphere. For target audiences whereby one main interaction will accommodate the majority, having a responsive website can fit the bill under most conditions without a lot of redundancy.
The complex and diverse device landscape we inhabit these days requires not only designers such as myself, but developers and clients, to reevaluate website content and ask what goals we want our users to accomplish across all contexts. By creating websites with the flexibility to scale both up and down, we can be better prepared for whatever digital landscape lies ahead.
Call Us – We’ll Help You with Your Mobile Website
If you would like to talk about which website approach is best for you, e-mail us or call us at 1-877-454-4499 (toll free) or 902-454-5656 (local).
Learn More About Nicom
For additional information on Nicom Interactive, division of Nicom IT Solutions Inc., visit www.nicominteractive.com.
