WebWise Solutions

Building great communities

powered by drupal

Responsive Web Design = Lower Costs and Better User Experience

Kevin Millecam's picture

What would you think if your web designer approached you and said, "We plan to design your site in a way that might be more difficult for your users and more expensive for you in the long run. Is that OK?"

Of course, your web designer wouldn't ask you this (I'm guessing here). But, whether they know it or not, it's actually what they're expecting you to accept if they are not building your site using the best practice of responsive web design.

What is Responsive Web Design?

Responsive design is a method of ensuring that a website offers your users optimal ease of use and convenience across devices, yet the site will be as inexpensive as possible to design and maintain over the long run.

Designing sites for a variety of devices is especially important today. With the proliferation of mobile devices, users access the Internet more from mobile devices than from desktop computers (Learn more.). In order to serve a wide variety of devices, many organizations have both a standard and a mobile website. However, the optimal cost solution is obviously to develop and maintain only one site. So how can you design one website so that you can minimize costs but still provide a positive user experience on any device? The answer is responsive design.

To get a feel of how a responsive design behaves, visit the Norton Community (one of our recent projects) at community.norton.com and resize your browser to see what the site looks like when viewed from different sized viewports.

Minimize the Cost of Site Development and Management

The first important benefit of responsive design is that, by its nature, it reduces costs. Designing your website with responsive design will save you money on both initial site development and long-term maintenance. Instead of developing and managing a separate mobile site, you can develop and manage one site that works for any device. As a result you will reduce the time and effort necessary for information analysis and reporting because you won't have to wade through analyzing data for two sites.

Having only one website also reduces search engine optimization (SEO) costs. Managing SEO campaigns has become increasingly complicated because of changes in search engines' ranking factors. This has caused many organizations to outsource their SEO campaigns or hire in-house employees to manage them. One site means only one SEO campaign, which will eliminate half the cost.

Enjoy Better SEO

Having only one SEO campaign will save you money, but there are other SEO considerations. Some have argued there are SEO benefits to having a mobile and default site because mobile users employ different phrases and keywords than desktop users. For example, on your smart phone you might search for "grocery stores nearby." But there is no reason why mobile-specific phrases and keywords can't be incorporated into a responsive site.

Plus, Google has stated (developers.google.com) that responsive design is its "recommended design pattern." And starting April 21, 2015, Goggle added mobile friendliness as a ranking factor. Google also ranks sites higher when they have a positive user experience, which responsive design provides. So if Google recommends responsive design and has started ranking sites by mobile friendliness and user experience, then you will definitely want to implement a responsive design if SEO is important to your organization.

With reduced cost and improved SEO, a responsive site design is already a compelling option for most organizations. However, users will also appreciate how a responsive site offers them a consistent, positive user experience on any device.

Deliver an Optimal User Experience

The second benefit of responsive design is that it enables you to optimize your site's usability. Using responsive design makes it easy for your clients to find, navigate to, and share useful information, regardless of the type of device your clients are using for access. Ease of use across devices is especially important now that users access the Internet on mobile devices more than desktops.

Let's look at some examples of how the usability of a responsive website enhances the user experience.

Keep the Experience Fluid yet Consistent

A responsive site is fluid, meaning the page morphs and adjusts itself to present content appropriately depending on the size of the device's screen. You can see this in the two figures below. In Figure1 you see a great deal of information presented in a large viewing window on a large computer screen.

In Figure 2 you see how the same website is presented on a cell phone screen. If you were to change the viewing window on your desktop to the same size of Figure 2, you would see that the presentation is the same.

Notice that even though the site is fluid, it offers a consistent view regardless of the window size.

The consistency offered by responsive design is important for users who want to discuss information and coordinate thoughts. If you were to send a link to the Norton page shown above to coworkers in different locations, workers would see a very similar presentation regardless of whether they were looking at the site on a smartphone, tablet, or desktop monitor, allowing you to easily discuss the page with them. As viewing windows change, it is extremely important to appropriately change the physical presentation of the content.

Site Navigation Changes to Match the User's Device

One of the means of ensuring that the user can still quickly and easily get to all information on the site, even on the small screens of mobile devices, is to appropriately change or add navigational options.

For example, notice in Figure 3, a large viewing window on a desktop monitor, how many categories of information are all visible in the viewing window.

Then notice in Figure 4, a cell phone window, how only one of those categories can be shown. But also notice there is a new navigational "menu" option in the cell phone window. When you press this menu button, you get a list of categories that is very similar to the list shown on the large screen.

In strong responsive design the designer builds in the optimal navigational means for accessing the same information at every break point of the viewport.

Prioritizing Content in the Viewport

Even though the content's physical presentation morphs according to screen size, the designer can ensure that the most important information stays in the most advantageous viewing position. Notice how the Norton community page prioritizes its content when presented on a phone screen in Figures 2 and 4.

In the case of the cell phone window, the "welcome" section with the "login" or "sign up" options stays at the top of the screen, while the sidebar featuring support and social media options is moved towards the bottom of the page.

Common Feature Set Regardless of Device

To fully implement responsive design, the designer must deal with complex cases of interface consistency and content prioritization.

For example, consider subscribers to a video streaming site. They learn how to navigate the site, add movies to a list, and so on. But imagine how frustrating it would be if subscribers downloaded the app or visited the mobile site and had trouble navigating the page or adding movies to the list because the default site functioned very differently from the app or mobile site. Using responsive design to design your site helps you to avoid these functionality issues by offering a common feature set.

Designing your website to be responsive creates a win-win situation for you and your users. Users get fluid, consistent site functionality and navigation. Good responsive design will enable them to quickly and intuitively do complex combinations of tasks across a variety of devices. And you minimize costs by developing and managing a single website that serves any device and enables you to maximize your SEO efforts.