Edison State College Website and Portal Publication Standards
Last Updated October 10, 2007
Like the Edison State College community, the Edison State College website and portal are composed of many, independent parts that work together to form a larger whole. Because the website and portal provide a public face for Edison, it is important that contributors assume responsibility for ensuring that the content they publish portrays Edison in a positive, professional way.
The following style guidelines apply to the official Edison State College Web pages:
- Strive for Usability and Accessibility first and foremost. Think about who will use the site, how they will use it, why they will use it and what they won't know about the site or its content. Then design with all of that in mind.
- Stick to good layout principles - Consistency, Repetition, Proximity, and Alignment.
- Use "white space" to make pages easier to read. Make sure your text doesn't rest up against photos, navigation areas, etc.
- Make sure your pages are readable in grayscale for colorblind users. Test this by taking a "Print Screen" of your page and pasting it into Photoshop (Image - Mode - Grayscale).
- Check your pages in at least 2 different browsers.
- Check your pages on another person's computer so you can tell if you've mistakenly linked to files on your computer.
- Give all pages a <title> Meta tag and <keyword> tags; this will help search engines (like Google) index your site.
- Make sure your pages make sense out of context: (Institution, Department, etc.)
- Maintain visual identity with the site for which you're building the page - including logo, colors, etc.
- Stick to a page design that is consistent with the design on the rest of the site (so users know they haven't left the site).
- Keep the most important information 'above the fold'.
- Don't disable the back button.
- Don’t use visible hit counters.
- "Under construction" signs or notices and unfinished pages are not allowed. This includes blank pages and pages that are simply placeholders (e.g., "This is where something will be - check back soon!") All official pages must have useful, relevant content.
- Commercial endorsements and advertising are forbidden.
- Opening pages in new windows should be limited to off-site links, .pdf or multimedia files.
Navigation & Links
- Always include local & global navigation on all pages.
- Keep local links (those relating to your site) relative.
- Keep global links (those relating to the Edison site) absolute - use http://www.edison.edu instead of ../../..index.html
- Avoid frames. They break the basic navigational conventions of the Web.
- Whenever possible let users know: where they can go, where they have been and where they are in your navigation design.
- Always use lowercase characters for filenames and in the HTML coding.
- Don't use spaces in filenames.
- Don't use 'Click Here' or similar "functional link" terms as the linked text. Use text in links that makes sense out of context.
Text & Font - Typeface
- Try to use the fewest number of words possible.
- Chunk areas of text out using bullets, callouts, etc.
- Don't use italics unless grammatically necessary (unreadable online).
- Use BOLD sparingly- it makes the material more difficult to read.
- DON'T USE ALL UPPERCASE CHARACTERS - they make the material more difficult to read.
- Use heading tags to structure your information.
- Don't underline text that is not a link.
- Don't center lines of text (it is harder to read than left justified).
- Style Sheets - The default Edison stylesheet is located at http://www.edison.edu/css/mainsite.css. No webpage may have style hardcoded in it which overrides this stylesheet without the approval of web services.
- No page should have more than three sizes of fonts.
- JPG format should be used for photo realistic images. Use gifs for solid color, line art and text.
- Always use lowercase file extensions: .jpg, .gif
- Make sure all images have alt text; for spacer images, use empty quotes ("")
- Optimize images as much as possible before publishing.
- Don't resize images in Dreamweaver (unless using 'optimize' feature). Use Photoshop or Fireworks and reduce them to the size they should display online.
- Leave at least 5 pixels of gutter space between photographs and page text. Don't put them right up next to each other.Primary Color – The primary color for graphic material is reflex blue (hexadecimal formula 0055A4).
- Secondary Colors – Additional accent colors are utilized to enable branding for key sub populations or for a particular campus providing that these colors do not clash with reflex blue. Unless there is compelling reason to choose another color, the secondary color will match the accent color chosen for the school catalog.
- Official Logo/Acceptable Variations – The torch logo is currently the accepted and publicly branded icon for Edison. At present, there are no acceptable stylistic treatments of this image beyond the original. That logo may be obtained by email the college webmaster. The official logos are the only logos that may be used in the Edison portal and website. Please refer to the Graphics Standards Manual located at that site for detailed information on allowed uses of the Edison logo. All external sites that wish to link to Edison, MUST use the official Edison logo and abide by all rules in the Graphics Standards Manual.
- Graphic sizes – In order to ensure acceptable download times for all members of the web community, individual graphic files should be under 50K. Files must be saved in gif or jpg format. The sum of graphic files on a given page should not exceed 250KB. Graphic pixel dimensions within portal should be consistent with the dimensions of the channel or tab in which those graphics appear. Thus the sum of all graphic widths on a tab within portal shall not exceed 760 pixels.
- Photographic Specifications – Photos can likewise play an important role in the website / portal. In order to ensure acceptable download times for all members of the portal community, individual photo files should be under 75K. Files must be saved in gif or jpg format. The sum of photographic files on a given page should not exceed 300KB. Photo pixel dimensions should be consistent with the dimensions of the channel or tab in which those photos appear. For the public website, no photo shall have a width which causes the template to expand. For a template with side menu, no photo shall be greater than 400px. For templates with no side menu, no photo shall be greater than 650px.
- Font Specifications – Currently, Goudy is the acceptable font associated with the Edison logo. Supplementary graphic font styles should be stylistically consistent with (though not necessarily identical to) Goudy. For fonts within web pages and channels, the only acceptable font is Verdana. Allowable sizes are 8, 10, 11, 12, 16, and 20. Note: The use of font size 16 and 20 should only be used to headings or when absolutely necessary. All general body text should be of font size 11 or 12.
- Horizontal scrolling – No webpage, portal channel, or tab should be constructed such that it requires horizontal scrolling when viewed at 1024 x 768 resolution.
- Vertical scrolling – Web pages, portal channels and tabs should be constructed to avoid vertical scrolling where possible. If vertical scrolling is necessary in portal, it should be positioned below any channels that do not require vertical scrolling.
- Links – Links should be obvious. Ideally, links should consist of self-descriptive text or should demonstrate some other aspect of affordance (as do buttons). Non-descriptive graphic links should be avoided.
- Underlined Text – In order to avoid confusion with regards to hyperlinks, no text shall be underlined unless said text is an actual hyperlink.
- Navigation – All channels within the portal should be self-contained, consistent, persistent and comprehensive. This navigation should be arranged as left-hand navigation or as bread-crumbs. Channels should never require use of portal tabs or the browser back button. If a channel element would require use of the back button or a channel tab, that channel element should open up on a new browser window.
- Frames – Use of the ‘<FRAME>’ tag is not allowed
- Images – All images and photos must include an ALT tag and description
Copy Editing Standards
- Chunking – Webpage / Portal copy should be chunked into easily consumed bits of information. It is preferable to spread large amounts of text across specifically labeled hyperlinks rather than as a single large chunk of text.
- Grammatically correct – Webpage / Portal copy should be grammatically correct
- Language – Webpage / Portal copy should contain no offensive language.
- Factual – Webpage / Portal copy should be edited for factual accuracy
- Copyright – Webpage / Portal copy and images should conform to all copyright laws.
- The Office of Web Services reserves the right to remove any material, without the authors consent, from the Edison State College domain (edison.edu) or portal that is determined to not be in the best interest of the college or does not conform to these standards.
- The Office of Web Services reserves the right to edit any page within the edison.edu domain in an effort to make that page conform to these standards.