Instructions for Web Content Creators and Web Editors Web Transformation design extensions

Transcription

1 Web Services and Information Policy Instructions for Web Content Creators and Web Editors Web Transformation design extensions Version 1.2 December 2013 I:\UIWS\Projects\Web Transformation Program\Projects\Completed\2012\Web Foundation\Design extensions instructions\design extension instructions V1.2.docx

2 Instructions for Web Content Creators and Web Editors V1.2 Table of Contents 1 Overview Writing content for the web Selecting the right layout for your content Landing page layouts Content page layouts Fixed vs flexible/optional page elements Stacking order of modules Layouts Lower level landing page (simple) Lower level landing page (context) Lower level landing page (links) Content page Content page (promo) Modules Video text Promo Related links Browse link News listing Events listing Inline image FAQ Call to action link Map module Accordion module Further information Version: 0.1 Page 2 of 33

3 1 Overview These instructions provide guidance in the creation of content and use of the following page layouts, modules and other page elements: Layouts: 1. Lower level landing page (simple) 2. Lower level landing page (context) 3. Lower level landing page (links) 4. Content page 5. Content page (promo). Modules: 1. Browse link 2. Video text 3. News listing 4. Events listing 5. FAQ 6. Related links 7. Promo 8. Inline image 9. Maps 10. Accordion Other page elements: 1. Short description 2. Extended description 3. Call to action link. These instructions and supporting videos can also be found on the RMIT website. Page 3 of 33

4 2 Writing content for the web Effective web content is: Audience-specific Consider the user personas that your content is targeted at. Provide content, based on user tasks, that is factual and accurate. Scannable Users skim content rather than reading content. The most important content needs to be located at the top of the page. Content should be broken up into small chunks, using headings to group like content and to aid scanning. Use lists where possible and tables for tabular data. Links should be meaningful and the link destination clearly understood from the link text alone. Concise Present the user with one topic per page and one idea per paragraph. Use short sentences and avoid using unnecessary words. Readable Use clear simple language and a firm but friendly tone. Use of engaging first and second person (i.e. we, you) is preferred. Use an active voice. Findable There s no point in writing great content if nobody can find it. Ensure that keywords are used in page titles, descriptions and keyword metadata fields as these are used by search engines. Please refer to the Writing for the web instruction for more details contact Web Services for a copy. Page 4 of 33

5 3 Selecting the right layout for your content To select the right layout for your content you need to assess user needs, tasks and goals. Determine whether your page is a landing page or a content page: Landing pages provide users with limited detail and multiple options for onward journeys to related detailed content. Landing pages are designed to be simple rather than containing lots of detail. o Are arrival pages o Represent a website section o Provide an overview of content beneath o Do not contain unique content o Three basic styles plus optional elements. Content pages provide detailed content on a specific subject. o Are where the information is delivered o Typically focus on text information o May have further content beneath (child pages). 3.1 Landing page layouts When selecting a layout for your landing page use the table below to select an appropriate layout. Template Landing page (simple) (4.1) Landing page (context) (4.2) Landing page (links) (4.3) Recommended use For well-defined navigation: If the titles of the child pages require no explanation and give clear onward journeys. For navigation that needs explanation. If the titles of your child pages need to be supported with a brief description to assist the user in selecting the right option. For navigation based on completing tasks. If your landing page is task focused with links to tools and information. 3.2 Content page layouts Use the Content page layout (3.2) if you are providing detailed information about a specific topic. A content page can have child pages without having to adopt the landing page template. These pages are customisable using various optional modules (5). Modules must be relevant to the content. For an example of a content page with Promo module (see 4.6). 3.3 Fixed vs flexible/optional page elements For landing pages: Fixed Flexible/optional Page title Splitter module (simple, context or links) Subnavigation Short description Extended description Inline image module Call to action link Page 5 of 33

