I recently launched a new website for a Vancouver- and New York-based technical writing client. I designed and created the site using the WordPress theme Twenty Fourteen, which has been optimized for desktop, tablet, and mobile phone. Twenty Fourteen reorganizes the display of page elements based on the screen size of the device you are using. In contrast, the theme for this karenrempel.com technical writing website, Silver Light by Blog Oh! Blog, was developed in 2008 and does not resize on the fly. [Note: I updated karenrempel.com to a mobile-friendly format in April 2015.]
But there’s more to designing for mobile devices than just the capacity to automatically adjust the page elements. Here are some tips about mobile design for technical writers:
- Keep the number of menu items to 6 or less. This is the maximum that can be displayed without scrolling on an iPhone.
- Don’t use submenus. They are shown in expanded view when you open the menu on a tablet and present the reader with an overwhelming number of choices.
- Use center alignment for graphics. Left or right alignment with text wrap leaves a column that’s too narrow for displaying text elegantly.
- Put the phone number and action links near the top of the home page. Imagine your user is stopped at a light and wants to find the info before the light turns green! Not that anyone looks at their phone while driving, of course.
- Launch all top-priority pages from links in the home page.
Whether you are a technical writer designing a website for a client, or designing your own technical writing website, I hope these tips will help you design a site that’s effective—both visually appealing and functional—on any device.