Design For Online Viewing

Closed notebook computer placed on wooden table

Studies have shown that reading from a PC screen or TV compared to scanning a paper document demands more effort from our eyes and brain in order to make sense of what we're reading or viewing. However ...

Although, over time, as more of us regularly view onscreen information using high definition tablet computers and smart phones, our eyes may become better accustomed and more receptive to this arguably "greener" way of interacting, sharing information, working and relaxing.

When writing your publications in formats that are intended to be viewed on-screen, such as PDF and other e-books or especially when creating your web pages, consider the following guidelines:

  • Use shorter sentences and shorter paragraphs.
  • Simplify your wording whenever possible.
  • If appropriate, consider creating text columns that are narrower than we might normally expect — ideally less than about 10cm. For information-rich pages, the trade-off here is that more vertical scrolling may be required from your users. Often, you can strike a balance: opt for slightly wider columns than you may ideally prefer.
  • Ensure that there is good color contrast between text and the background of your publication. With web pages designed using modern CSS techniques, you can have different colors for links and text placed at different locations.
  • Choose a text size that can be comfortably read by most people: aim for at least 10 or 12 points.
  • Choose a generous start-off default text size for your website. If you're using pixels, aim for at least 17px. Better still, don't use pixels, opt for ems or rems instead. If web page text is too small to read comfortably, most website visitors probably won't use their web browser controls to boost text size. Instead, unless what you have to say is exceptionally valuable to them, frustrated website visitors may just navigate away from your website: clickity-click and they're gone.
  • Use website text size that meets minimum standards for mobile. You can use the Google Mobile Friendly Test tool to check that your text and web design is mobile friendly
  • Ideally, provide text size change buttons that allow your users to instantly increase or decrease default text size. We use this technique here at Sure, a visitor can always use their web browser to change text sizes, however, many  uses simply do not know that such commands are available. When you choose to deal with the issue for your users directly on your website, you solve the problem instantly while at the same time improving the usability and memorability of your web site. Sometimes, visitors can't easily define why they may prefer one website over another. Yet when you consider such issues in advance, you help create an easier user experience for no extra cost if a text resize feature comes built into your web design.
  • You may decide to provide easy access to a printer-friendly version of each normal web page your make available if your main page is not already printer-friendly. However, do be aware that by adding access to printer-friendly pages, you may be introducing a search engine penalty. How? Normal web pages and printer-friendly web pages are almost identical in content, so search engines may interpret this as "content duplication". To have a website that is search engine optimised, a smart goal is to minimise any content duplication to specifically avoid any potential duplicate content penalties.
  • Delete or cut back unnecessary text.
  • Make good use of headings and sub-headings. How: create headings and sub-headings that when read alone without their relevant content text, can provide an almost instant snapshot of your document topic and sequence.
  • Use bullet points whenever appropriate to help highlight key points and reduce reader eyestrain.
  • Draw attention to specific words using boldface formatting when appropriate. However, be careful not to overdo use of bold. Why: bold text only really stands out if most other surrounding text is not bold.
  • Avoid using underlining, especially on web pages. Why? Many traditional web links (hyperlinks) appear underlined either permanently or when the mouse pointer is placed on a link. So by underlining text, you may introduce some confusion to your readers. Also, underlining cuts through the descenders of some text characters, which can further interfere with on-screen readability.
  • Be mindful of any special needs that physically challenged readers and visitors may require. Sometimes, simple changes can make a huge difference. Here at, we have taken a range of steps in our web design to help make our site more accessible and usable to everyone. We can also apply these steps to web designs we create for clients.
  • Use italic formatting sparingly. Why: often, italic text is simply not as clear when viewed online as normal body text.
  • For websites, ideally use only responsive web design techniques. Why: to help ensure that your website can be used effectively on a range of different web access devices, including desktop PCs and Apple Macs, tablet computers like Apple iPad, and mobile smart phones like Apple iPhone. If you upgrade your website to a responsive web design, you'll probably not need a separate mobile version, plus, you'll serve only a single URL or web address for each web page to Google, Yahoo, Bing, and others. A growing number of web design templates now come in responsive web design format (including this website).

Email Us

You may also like: