July 2014
By Nicky Bleiel

Image: © hakane/ 123rf.com

Nicky Bleiel is the Lead Information Developer for Doc-To-Help. She has 19 years of experience in technical communication, writing and designing information for software products in the documentation, media, industrial automation, simulation, and pharmaceutical industries. Nicky is the President of the Society for Technical Communication (STC). You can find a complete list of her presentations and articles at


www.nickybleiel.com
nickyb[at]doctohelp.com
www.doctohelp.com
Twitter: @nickybleiel

Making content flexible with responsive design

Technical communicators strive to provide high-quality content to users when and where they need it. With responsive design it is now possible to create content that automatically adjusts to the device.

Responsive web design is a transformative technology for technical communicators. With responsive design content adapts to the device – be it a desktop, mobile phone, tablet, or other. It gives technical writers the means to create content once and deliver it anywhere, to thousands of devices: new ones, older ones – even ones that don’t exist yet. Responsive design makes content flexible, so technical writers can focus on what they do best: developing high quality content.

Before I go any further, a quick explanation of what I mean by “responsive”. Responsive web design is a technique for designing web pages that automatically adjust to the device accessing them. 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. Interactions – such as touch – are also components of responsive design.

In this article, we will take a look at the advantages of responsive design, the philosophy of progressive enhancement, why the time is right for responsive, how it works, and best practices. But first, let’s look at a few examples.

Responsive examples

Microsoft’s website is a great example of a responsive website, and this blog post explains how it stacks and collapses to work on any device.

The following are a few examples of responsive software documentation.

Explore these on your desktop, and resize the browser window to see how they respond to the change. Try them out on your tablet or smartphone too.

You can check out the responsiveness of any website by opening the “Am I Responsive” website and entering the URL of the site you want to examine.

Responsive is about context and content

Responsive design is part of a web development philosophy called Progressive Enhancement. Web designers who have embraced Progressive Enhancement believe that users should not miss out on a great experience – or on great content – because they don’t have the “right” device or browser. As Aaron Gustafson noted in Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement: “Progressive enhancement is a philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions.”

Responsive design is all about accommodating the user’s context – their environment, device, and more. Technical communicators have always considered context when doing project planning. It is one component of our mantra “know your audience.”

Responsive removes the technological restrictions of content, but clear writing still plays an important role. Aaron Gustafson also considers content the core component that responsive design builds on:

“The baseline experience is always in the form of text. No specific technology shapes this layer, instead its success or failure relies entirely on the skills of the copywriter. Clear, well-written copy has universal device support and does wonders to improve the accessibility of the content to users.

Why the time is right for responsive design

Ethan Marcotte introduced the term “Responsive Web Design” in 2010. Since then it has been gaining momentum, with a number of recent events pushing it further to the forefront.

The news platform Mashable declared 2013 “The Year of Responsive Design” because it was the first year that tablet sales were predicted to overtake desktop PC sales. Other milestone statistics include a large increase in web traffic on mobile devices between the first quarter of 2012 and 2013, and the number of page views on mobile devices worldwide increased significantly in a similar timeframe.

Responsive design also empowers search engine optimization (SEO). Last year, Google announced that their algorithm favored responsive designs that delivered the same content to both desktops and mobile devices. Bing also prefers responsive content, referring to it as a “one URL per content item” strategy. So delivering responsive content can improve the search ranking of your content.

Shifting from what search engines want to what users want – mobile users want everything that desktop owners have. They want one web. Responsive web design expert Brad Frost calls this “content parity”. He notes that it is a myth that mobile users don’t want the same information as desktop users, and we should give people what they want: one web. The W3C Mobile Best Practices specification describes “One Web” as “making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation.” In other words, Frost notes, it is fine to optimize the presentation of content as long as the content remains accessible in some way, shape or form.

“Content parity” is validated by a research report by Google (The New Multi-screen World: Understanding Cross-platform User Behavior). The report found that multi-screening is common – 90 percent of people begin a task on one device, then switch to another (dubbed sequential usage), while 66 percent of users use a smartphone and laptop/PC simultaneously. This means that users will notice when content is not available on the device that they are using.

