Web Page Content and Layout
Most Recent Version: December 2004 1. Content Preparation and Style
People don’t ‘read’ web pages in the same way they read printed documents. They rely
heavily on skimming and scanning techniques to find areas of interest quickly. Dey Alexander’s site contains links to many useful resources relating to Writing for the Web at http://deyalexander.com/resources/writing-web.html 1.1 Keep it short The reproduction of text from a real-world publication as content for a web page is very rarely appropriate. Be succinct when preparing copy for a web page and try to use about half the number of words you would use in a hardcopy publication. Users don’t like scrolling through long documents. Where there is a large amount of information don’t present it all on one page. Split the information into topic-specific sections that are then presented on separate, but linked pages. The guiding principle should be to allow readers to select those topics they care about and only download those pages. For more information see Jakob Nielsen article Be succinct: Writing for the Web at www.useit.com/alertbox/9703b.html 1.2 Inverted Pyramid Newspapers commonly use an inverted pyramid style of writing whereby articles start with a short overview of the issue and outcome, and then provide the supporting information and background details. That is, start with the conclusion and then build the argument. This style of writing is the most appropriate for web page documents, which users very rarely read from start to finish, since it will help them obtain the important information with little effort. When writing for the web, simplicity is as important as brevity. Site visitors should be able to understand what is written on the first reading without having to stop and re-read
sections. Use simple, commonly understood words to present each idea or concept in separate short sentences. The use of good headings and subheading can greatly improve the effectiveness of written content on the Web. Headings should be short, clear and descriptive.
1.3 Readability Web page content should be presented in clear, simple language that is easy to read. A significant number of people in Australia have literacy problems. In 1996, the ABS found nearly 20% of Australians aged between 15 and 74 had very poor literacy skills, which caused them to have considerable difficulties in using many of the printed materials they encountered at work or in their daily life. Readability tests can be very useful tools for web content developers. Readability tests measure those features of a text that can be analysed mathematically, for example the average number of words in a sentence or the number of syllables in the words. The results are used to indicate how easy or difficult a document is to read and usually provide an estimate of the reading grade or age required to understand the content. A variety of readability tests or formulas are available to help web content developers determine the reading level of their documents. These include the online Juicy Studio Readability Test at http://www.juicystudio.com/fog/ 1.4 Intellectual Property Copyright applies to all material published on the web, including photos, graphics and text. Agencies should ensure that they are either the owners of the material, or have permission to use the material that they are planning to display on their site. For more information see Website Legal Requirements and Statements 2. Correct Word Usage Spelling and grammatical mistakes diminish the integrity of a website and the content it presents. Care should be taken to ensure the correct use of words. Some commonly misused words: • • advice - guidance received (noun). advise - to provide information or guidance (verb). license - to grant permission or authorise (verb). licence - the certificate or formal permission to do something (noun).
Page 2
Page Content and Layout
• •
compliment - an expression of praise (noun); congratulate (verb). complement - that which completes (noun); counterpart (noun); add to (verb). its - singular ownership (where gender is unknown) eg. “A website is the public presentation of an agency and its activities”. it’s - abbreviated version of “it is”.
2.1 Use of Sensitive Language Avoid the use of vulgarisms and other socially offensive language. Use non-discriminatory language, taking care not to cause contention or offence to any section of the community. 2.2 Correct Spelling Use the correct words and English Australian rather than American spelling. For example: • • • • Use “ise” instead of “ize” for verbs, eg. organise, harmonise. Use “our” instead of “or”, eg. harbour, colour, favour. Do not drop the “e” from “ment” words, eg. judgement, lodgement. Use “program” instead of “programme”
Proof read Web page text rather than relying solely on automated spell-checking programs. 2.3 Avoid Jargon and Use Hyperlink Explanations Don’t assume site visitors know what you know about an organisation or subject. Avoid wherever possible the use of jargon, colloquialisms and technical terms. Most can be replaced with commonly used words or phrases. Use hyperlinks to provide definitions or explanations of acronyms, technical terms and complex concepts. 3. Content Presentation Presenting information content in the most effective way on a website requires balancing the organisational requirements of the information with the retrieval needs and expectations of users.
Page Content and Layout
Page 3
3.1 Separate Content Create a separate web page for each type of information resource or service. Links to related information sources, such as press releases or product information maybe presented on the same page. 3.2 Web Standards The W3C has recognised web standards and Agency sites should use web technologies according to specifications. All pages should be marked up with the proper structural elements and developers should strive to control page presentation with style sheets. The DOCTYPE tag, which indicates the document type that applies, should be the first line of code for each page. The HTML tag should declare the primary language for each web page with the ‘lang’ attribute. For example for English. Information about Document Type Definition (DTD) can be found at http://www.w3.org/TR/REC-html40/sgml/dtd.html All pages on the site should validate to published formal grammars. A variety of on-line tools can be used to validate Web pages, including: • • • HTML Validator (W3C) at http://validator.w3.org WDG HTML Validator at http://www.htmlhelp.com/tools/validator/ W3C CSS Validation Service at http://jigsaw.w3.org/css-validator/
3.3 Headings and Subheadings Web pages are easier to digest when they are broken up into bite-sized chunks with meaningful headings and subheadings. The
tag should be used for headings and subheadings, rather than font commands. For more information see Accessible Navigation (LINK) 3.4 Lists The appropriate use of ordered , unordered and definition lists are an established and effective way of highlighting content in the web environment. 3.5 Images Photos and graphics used should support the content of the web page and be appropriate for the site. Images should be in either GIF or JPEG format, keeping the file size as small
Page Content and Layout
Page 4
as possible while maintaining a level of quality consistent with the web. Use a scanning resolution that is appropriate for the web. Specify the (img) ‘width’ and ‘height’ attributes of all images. This reduces the time it time it takes a page to load by enabling the browser to allocate space for the images while loading the page text without delay. Where large a photograph or complex graphic is required to illustrate a feature or process, consider placing the image in a separate linked file rather than incorporating it into the web page. This will give the user the option of accessing the image via a link if they so wish. The ‘alt’ tag must be used for all images. See Alternatives for Images 3.6 Forms Many web users find forms very frustrating and will abandon a site rather than complete one. They see them as a potential threat to their privacy and a waste of time. Form pages should describe why the information is being sought and the benefits users will gain from supplying the information. There should also be a clear Privacy Statement or prominent link to Privacy page. See Website Legal Requirements and Statements All conditions that may apply to a form and all the information the user will require to make decisions when completing the form should be clearly identified on the web page immediately prior to the form. Forms should be kept as short as possible, and when a long form is required provide users with an indication of how long it is likely to take. Indicate clearly which form fields are mandatory (ie must be completed) and make sure all the form fields are easily identified and easy to fill in. Website forms should be accessible to disabled users who rely on assistive technologies to access the web. For more information see Accessible Forms
4. Page Layout “An attractive site is distinguished by a cohesive and consistent look that presents a unique identity for the site and, ideally for its sponsors. These sites’ graphics and page layouts are integrated with other features, such as navigation systems, custom applications, editorial style, and so forth.” Information Architecture, Louis Rosenfeld The web is built on the model of pages, with each individual page contributing to the overall quality and effectiveness of the site.
Page Content and Layout
Page 5
4.1 Layout tables Many websites use tables to control the positional presentation of content on web pages. The use of tables for layout increases the file size of the page and can cause accessibility problems. An increasing number of designers have stopped using tables for this purpose and are opting instead to use Cascading Style Sheets (CSS) to control the presentation of web page content. 4.2 Web conventions Layout conventions for web pages (eg, headings at the top, site navigation across the top of the page and/or in a column down the side) are beginning to develop. While it is not essential to keep to these conventions, page layout is a major contextual clue for users of a site and so it should be consistent throughout the site. For more information see Website Navigation 4.3 Screen real estate Most web use is goal-directed with people looking for information and products. The greatest proportion of the screen should be devoted to providing users with the content that meets their needs. Avoid wasting space on image making and navigation. This can be a significant problem with framed sites where a relatively large frame, which is permanently displayed, is devoted to promoting the organisation at the expense of the content. 4.4 Page fold A significant proportion of web users look only at the opening screen and do not scroll down for additional information. In newspapers the headline stories are traditionally presented “above the fold” that is in the top half of the front page. The same principal applies to web pages, although the position of the ‘fold’ varies according to the screen resolution and browser used to view the page. It is generally a good idea to present all important information and links in the top 500 pixels of a web page. 4.5 Fonts Ensure font size and type is easy to read with browser default settings and are used consistently throughout the site. While serif fonts like Times New Roman are better for printed text, it appears that sans-serif fonts such as Verdana and Arial are easier to read on the screen.
Page Content and Layout
Page 6
For more information see research report by Ralph Wilson, Text Font Readability Study at. http://www.wilsonweb.com/wmt6/html-email-fonts.htm Font style, size and colour should be controlled with Cascading Style Sheets (CSS1) rather than the tag. The accessibility of a site is improved by the use of relative rather than absolute values to determine font size. The use of absolute values such as point or pixel for font sizes should be avoided. 4.6 Page Width Ideally, the width of a web page and the sections it contains should not be set using absolute values. The page should be able to expand or contract so that the content can be displayed by the different screen resolutions that are now used. Many users are either reluctant to, or don’t know how to, scroll horizontally for information. All fixed-sized content such as data tables, graphs and captions, should be contained within the width of the screen display with a browser setting of 800 x 600. 4.7 Animation and Flash Animation and Flash can slow down web pages and should be used only sparingly. Animation should be limited to highlighting the key focus of the site and the file size of the images should be kept as small as possible. Only use Flash introductions when it is appropriate to both the content of the site and the needs of site users. When Flash introduction pages are used, always include a ‘Skip Introduction’ option outside the Flash object. Avoid using moving, blinking, scrolling or flashing objects or pages. Some people with epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second range as well as quick changes from dark to light. 4.8 Frames The use of frames is not recommended and should be avoided. Frames can cause significant user problems. Framed pages can be hard to bookmark and print. Frames can also distort the presentation of a page causing some elements to disappear off the edge. If frames are used, ensure the content is still navigable with a browser that does not understand frames by providing alternatives within the tags.
Page Content and Layout
Page 7
5. Presenting long documents Long published documents are sometimes also made available on agency Web sites. Many people find long Web pages hard to read on a computer screen. The following tips will help improve the usefulness of long documents: • • • • • • Every publication should be tagged with metadata. Use publication templates to achieve consistency and facilitate developing and maintaining your electronic documents. Facilitate navigation through a lengthy document by providing a table of contents with hyperlinks to sections of the document. Provide a printable version of lengthy documents, with options to print the whole document or a section of the document. Provide the option to download very large documents for local viewing or printing. Use an accessible format (html, rtf) for all publications and test them for accessibility before publishing. For publications such as Annual Reports that are presented as PDF files, provide an alternative accessible method of obtaining the information. For more information see PDF and Accessibility.
Where it is not cost effective to publish a document electronically (eg. a long document that is rarely used), provide an online summary of the document to inform users of its existence. This will enable the document to be found by search engines and it will allow your customers to ascertain whether they wish to pursue further information. Recommended books • • • • • Information Architecture for the World Wide Web, by L. Rosenfeld and P. Morville. The Art and Science of Web Design, by Jeffery Veen. Don’t Make me Think, by Steve Krug. Designing Web Usability : The Practice of Simplicity, by Jakob Nielsen. Web Navigation: Designing for User Experience, by Jennifer Fleming
Page Content and Layout
Page 8