NHS ePortfolio Style Guide v0.1

NES ePortfolio Full Style Guide v0.1.docx Page 1


NHS Education for Scotland

ePortfolio: Style Guide

Version 0.1

Author: Tim Brown, 16/09/2011


ePortfolio Style Guide Contents

Introduction .............................................................................................................................................. 4

Layout ....................................................................................................................................................... 6

Paragraphs ................................................................................................................................................................................................................... 6

Headings ...................................................................................................................................................................................................................... 7

Fonts ......................................................................................................................................................... 8

Colours ..................................................................................................................................................... 9

Graphics and icons .................................................................................................................................. 10

Logos ...................................................................................................................................................... 11

ePortfolio ...................................................................................................................................................................... Error! Bookmark not defined.

NES ............................................................................................................................................................................................................................. 11

External logos ............................................................................................................................................................................................................ 11

Language ................................................................................................................................................ 12

Navigation .............................................................................................................................................. 14

Pro-forma content .................................................................................................................................. 15

Accessibility ............................................................................................................................................ 16

Common style sheet elements........................................................................ Error! Bookmark not defined.

Coding .................................................................................................................................................... 17

References and useful links ..................................................................................................................... 18

Contacts .................................................................................................................................................. 19


Introduction

The purpose of the NHS ePortfolio Style Guide is to provide a reference guide to anyone producing content that involves the ePortfolio product or brand. Primarily this will be designers and developers of the ePortfolio site so emphasis is placed on web-based styles and content. By adhering wherever possible to these guidelines the ePortfolio site (and associated printed media) will have a consistent appearance, style, functional approach, and tone of voice that reflects the ePortfolio’s ethos of solidity, probity, reliability and trust. Further values to project are those of a formal and educationally robust environment.

The ePortfolio has seen up an update to the design for a selected number of sites, referred to as “Design 2011”. The styles described here are derived from, and pertain to Design 2011, to which all sites will ultimately tend towards.

NOTE This is a work in progress with section to be added, and should be updated regularly.


Name

ePortfolio does not have a hyphen in it. Only use “e-portfolio” (not lower case ‘p’) when referring to the generic concept of an eletronic portfolio. “NHS” or “NES” ePortfolio?


Layout

Paragraphs

Although not universally implemented across all sites at the time of writing this, the ePortfolio web page layout is a wide layout, based on the width of the browser window. Consequently, blocks of text may display on wide screens with lines that are difficult to read and so should be avoided. Paragraph widths should be limited using <p> classes to aid readability. Table 1 indicates currently available classes that can be used.

Table 1. <p> classes defined in default2011.css

Class Pixel width

Tabloid 250px

Standard 550px

Wide 850px

Style definition: <p>

p.readable { max-width:550px; padding-bottom:20px; } p.newsprint { max-width:250px; padding-bottom:20px; } p.wide { max-width:850px; padding-bottom:20px;


Headings

<h1> should only be used at the top of a page as the page title. <h2>, <h3> and so on should be used in a descending heirarchy, as defined in the Style definitions below. <h1> by default has a 2px grey (#dddddd) underline, but the class “simple” removes this

h1 { font-size: 140%; font-weight: 600; line-height: 11.5px; margin-top: 4px; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 2px solid #dddddd; } h1.normal { font-size: 140%; font-weight: 600; border: 0px; } h2 { font-size: 120%; } h3 { font-size: 90%; }


Fonts

The default font family for text blocks is Gill Sans MT at 0.95em, and titles using Arial, as according to the style definition below.

html, body { font-family: "Gill Sans","Gill Sans MT",Helvetica,Arial,sans-serif; font-size: 0.95em; }

The use of bold or underlined text should be avoided as <h> should provide adequate titling facilities, and in-text emphasis should use italics.


Colours

Text color should be black and background should be white. If “red” warning text is required it should only be placed a white background and should be #cc0000 (rather than pure red #ff0000). Warning/alert text boxes

.errorPanel, .validation-summary-errors { background-color: #FFE3E0; font-weight: bold; margin: 15px 0; min-height: 60px; padding: 10px 10px 10px 70px; }

Information text boxes

.infoPanel { min-height: 50px; padding: 10px 10px 10px 70px; margin: 15px 0px 15px 0px; background-color: #ffffdb; }


Graphics and icons

New Icon set is needed that are consistant in color scheme and style


Logos

The font and text format of the logo is as follows:

The ePortfolio logo has a small number of variations:

Standard colour:

Half column (to be used on the right of a page only):

Standard grey:

Full column:

NES

Please refer to NHS Education for Scotland brand guidlines

External logos

Do not interfere with external organisation’s logos and where possible refer to their brand guidlines. Permission should be sort if reproducing an external logo in promotional material


Language

Tone

The tone of text should be formal and concise, and should address the user. Avoid using first person references, for example forms belonging to a user should be titled “Your Forms” and not “My Forms”. When text is supplied by a customer that does not conform these guidelines please ask them to consider re-writing. The plural of “Curriculum” is “Curricula”

Actions

Form submission: button text: “Save” Cancel a process: button text “Cancel”


Standard controls


Navigation


Pro-forma content


Accessibility


Coding


References and useful links


Contacts

Documents

NHS ePortfolio Style Guide v0.1