ONLINE COMMUNICATION SERVICES FACTSHEET - DESIGN Created by: Mark Selan Version 1.1 Date Last Modified: April 2008 DESIGN GUIDELINES FOR GENER8 WEBSITES The purpose of this document is to provide Online Communication Services staff (OCS), clients and graphic designers with information regarding the creation and selection of interface graphics for nonstandard intranet/internet websites. Boutique websites do not use the standard Department of Education and Children s Services (DECS) website design. BACKGROUND The majority of DECS websites exist within a Content Management System (CMS). Currently the CMS used by DECS is Gener8, a product maintained by Adelaide company, CDAA. Gener8 works in a framed environment, where a browser displays 3 web pages simultaneously; the banner frame, the navigation frame and content frame. There are a number of guidelines that will affect the design of a website; these guidelines are borne from DECS specifications (logo size, meta data), theories of useability (accessibility, use of graphics) and the Gener8 environment. BOUTIQUE WEBSITES Boutique websites are those websites which, having met a set of criteria, has received Online Governance Committee (OGC) approval to have a design outside the standard DECS design. The standard design can be seen at www.decs.sa.gov.au/docs/. For websites to have their own unique designs they must Be a special project Be under a directive of a CEO or Minister Be directed at a school children These specifications are for those sites that have been approved by OGC to have their own design but will use the Gener8 CMS. Adding Images to Web Pages Using the Gener8 System Version 1 August 2008 Page 1 of 7
THE GENER8 TEMPLATE The Gener8 template consists of 3 separate web elements which combine to create a web page. These elements are the Banner frame Navigation frame Content frame Banner Frame (incorporates Content Strip). Maximum total height of banner frame is 150px, this includes the content strip (if one is being used). Content Strip 27 px high Navigation Frame Content Frame Standard Width 180px Maximum Width 200px BANNER GRAPHIC REQUIREMENTS The banner frame is the top most portion of the website, running horizontally, across the breadth of the screen. In contains the website s title, the top level of navigation, called the content strip and the bulk of the graphic design. In consideration of the available area required for the content (in the content frame), it is recommended that the height of the top banner page elements do not exceed 150 pixels. The banner frame can contain a Content Strip bar which is a Gener8 navigation tool used to better direct customers to appropriate information. Sites incorporating a content group strip bar can only have a banner of 123 pixels high, as the strip is, itself, 27 pixels high. In conjunction with OCS staff, clients identify the minimum banner frame items required prior to commencement of the design phase of the project. For example, Home, Search and Contact us buttons or Search fields, these elements are specified in the Design Brief. The banner frame will contain the majority of the graphical elements that provide a website s distinct presence. The design acts as a mechanism to convey a feeling and connection with the end-customer. Before a graphic designer can commence, care should be taken when conceptualising the banner. Thought must be put in to who is the audience and what do they like?. The Design Brief, produced by OCS staff with the client, is used to answer questions on audience and style. It should be noted that, graphic intensive sites may be detrimental to the viewing experience of clients on slower connections. c:\documents and settings\selanm\desktop\visual standards factsheet.doc Page 2 of 7
SPECIFICATIONS FOR BANNER FRAME The height of the top banner page elements must not exceed 150 pixels in height. Sites incorporating a content group strip can only have a maximum banner size of 123 pixels, as the strip is 27 pixels high. It is important to remember that the above dimensions are the maximum allowed, but banners can be less than 123 pixels (but no less than 70 pixels to allow for the DECS logo) if desired. The graphic must incorporate liquid design so as to always fill browser windows larger than 800 pixels wide The DECS logo must comply with the State Branding Standards. Any graphic elements in this frame must have appropriate Alt tags except in instances where this would confuse any screen reader technology utilised by visually impaired users. Designs must meet accessibility guidelines in regards to image use and colour contrast between text colour and background. Very graphic intensive banners may not load quickly on school or home computers, download times must be considered. The use of images of people be socially inclusive DECS LOGO REQUIREMENTS Online Communications Services (OCS) will provide an accurate and high quality electronic logo (editable eps format) prior to commencement of the design phase of the project. The DECS logo can also be accessed by DECS staff, through the Public Relations intranet site at http://in.decs.sa.gov.au/publicrelations/ In brief The DECS logo must be in the top left corner The DECS Logo can not be altered in anyway The roundel can not be smaller than 50 pixels high The logo must be on a solid background No graphical elements may encroach the logo within 25% of the roundel diameter The logo can be a PMS295 blue, black, white or full colour (The full colour version can only be used on a white background) The roundel has the ALT text Go to the Minister s home page and links to www.ministers.sa.gov.au and the Logo text goes to www.decs.sa.gov.au and has the ALT text Go to the Department of Education and Children s Services Home Page For more information about using the DECS logo please visit the Public Relations subweb on the intranet; http://in.decs.sa.gov.au/publicrelations/ (Please note, this link is accessible only by staff with access to the DECS intranet.) ALT AND TITLE ATTRIBUTES OCS will ensure that the need for alternative tags (alt) and accessibility guidelines are discussed with the designers at project commencement. Accessibility guidelines are to be considered by taking into account non-graphic browsers, visually impaired and other minority user groups that may be utilising DECS websites. Alt and Title-tags are descriptions that appear as a Windows tool-tip upon mousing over an image, and are placed in the img tag during the coding process. The description should be accurate and succinct and be viewable on all graphics. Descriptive language should be c:\documents and settings\selanm\desktop\visual standards factsheet.doc Page 3 of 7
used when writing ALT tags. Any colours used should also provide a good contrast and allow viewing for colour-blind customers. Colour contrast should meet Level 2 standards using the Colour Contrast Analyser available as part of the Vision Australia Accessibility Toolbar; http://www.visionaustralia.org.au/ais/toolbar/. THE USE OF PHOTOS The Department of Education and Children Services is conscience of gender, age and race considerations, so when photos of people are used as graphical elements, an effort must be made to be inclusive and represent a wide range of the community. One solution is that a design can use a series of photos that are displayed one at a time, but change each time the website is loaded. In respect to technical aspects of using images, an effort needs to be made to ensure photos download quickly. NAVIGATION FRAME REQUIREMENTS The navigation frame runs vertically down the left side of the web page. It is the main navigation tool for the site, containing parent and child page items (the basic structure of pages in a Gener8 site). These items are sourced dynamically from a database. Tp provide more screen space for content, it is recommended that the left hand navigation frame elements do not exceed 200 pixels in width (standard width is 180 pixels). The navigation frame can contain a background image or other graphical elements but these elements can not interfere with the readability of the text based navigation items. The colour contrast between the font colour (of all hyperlink states; active, hover, visited) and background should meet Level 2 standards using the Vision Australia Accessibility Toolbar Contrast Analyser, http://www.visionaustralia.org.au/ais/toolbar/. While it is possible to have graphic based navigation in the Gener8 navigation frame, it is not advisable since it limits the control of the publisher over the content and hampers search engines. Graphic elements used as navigation will need to meet Accessibility standards such as having text alternatives and readability. The stylesheet for the navigation frame caters to defined elements such as the various states of hyperlinks (rollovers, active, visited, etc), as well as bullet types, as used by parent items, and general text colours. OCS will supply stylesheets to the designers. SPECIFICATIONS FOR NAVIGATION FRAME Graphic backgrounds for this frame have to function within a frame width between 175 pixels and 200 pixels (the standard width is 180 pixels). The Gener8 Content Management System permits vertical scrolling in this frame. If a background image is to be used in the Navigation frame, it must incorporate liquid design so as to always fill browser windows taller than 600 pixels high. The Business Unit or graphic designer can nominate (subject to approval by Online Communication Services) the colour of the text used for navigation items but it must be a colour that gives maximum visibility against the background colour/graphic of the navigation frame. The publishing system uses Arial font for navigation items. Navigation Frame Icons to indicate a drop down menu have a standard size of 12 pixels square which includes the space between the edge of the indicator element and the navigation text. c:\documents and settings\selanm\desktop\visual standards factsheet.doc Page 4 of 7
Examples that can be used are arrows, dots or stars with the colours used reflecting the hover and select state of the navigation text item colour styles. Content Frame Requirements Within the Gener8 CMS, a cascading style sheet (CSS) formats the content s visual presentation. This includes Headings, default text, hyperlinks, lists, margins, padding and other typographic classes and elements. Only Online Communications Services have access to these style sheets but they can be provided to designers upon request for customisation. Due to the nature of the DECS target audience it is recommended that designers refrain from using display or non-standard font families when designing content elements. A watermark, also known as content background, can be included on the content page. These are also controlled using the style sheet and can be fixed positioned or repeated according to designer requirements. Consideration should be taken to ensure that the watermark is not too dark to compromise the legibility of content text. A list of stylesheet elements that can be defined by designers can be supplied by OCS. SPECIFICATIONS FOR CONTENT FRAME The background colour must be white Font sizes must be relative and therefore resizable using browser settings Text and background must meet readability standards set out in this document, using the Vision Australia Accessibility Toolbar If relevant, the design must be liquid THE FOOTER As part of the required content, a footer dynamically added to the base of each content page. Standard elements include date modified, content enquiries (with a link to the website administrator s email address), Copyright - Government of South Australia, Disclaimer (http://www.sa.gov.au/disclaimer.html), Copyright (http://www.sa.gov.au/copyright.html), Privacy (http://www.sa.gov.au/privacy.html) and Home URL. Optional elements may include Departmental logos positioned in the footer text. CREATION OF NEW LOGOS As per the Premier's Minute dated 26 November 2003, no new logos are to be created for existing Government entities or any newly created entity. "In the event that a new entity is created, a logo using the Government of South Australia brand together with the entity's name must be used. No new logo devices are to be created other than in exceptional circumstances, such as where a new logo device is required for a specific purpose* " c:\documents and settings\selanm\desktop\visual standards factsheet.doc Page 5 of 7
* A division or program within a government department would not be approved for an individual logo under the "specific purpose" criteria. If you have any queries about the use of logos please contact the Online Communication Services Unit on 8226 7536. ADDITIONAL INFORMATION FOR GRAPHIC DESIGNERS ENSURE YOUR SOLUTION IS BASED ON A LIQUID DESIGN MODEL DECS Customers use different screen sizes, screen resolutions and browser window sizes - liquid design aids in making your interface as accessible and visually adaptive as possible on the various viewing options available in today s market place. Given this, it is appropriate to use the liquid design model to optimise the viewing experience of your target market on their monitor settings. The liquid design model is one in which the page elements will re-position to suit the viewing conditions of the client audience. To keep your interface liquid, avoid fixed width page elements such as tables, images and image maps. One possible solution is to use percentage measurements on layout widths, rather than fixed pixel width measurements. For example, using a 90% width on a table rather than 755 pixel fixed width, allowing the table width to automatically resize itself to 90% of the browser window size. Further information on liquid design can be read here: http://www.evolt.org/article/liquid_design_for_the_web/20/15177/ The Gener8 publishing solution is currently designed around a frame based liquid design model. Due to this, when creating an interface design, banner graphic, consideration must be taken to allow the interface design to be sliced and therefore allowing re-positioning of elements when implemented into the liquid design model. USE OF COLOURS All Government websites must: Use a consistent colour scheme throughout the site. Provide sufficient contrast between text and background to ensure good presentation on both screen and paper. Ensure consideration is given to the use colours that are safe for those visitors who are colour blind. Online Communications Services uses the Vision Australia Contrast Analyser in its design evaluation. http://www.visionaustralia.org.au/info.aspx?page=628 looking for at least Level 2 compliance. SUPPLYING THE DESIGN FOR IMPLEMENTATION After concept approval has been given, the designer will be required to email Online Communication Services the required interface design(s). It is preferable that the graphic not be sliced before implementation into the Gener8 publishing solution unless other arrangements have been made between the client and Online Communication Services. The Design Brief may require the Graphic Designer to provide the completed concept in HTML format. A template which includes the Gener8 frameset and related stylesheets will be provided to the graphic designer by the Online Communication Services Unit. c:\documents and settings\selanm\desktop\visual standards factsheet.doc Page 6 of 7
The designer will need to supply: 1. Photoshop (.psd) file created with layers (unflattened) this is the file that is used for the final implementation. Each layer should contain page elements used in the interface such as backgrounds, navigation menus and rollover/hover colours. Provision of this also aids if minor changes or alterations need to be made prior to implementation commencement. 2. Preview gif or jpg file for viewing the completed/signed-off interface. Both the above files assist in ensuring the interface retains the intended design concept and minimises the time from receiving the images to completion of the final implemented solution. The implementation team are very happy to communicate directly with the designer to ensure that requirements for the Gener8 publishing solution are considered. For more information contact Online Services Unit 8226 7874 c:\documents and settings\selanm\desktop\visual standards factsheet.doc Page 7 of 7