Guidelines are recommended course of action in support of a set of principles and specific to a particular area. It provides advice to assist in accomplishing a given task.
1.2 Quality criteria of Web sites
There are some simple objective indicators of the quality of information on Web sites that can help frame general guidelines. For instance, quality can be judged in terms of accuracy, timeliness, usability and retrievability of the contents of a Web site.
2.2 Roles in Web publishing
New technology has changed some of the traditional roles involved in producing and disseminating Web information.
Depending on the size and complexity of the site to be built (and maintained), one person may perform multiple roles. The list on page 2.2 Roles in Web publishing can help ensure that all needed skills and responsibilities are represented on the Web site development team.
2.5 Language coverage policy
A Web site being launched should be available in at least three FAO languages. However, as requested by Member Nations, it is recommended to publish the Web site in all six FAO languages. See the FAO Web Quality Assurance Checklist for more information.
Minimum current guidelines for language policy
To comply with Member Nations' request that all Web sites be published in all FAO languages, staff should ensure that the Web site's home page (at least) is translated into the six languages. This is also so that the metadata record for the site can be included in the FAO search engine, the Information Finder.
2.6a FAO Web sites: the user perspective
For a Web site to be successful and useful it is highly important to identify the target users and their requirements.
2.6b When should you conduct user research?
Web site projects should be based on information derived from user research. Critical points at which to conduct user research are:
- Gathering initial requirements.
- Monitoring the success of a Web site.
- Validating the introduction of a key feature or area.
2.6c Designing for the user
When you plan and design a Web site, focus on what your intended users want to do with the information on your site, not only on what you want to say. For example, one way to serve your users is to avoid structuring your site like an organigram of your service or division. Identify what users want to obtain from your site and what problems they are likely to solve with the information you offer. Organize the information according to their objectives
2.6d Page size and downloading
While there is no standard assumed for the connection speed of target users, it is current practice to keep file sizes as low as possible to allow for reasonable download speeds.
It is recommended to keep the home page under 60 KB (including all associated elements) and other HTML pages under 100 KB.
3.4 Identify resources
Developing the budget is usually the task of the Web site sponsor and/or the Web site manager, or whoever is managing the project. Three often-overlooked issues in planning include:
- ensuring that FAO-specific information management, technology and Web design requirements are correctly included in the terms of reference (TOR) of external consultants and suppliers;
- budgeting for translation; and
- Web quality and accessibility compliancy.
4.1 Developing a content inventory
A content inventory is useful in the planning stage of the development of a Web site. Collecting (and auditing) information about the content of your Web site will streamline the definition of the information architecture, the interface design and the technical requirements for implementation.
4.2 FAO content repositories - Selecting and sharing document and files
A content repository is a store of different types of items (e.g. documents, bibliographical records and images). Typically, they come with an administration/user interface that allows users to contribute, manage and share the items.
There are several repositories in FAO that can be used to manage content for Web sites and systems. Some of these repositories can be used to manage the entire workflow for releasing content on the Web.
4.3c How to embed basic metadata in the HTML 'head' section
Each metadata tag has a different purpose, but the overall objective of metadata on the Web is to facilitate discovery, retrieval and use.
Descriptive information about each Web page is to be included in the "head" section, i.e. the title (mandatory), keywords, description, author and other information. The metadata should be in the language of the Web page.
4.3e FAO standards for encoded metadata
Metadata standards promote a consistent manner in which metadata is created, managed and exchanged.
They are mutually accepted guidelines developed by professions, industries and/or national and international standard-making bodies. These standards are both human and machine-readable to allow automatic processing and creation of value-added services.
5.1 Review user needs
Before starting to design your Web site (based on the data collected and the decisions made during the planning and content collection and preparation phases), you should review the needs of the intended users of your Web site.
5.2a Identify Web pages and subject categories
A Web site is a combination of Web pages grouped loosely into subject categories that are normally displayed as a menu.
5.2b Define navigation
It is important that your site is easy to navigate. Consistency and predictability are the key. A user should be able to drill down for information and find their way back through the levels easily and intuitively. Disorientating your users is guaranteed to send them away from your site.
5.2c Define metadata and search requirements
Information architecture is about organizing information, whether this is visible in the design of Web pages (and their navigation) or not. It also implies the use of metadata to guarantee that the information can be found.
Metadata is commonly defined as data about data. Broadly, this means information about a document and its content. The primary purpose of metadata is to improve resource discovery through keywords, descriptions, author, etc.
5.3 Prepare interface design
You should only begin to think about the graphic design of the site once you have identified and gathered content, understood the scope and message of your Web site and defined the information architecture (specifically the navigation).
5.3a Corporate visual identity
Designers and developers are asked to use the following minimum parameters for FAO Web pages:
- 1,000-pixel fixed-width, except where the nature of the content calls for a liquid page
- blue identification / navigation column at left, including the corporate identity area in the top left corner
- link to FAO Home as the first item in the left menu
- search area shown on the FAO homepage -- this must not be altered, except when a dual search is employed -- that is, the ability to search either “All FAO” or “This site”
- gray language selection bar -- graphically identical to that of the FAO homepage -- should always be present at the very top of the page. No other language selection buttons or links should appear on the page. Within the gray bar, the text should be aligned left, approximately even with the text in the blue title bar just beneath. When a Web page is available in a limited number of languages, only the available languages should be shown in the language selection bar. Language options should appear in alphabetical order as determined in English. See guidelines on language policy for more information
- blue title bar just below the language selection bar, with the recommendation that the title bar text be general enough to cover a group of pages, and that page headlines do not simply repeat the text in the blue title bar. In special situations, such as a high-level event, the blue title bar may be omitted. For more information: FAO-Communication@fao.org
- Arial body font, left justified
- Arial bold headlines and subheads, left justified
- minimal use of capital letters in title bar, headlines, subheads, captions and navigation
5.3b Web site design usability principles
Colours can affect the usability of your Web site. Reading on a computer monitor can be difficult, so make sure your colour choices do not force the reader to squint! Most commercial Web sites use a white background with black text. Dark text on a light background offers the highest contrast and is the easiest to read. Finding text colours that contrast strongly with the background is important. If you deviate from this, make sure you have a good reason.
5.4 Define technical implementation
At FAO, there are a number of ways of producing Web sites using different technologies and tools based on approved standards. Obviously, the choice depends on the type of site you are creating (static, dynamic or hybrid) and the kind of information you want to display (text, maps, statistics, photos etc.).
5.5 Tracking design implementation
During the design stage, work can be quite creative involving brainstorming and occasional iterations. Things can change at a rapid pace, and in some cases, decisions are made implicitly. Documenting final agreements (what has been done and why) is important to communicate progress to the Web site sponsors (for review and clearance) and to the team, particularly those who will be involved in development and construction.
Each one of the design steps can produce its own deliverables, which need tracking.
6.2a HTML and XHTML
The HyperText Markup Language (HTML) is designed for the presentation of information on the World Wide Web, using a Web browser. HTML evolved from the need to share documents on the Internet and render them meaningfully on different browser platforms. It was originally created by Tim Berners-Lee when he was working on the first concepts of the Web at CERN in the late 1980s.
XHTML (Extensible HyperText Markup Language) is almost identical to HTML 4.01 - it consists of all the elements in HTML 4.01 combined with the syntax of XML. XHTML is a stricter and cleaner version of HTML.
6.3 Use of style sheets
Cascading Style Sheets (CSS) describe how documents are presented on screen or in print. When combined with structural markup language such as HTML, XHTML, or XML, the CSS provides Internet browsers with the information that enables them to present all the visual aspects and elements of a Web document.
Thus, by using CSS, it is possible to separate out document presentation from document content.
6.4b Use of images on the Web
Not all graphic formats are suitable for the Web. The most commonly used formats are GIF and JPEG, as they are supported by all browsers and can produce images and photos with a very small file sizes.
6.5 Conversion of electronic documents
Converting electronic documents into other formats is not always an easy task. The most common procedure is to convert a Word document into PDF, which is an easy step if you have Acrobat Distiller (part of the full Adobe Acrobat package) or CutePDF (a free tool that converts Word documents into simple PDF files).
6.5a Converting Word documents into PDF
This is the easiest procedure. You can do it with CutePDF or Adobe Acrobat.
6.6a Guidelines for language encoding - What is character encoding?
Character encoding is the organization of a set of numeric codes that represent all meaningful characters (single letter, digit, space, punctuation, etc.) of a script system in memory. Each character is stored in memory as a number (e.g. A = 65). When a user enters characters, the user's key strokes are converted to character codes. When the characters are displayed on the screen, the character codes are converted to the glyphs of a font.
In most character encoding standards, the character set changes to represent the language being used, so the upper-level characters may include symbols, accented Roman letters, Cyrillic or other characters, depending on the character encoding chosen. For example, the character Ó in the Macintosh Standard Roman Character Set is in the same code point (205) as the equal sign (=) in Windows extended ASCII encoding.
6.6b Multilingual interfaces
One Web page cannot refer to more than two different character sets at the same time. Therefore, the only way to correctly display various languages on the same Web interface is to use Unicode, particularly if there are Asian languages or Arabic.
6.7d Avoid spamming on e-mail addresses
There are some basic options to avoid receiving spam through your online FAO e-mail address. Unfortunately, for accounts like Webmaster@fao.org (and others published on the Internet), it is probably too late to prevent spam. For new accounts, there are options worth implementing.
6.8a How to prepare print-safe Web pages using CSS
Most of the problems of incorrectly printed Web pages are associated with the use of HTML tables. Therefore, it is recommended to limit the width in these tables to 600 pixels, which is the maximum area needed to print safely on an A4 page (portrait orientation).
If the tables in a Web page need to have a fixed width exceeding 600 pixels, alternative style sheets (CSS) could be used, one for the screen and one for printing purposes.
6.8b Other ways of preparing print-safe Web pages
If you are using a content management system, the system can be configured to produce a print-friendly version of the page. In this case, make sure that each Web page contains a link to the print-friendly version.
If your Web site is developed using dynamic pages such as ASP and you want only a selected area of the Web page printed, you can do so by enclosing the area in a special tag named <sp> (and </sp> to close the section) and including two special ASP files in the folder of your current Web site (printlink.asp and print.asp).
6.11a Recommended editing tools for Web site construction
Adobe Dreamweaver is an editing tool that is used at FAO to build Web sites and develop applications. It includes CSS designer, cross-browser validation, inline image editing and MS Office cut and paste.
TopStyle is a CSS/XHTML/HTML Editor.
Altova XMLSpy is the industry standard XML development environment for modelling, editing, debugging, and transforming all XML technologies, then automatically generating runtime code in multiple programming languages.
6.11b Graphics, document and conversion tools
- Adobe Photoshop
Adobe Photoshop software is an image editing tool which graphic designers use to create images such as banners or to prepare photos for publication on a Web site.
- Adobe Acrobat
Adobe Portable Document Format (PDF) is the standard for secure, reliable electronic document distribution and exchange. The software is used throughout FAO for the publication of online documents. Adobe PDF files look exactly like original documents and preserve the fonts, images, graphics and layout of any source file - regardless of the application and platform used to create it.
GIMP - which stands for the GNU Image Manipulation Program - is a software graphics editor with very similar capabilities and many of the same features to Photoshop. GIMP offers a full range of editing tools and is free for anyone to download.
8.1 Quality assurance before release
Before release, ensure that your Web site has been thoroughly reviewed and is consistent with the FAO House Style and the FAO Web Quality Assurance Checklist.
8.2 Promotion Guideline
It's great to have a new Web site, now you have to publicize it! Promoting your site with partners and external audiences is just as important as promoting it within FAO. Search engines count the number of times a page is linked to by other sites when they rank an entry on the results page.
There are several easy ways of promoting your site that do not require large budgets or hours of labour.
9.1a Maintaining quality and accessibility
Ensure internal and external links continue to work (use link checking software to automate this) and are up to date, e.g. e-mail addresses are correct and the copyright link uses the current year.
If you have renamed, moved or deleted your Web pages, use URL redirection. A redirect prevents users from receiving an error (when they visit a page that no longer exists) by automatically transferring the user to another page.
9.1b Content freshness
Review the validity of your content, e.g. last updated dates and contact details. Ensure news and events pages, recent publication lists, forthcoming meetings, site maps, etc, are kept up to date and archives maintained. Having a contact e-mail address can be helpful so that visitors to your site can provide feedback if they spot errors or out of date information.
9.3 Web usage analysis
Web Usage Analysis is provided by CIOK and in this context refers to the usage of FAO owned Web sites by the global Web user community.
CIO monitors the Web site and generates automated reports from the logs of the Web servers and maintains and configures Google Analytics profiles.
To request statistics for your site, including specific directories or any special requirements your site may have (e.g. aliases, redirects and multiple locations), contact: firstname.lastname@example.org.
Statistics on visits, visitors, top pages etc. can help you understand what visitors do on your Web site, help you spot its strengths and weaknesses, and take any needed action to improve the site, information and service for your visitors.
From traffic analysis you can also obtain data on the types of computer and browser your visitors used to access your site.
9.4 Evaluation of Web sites
The evaluation of the use of a Web site is an important and often overlooked step. It helps to identify areas of the Web site to adapt to the intended users.
A number of methods of evaluation can be used - they can highlight different aspects of the user experience. Deciding which to use may be determined by the resources available for both evaluation and the subsequent re-design.