Responsive Web Design

People today want information at the their fingertips instantly. Businesses must provide people with the content they are looking for quickly, and in a manner that fits the multiple platforms. This is no easy feat, as not all devices are created equal. A tablet is going to show your website differently than a laptop or smartphone, and taking it even further, an iPhone has a different display than a Droid. So how do you keep up?

Rather than tailoring disconnected designs to the ever-increasing number of types of web devices, treat them as facets of the same experience. Websites can now be designed once for an optimal viewing experience on numerous platforms.

Be Responsive

Simply put, responsive design is the methodology of having your website respond to the user's device.  Your website detects what kind of device a user is on, be it a smartphone or a tablet, and automatically formats your website for the best viewing experience based on that particular screen size. 

This kind of programming happens through a variety of avenues, such as CSS 3 (cascading style sheets used to control the style and layout of web pages), media queries and more. These advanced features typically add time and cost to your web design project, but it means you only have to pay for one design and can be assured customers will see your website optimized for their device.

The biggest and most apparent benefit of having a responsive website is that you will not need more than one. It is the same website, just in a different format, so you will only have to update your website in one place.

In the past, websites were designed around an average 1080 x 950 pixel screen size with lots of room to be creative. But we all know that creativity is not the selling point on a smartphone. That audience wants things fast and easy-save the big graphics for the desktop. With a mobile-first design, you are forced to focus on your real selling points in your navigation and in your content. Take those things and put them in the spotlight, then add around it, as the screen size gets bigger.

Best of all, there are no worries around upgrades to operating systems as it is browser controlled. It is much easier to maintain control with a browser than the countless amounts of operating systems out there.

The percentage of sites using responsive design is low now, but growing. One of the first major websites to use responsive design was the Boston Globe. A responsive website will cost about 10 to 20 percent more upfront than a regular website, depending on the complexity, but you don't have the cost of a separate mobile website either.  

The Drawbacks

As with any technology, you get what you pay for. Responsive design is currently more expensive than traditional designs because there is more thought, coding and development put into it.  In essence, there is a website being created for each screen size-smartphones, tablets, and desktop screens of different sizes.

Another consideration is load time will take longer with responsive design. The mobile-optimized version of your site downloads the same-sized images as the desktop version does. The user will also get all the code behind your site making the mobile experience slower. A site designed just for mobile devices incorporates the appropriate image size and removes unnecessary code.

Search engine optimization is tricky, as well, because you cannot easily adjust titles, descriptions and content for the mobile user. Mobile users use different keywords, as well as voice search, that may not have been considered when creating your responsive website.

When Does it Make Sense?

Responsive web design is not a cookie-cutter solution. There are many generalizations here, but here are some ideas to see if your website is a good candidate:

If you have a smaller website (fewer than 50 pages), with no advanced technology, and you are not targeting a mobile-specific experience;

If your website is simple (more like a brochure with no interactive components) and your mobile viewer is not that much different from your desktop user, then responsive design helps you create a better all-around user experience; or

If you have a complex website and are considering a re-design, it is worth discussing responsive design. Consider what your goals are for your new website and whether responsive design would achieve them.

The Bottom Line

Mobile viewers are a growing audience. If your mobile viewer is not significantly different from your desktop viewer, you should consider responsive design. It saves time, creates a better user experience, and pushes you to take a look at the mobile experience first and build upon it. It's a challenge to create all new content for a new user experience, but if you don't, 25 percent of users will never see your website. 

Jennifer Mazzei is founder of J Maze Design, a web design consultancy firm in Concord. For more information, visit www.jmazedesign.com or email jmazzei@jmazedesign.com.