4 Design and layout of digital publications (HTML format)

4.1 Technical specifications

Digital publications have specific graphic requirements.

The FAO logo must be displayed at the top left (top right for the Arabic version) and measure 40 pixels (in height) for desktop use and 35 pixels (in height) for mobile use. The FAO logo block can be used in FAO blue, black or white. Vector format is preferred. Usage of the FAO logo is governed by the FAO logo policy and guidelines. Refer also to FAOSTYLE: English for layout standards. 

The footer must contain the following hyperlinked sections:

• Citation and copyright (links to the publication’s copyright page);
• Terms and conditions (links to https://www.fao.org/contact-us/terms/);
• Data protection and privacy (links to https://www.fao.org/contact-us/data-protection-and-privacy/); and
• More information (links to the publication's preview page in the FAO Knowledge Repository).

To keep file sizes as light as possible (which will increase loading speed while retaining adequate quality for high-density screens), full-width images should not exceed a physical width of 2500 pixels and a size of 800 kilobytes. Internal content images should not exceed 1200 pixels width and 400 kilobytes. 

Prefer fonts that are easy to read, accessible and have enough variation in font weight for your design purposes. Sans serif fonts are preferable to serif fonts. Body text size should be around 16 pixels (depending on font design), while smaller text should not be less than 12 pixels. Line height should be around 120–150 percent of font size.

Ensure that the colour contrast ratio is at least 4.5:1 for normal text and 3:1 for large text (defined as 18pt or 24px or larger), and that graphics and user interface components have a contrast ratio of at least 3:1. Make sure that figures provided by the authoring team comply with the colour contrast requirements. 

WAVE (Web Accessibility Evaluation Tool) or a similar tool can be used to check the compliance of the HTML publication with accessibility principles.

4.2 Workflow

The workflow related to the design and production of a digital publication can be summarized as follows:

1. An initial briefing covers objectives of the publication, visual direction, and editorial requirements.
2. The designer presents the agreed number of design mock-up proposals (plus wireframes for more complex publications). The mock-up proposals should include model layout and user experience for all significant pages (homepage, chapter openings, internal pages, etc.) and must be fully navigable and accessible.
3. The designer implements any feedback provided by the authoring team. 
4. The authoring team approves the final visual identity and user experience by signing off on the mock-up.
5. The approved mock-up is submitted to a web developer. Any questions or clarifications about implementation are addressed.
6. Visual assets are prepared for the web developer.
7. The authoring unit provides complete, cleared, edited and proofread content to the web developer.
8. The web developer codes and develops any animations, forms and interactive elements. 
9. The authoring team, along with the designer, tests and provides feedback to the developer for up to three rounds of updates to finalize the layout and functionality of the product.
10. The final check of a live version of the product is made by the authoring team, along with the designer.
11. The developer prepares the file bundle for upload to the FAO Knowledge Repository.

4.3 Inputs for the designer

At the beginning of production, the project manager in the authoring team should provide the designer with:

• a finalized and approved manuscript (usually a clean Microsoft Word file where all tracked changes and comments have been removed, except for comments directed specifically towards the designer);
• specifications such as output formats requested (HTML, EPUB, etc); 
• official logo files; 
• source files for any figures or tables that have been created (e.g. Microsoft Excel for charts and graphs, or vector format for graphics);
• any existing animations, videos or other interactive elements;
• high-resolution files for any photos or images that have already been selected;
• mock-up of the existing web design template, if one is being used; 
• source files (full InDesign package) if the publication is being converted from an existing PDF; and
• a timeline, agreed upon in advance by the authoring team, the designer and the web developer.

4.4 Design of a new web template

4.4.1 Digital-first publications

A digital-first publication is a publication that is designed and produced from the outset as a digital product. The workflow is therefore tailored to the production of the HTML version. A PDF adaptation may follow, if requested.

4.4.2 Digital publications converted from PDF

This refers to a publication already planned as or published in PDF format that is being adapted to HTML while preserving both the design and content of the original version. The designer will create a mock-up to be sent to the web developer responsible for the coding of the template. In adapting to the new format, the designer should aim to maintain the integrity of the original design while adjusting as needed, such as selecting appropriate fonts to enhance readability.

4.5 Digital publication from an existing web template

Source files of the existing web template should be provided by the authoring team directly to the web developer; these must be editable files, including all relevant graphic resources.

4.6 Finalization of design mock-up and delivery to the web developer

Upon approval, the mock-up will need to be finalized and prepared for the developer, along with all necessary assets. Organize the files in a logical structure and provide detailed instructions to the developer on how to use the provided files for design implementation.

This includes: 

• the source files of the mock-up (Adobe XD or Figma software is recommended) – make sure to share it with appropriate viewing or editing permissions;
• all visuals embedded in the mock-up, such as graphics, images (JPG, WebP or PNG format), graphs, infographics, logos and icons (SVG format);
• fonts (indicate whether non-Google or non-Adobe fonts were used) – ensure you have permission to distribute the fonts, or provide legal alternatives; and
• any other items requested by the web developer.

4.7 Quality control of the web template

Before the finalization of the template, the designer should liaise with the web developer to perform checks during the HTML development process to ensure consistency between the original design provided to the web developer and the final version.