ARCHIVES: This is legacy content from before Marketing Dive acquired Mobile Marketer in early 2017. Some information, such as publication dates, may not have migrated over. Check out the new Marketing Dive site for the latest marketing news.

5 key elements of a well-designed responsive Web site


When developing a Web site for your business, you simply cannot ignore that the majority of Web site browsing in 2015 is conducted through mobile devices.

This makes the need for responsive design critical, as it adapts your Web site?s design to both the size and connection speed of smaller devices.

In this article will explore five key elements that are essential for designing an effective responsive Web site, along with the best tools to implement them.

1. Consistency
Providing an inconsistent browsing experience across different platforms is almost guaranteed to frustrate visitors to your site, leading to increased bounce rates and page abandonment en masse.

Information should be easily accessible across all forms of your Web site?s design. Most importantly, your navigation menu, contact information and key content should all be a breeze to find.

Recommended tool: Twitter Bootstrap is lauded by many as a highly effective tool for creating mobile-first responsive designs that adapt consistently to devices of all shapes and sizes.

2. Compatibility
Any conscientious Web developer should place a high priority on ensuring that their designs are accessible on any platform with a considerable user base.

After all, Internet users now spend as much time on their phones as they do on their computers. Compatibility is key and your Web site must be scrutinized across all relevant platforms as part of the design process.

Recommend tools: About Tech?s mobile devices expert, Priya Viswanathan, published an excellent roundup of mobile Web site testing tools, including W3c mobileOK Checker, iPhoney, Google Mobilizer, iPad Peek, Gomez, MobiReady and dotMobi Emulator.

3. Whitespace
Author Colin Wright has written about whitespace being an ?amplifier? to help readers focus on your content. 

With the design of responsive Web sites, providing the reader with a comfortable experience is a top priority.

Practically speaking, you need to ensure that padding and margins do not disappear on smaller screens. Font sizes and line spacing should adjust to the relative amount of whitespace on screen.

Recommended tool: Your eyes. There is no commonly agreed ratio that determines the amount of whitespace on a Web page, so browse your Web site with your visitor hat on and trust your instincts on what feels comfortable.

4. Intuitive navigation
The navigation elements of a responsive Web site are of vital importance, because the quality of the user experience is largely dependent on them. 

Users want to intuitively be able to find what they are looking for without hassle.

Menus are essential in defining the navigability of your site. 

In terms of effective responsive design, that is arguably where the biggest difference to the user experience is made.

Recommend resource: Brad Frost has written extensively on techniques for creating an intuitive menu for your responsive Web site. His Web site explains the pros and cons of each.

5. Optimized images
Despite improvements in Internet speed worldwide, image optimization is still a vital consideration when it comes to responsive design. 

A huge percentage of Internet users will access your Web site via mobile connections and not superfast broadband.

There is simply one factor to consider when it comes to optimizing images: time. 

Loading time has a huge influence on both the user?s patience and page abandonment.

Recommend tools: TinyPNG is a free Web application that can reduce the file size of JPEGs and PNGs with no noticeable decrease in quality.

YOUR WEB SITE should display consistently across all major devices, be a pleasure to navigate and read, and load in a snap. If it fails on any of these fronts, you have some work to do. 

Fortunately, with the tools and resources mentioned above, you should have all you need to make a start.

If your Web site design is not currently supported on all devices, you have two options. You could retrofit responsiveness into an older design, but in reality, starting from scratch is probably the most viable course of action.

The one thing you must not do is ignore responsive design. It is no longer an option ? it is a necessity for forward-thinking businesses that rely on their Web presence for sales.

Solomon Thimothy is founder/CEO of OneIMS and Clickx, Chicago. Reach him at