What is it?
A design technique that allows content on a web page to automatically reflow, resize, reformat, and reposition itself so it can be displayed to its best advantage on a variety of device sizes and orientations.
Why is it important?
Our content is consumed on mobile devices of all shapes and sizes. Responsive design can help us display our content well without needing to reformat it for various devices and screen sizes.
Why does a technical communicator need to know this?
We once created technical content for specific page sizes. When we started writing for the web, we continued using that technique, creating fixed-size designs that worked well on traditional desktop screens. That no longer works. People experience our content on a wide variety of devices with different screen sizes, aspect ratios, and orientations.
We need to think outside of the box, whether that box is 640×480, 1920×1080, or 144×168. With today’s devices, that box might be round, as on a smart watch. It might even be totally out of the box, floating in air using augmented reality techniques.
As a technical communicator, you probably won’t be writing code to implement responsive design, but you do need to know how it affects you. You must think differently about the content, the needs of your users and how you create that content.
Some textual content may not be visible or usable on some devices. Images will resize, appear in different locations, or in some cases not appear at all. Many of the techniques we use without thinking (such as referring to a figure by saying, “see the image below”) just aren’t applicable or can’t be used reliably.
Rather than writing for a large screen or page and then extracting information to be used on a small device, it’s often better to write for a small device and use progressive disclosure techniques to expand content as required.
Responsive design is an exciting way of thinking; we need to recognize the challenges and embrace the opportunities.
References
- Ethan Marcotte: Responsive Web Design:
- Responsive Web Design: Author: Ethan Marcotte
- Mobile First: Author: Luke Wroblewski