6 Browse link module Video text module News listing module Events listing module FAQ module Related links module Promo module For content pages: Fixed Page title Short description Extended description Subnavigation Flexible/optional Inline image module Call to action link Browse link module Video text module News listing module Events listing module FAQ module Related links module Promo module 3.4 Stacking order of modules Below is the suggested order in which to place optional modules on your pages. 1. Page title 2. Short description (optional) 3. Extended description (optional) 4. Splitter module (for landing pages only) 5. Call to action link (optional) 6. Browse links module (optional) 7. Video text module (optional) 8. Map module (optional) 9. News/Events listing module (optional) 10. FAQ module (optional) 11. Related links module (optional) Notes: Inline image modules (optional) should be placed adjacent to relevant content or as a hero image at the top of a page. Promo modules are automatically placed below the subnavigation. Page 6 of 33

7 4 Layouts There are 3 splitter module options available for use on lower level landing pages: Simple Context Links. 4.1 Lower level landing page (simple) Simple landing pages are designed to make onward journeys for users as quick and easy as possible. Choose this option for landing pages that: Require little explanation Offer clear, simple options Have unambiguously labelled child pages Serve to quickly deliver the user to the content pages underneath. The Simple splitter module of a lower level landing page allows you to: clearly set out the options for your users onward journey provide the titles of the child pages which also act as links to this content. Avoid the use of optional modules as to keep the page content simple. See the GUI design manual for specific examples of page layouts. Page 7 of 33

8 Page title Short description Simple splitter module Page title The page title should grab attention, should include keywords, be clear and concise and avoid jargon. See Information Architecture Guidelines for more detail on page naming and information architecture. Character count: 85 characters over 3 lines. Short description (optional but highly recommended) Should introduce a topic, include keywords and encourage the user to continue reading. Please refer to the Writing for the web guideline. The short introduction should not contain any links. Character count: 130 characters over 3-4 lines. Simple splitter module Splitter modules are designed to show a collection of child pages representing the local IA of a site. There are four variations; Image, Simple, Links and Context. Splitter boxes should mirror the child pages in the information architecture (IA). Page titles used in the splitter boxes must match the page titles used in the IA. These should be placed in the splitter boxes from left to right. Splitter boxes cannot be used to house anchor links, links to external sites or media assets as this content does not reflect the IA. Maximum of 8 splitter boxes per page. The Simple splitter module shows the title of the child page only. It is designed to make the choice of next page as simple as possible for users, and to get them where they need to go quickly. Page 8 of 33

9 Simple splitter page title Must match the title of the child page it is pointing to. Character count: 24 characters over a single line. Note: For a list of all optional modules see section 3.3 (mandatory vs optional modules). 4.2 Lower level landing page (context) Lower level landing pages (context) include additional text to explain the contents of the child pages. Choose this option for landing pages that: Require explanation of context Represent a complex content offering underneath Need to clearly explain and showcase the content in this area. The Context splitter module of a lower level landing page allows you to: clearly set out the options for your users onward journey provide the titles of the child pages provide a description to help the user understand what the child page is about link to the child page using a call to action. See GUI design guidelines for specific examples. Page 9 of 33

10 Page title Short description Extended description Context splitter module Promo module (Side promo image) News listing module Related links module Promo module (Footer 1 column) Page title The page title should grab attention, should include keywords, be clear and concise and avoid jargon. See Information Architecture Manual for more detail on page naming and information architecture. Character count: 85 characters over 3 lines. Short description (optional but highly recommended) Should introduce a topic, include keywords and encourage the user to continue reading. Please refer to the Writing for the web guideline. The short introduction should not contain any links. Character count: 130 characters over 3-4 lines. Extended description (optional) Should follow on from the Short description and further introduce a topic. This paragraph can contain additional important information the user needs to view before making an onward journey. Please note that this text is optional. Page 10 of 33

