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.
- Google is changing its algorithm to favor responsive content. http://www.smartinsights.com/search-engine-optimisation-seo/mobile-seo/googles-changing-recommendations-on-seo-for-mobile/
- Mobile users want everything that desktop users have — they expect “content parity” http://bradfrostweb.com/blog/mobile/content-parity/
- A single responsive output makes supporting a continuous publishing model easier, because you are no longer building and maintaining separate “web” and “mobile web” versions.
- Responsive improves usability — because we won’t be confusing users with different experiences on different devices. Google has found that 90% of people begin a task on one device, then switch to another (sequential usage) and 66% of us use our smartphone and laptop/PC simultaneously.
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…
… 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.
You can test out a live version here: http://showme.doctohelp.com/widgetexplorer/
Examples of Responsive Websites:
- http://www.microsoft.com/ (See an explanation of how it stacks here: http://moz.com/blog/seo-of-responsive-web-design)
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.
The following two books and tutorial are excellent resources to learn more about RWD:
- Responsive Web Design by Ethan Marcotte
- Implementing Responsive Design by Tim Kadlec
- Creating a Mobile-First Responsive Web Design by Brad Frost: http://www.html5rocks.com/en/mobile/responsivedesign/