Simple Steps to Optimize Responsive and Adaptive Design Websites

:: Michael Wilson, Webtrends ::

Common goal of responsive design and adaptive design websites: Create consistent, optimized experiences for visitors on any device. 

Common goal of an optimization program: Create good overall visitor experiences that yield business results by testing what works and what doesn't. 

With these similarities in desired outcomes, it seems intuitive that any company investing in a responsive or adaptive design website, would simultaneously run an optimization program. Unfortunately, the dynamic display of content within responsive/adaptive layouts complicates the efforts of testing programs. It is time consuming and almost impossible to create independent variations for each device type, therefore, most companies fail to thoroughly test because it's such a drain on resources.

Below are a few simple steps for optimizing both responsive and adaptive layouts.

Before You Begin, Understand Your Responsive or Adaptive Experiences

Responsive and adaptive design share a similar goal, but have slightly different approaches. Responsive sites are built to continuously change to fit any screen or device size. Adaptive sites are designed to adjust based on a pre-defined set of screen sizes, commonly mobile, tablet and desktop. Upon varying your browser's width and height, you will notice alterations taking place gradually or more noticeably, depending on whether responsive or adaptive design methods are being leveraged within the website. These changes are defined as breakpoints making the website adaptable on smart devices like tablets, phones and soon, smart watches. Responsive designs fluidly expand or shrink, whereas adaptive designs hitch as you expand or minimize a browser or viewport. You need to understand the behaviors of all the elements on your site as each breakpoint is reached.

Typical noticeable alterations include:

- Navigation menu - usually converted to a dropdown menu

- Typography - indent, text dimensions and positioning

- CTA buttons - change in dimensions (for better emphasis) and positioning

- Thumbnails - cropped or increase in dimensions

- Top/Header elements - size alteration in sliding banners

- Columns (left and right sidebars) - placed above or below the main content

- White space - additional space between various elements

- Various elements - tend to either appear or disappear

These are few of the typical alterations you may notice in a responsive or adaptive website. The rest is up to the respective Web designer or developer to create custom rules which may differ from website to website depending on content and structure. Work with your team to build your catalog of dynamic elements.

Focus On the Goals for Optimization to Narrow the Scope of Work

It is important to understand whether you need to test solely for the desktop or for all viewports (e.g. smartphone and tablet devices). For example, if the goal of a test is to improve the completion rate of a form-based application that visitors mainly complete from a desktop or tablet using the desktop layout, you may be able to focus on testing only that view. 

Don't forget to use your analytics solutions to understand the profiles of the visitors you are trying to engage. Remember, the goal with any test is to learn and drive an increase in performance. So if five browsers comprise 90-plus percent of the traffic to your test page(s), then you are assured of attaining statistical significance. Similarly, you could target by most popular screen sizes or devices.

The point is to narrow your focus as much as possible to get maximum benefit without having to test every possible layout for each breakpoint on each device. 

Consider Segmenting Tests by Breakpoint

Rather than test across all browsers and devices in a single test, you can exclude traffic based on device type or screen size to ensure you test within a consistent content view. This allows you to simplify your testing approach and test as you normally would for a simple fixed or fluid layout. It also allows you to avoid the complexities of recognizing breakpoints and adjusting your testing behaviors, CSS and Javascript depending on the data you have for each visitor or user. This also allows you to plan more easily for future iterations of the responsive site.

Keep It Simple and Design for Each Breakpoint Layout

Complex layout changes made through client-side manipulations or transformations require a lot of development and quality assurance. To keep things simple, test content above anything else, such as your classic sort of testing: images, headlines, copy. Even with this simplified testing, there is a lot in play for responsive and adaptive sites.

- Typography is not a one size fits all. For example, if we have a line of text in Arial font, size 10pt which is readable on a desktop, it won't be readable on a phone. Therefore additional CSS rules are included to avail the text in dimensions best fit for the device.

- Line lengths for paragraphs and texts are other factors to consider. The eye can handle a limited amount of letters and breaks. Ideally, in order to maintain readability, type should be optimized based on screen width. For desktop websites, 50 to 75 characters per line are considered ideal, but that drops to 35 to 50 characters per line on mobile devices. 

- Images like thumbnails tend to get enlarged when viewed through smaller devices. Create assets of adequate dimensions prior to conducting further tests.

- Elements/Modules/Features need to be weighed against value to the visitors. Devices like tablets and smartphones can host limited content, unlike a website. In fact, such elements tend to be hidden or collapsed through basic CSS rules. That helps in reducing clutter and cognitive overload. 

- Positioning alters in responsive design. Typical examples include repositioning of sidebars and buttons. 

- Spacing between modules and elements provides a sense of ease to the user. Cluttered content tends to lead users into doubt and confusion as content won't be easily comprehended. In smaller devices, white spacing plays an essential role, especially in accessibility. For example, users with big thumbs require content which is easily touched by their fingertips.

Reduce Complexity, But Do Not Reduce Optimization

As I indicated earlier, the difficulties of optimizing responsive and adaptive content often lead to reduced testing in general. However, it is complexity introduced into the layouts that actually suggests organizations should test more, not less. You can mitigate the time and effort by making an inventory of the breakpoints for dynamic elements, testing only the content that is necessary to help you achieve your goals, and reducing the scope of testing through segmentation by device type and screen size. Above all, you should be committed to ensuring the best experience possible by optimizing repeatedly and often. 

Michael Wilson Bio:

As Senior Director of Product Management at Webtrends and with 20 years' experience in enterprise software, behavioral targeting, customer experience optimization and conversion marketing, Michael Wilson sets the direction for Webtrends optimization and segmentation solutions.