11 Character count: 130 characters over 3-4 lines. Context splitter module Splitter modules are designed to show a collection of child pages representing the local IA of a site. There are four variations; Image, Simple, Links and Context. Splitter boxes should mirror the child pages in the information architecture (IA). Page titles used in the splitter boxes must match the page titles used in the IA. These should be placed in the splitter boxes from left to right. Splitter boxes cannot be used to house anchor links, links to external sites or media assets as this content does not reflect the IA. Maximum of 8 splitter boxes per page. The Context splitter module shows the title of the child page as well as additional text (description) to explain the content. Context splitter page title Must match the title of the child page it is pointing to. Character count: 20 characters over a single line. Context splitter description The description should be a short, concise, simple language description of what can be found on the destination page, either adding additional explanation of the topic or mentioning key tasks that can be performed. Character count: 90 characters over 3 lines. Context splitter call to action The call to action should be written in the active voice, beginning with a verb or a subject, to encourage the user to act on the message as well as understand the link destination. Character count: 37 characters over a single line. Promo modules (optional) See section 5.2 for details. News listing module (optional) See section 5.5 for details. Events listing module (optional) See section 5.6 for details. Related links module (optional) See section 5.3 for details. Footer promo module (optional) Not yet available. Note: For a list of all optional modules see section 3.3 (mandatory vs optional modules). Page 11 of 33

12 4.3 Lower level landing page (links) Links splitter landing pages are useful for organising task-oriented pages. Use this layout for pages that provide utility and productivity tools. Choose this option for landing pages that: Need to provide utility Need to support productivity (quick access) Have many levels of content beneath. The Links splitter module of a lower level landing page allows you to: clearly set out the options for your users onward journey provide the titles of the child pages provide the top 4 links to grand-child pages link to the child page using a call to action. Page 12 of 33

13 See GUI design manual for specific examples. Page title Short description Links splitter module Page title The page title should grab attention, should include keywords, be clear and concise and avoid jargon. See Information Architecture Manual for more detail on page naming and information architecture. Character count: 85 characters over 3 lines. Short description (optional but highly recommended) Should introduce a topic, include keywords and encourage the user to continue reading. Please refer to the Writing for the web guideline. The short introduction should not contain any links. Character count: 130 characters over 3-4 lines. Page 13 of 33

14 Extended description (optional, not shown) Should follow on from the Short description and further introduce a topic. This paragraph can contain additional important information the user needs to view before making an onward journey. Please note that this text is optional. Character count: 130 characters over 3-4 lines. Links splitter module Splitter modules are designed to show a collection of child pages representing the local IA of a site. There are four variations; Image, Simple, Links and Context. Splitter boxes should mirror the child pages in the information architecture (IA). Page titles used in the splitter boxes must match the page titles used in the IA. These should be placed in the splitter boxes from left to right. Splitter boxes cannot be used to house anchor links, links to external sites or media assets as this content does not reflect the IA. Maximum of 8 splitter boxes per page. The Links splitter module shows the title of the child page as well as links to deeper content. Each splitter box can contain links to up to 4 key tasks that users may need to perform. If tasks are seasonal, links can be adjusted accordingly. Links splitter page title Must match the title of the child page it is pointing to. Character count: 21 characters over a single line. Links splitter links Up to four priority links to child pages. When selecting the pages to include as a link consider personas and user tasks. Child page link text must match the grandchild page it is pointing to. Character count: 29 characters over a single line. Up to 4 high priority grandchild page links per box. Where essential link text breaks over 2 lines, reduce the listed links to 3. Links splitter call to action The call to action should be written in the active voice, beginning with a verb or a subject, to encourage the user to act on the message as well as understand the link destination. Character count: 37 characters over a single line. Note: For a list of all optional modules see section 3.3 (mandatory vs optional modules). 4.4 Content page Content page layout for detailed content. Text content including: Short description Extended description Subheadings Bullets. Text content can be supported by the addition of relevant optional modules (see 4.5). Page 14 of 33

15 See GUI design manual for specific examples. Page title Short description Extended description Inline image module Video text module News listing module Related links module Page title The page title should grab attention, should include keywords, be clear and concise and avoid jargon. See Information Architecture Manual for more detail on page naming and information architecture. Character count: 85 characters over 3 lines. Short description Should introduce a topic, include keywords and encourage the user to continue reading. Please refer to the Writing for the web instruction. The short introduction should not contain any links. Character count: 130 characters over 3-4 lines. Page 15 of 33

