Web Identity Guidelines

Palomar College communicates a consistent message by use of its Logos, its "tag line", school colors, and design and stylistic elements on all media originating from the College.  The following describe recommended usages for a web identity system.  If you are in the process of creating a personal, departmental, or functional web site, it can be created in one of three ways:

1. Do it yourself.  If you have the time and skills, you can create your own site.  If you follow the guidelines in this document, you can achieve the "Palomar look".  We recommend the use of an advanced web editor such as FrontPage (the College standard - and for which the College is licensed), Dreamweaver, or Go Live.  For more information on these editors, contact Academic Technology.

2. Do it yourself using a design template created by Academic Technology.  The templates for "full- look," "mid-look" and "mini-look" designs can be found and downloaded at:  http://www.palomar.edu/guidelines/templates/.  PowerPoint templates can also be obtained from this source.

3. Ask Academic Technology web and graphics specialists to create the site for you.  If you elect to do this, have the site sketched out, with supporting graphics and documents before meeting with Academic Technology.  For help, contact Chris Norcross (ext. 3225, cnorcross@palomar.edu).

Page Design Principles

We have settled on the following page design criteria for official College web pages:

1. Pages will be designed for an 800 x 600 pixel screen set to at least 16-bit color.

2. Page content will be displayed in a fixed-width, max 750 pixel table with border size set to 0. 

3. The table will be centered on the screen, leaving equal white space on the left and right of the table.

4. Page banner and footer elements will use rounded corners to complement the ellipse in the official logo.

5. Where printing of the page is important (not all browsers handle printing of fixed-width tables correctly). a "printer friendly" version of the page will be offered, using pdf format.

6. To the extent possible, accessibility guidelines will be observed in the design of all official pages.  Academic Technology will test official pages to insure accessibility compliance.  Important "main" pages will have text only alternative pages, which will also display correctly on PDA screens using Windows CE.  If a page cannot, for design reasons, comply with accessibility guidelines, Academic Technology can assist with a text-only alternative that will meet accessibility standards.

7. Copyright and general College contact links will appear at the bottom of each page.

8. A footer with standard navigational aids will appear on all sub-pages.

Standard Web Page Footer:

The "Home" link will always link back to http://www.palomar.edu.  Additionally, use of the logo in the upper left of a web page will always contain a "hidden" link back to the same College home page.  The only page that will not contain an footer is the main home page, where the navigational bar is moved into the page banner, so that it will be immediately visible without scrolling.

Web Page Templates - Web Page Look

The full-look web page is used for the main home page and its supporting "portal" and linked pages.  This design fully expresses the College identity system and contains a great deal of data-driven, dynamically generated material.  This material has been programmed by the Academic Technology department, but is updated, in the case of news and events systems, by various College offices.

The full look template:

Description of Main Page Elements

Official Logo:  Logos can be found at http://www.palomar.edu/guidelines/logos.  When using a dark page background color, always use the white version of the logo.  For assistance with versions of the logo, contact the Print Services department.

Tag Line:  The official College tag line is "Learning for Success" and is emphasized by being displayed within the logo and on a banner bar of its own.

Palomar Banner Pictures:  We have produced a library of banner pictures, and scripted the main page to randomly load one from among a dozen pictures.  The pictures are 600 x 200, and are constructed with a graphic slice that maintains the curved background behind the logo.  Contact Academic Technology for help with customizing a picture-style banner with the correct graphical slices.  Note the rounded look of the banner, which complements the ellipse in the official logo.

Navigation Bar: This bar is placed within the banner on the main page, but on all subsequent pages a "Home" link is added, and it becomes the footer bar to sub-pages.

Quick Links Drop-down Menu:  This is a JavaScript drop-down with dynamically generated (data-driven) content which will link to the most popular College pages.  For accessibility reasons, a "Go" button is included, and move-on-change behavior is not used.

Link Bar:  The link bar on the main, and linked second-level pages will be to the most important sites the College uses to do business--the student eServices page where prospective and current students can apply/register, the Class Schedules pages where students can find out about course offerings, a Locations page where students can find out where classes can be taken, a Distance Learning page where students can find out about how to take courses via the Internet and Television, a Jobs link that will link to a jobs portal for students and to the HR pages for staff applicants.  This link bar, with the exception of the Jobs link, will appear on second-level pages.

