 |
|
|
|
|
|
|
Why a Style Guide? - page 1. Web Quickstart - page 2. Content
- page 2. Fonts & Colors - page 6. Images & Graphics - page 7. Frames - page 8. Instructions - page 8. |
Employing a consistent professional style and a coherent organization is important to our users' experience of the Saint Mary's website. We want our web users to regard the Saint Mary's web site and our separate areas of this site as an effectively designed information system--easy to use and thoughtfully organized. Although the college is the sum of many individual parts, we want visitors to our site to think of the college as a whole; one unit with one voice. By maintaining consistency in our graphic style and content, we accomplish this task-- whatever the communication form; print, campus signage, or within our own web environment.
If sections of the site are left unattended and information is out of date, this is a reflection on the college as a whole. It is our intention that this information guide be viewed as assistance - NOT as a mandate of what you absolutely can and cannot do. These standards & guidelines have been developed to answer many questions you may have about designing and producing web pages in the Saint Mary's College Web environment. 
A user interface style guide can serve as:
A style guide can be a training tool for new members of the design team, or a reference for anyone maintaining a department website. Since a style guide provides the basic graphic guidelines, controls, and rules of design for a suite of products, it is advised that every new developer read the entire document before touching a line of user interface code. This
isn't to say that your area can't enjoy its own unique features...indeed,
you should show them off!
If departments and offices participate in at least the minimum requirements, we all benefit. *If you would like assistance locating appropriate images or artwork for your site, would like help using them in a new way, or optimizing them for the web, E-mail Us. We can help.
The first and best thing to keep in mind when planning and creating a web page, is the ol' K.I.S.S. rule:
With a little thought, and pre-planning, building your own website can be fun and easy. Creating a site that is attractive as well as informative will be extremely satisying, and the first time you see the labors of your hard work out on the web--you'll be hooked! First, YOU WILL NEED AN HTML EDITOR PROGRAM, (such as Dreamweaver) --one capable of creating html pages and is compatible with the Saint Mary's College web environment. The college has standardized on Macromedia Dreamweaver as the best HTML editor for our community, and the use of approved templates and other resources requires the use of Dreamweaver. Other HTML editors can be used, but results are unpredictable and their use is not supported by the Saint Mary's College Information Technology department or web team. If you are not familiar with the capabilities of Dreamweaver, the best way get acquainted, is to run through the online tutorial. You can use either the tutorial offered within the Dreamweaver application: found under Help > Using Dreamweaver, or an online Dreamweaver Quickstart Tutorial has been created by the Instructional Technology Resource Center (see the Webpage Creation link on the ITRC site). We STRONGLY suggest that you run through one of these tutorials , in order to familiarize yourself with the proper terminology and features. We recommend that you proceed through the lessons in order, but at any time you can return to the index to jump to a different lesson. If you still want more instruction about designing sites, check out these design resources: •
Yale C/aIM WWW
Style Manual Plain
text editors, e.g. SimpleText for the Macintosh or NotePad for Windows
can be used to modify web pages and fix minor HTML problems.
We strongly urge that you learn to use the most basic text editor while
you learn
HTML and then later you can explore HTML "editors" You should
also be familiar with switching between multiple applications as well
as using the mouse to copy and paste selections of text.  The following describes the content that each entity of the college is expected to display in its respective websites. Of course, there are exceptions to every rule; exceptions should be discussed with the webmaster. Each campus entity should have separate pages for the following, as prescribed by the new web design standard. These
pages (descriptions of each are below) must follow the standard design
scheme outlined in Saint Mary's Web Graphic Style. Additional pages
may be created. Departments and offices are encouraged to follow
the design standard for additional pages but are not required to do so.
Please
review content issues for the following: Academic Department Websites should include the following pages: 1.) Department Homepage - Should include: full
mailing address 2.) Faculty and Staff page - At minimum should include*: lists names of all faculty members with:
lists names of all support staff with:
*
can carry more information List
all the department’s offerings Supplements short descriptive paragraph on the homepage and can describe facilities, department history, special projects, and current initiatives. Division Websites Homepage - Should include: full
mailing address Personnel page - Should include*: names of all division staff with: addresses, telephone numbers & links to e-mail *can
carry more information • links to varying offices or operations within the division with: Descriptive
paragraph of each
name of department head
General
Office Phone Number
Policies and Procedures page Policies and procedures should be outlined on this page with links to subpages that carry the information if available. Administrative Office Websites Homepage - Should include Mailing
address Personnel/Staff page - Should Include: names
of all employees with addresses
telephone
numbers
links
to e-mail;
can
carry more information
Services page Should
describe what services the office offers and offer links to appropriate
material deeper in the sites. Policies
and Procedures Additional Content for web pages: Website Maintainer Contact Info: Along the bottom (or on the left navigation), every page, will need the name and e-mail address of the site maintainer. Copyright info: The copyright symbol, the year the page is created, and the words "Saint Mary's College" should appear at the bottom of every page. Here is an example: ©2001 Saint Mary's College (Note: This is Verdana font, specified size -2 in Dreamweaver's properties window.) Q
& A's about Content
While personal web pages are an opportunity to express one's self, and require less mandatory content specified in these guidelines, we request that the following content appear on each page: Minimum Information should include: Owner
name
E-mail
link
Link
to College home page
Below are guidelines for graphic and navigational elements that your website should include, and the rationale for including them. Graphic Elements - "Header Graphics" These elements consist mainly of an identifying graphic at the top of your first (index) page, and additional graphic elements for subsequent pages. Top level links back to the main sections of the site as well as department links should appear on the first page of each department site. We expect and encourage you to use these header graphics or links as well as follow color and font specifications in order to maintain consistent use of the college's established graphic standards. "Header
Graphics" for the index page and beyond. At a glance, the viewer should be able to identify: -
This is part of the Saint Mary's College website... A consistent way to accomplish this is throught the use of a "header graphic" at the top of your index page. As good design practice, the index page should feature a more elaborate "front door" than subsequent pages in a specific site. This is done in order for the browser to realize that this page is the place to start within a site....(much like the SMC home page is more elaborate than any other page on the college's website.) This page should offer all of the identifying and navigation information in one logical place for the viewer to refer to as they browse. Major paths through the site should be made available at this level, whether the browser is a prospective student, Alum, or faculty member so they can easily navigate to other areas of information throughout the site. The graphic will look like this: (specific to each department or office)
Note:
What you see here is actually two separate graphic elements. The larger,
light blue section will be specific to each department, office, organization,
etc. and will be copied from the list provided on the website. The
darker, navigation bar below it, will be available for you to move from
the college's public folder to an area within your own WWW folder. See
below for information about navigation links. For the top of very page in a site (after the initial index page) you will have three options: Option # 1: Use of the navigation graphic from index page with a simple SMC graphic
If you choose to continue to offer navigation links to the main areas of the college's web site, you can easily provide this by using the 2nd (bottom) part of the graphic used on your index page. You will add a simple SMC graphic above the navigation. This graphic graphic was included in the Librarysmc folder you copied from public. Option #2: Use an identifying graphic without top level navigation The simple graphic (above) that does not offer navigation links to the main areas of the college's website can be used by itself. All you have to do insert the graphic at the top of the page(s)*. This graphic by itself looks like this:
*Additional Note: If you use this graphic, you will need to provide a link to the college's home page. You can offer a text link or link this graphic so the browser has a direct path back to the home page-- there they can reconnect with the top level navigation to other areas of the college's site. Option #3: No header graphic on pages after index page. While
we do not recommend that you choose this option, you have the option to
choose not to use any graphic at the top of your pages (after the
index page). Note:
If using option #3 you must provide a visible link back to the college's
home page somewhere on your page.
As stated above, the Option #1 for the pages following the index page include continuation of the top level navigation links. These top level navigation links that allow the browser to steer through our site with ease. They allow access to any part of the college's website from any point. Frequently used features such as: web e-mail, PRISM, Course info, etc. are also included for easy access.
On the left of the page, should be placed links that are specific to each department. They should appear under the department/office info information that is required* on each page. *Please
visit the Content portion of this document
for more info on required content for your page. Q & A's about essential graphics
Fonts: San-serif type faces best complement this design. Verdana would be a first choice because it has been adopted for many pages of the College's site. Arial, and Helvetica are secondary choices. Accent and subheading type should be displayed in bold, using a choice of color: #003366 Saint Mary's Blue (Dark) #336699 Saint Mary's Blue (Light) Body text should generally be displayed in black. 12 point type is used, which suits a wide viewing audience. But...that is not to say that judicious use of tables and complimentary colors can't be used. For instance, this portion of text (below) has been boxed and highlighted to stand out and draw attention.
Links Links are specified as #003366--this matches the dark blue color on the navigation graphic. FYI: link colors can be changed in Dreamweaver under Modify > Page Properties Images & Graphics
Treatment of Images The majority of images featured in the colleges' web redesign feature a simple drop shadow in the lower right corner to create a 3D feel to the image. (see image above). This treatment is a simple, consistant way of showcasing the image and it can easily be recreated if additional images are added to a page later. The process creating a drop shadow in photoshop are as follows: Open
image in Photoshop. With white selected as the background color, increase the canvas size by approx. 1/2 inch. all around. Paste
the select image back onto the canvas Mode:
Normal A note about creating Saint Mary's Colors in photoshop: For Photoshop
versions earlier than 6.0: Alt Tags Please don't forget to provide alt tags for your header graphic or any other graphic you add to your site. Alt tags (short for alternative representation) can simply repeat the words in a graphic or briefly explain the contents of a photograph. It's one mechanism those with sight disabilities use to navigate the web. If you want to comply with standards set to accommodate those who must use voice synthesis to navigate the web, you need to include Alt tags. FYI:
(Place your mouse over the picture frame image above to see the alt tag
which should read: "picture frame image") Maintainers may use any other graphics they believe to be appropriate and applicable to their pages. Additional questions about image treatments or availabilty of Saint Mary's campus images may be directed to: webstandards@saintmarys.edu
Here are the advantages & disadvantages of using frames (as stated in the Dreamweaver 4.0 Help guide): The Advantages: The most common use of frames is for navigation. A Web page can use one frame to hold the navigation menu and another frame to hold the page content. Since the navigation menu is in a frame, a visitor to your site can click a menu item and the content will appear in the content frame, but the navigation menu does not change at all. This can keep the user oriented within your site. The Disadvantages: Frames can be confusing to implement, however, and you can often create a Web page without frames that accomplishes the same goals as a page using frames. For example, if you want the navigation on the left side of your page, you can either split your page into two frames, or just include the left navigation on every page in your site. The difference is that with frames you only have to create the navigation one time. If you do decide to go ahead and use frames in your Web site, make sure that you understand the relationship between frames and framesets because linking with frames can be confusing. Please Note: Frames on Saint Mary's web pages are discouraged, however there are exceptions to every rule. If you would like to use frames on your web page/site, please contact: webstandards@saintmarys.edu BEFORE doing so. If your page is currently using frames and you would like to no longer use frames, please contact: webstandards@saintmarys.edu to learn how to easily redesign your pages to become a no-frame site.
1.) Obtain your Librarysmc folder from Public 2.) Find and copy your custom header graphic 3.)
Place them within your directory
4.) Apply your graphic to the top of your page* Also included are Step - by- Step Instructions for applying a similar graphic to pages following your index page. (see below) For both of these processes we strongly recommend that you print out and follow these instructions as you go. For
more information about the header graphic for your index page, see "Essential
Elements")
INSTRUCTIONS
For your Index (home) page: 1. Step-by-Step Instructions for : Obtaining
the Librarysmc folder from Public,
Copying
your custom graphic,
Placing
these items on your index page.
These
detailed instructions will walk you through every step of adding the header
graphic to your index page. We advise you to print these out to refer to as you go. Before you start:
After you have defined your site-(see above), Close Dreamweaver. Part One: Assembling your Graphic Elements Step #1: Obtaining your librarysmc folder from Public The first step to creating or adapting your existing web page to include the header graphic is to locate the folder called "Librarysmc" in the Public folder. Look for the Librarysmc folder in the folder called Web Resources--as follows: Open Public > Web Resources > Librarysmc • For PC users: Right Click and copy the folder to your www folder. • For Mac users: drag the Librarysmc icon to your www folder Make sure there is now a folder in your WWW folder called "Librarysmc". Step#2: Find and copy your Custom Header Graphic Once these design standards are in place, at the top of each index page of a site there will appear a header graphic that shows the name of the department or office, etc. (for more on this see page entitled: "Essential Page Elements") You will need to find and copy your custom header graphic NOW. These custom header graphics are found here. They are divided by Academic Departments, and Services and Offices and listed alphabetically. When you locate your graphic (and click on it to see it) you will save it as an image and place it in your Librarysmc folder as follows: •PC users: Right Click and save image with the name it has been given, (all the images start wi th "wbh") save as a JPEG (*jpg) type to your Librarysmc folder. (It is important not to rename this image, as you'll need to find it later.) •Mac users: For those using Internet Explorer (IE): Hold down mouse and select "Save image to disk:" It will already be saving the image as a jpeg, with the name already given. (all the images start wi th "wbh")--DO NOT RENAME. Locate your directory out on your desktop open it, go into your www folder and find your Librarysmc folder--and click "save". For MAC Netscape users: Hold down mouse and select "save this image as": It will already be saving the image as a jpeg, with the name already given. (all the images start wi th "wbh")--DO NOT RENAME. Locate your directory out on your desktop open it, go into your www folder and find your Librarysmc folder--and click "save". Part Two: Applying your Graphic Elements Now that you have the Librarysmc folder and your custom header image copied (and saved to the Librarysmc folder) in the www folder in your directory, you are ready to apply these elements to your index page. 1.) Launch Dreamweaver--once the dreamweaver application is open, you need to open your site window. 2.) Under
Site>Open Site>select (whatever you named your site when
the site was defined*.)
3.) The site window will appear--with your files appearing in alist on the right hand section of the window. 4.) Locate your index (home) page and open it. Once it is open place your cursor in the uppermost right corner of the page. 5.) Open your Properties window - (found under: Window>Properties)--leave this open. 6.) Modify your page properties: Under Modify >Open Page Properties. In the properties window designate the following: Background color: White (#FFFFFF or #ffffff) Left Margin = 0 Top Margin = 0 Margin Width = 0 Margin
Height = 0 7.) Open Assets window. (found under: Window>Assets) -- this window displays all of your directory assets--including images, library items, links, colors, etc--as signified by the small icons located on the left side of the window. 8.) Recreate your site list: PC
users: With
the Assets window open, Right Click and select "recreate site
list" from the pop-up list of options The "recreate site list" function will scan your directory for all of your assets. You will notice that the assets are grouped by their respective file types--all images in one place, all library items in the library section, etc. regardless of how you have them organized in your www folder. 9. ) Open the Library Assets: On the bottom of the column of icons located on the right side of your assets window, is one that looks like an open book. This denotes your Library assets--where the library items from the LIBRARYsmc folder you coped from Public should reside--open it. You will see that there is a library asset called wbnavigation.top--select it. (In the small scrollable window at the top of the Assets window you will see part of this graphic--it should be an image with a light blue band on top of a dark blue bar with navigation links for the college in place.)
10.) Place the image on top of page: (With the wbnavigation.top item still selected), Drag the selection from the Assets window to the top of your index page--where the cursor is residing. The Header should be at the very top of your page--if there is space above the graphic, and your margins in your page properties were correctly set to "0"-- delete the extra space and the image should be placed correctly. 11.) Detach the library item: You will see that the header image is "grayed out" -- in your Properties window --(this should already be open, but if not it's found under Windows>Properties) it will indicate this is a library item, and will give you the option to "Detach from Original" -- select this option. Note: A warning window will come up saying that "you will no longer be able to update the item automatically"--click Ok This will allow you to add your custom graphic to the image.
12.) Add the custom header image. -- Place your cursor in the light blue area of the graphic. -- Locate your image assets in the Asset Window--(select the image icon at the top of the column of icons) -- Scroll down the list of images to find the image you copied and saved to your directory--Remember: it will start with: "wbh" -- When you locate the image, select it and drag it to the light blue area --(where your cursor resides.) Part Three: Reviewing your Work Once the custom graphic is at the top of your screen, you should preview your work in your browser*: You can
do this one of two ways: A. click
on the world icon at the top of your Dreamweaver window and select
a browser * If no browsers are listed, you will have to edit your preview browser list--found under Edit>Preferences>Preview in Browser. If your page looks good, exit your browser. Remember to save your work and you're done! NOTE: If the image is not placed properly at the top of the page--and appears in the wrong location, --don't panic!--You can undo the action by going into the Edit menu and undoing the previous action(s), or if you are completely lost, and have not saved your changes, you can close your page (click Don't Save Changes) and start over from the beginning. Once
you have completed this process, you are ready to adda graphic to the
top of your remaining web pages. Proceed to: For pages following your Index page: 2. Step -by-Step Instructions for:
Applying a header graphic to the top of rest of the pages in your site
(pages following your Index page.)
These
detailed instructions offer your two options for adding a graphic to the
top of pages that follow the index page. We advise you to print these out to refer to as you go. Section
two/Part One: Previously, in the step-by-step instructions for applying graphics to your index page, you learned how to •
locate and copy the Librarysmc folder The procedure we will follow here is very similar and much simpler because the elements you need are already in your Librarysmc folder in your www folder. For the top of pages following the index page, you have 3 options to choose from: Option #1: Top level navigation with a simple SMC graphic. This option would keep the navigation functionality of the index page, but an abbreviated graphic would be applied in place of the custom header graphic. Option #2: A simple SMC graphic without top level navigation links. In this option, the simple SMC graphic would be applied without navigation links to the main sections of the college's website. A prominent text link to the college's home page would be required. (These instructions utilize option #2) Option
#3: Apply NO graphic elements
to the top of your page. For this option, no
graphic would appear, but a prominent text link to the college's home
page would be required somewhere on the page.
Top level navigation with simple SMC graphic On the index page, you applied a custom header in the light blue portion of the page header. For this option, you will change the light blue color to white, and place an abbreviated SMC graphic (which is already in your Librarysmc folder) in the same place. You will note that many of the steps are the same as the previous procedure. 1.) Open your page and Set the margins to "0" (You can do this by going into Modify> Page Properties) 2.) Place your cursor at the top left corner of your page 3.) Open your library items in your Assets window (bottom icon on right) 4.) Find item called wbnavigationtop-and select it. 5.Drag the selected item to the top of your page. 6.) Detach llibrary item - (select "detach from Original" and click "ok" in warning window) 7.) Click on light blue area at top of navigation graphic. Leave your cursor there. 8. In the properties window (found under Window>Properties) and change the background color to White: #FFFFFF
9.) In the images portion of the assets window, is a graphic called: wbrule.jpg. (You can see this image in your assets window by clicking on the top right icon and scrolling down.) Select this image. 10.) Drag the wbrule.jpg image to the top of your page (into the area that is now white.) With all pieces in place, it should look like this:
11.) Preview your work in your browser, (File>Preview in Browser) and if everything looks ok, save your page if everything looks ok. 12.) Apply same to additional pages. Option #2: Application of Simple SMC graphic without top level navigation links. This option follows the same as above, but applies only the wbrule.jpg graphic to the top of your page. 1.) Open your page and Set the margins to "0" (You do this by going into Modify> Page Properties) 2.) Place your cursor at the top left corner of your page 3.) Open your imageitems in your Assets window (top icon on right) 4.) Select wbrule.jpg image-- 5.) Drag it to the top of your page* 6.) Preview your work in your browser, (File>Preview in Browser) and if everything looks ok, save your page if everything looks ok. 7.) Apply same to additional pages. Option #3: Apply NO graphic elements to the top of your page.
If
you can't find it here, let us know! For clarification about design and content issues, contact: webstandards@saintmarys.edu For clarification on technical issues contact: webmaster@saintmarys.edu
|
||||||||||||||
©2001 Saint Mary's College
Web Design Standards & Guidelines
For
example, these Web Design Standards & Guidelines employ limited
use of images to enliven its content. They're not imposing, and they add
some visual interest to this site. If you have images or artwork* you
would like to incorporate into your content, feel free! 
The
first page of your site is your index page. (Often called a "home
page")--this is the "front door" to your
presence in the Saint Mary's College Web Environment. 
Images,
and graphics can be great additions to a web page. On one hand,
they can add life to content, and stimulate visual interest, but on the
other, they can distract from the message and slow page load times. From
a design standpoint, the number of images on a page should ideally be
kept a minimum (1-2), unless they are vital to the content. Thumbnail
images linked to larger images are a good alternative, but if you have
series or collection of images, creating a separate page that features
these images in one location may be a better way to go. This way, if browsers
are only interested in the content, they will not deterred from their
quest by slow loading images.