16 Extended description Should follow on from the Short description and further introduce a topic. This paragraph can contain additional important information the user needs to view before making an onward journey. Please note that this text is optional. Inline image module (optional) Please refer to the Image procedure for advice on image selection. See section 5.6 for details. Video text module (optional) See section 5.1 for details. News listing module (optional) See section 5.5 for details. Events listing module (optional) See section 5.6 for details. Related links module (optional) See section 5.3 for details. Note: For a list of all optional modules see section 3.3 (mandatory vs optional modules). 4.5 Content page (promo) Example of a content page with optional modules added to support the content. See GUI design manual for specific examples. Page title Short description Extended description Page 16 of 33 Promo module (Side promo image)

17 Page title The page title should grab attention, should include keywords, be clear and concise and avoid jargon. See Information Architecture Manual for more detail on page naming and information architecture. Page 17 of 33

18 Character count: 85 characters over 3 lines. Short description Should introduce a topic, include keywords and encourage the user to continue reading. Please refer to the Writing for the web guideline. The short introduction should not contain any links. Character count: 130 characters over 3-4 lines. Extended description Should follow on from the Short description and further introduce a topic. This paragraph can contain additional important information the user needs to view before making an onward journey. Please note that this text is optional. Promo module (optional) See section 5.2 for details. News listing module (optional) See section 5.5 for details. Events listing module (optional) See section 5.6 for details. Related links module (optional) See section 5.3 for details. Note: For a list of all optional modules see section 3.3 (mandatory vs optional modules). Page 18 of 33

19 5 Modules 5.1 Video text Video text modules are optional and should be used to support the main content if required. Use only one video per page. The Video text module allows you to: embed a video in your web page provide the title and description of the video link to related content if needed. Video title The title should aim to intrigue the user while still remaining clear as to what the video is about. If using a YouTube video, the video title must match the title of the video in YouTube. If this is not appropriate, the title must be changed in YouTube to match the title to be used in the module. Although RMIT or RMIT University may be used in the title in YouTube, this can be dropped from the title used in the module as this is implied once the video is embedded into our website. Character count: 33 characters over 3 lines. Where essential title text breaks over 4 lines (44 characters), reduce the description to 3 lines. Video description The description must accurately inform the user of the content of the video, providing a clear purpose for watching it. Character count: 45 characters over 3 lines. Video call to action (optional) The call to action should be written in the active voice, beginning with a verb or a subject, to encourage the user to act on the message as well as understand the link destination. The call to action may link to additional related videos or related content pages. Character count: 20 characters over a single line. Please refer to the Creating video, audio and animation procedure when adding this content to the website. Page 19 of 33

20 5.2 Promo Promo modules are displayed on the right hand side of a web page and should contain content that is seasonal and supports your main content. Use the less is more approach when adding the Promo module to your page. Promos should have clear titles to inform the user as well as strong calls to action to entice them to act on the message. There are four types of promos to select from: Side promo (image) Side promo (medium text) Side promo (small text) Side promo (alert). There is a limit of up to three Side promo modules per page. Use only one image promo per page. Use a combination of medium and small text promos for equally weighted messages. Use the variations to reflect the hierarchy of the messages on the page (e.g. image, medium, small). The Alert (red) style should be used sparingly for site-wide messages only. Promos should only contain one link to a specific target page and should not be used to link to media assets or external applications/sites. Side promo (image) module Use only one Side promo (image) module per page. Side promo image Images should illustrate the subject matter in a way that clearly tells the story. Image specs: Width: 180 pixels Height: 135 pixels (ideal), maximum 200 pixels, minimum 100 pixels Side promo title Promo titles should reflect the target page title. Character count: 27 characters Side promo call to action The call to action should be written in the active voice, beginning with a verb or a subject, to encourage the user to act on the message as well as understand the link destination. Character count: 16 characters Page 20 of 33

