Get the most from your digital budget with design techniques that ensure your web presence accommodates diverse technology users.
Your website will probably be the place where most folks will go to discover what your brand is all about. With each passing day, more and more members of your audience will visit your site, not from a desktop computer, but via an ever-expanding array of devices and browsers. Leading the charge away from desktop computer browsing is the mobile web. The population of users surfing the web on smart phones is growing at an unprecedented rate, and, according to some sources, mobile browsing will outpace desktop web viewing by 2014.
Having more users access your content from more places sounds great. But are you ready?
That powerful online brand experience you’ve been toiling over needs to be consistently presented to each member of an incredibly diverse group. No longer will non-desktop web users be satisfied with a stripped down, broken or hyper-optimized experience that amounts to little more than text and links. Some users probably have a more advanced browser on their mobile device than they do on their desktop machine—if they even have one anymore. They want to witness as much of your web experience as possible, including images, video, and portable content (anything that can be downloaded so you don’t need to return to the web site).
Until recently, pleasing both stationary and mobile audiences probably meant your team needed to create two sites: one for general desktop users and a “mobile-optimized” site for that burgeoning audience. Twice the assets, twice the coding, twice the review time and, worst of all, twice the budget. The last thing a busy brand launch team needs to do is waste resources on two of everything.
Responsive design techniques to the rescue!
Fortunately, the need for duplicate efforts is coming to an end. Over the past 18 months, the most talked-about topic in the web design community has been “responsive design.” This combination of technique and technology, which is the brain child of designer/developer/author Ethan Marcotte, is the design of the future.
In a nutshell, a site with a responsive design will react to the user’s viewing environment based on screen size/resolution, platform, and orientation. Whether viewed on a laptop, an iPad®, or an Android™ phone, the site would automatically reconfigure itself for optimal viewing.
Here’s an example of responsive design from W3C conference:
There has always been experimentation with “flexible layouts” in web development, but such experimentation was more about filling up space for folks with larger screens/higher resolutions than for the average web surfer. These flexible layouts of the past were messy and unpredictable, and were generally despised by most developers. And the designers? They mostly wept quietly when the subject was mentioned.
Responsive design is something else altogether.
The three major components of responsive design are:
- Fluid grids—creating a layout on a grid, where proportions are very carefully considered, rather than a set number of pixels. All the elements of a design will adjust their size in relation to each other.
- Flexible images—resizing images proportionately to suit each device. Several techniques can be used to employ this method, but care must be taken to control download times on images meant for larger devices.
- CSS3 media queries—using new technology, media queries are used to determine user data (such as minimum screen width) and conditionally apply styles to a design based on that determination.
In addition, replacing older elements—upgrading from Flash-based video players and interactive elements to HTML5 video and JavaScript®-based interactive elements—can ensure that your valuable content doesn’t go unseen due to platform issues or limitations.
The new online frontier requires one to be open and flexible. Gone are the rigid days of pixel perfection; the web must flow to accommodate its diverse audience.
In the future there will be one site for many kinds of devices, with each one showing a consistent and appropriate display of your brand.
But the benefits of responsive design aren’t just for the end users; if you build your brand’s site using these principles, you can eliminate the need for separate design and development phases for desktop and mobile audiences.
And with proper implementation, you can future-proof your web property against challenges resulting from new gadgets hitting the market.
Best of all, you may even eliminate the need for multiple legal reviews and rounds of changes… and what brand manager doesn’t want that?
