Features

Responsive UX Design

November 13, 2012

By Tony McDow

Why Go Mobile?

One of the hot topics on the forefront of today’s technology buzz is mobile compatible content. Many experts today are emphasizing the importance of Web content compatibility for mobile viewers. Statistics show more and more people are choosing to connect to the Web via their mobile devices. The smartphone market began outselling the desktop market at the end of 2010, and projections state that by the year 2015, Web users will be connecting to the Internet more often through mobile devices than through desktop computers. But is mobile just connecting to the Internet? The answer is no. Mobile is smartphones, tablets, or any device that gives the user the freedom to walk away from their desktop. Companies are handing out iPads to replace notebooks, and cloud computing makes it possible to synchronize files, photos, and music so users can have access anywhere they go. Mobile devices are now the preferred way for users to access any information.

What does this mean for technical writers? Technical writers can now deliver documentation to end users nearly anywhere. They can virtually set up shop in the pockets of their customers. It is easier than ever for you to connect with end users today, but it is just as easy for your competitors to do the same. If you don’t keep up with the growing trends of mobile development, your competitors gladly will, and they will take your customers’ loyalty with them.

What Is Responsive UX Design?

Responsive UX design is a method or set of techniques used to increase the quality of the user experience when viewing browser-based information. This includes responsive Web design, which is about generating a single instance of Web-ready content that has the capability of displaying across multiple devices based on screen size, platform, and orientation. Future developments in responsive UX design will include responding to the users’ needs and behavior to enhance the overall experience. Responsive content is intuitive to its surroundings, allowing browsers to depict their own parameters. This progressive concept has become a major focus in designing for the mobile market today. Making your content cross-browser, multi-platform compatible is an essential business strategy that must not be overlooked.

Prior to the advent of responsive design, the solution to cross-platform functionality was centrally focused on a complex content strategy that involved the creation of an alternate set of content to be dedicated to mobile users. This intensive content left developers with added workflow steps and duplication of content. Having two sites meant twice the development, twice the output, twice the maintenance, twice the cost, and most important of all, a degraded experience for end users. While this content strategy worked, it was obviously not ideal. The alternate content was created for the miniature screens of mobile devices, but it was still not adaptive to the vast array of screen sizes and varieties of mobile devices.

Responsive design is a "single source" answer to cross-browser, multi-platform, multi-display compatibility. It utilizes a single instance of content and code to lock in content consistency and functionality across all devices. Furthermore, you not only guarantee accessibility of your content to all your end users, you also preserve a canonical URL that maximizes the ability to find and share your content throughout the Internet.

Is Your Content Responsive?

So how do you know if your existing content is responsive? Since truly responsive content has certain specific qualities, it’s easy to measure whether or not your own content is responsive. We’ve developed a checklist that you can use to measure the responsiveness of your content. We urge you to pull up some of your help documentation on your mobile device and put it to the test. If you answer yes to any of the following questions, then your content is not responsive.

  • Does the page redirect to an alternate, mobile-specific website?
  • When you first open the page, is the text too small to read?
  • Do you have to zoom in and out to see all of the content?
  • Do you have to scroll left or right while reading text?
  • Is it difficult to select links or buttons that you touch?
  • Is it difficult to view large images or tables without using zoom?

Common Misconceptions: What Isn’t Responsive Output?

Many believe that if their content is HTML5 and CSS3 compliant, then their content is responsive, but this is actually far from the truth. While HTML5 and CSS3 provide additional building blocks for creating responsive content, using these standards does not automatically mean that your content will be responsive. Instead, it’s how you utilize and fashion these building blocks that makes your content responsive. This can prove to be a complex process for those not adept in the implementation of HTML5, CSS3, and javascript. Fortunately for technical writers, creating content that is responsive can be as easy as selecting the correct help publishing solution. This will give today’s technical writers more time to focus on their content and design and allow the browser to handle the stresses associated with cross-browser and multi-device compatibility.

Advantages to Technical Writers

The goal of responsive design is to create a single instance of content that works across all environments. Thus, from an authoring perspective, technical writers can continue to implement single-sourcing strategies for the creation of content and eliminate the need for, and thus time spent on, crafting an alternate set of content to adapt to mobile devices. They can rely on publishing systems that create responsive output directly from their single-source authoring systems. With such content-intensive technical documentation, authors will not have to worry about the technicalities of how content will display on mobile devices.

Other Advantages

We’ve all tried to understand those search engine algorithms affecting our rankings in search results and have tediously sought ways to better our SEO rankings. Responsive content is one proven method of helping your ranking. Both Google and Bing, the two most utilized search engine companies, recommend the use of responsive design. The following was posted in Google’s Webmaster Central Blog on 6 June 2012:

Using Responsive Web Design has multiple advantages, including:

  • It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.
  • Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.

This post came nearly three months after Duane Forrester stated on the Bing Webmaster Center Blog that "At Bing, we want to keep things simple by proposing the ‘one URL per content item’ strategy." He went on to explain the following:

By outputting only one URL for the same content, you will have the following benefits:

  • You have more ranking signals coming to this URL. Example: the vast majority of mobile URLs do not have inbound links from other websites as people do not link to mobiles URLs like they link to regular Web-situated URLs.
  • There is also less search engine crawler traffic coming to your Web servers, which is especially useful for large websites. Fewer URLs to crawl reduces the bandwidth our crawlers consume.
  • Less work (and potentially less cost) building, updating and maintaining a stand-alone mobile-focused website.

How Do I Make My Documentation Responsive?

Anyone can make documentation responsive, though the task is not always easy. Resources such as http://googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html will give you step-by-step instructions on how to ensure that your documentation is responsive. However, for technical writers focused on content creation and structure, it is often beneficial to select a publishing tool that automatically yields responsive content in its output. Be careful to make sure you put any publishing tool claiming to produce responsive content to the test. You can quickly see how your tool’s content performs using a responsive test tool such as www.responsinator.com.

If you choose the right publishing tool, the responsiveness will be inherent to your output, leaving your technical writers to focus on content. You will have one set of content to develop and one set of content to maintain. Through responsive design, your published content will create a far more effective user experience.

Summary

Mobile technology has made great strides in the way online content is viewed today. With the rapidly increasing number of mobile browsers in today’s market place, the versatility of the user experience has reached an all-time high in level of importance. The next step in accommodating this advancement is the adoption of responsive output, which affords the following:

  • Responsive content alleviates the need for creating alternate content to cater to the mobile market, thus cutting your workflow in half and allowing you to focus your efforts on one set of output.
  • Responsive content lets your browser do all the work in proportioning your content to the associated device it is being viewed on, cutting down on scrolling, zooming, and other frustrating interactions due to a particular mobile device.
  • Instituting the proper publishing tool takes all the complexities out of responsive design, allowing the technical writer to focus solely on the content.
  • With only one set of output, your content is reliant on a canonical URL for each topic, thus favorably impacting your ranking in the search engine results as well as providing consistency in how this URL may be shared and exchanged with other end users.

Tony McDow is the founder and CEO of Quadralay Corporation.Tony worked for 12 years in the development of WebWorks Publisher, which was first released in 1994. Since 2004 he has worked with writing teams around the country, seeing firsthand the challenges they face in capturing and delivering knowledge. With the launch of the ePublisher Platform, as part of the WebWorks team, he focused on enabling the publishing process to deliver the next generation experience to end-users, writers, and information architects of all types of organizations. Prior to Quadralay, he studied electrical engineering at the University of Texas at Austin, and obtained an MS in engineering.