Web Design Standards
May 2, 2007
Updated to August 30, 2008
Web Design Standards
Table of Contents
Purpose 1
Site Structure and Navigation Plan 1
Site Map 1
Design Philosophy 2
Stylesheets 2
Elements 2
Frames 3
Global Navigation Element 3
Page Titles 4
Meta Tags 4
The Meta Description 4
Writing Meta Keywords 4
Update Information 5
Security 5
Home Page Exceptions 5
Visual Design & Styles 5
Templates 5
Proceedings Archive Templates 6
Colour Palette and Fonts 8
Images 9
Web Page Content 9
Site Contact 9
File Structure and Naming Conventions 9
Outstanding Issues 10
Appendix A - Sample HTML for a Frameset Page 11
Appendix B – Listing of Seminars and Presentations 12
Reference Documents
File Name / Document Name / DescriptionWebsite Requirements-R5.doc / Website Upgrade Project Requirements Specification / Functional requirements specifications of the website as accepted at the AGM of Nov 22/06
PrototypeJun14-07.zip / Website Prototype / Collection of html files and download documents demonstrating desired functionality and general look of the proposed website
Document Revision History
Version # / Date / By / Description of Revisions0.1 / May 2/07 / Valerie Preston / First Draft
0.2 / July 18/07 / Valerie Preston / Updated following document review with Walter Wawruck and Peter Mulholland. Include Walter’s Site Map.
1.0 / (date) / (author) / First approved version of guidelines and standards
Web Design Standards
Purpose
This document outlines the standards that have been developed for use on the PM Professionals of Greater Vancouver website. The purpose of these standards is to provide the specifications to design and develop the initial website and create a foundation for the sustainment of the site and the development of new pages. The goal is to:
1. Employ the use of ‘best practice’ web design standards with a minimum of logical and/or technical complexity.
2. Ensure consistency in the look and feel of the site, including treatment of graphics.
3. Ensure that changes to the structure of the site and navigational elements are consistent with the original navigational plan.
4. Provide guidelines on the correct use of style sheets and other design tools developed for this site.
This document should be used in conjunction with the Requirements Specification document and the prototype, which provides a visual explanation of the requirements.
Site Structure and Navigation Plan
Site Map
The website will be made up of 6 major categories or sections. Each category will contain:
· A main html page consisting of the frameset (See Appendix A for sample html.)
· An html file for the left navigation frame
· One or more html content files for the right frame.
PM Professionals of Greater Vancouver - Hierarchical Site MapCategory / Frameset File Name / Frameset Title / Navigation Frame / Level 1 Content / Level 2 Content
About / AboutFrame.html
(formerly PMProFrame1.0.html) / About Us / AboutMenu.html
(formerly Contents1.0.html) / About.html 1 2
Contacts.html
Governance.html
Members.html
Events / EventsFrame.html
(formerly PMProFrame2.0.html) / Calendar of Events / EventsMenu.html
(formerly Contents2.0.html) / Calendar.html2
Notices.html
Participate / ParticipateFrame.html
(formerly PMProFrame3.0.html) / Participation / ParticipateMenu.html
(formerly Contents3.0.html) / Membership.html
NewSociety.html
PMSeminar.html
Participate.html2
Present.html
Proceedings / ProceedingsFrame.html
(formerly PMProFrame4.0.html) / Proceedings Archive / ProceedingsMenu.html
(formerly Contents4.0.html) / PresentationsList.html / Seminar1.html
SeminarsList.html2 / Seminar2.html
Seminar3.html
…
Recertification / RecertificationFrame.html
(formerly PMProFrame5.0.html) / Recertification & PDU Claims / RecertificationMenu.html
(formerly Contents5.0.html) / PDUClaims.html2
WebAdmin / WebadminFrame.html
(formerly PMProFrame6.0.html) / Website Administration / WebadminMenu.html
(formerly Contents6.0.html) / Administration.html2
1 Home Page
2 Opening Content Panel
Generally, html content pages should not be nested deeper than Level 2. Level 3 will consist mainly of downloadable files.
Design Philosophy
An overriding objective is to make the web side as simple as possible to update. To this end, the coding will be kept to basic HTML. The hope is that a volunteer with an understanding of HTML fundamentals will be able to interpret the coding of any page, and will be able either to amend the content of an existing page, or to create a new page using a template. Our experience with the website development project has underlined how difficult it is to recruit volunteers with basic HTML capability.
For this reason, the most sophisticated design feature will be the use of frames, in order to obtain a common navigation panel in each window. We will NOT use any advanced or interactive coding, programming techniques or features such as the following:
· Style sheets (except to specify the global font family)
· Forms
· Backgrounds, icons, or other advanced graphics
· Java
· JavaScript
· Active X
· VB Script
· Shockwave
· CGI, or other forms of server side scripting.
Further, in the interest of developing code which can interpreted by a volunteer with a basic understanding of HTML, the use of web page development software such as Front Page will be generally discouraged in favour of software which displays and directly generates individual HTML tags.
Stylesheets
Global stylesheets are external files that can be used to control the appearance of text and tables to provide the same look and feel throughout the website while minimizing the maintenance effort. For this project, an external style sheet should be used for all html pages to define a single attribute: the default font family, Times Roman.
Elements
Following are a list of the required elements for this site, and instructions on their proper use.
Frames
Generally speaking, each webpage will consist of two frames, aligned horizontally. The left frame will consist of the navigation links and the right frame will be used for the page content. See the Visual Design and Styles section below for template details.
Figure 1 - Sample Page
Global Navigation Element
Global navigation is implemented in the left frame of the page. Each category or section will have its own version of the navigation menu.
A navigation menu will be displayed in every screen. The menu will list the major content categories for the site plus the content subcategories, if any, associated with the major category currently on display in the content panel. Thus there will be a separate version of the navigation menu for each category.
The example below is the navigation menu for the Participate category. It contains links to all of the level 1 pages in the Participate section as well as links to the main pages of the other categories.
The Society of PM Professionals logo at the top of each navigation menu should be a link to the Home Page (about.html)
Page Titles
The html title of a page is used to identify a page:
· in the web browser window
· in a browser’s history list
· in lists of search engine results
· in browser bookmarks or favourites lists
Because the page’s html title is so widely used, it is important that it clearly and succinctly reflect the content that will be found on the page. It is also helpful if the html title provides information about where in a site (and in what site) a page is located. This seems too elaborate. I think the current page heading alone will suffice. The visitor will always have the navigation panel to refer to. VJP – I think that the minimum we need is page title and website name. If we just have the page title, users who bookmark the page or add it to their Favorites will just have the page title, PMProFrame1.0, for example. The link will not have any context for the user after he/she has left the website.
In order to best fulfill the purposes for which it is used, the following format is the standard for html titles:
<title>current page heading > site</title>
E.g . Seminar Proceedings Archive >PM Professionals of Greater Vancouver
Meta Tags
Like the html title, meta tags are used by search engines to index html pages and display search results.
Since casual visitors who find the site using a search engine are not our focus, a single meta tag for all pages with a few words such as “project management, PMP, Vancouver, professional development” will suffice.
The Meta Description
<meta type="description" content="Project management, professional development, PMP, Vancouver">
The information contained in the meta description tag is used by search engines when displaying search results. Ideally, it provides readers with a brief description of what they might expect to find on the page if they decide to click through. Meta descriptions should be limited to 200 words or less.
Writing Meta Keywords
Since most search engines now ignore this tag, it is not necessary to include it in the page design.
Update Information
Each content page shall contain the date when it was most recently updated. This information will typically be displayed at the bottom of the page, but may appear at the top if it makes sense.
Security
This website is intended to be available to the general public so no security measures are required in terms of identifying users or restricting access to certain pages.
Home Page Exceptions
Assuming Vancouver Community Net (VCN) is the website host, in addition to the standard 2-frame frameset, the website home page (about.html) requires the following header and footer elements:
Header Element
Footer Element
· Vancouver CommunityNet / · What's New at VCN / · Event Listings / · SearchSee an example on the existing website: http://www.vcn.bc.ca/pmprof/
Visual Design & Styles
Templates
Each browser window display shall consist of two panels (frames):
- Left Frame - A navigation panel containing the Society logo and links which allow the user to navigate to content pages and, through other menus, throughout the site.
- Right Frame - A content panel which is used to present content pages. These pages contain the useful information which is the subject of the site, and which also is used to present links to files for download and links to other content pages
Each HTML file shall conform to a standard template. These four templates are part of this standard:
- Frameset. Establishes the navigation menu and the opening content page for each major category. The pages developed from this template are given the file name <CategoryName>Frame.html.
- Navigation. Contains a navigation menu for a single major category with links to each first level content page associated with the major category and with links to every other major category (i.e. frameset) in the site. If there is only one associated content page in a major category, it is the opening page for the category and does not require a separate listing. The navigation menu is called by a frameset. The pages developed from this template are given the file name <CategoryName>Menu.html
- Level 1 Content Page. Contains information on a subject and links to additional related information. A level 1 content page may contain: links to other content pages associated with the same category (i.e., the same frameset); links to document files for download; and links to web pages at other sites. A level 1 page may NOT contain links to content pages associated with other categories or links to framesets. A level 1 content page may be called by a frameset or by another level 1 content page associated with the same category. Pages developed from this template are given file names which are descriptive of the content. For example: Administration.html, Governance.html, or Participate.html.
- Level 2 Content Page. Contains more detailed or additional information on a subject, and will be called by a link on a Level 1 content page associated with the same category. Only one type of level 2 content page will be allowed: the detailed description of presentations and workshops at a single professional development seminar, including links to document files for download. Only document links and links to web pages on other sites will be allowed in a level 2 content page. Pages developed from this template are given file names which describe individual seminars by number. For example: Seminar11.html, Seminar12.html.
Each template contains instructions on the creating a new web page. The instructions shall be in the form of comments imbedded in the HTML code.
Proceedings Archive Templates
Once created, most of the web pages will be relatively static. The exception is the Proceedings Archive section of the website which will need to be updated each time a seminar is held (approximately 3-5 times a year). An overview of the pages in this section is described here.
Note that any page containing links to downloadable presentation documents must contain the following text:
‘By using or downloading any material from this site, I agree that the material shall be for my personal use only and shall not be reproduced for other parties without the consent of the author.’
Refer to the Website Upgrade Project – Requirements Specification document (Archive and Repository of Documents section) for further details.
Seminars List Template
Figure 2 - Sample Seminars List Summary Page (SeminarsList.html)
This template will be used to create a webpage containing a summary listing of all seminars held to date. The seminar links on the page will be listed in reverse chronological order and will point to the detail page for each seminar.
Seminar Detail Page Template
Figure 3 - Sample Seminar Detail Page (Seminar12.html)
The Seminar Detail page template will be used to create a webpage for each seminar. As shown in Figure 3, the top of the Seminar Detail page will contain links to presentations given during the seminar - which are located on the same page. Within each description are links to downloadable pdf files for that presentation, if any exist.
Each presentation will contain the following headings:
o Abstract
o Biographical Outline