Lastly, studies have found that user task completion improves when sites are responsive and designed to give users what they need in their context. This increases the findability of content and improves the user experience, which boosts task completion.

A short responsive primer

As mentioned earlier, responsive designs adjust on-the-fly to the device that is accessing them. The content adjusts its size and shape, as well as rearranges itself based on the width of the browser screen. No content is omitted; it is only the presentation that changes.

In responsive designs, the HTML doesn’t change, it is the CSS that changes based on the device/browser. A variety of technologies are used, the core ones being media queries, fluid layouts, and flexible images.

The HTML media attribute is used to specify what CSS should be called based on the width of the screen. Therefore one responsive site will use multiple style sheets to transform the presentation of the content. For example, when the width of the screen matches the parameter in a specified media query (in this case, a common smartphone width of 320px), the CSS named mobile.css is called.

 

If the media query was media= "(min-width:1025px)", a css developed for the desktop would be used instead.

Fluid layouts (also called fluid grids) are grids that contain a specific number of elements that are based on percentages, not pixels. As the device or screen size changes, the grid adjusts its elements proportionally, either by “stacking” on devices with smaller widths or spreading out on larger screens. The microsoft.com website and the blog post that explains it are a great demonstration of a fluid layout.

Images on the web have traditionally been specified using pixels, which meant they were hard coded and inflexible. Images become flexible (or fluid) when relative units are used instead of pixels. The most common solution is to set the max-width of images to 100 percent and the height to “auto” so that images expand or contract to fill the available space.

Understanding the power of responsive design and how it works is important, but it may not be necessary for us as technical communicators to code responsive outputs ourselves. We should consider using help authoring tools that give us the option to customize and build responsive outputs. If we do that, instead of coding, we can concentrate our efforts on optimizing our content.

Best practices for technical communicators

Luke Wroblewski has famously advocated that web designers should focus on mobile first. This best practice also works for us because content designed to work well on mobile devices scales well to larger devices and desktops; starting with the desktop and scaling down to smaller devices does not work.

Here are a few “mobile first” best practices for technical communicators:

Keep image files small. Large files increase load time; 74 percent of mobile users will abandon a site that takes more than five seconds to load. (Four Common Responsive Web Design Pitfalls)

Write concisely. Mobile users are less likely to wade through content (this also has the added benefit of reducing translation costs). Quite a bit has been written on the subject of minimalism and concise writing. Another interesting article on brevity is Keep It Short by Danny Heitman of the New York Times.

Use progressive information disclosure. Show users a little and let them choose what they want to learn more about. We can use collapsible text, inline text, and other dynamic features to make this happen. Technical Communicators have been advocating this for many years, and in The Psychologist’s View of UX Design, Susan Weinscheck confirms it.

Improve navigation so users don’t use the device’s ‘back’ button and navigate away from your content.

Make links easier to use. Avoid including multiple links within the same paragraph, because this will make them harder to select on smaller devices. Turn important links into buttons.

Streamline your table of contents and numbered/bulleted lists. Users can’t see the relationships between levels on smaller devices. Stick to no more than two levels, and keep in mind that indenting bulleted and numbered lists uses valuable screen real estate.

Clean up device-specific terminology. “Click” and “Tap” only apply in specific environments. Make sure that you use more generic terms, such as “Select”.

Tables need to be easy-to-navigate on smaller devices. To have the information in tables display effectively in responsive designs, you should consider adding the option to either stack column information (reflow it), or display columns individually (toggle the columns on and off). Reducing the amount of text in each cell will also improve readability.

In conclusion

Technical communicators strive to provide high-quality content to users when and where they need it. With responsive design and mobile devices, we can truly make information available everywhere.

References

Page 1 from 1
1
#1 psd to responsive html wrote at Tue, Dec 30 answer homepage

How to secure a responsive website.