The Power of Responsive Design

Adopting a responsive design for our content truly “frees our content” to work anywhere, anytime. As technical communicators, we no longer need to spend time designing and creating deliverables for different devices. Instead, we can focus on developing and delivering the content our customers need. The right content, in the right place, at the right time.

Technically, responsive design is “Responsive WEB design”, so we must deliver our help to the web to take advantage of all that responsive design has to offer. But this is nothing new for technical communicators, since many of us have been delivering web-based help systems for many years, and mobile help for a shorter time. Providing a single responsive output gives us the opportunity to create once and deliver to thousands of devices: new ones, older ones – even ones that don’t exist yet.

Please note – it is important to understand the power of responsive design and how it works, but it isn’t necessary for technical communicators to code responsive outputs ourselves. Doc-To-Help gives us the power to build responsive outputs right out-of-the-box (plus do some customizations if we want to – see “All You Need to Know About Responsive NetHelp”). This means that, instead of coding, we can concentrate our efforts on optimizing our content for mobile.

Why the Time is Right for Responsive

  • Mashable has declared 2013 the “year of responsive web design” and notes that while tablet sales are expected to top 100 million in 2013, 2012 marked the first time in 11 years that PC sales did not top the sales of the previous year. 

A (Very) Short Introduction to Responsive Design

Responsive web design is a technique for designing web pages that automatically adjust to the device accessing them. A variety of technologies are used, the core ones being media queries, fluid layouts, and flexible images. The HTML code of the page never changes, but its presentation adjusts based on the CSS rules specified for the device/browser. No content is lost in responsive design; the content and the page layout simply adjust by stacking or collapsing. (There is no horizontal scroll bar.) There are other adjustments too: images will automatically resize and tables may reflow. In addition, pages may switch from touch interaction to mouse/keyboard interaction depending on the device.

Here is what Doc-To-Help’s Responsive Design looks like. On smaller screens (or when you resize the browser) the Table of Contents and the toolbar collapses. Clicking a button will display either.

Here’s what it looks like on the desktop…

Responsive Desktop

… and here is how it looks on a Mobile device. The TOC and toolbar buttons can be accessed using the buttons on the top right and left.

Responsive Mobile

You can test out a live version here:  http://showme.doctohelp.com/widgetexplorer/

In addition to HTML and CSS, jQuery, JavaScript, and sometimes PHP are used to create responsive designs.

Examples of Responsive Websites:

Best Practices for Technical Communicators

Creating responsive outputs means that technical communicators need to adopt a “mobile first” mindset – our content needs to be designed to work well on mobile (smaller) screens, because when you write/make other changes for mobile, then the content will work well on tablets, the desktop, etc.

A few “Mobile First” best practices; some technical, some content changes:

  • Keep image files small. Large image files will increase load time, which is something mobile users have no patience for, in fact, 74% of mobile users will leave a website that takes more than 5 seconds to load. http://www.sitepoint.com/4-common-responsive-web-design-pitfalls/
  • Concise writing. Always an excellent best practice, but now more important than ever. And this isn’t just about screen size; those working on smaller devices have less patience to wade through content. (Another benefit: this also reduces translation costs.)
  • Employ progressive information disclosure. This will make information easier to find, and puts the choice to learn more in the hands of the reader. Using collapsible text and inline text (dynamic help features) can be good solutions.
  • Improve navigation. Add related links at the end of topics so no one needs to use the device’s “back” button, because that makes it is easier to navigate away from your content.
  • Make links easier to use. Don’t bury too many in the same paragraph because they will be harder to use on mobile devices. Consider making the most important links into buttons.
  • Streamline your table of contents. A TOC that is 4-5 levels deep is more challenging to navigate on mobile devices.
  • Avoid second, third, etc. level bullets and numbering. It is harder to see the relationships between levels on smaller devices.
  • Take a look at your tables. Some of them may have too many columns and be very lengthy. Simplify them, and eliminate the ones that aren’t necessary. You can take advantage of responsive table reflow, but you will want to verify that your tables are usable on smaller devices.
  • Clean up your terminology. Your content needs to work on devices where you tap, and those where you click. Avoid using device-specific terms.

Additional Resources

The following two books and tutorial are excellent resources to learn more about RWD:

This entry was posted in Doc-To-Help and tagged , on by .

About Nicky Bleiel

I am the Lead Information Developer for Doc-To-Help and a Doc-To-Help trainer. I have 19 years of experience in technical communication; writing and designing information for software products in the documentation, media, industrial automation, simulation, and pharmaceutical industries. I am the President of the Society for Technical Communication and have presented talks at the STC Summit, WritersUA, tcworld, CIDM (Content Management Strategies/DITA North America), and LavaCon on many topics, including embedded help, tools and technologies, user assistance design, single sourcing, wikis, social media, agile, and convergence technical communication. I have been published in STC's Intercom, Tieline, STC conference proceedings, tcworld magazine, TechCom Manager Newsletter, and the WritersUA and the Content Wrangler websites. Additionally, I teach Technical Writing at the Community College of Allegheny County.

Leave a Reply