21 Side promo (text) Side promo (medium text) Side promo (medium) title Promo titles should reflect the target page title. Character count: 27 characters Side promo (medium) call to action The call to action should be written in the active voice, beginning with a verb or a subject, to encourage the user to act on the message as well as understand the link destination. Character count: 16 characters Side promo (small text) Side promo (small text) title Promo titles should reflect the target page title. Character count: 48 characters Side promo (small text) call to action The call to action should be written in the active voice, beginning with a verb or a subject, to encourage the user to act on the message as well as understand the link destination. Character count: 16 characters Side promo (alert) Side promo (alert) title Promo titles should reflect the target page title. Character count: 27 characters Side promo (alert) call to action The call to action should be written in the active voice, beginning with a verb or a subject, to encourage the user to act on the message as well as understand the link destination. Character count: 16 characters Page 21 of 33

22 Using alt text on images in promo modules For decorative images, the hover (alt) text must be left blank. Insert a blank space, otherwise the publishing system will default this to a media clue. For images with text, the hover (alt) text should be the same as the text on the image. In these cases, the hover text, the title and the 'read more' should have a meaningful flow for users. However you should avoid using images with text where possible. 5.3 Related links Related links modules should be used to house links to media assets, cross-links to other areas of the RMIT website or links to external sites that relate to the content on the page. If link text is lengthy causing the link to wrap over two lines, use only two links in that column. Inform the user if linking to an external application/site by including Launch in your link text, i.e Launch myrmit. Select the appropriate option for your content from the two variations available. See also Browse link module (5.4). Related links (single row) If you have three or less related links to add to a page. Up to 3 links maximum. These links appear in a single row. Character count: 30 characters over a single line. Related links (3 column) If you have four or more links to add to a page. Up to 9 links maximum. Columns should be filled up before starting a new one. Do not add links for the purpose of filling up the space. Character count (each link): 30 characters over a single line. Page 22 of 33

23 5.4 Browse link Browse link modules can be used to house links to media assets, or alternatively child pages, where the onward journey is to either download a document or browse through the various options. These links should sit directly below the main content. Subheadings can be used to group documents. Examples include links to program brochures and meeting minutes. File name, type and size must be included. Please refer to the Writing for the web instruction when creating these links. See also Related links module (5.3). Browse link (2 column) 4 links maximum. Character count: 40 characters over 2 lines. Page 23 of 33

24 5.5 News listing A dynamic feed of the latest 3 related news items. News items should clearly relate to the topic of the page. News items should clearly relate to the topic of the page. A link to more news should always be included. News listing modules can be used interchangeably with the Event listing module. These can also be placed together on a page. The News listing module should be placed below the main content of a page. If adding other optional modules, please place the News listing modules in the suggested order found in the Design extension instructions. Page 24 of 33

25 5.6 Events listing A dynamic feed of the latest 3 related events. Events should clearly relate to the topic of the page. Event items should clearly relate to the topic of the page. A link to more events should always be included. Event listing modules can be used interchangeably with the News listing module. These can also be placed together on a page. The Event listing module should be placed below the main content of a page. If adding other optional modules, please place the News listing modules in the suggested order found in the Design extension instructions. NB. There is a known bug when implementing the events module when updating a page that contains this module the event dates are wiped causing the module to display only old events. To deal with this issue, whenever you edit a page that has an event feed on it, you need to refill in the Start Date ad End Date fields again, in the page metadata. Make the Start Date: 1 and Make the End Date 365. This will show events from tomorrow up to 1 year in advance. You can change the end date to anything you like (up to 365), but a higher number is preferable, as the module will display the listings in date order. Page 25 of 33