Links to Portal Pages:  The links (in gold) on the left of the screen, just under the logo, are to strong, second-level portal pages that also use the full-page design.  These pages will be designed for their target audiences, and marketing/informational content on these pages will also be targeted.  Our design philosophy is to "push" visitors to the main page down a level to targeted pages, from which they will be able to fully explore and most quickly reference relevant College web resources.  The navigational bar and Quick Links are added to the page to quickly serve the information consumer who does not wish to visit a portal page, but more quickly wishes to look up or go directly to a resource.  The "About Palomar" page will contain prominent links to contact information.

Ad Rotator:  This rotating graphic, all gif files 200 x 100 pixels, is being carried over from the previous web design.  It is placed centrally on the page in order to give the College a location to advertise classes, events, and news of great importance.  We have found it very effective in filling under enrolled classes, for example.  In order to place an ad within the rotation, contact Academic Technology.  If you wish to design your own ad, it must be a gif file, 200 x 100 pixels, under 3K in size.

Fixed Paragraph:  One of the goals of the main College page is to say who and where we are in a brief manner.  for fuller information, users can click on the "About Palomar" link.  This paragraph will remain static, but is loaded from a database, and can be periodically replaced with other static paragraphs.

Student/Staff Picture:  These (mainly) student pictures are placed centrally on the page, to emphasize the centrality of our mission.  On the main page, faculty and staff pictures will also appear.  These appear from a library of pictures, and load randomly when the page loads.  Pictures will change seasonally.  This same theme will be adopted by the second-level portal pages, which will have only student, only faculty, only community, or only staff pictures appear on them.  The characters from the main page will wander to their respective sub-pages, as it were.

Copyright/Contact/Legal Links:  Page copyright will appear at the bottom of each official page, along with links to legal and contact information.

Footer Bar:  The main page will have a solid footer bar, adopting the "rounded" look of the page.  Second and subsequent level pages will have a footer bar which included the navigation links (see above).

Palomar News:  This section is dynamically generated on page load from a database populated with news headlines and news stories.  The Public Information Office is responsible for entering the headlines and the stories through a web interface developed and maintained by Academic Technology.  Click on the "More News..." link will take the user to a page of "All Headlines" arranged by date.  Clicking on one of these links will take the user to the story.  The headline box on the main page contains the three latest headlines, as entered by the PIO. 

Palomar Events:  The events box works the same as the News box, except that more people are responsible for for entering events: Athletics, Performing Arts, Marketing, and other departments may enter events in the database.  The three latest events will appear on the front page.  Clicking "More Events..." will take the user to a page that shows all of today's events, along with a calendar, where they can see all this week's events, all next week's events, or click a calendar day to see the events for any day in the year.  Academic Technology has programmed and will maintain this system.

Smaller Footprint Pages

The mid-look templates contain a banner (750 x 110) displaying the official logo and a picture element.  Academic Technology has a library of 600 x 200 pictures from which you may pic, or you may ask Academic Technology to take a custom picture or process your own picture to fit this size.  The mid-look template also contains a footer bar and copyright information with links to important navigation and informational resources.

mid-look banner:

The mid-look banner is available with the standard Link bar, without it, or with a custom link bar.  If you want a custom link bar and do not know how to add it to the banner template, contact Academic Technology.

This banner is also available with optional departmental (or other) custom text:

The custom text uses the official "banner" font (Gill Sans) in solid white with a 1 px black stroke.

Custom photos are also available on the mid-level banner.  You may download templates and obtain further information from the following URL:

http://www.palomar.edu/guidelines/templates

The Mini-Page

The mini-look template consists of a narrow banner (750 x 80) with an abbreviated logo and picture.  It also contains the footer and informational data.

The mini-banner:

If you wish assistance in developing a customized page banner, contact Academic Technology.

You may download templates and obtain further information from the following URL:

http://www.palomar.edu/guidelines/templates

Logos and Seals

Official College logos and seals can be found at: http://www.palomar.edu/guidelines/logos.  There are both "solid" and "screened" versions of the official logo:

Solid Version	Screened Version

The files can be downloaded from that location in various formats and using various color schemes.  For assistance with the logos contact the Print Services department.

Typography and Official Style Sheets

The official web page style sheet is at:  http://www.palomar.edu/guidelines/templates/styles.htm.

Include a reference to the style sheet in the <head> section of your html document, like this:

<head>

head material like meta tags, title tags, script references, etc.

<link rel="stylesheet" type="text/css" href="http://www.palomar.edu/guidelines/templates/style.css">

</head>

This reference should occur on one line, of course, and is shown here on two lines to fit the format.

Here are the official typographical styles for 3 header levels, and paragraph text:

Sample Text - This is <p>.

Sample Text - This is <h1>.

Sample Text - This is <h2>.

Sample Text - This is <h3>.

The official paragraph font is Verdana.  We recommend use of a sans serif font on all pages, using at least the following font definition tag:

<font style = "Verdana, Arial, Helvetica, sans-serif">

This means that if the user does not have Verdana installed, the browser will default to Arial, Helvetica or whatever sans-serif font the user has mapped.

We recommend 10 pt. size for standard paragraph text.

Custom banner text should appear in the "logo" and "banner" font: Gill Sans.  Contact Print Services department for information about the Gill Sans font.

Colors

The official College colors for the web are:

Latitude with the "silver" color -- it is really grey on the web, since silver is an attribute of ink unduplicatable on the web except through gradient approximations.  A black with 50-70% opacity screen will produce an acceptable grey color, though the RGB combination given above is recommended.

Color Samples:

Palomar Red
Palomar Silver
Accent Gold
Black

Page Design Tips

The following are general tips which, if followed, will result in more effective, better designed academic web pages.  There are always exceptions, of course, depending on the target audience of the page, but we assume here that normal academic communication is intended.

• Do not use blinking text on your page.

• Do not use busy or obtrusive wall paper on your page, which might make your text difficult to read.

• Do not use color combinations on your page which make the page difficult (or impossible) for color blind people to read, or that cause visual dissonances (bright fuschia text on a glaring purple background).  We recommend black text on a white background.

• Deliberately set the background of your page to white, if that is what you intend.  Do not assume the browser automatically uses a white background.

• Do not use obscure or unusual fonts on your page.  Stick with the fonts that come with the standard install of the Windows operating system, and remember to include a Mac alternative in your style sheet or font tag.  We recommend verdana as the best, general purpose font, with Arial being the best PC only alternative and Helvetica as the best Mac only alternative.  For serifed fonts, stick to Times New Roman.

• Use a sans serif font for best readability.

• Test your pages on different platforms (Academic Technology provides a testing service that will show how your pages will look on 16 different browser/OS platforms).  Colors, table layouts, spacing, fonts, plug-in/ActiveX technology, etc. all vary by platform and browser version.

• Include graphic elements even on a densely textual page, and break text up into "chunks," using lots of white space around the chunks of text.

• Do not use link colors so subtly similar to your text that users have to guess where the links are located.  Remember, many users turn off the links underlining feature on their browser.

• Do not use graphics that cause the user to scroll the page horizontally on an 800 x 600 screen.  Horizontal scrolling is universally detested on the web.

• Do not use large graphics that are resized by the browser while rendering.  Resize and resample the graphic before using it on a page.

• Optimize your graphics for the web, and try to keep all pages intended for modem access under 50K total.

• Remember the web is a visual medium.

Contact and Further Assistance Information

For questions on general web editorial policy, or multimedia on the web, contact Terry Gray, ext. 2877, tgray@palomar.edu

For questions/assistance with web site creation, contact Chris Norcross, ext. 3225, cnorcross@palomar.edu.

For assistance with graphics design, creation or handling, contact Elaine Armstrong, ext.2644, earmstrong@palomar.edu.

For assistance with photography for a Palomar web site, contact Melinda Finn, ext. 2365, mmarchuk@palomar.edu.

For assistance with obtaining fonts, or use of official logos and seals, contact Margie Adcock, ext. 3088, madcock@palomar.edu.

  Printer Friendly Version [pdf]