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:
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
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
templates can also be obtained from this source.
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,
Page Design Principles
We have settled on the following
page design criteria for official College web pages:
Pages will be designed for an
800 x 600 pixel screen set to at least 16-bit color.
Page content will be displayed
in a fixed-width, max 750 pixel table with border size set to 0.
The table will be centered on
the screen, leaving equal white space on the left and right of the
Page banner and footer elements
will use rounded corners to complement the ellipse in the official logo.
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.
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.
Copyright and general College
contact links will appear at the bottom of each page.
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
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
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
Quick Links Drop-down Menu:
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
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
Technology. If you wish to design your own ad, it must be a
gif file, 200 x 100 pixels, under 3K in size.
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
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.
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.
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
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.
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
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:
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.
If you wish assistance in developing a customized page
You may download templates and
obtain further information from the following URL:
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:
The files can be downloaded from that location in
various formats and using various color schemes. For assistance
with the logos contact the
Typography and Official Style Sheets
The official web page style sheet is at:
Include a reference to the style sheet in the <head>
section of your html document, like this:
head material like meta tags, title tags, script
<link rel="stylesheet" type="text/css" href="http://www.palomar.edu/guidelines/templates/style.css">
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
<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
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.
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.
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
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,
For questions/assistance with web site creation, contact
Chris Norcross, ext. 3225,
For assistance with graphics design, creation or
handling, contact Elaine Armstrong, ext.2644,
For assistance with photography for a Palomar web site,
contact Melinda Finn, ext. 2365,
For assistance with obtaining fonts, or use of official
logos and seals, contact Margie Adcock, ext. 3088,
Printer Friendly Version [pdf]