26 5.7 Inline image Inline images should be used to support the main content of the page. Images should have a clear communication objective. Do not use Inline images for advertising and do not create links from the image or caption. Place adjacent to relevant content area (optionally place as hero image at top of page) An Inline image may be placed alongside of the Short description, above the splitter. There are 3 sizes to select from: 1/3 column 1/2 column 1 column. Inline images can be placed to the left or right of text content as appropriate. Captions Use captions, unless it s an identity graphic where description isn t necessary (e.g. logo, branding) Captions should intrigue the user and encourage them to look at the picture and from there continue reading through the page content. Provide enough information (who, what, where, when and why) without providing too many details. A caption should be enjoyable as well as informative. If accreditation (artist, photographer, source etc.) is required this should be incorporated into the caption text. Do not create links from within the caption. Inline image module (1/3 column) Character count (caption): 70 characters Image specs: Width: 231 pixels Height: 172 pixels (ideal), 308 pixels (maximum), 100 pixels (minimum) Page 26 of 33

27 Inline image module (1/2 column) Character count (caption): 70 characters Image specs: Width: 355 pixels Height: 266 pixels (ideal), 473 pixels (maximum), 200 pixels (minimum) Inline image module (1 column) Character count (caption): 75 characters over a single line. Image specs: Width: 725 pixels Height: 543 pixels (ideal), 543 pixels (maximum), 200 pixels (minimum) Page 27 of 33

28 5.8 FAQ The FAQ module is used to display a set of up to 6 related frequently asked questions. These can be manually or dynamically created (using a feed from AskRMIT). FAQs should clearly relate to the topic of the page. Page 28 of 33

29 5.9 Call to action link Should be strong and encourage an action as a clear onward journey. Limit one Call to action link per page only. Usually this module is used for a Contact us link. These should be placed directly below the main content of the page. Page 29 of 33

30 5.10 Maps The map module is available for use on events pages and other relevant pages where a map is required. The size of the map is 700 pixels wide (fixed) by 150 pixels high (preferred height - can be higher if needed) - see screenshot 1 below for an example of how it displays on a page. Screenshot 1 Follow the steps below to generate your map embed code: 1. Go to 2. Enter your location in the search bar (see screenshot 1) 3. On the left hand side click on the Link icon to bring up the embed code (see screenshot 1). 4. Click on the Customise and preview embedded map link 5. Choose a custom size of 700 pixels wide * 150 pixels high (see screenshot 2) 6. Select and copy the embed code into the module code replace everything from under Venue up until the closing </div> tag. Make sure it s formatted as an HTML code block. 7. Save your XML file, upload it and preview it to make sure it looks fine before publishing. It should display as per screenshot 1. Page 30 of 33

31 Screenshot 2 Screenshot 3 Page 31 of 33

32 5.11 Accordion The accordion design module displays a list of headings that when clicked reveal their associated content, and when clicked again, hide that content. Accordions help users scan pages which have multiple sections of closely related content, and quickly select the heading they are interested in. An example of an accordion is shown below. Accordions should: be used to hide small blocks of content, no more than a few paragraphs in length place the most important information first contain less than 10 headings. If your list contains more, consider creating subcategories or splitting your content across multiple pages. Accordions should not: be used simply to add visual appeal or interactivity to a page hide important content that that should be displayed to all users be used to fit content on a single page that would be better divided across multiple pages. Before using an accordion, first consider whether you can: reduce and simplify your content and use clear descriptive headings - this will assist users to scan your content quickly and may do away with the need for an accordion. divide your content logically across several pages - this may provide better search results, shorter pages, and clearer user journeys. This is an advanced design module. Contact webservices@rmit.edu.au to request the module and obtain the template. Page 32 of 33

33 6 Further information For further content creation guidance please refer to the: Web user experience policy suite o Information architecture procedure o Information architecture guidelines o GUI (Graphical User Interface) design guidelines Web content policy suite o Writing text content procedure o Writing for the web guideline o Image procedure o Creating video, audio and animation procedure Copyright and intellectual property policies and procedures suite. See: For assistance or enquiries please contact: Jo Argent Senior Content Analyst Web Services and Information Policy Extension: jo.argent@rmit.edu.au. Page 33 of 33