Mesa State College Web Style Guide

Introduction and Underlying Philosophy of the Style Guide and the Web Site

The underlying philosophy of this style guide is that it should serve as a tool for providing informative standards and rules of thumb for working with the Mesa State site. As an institution, Mesa State strives to produce high quality web pages that provide useful and timely information to a diverse audience. The site should serve as a centralized location for a wealth of information related to nearly every aspect of the institution. More than ever before, people expect to find all information that is obtainable about Mesa State in another format to also be obtainable on the web site and then extra information on top of that. Many people now believe that anything they can possibly inquire about should be readily accessible online. Given this new and challenging expectation of the target audience, it is important for Mesa State to work to meet this ideal whenever possible.

The Mesa State web site is intended to act as a gateway for sending and receiving information, placing individuals in contact with each other and important data and it serves as a primary marketing tool. It must be recognized that the web site is evolutionary by its very nature. By establishing the mission of providing useful and timely information, it requires that the site change and adapt to the current needs of the institution and its audience. It is important to understand that a worthwhile site requires attention and updating. Just as Mesa State has not remained the same since it was first created, nor should any web page.

Acknowledging the rapid evolutionary nature of the web site, this style guide will not attempt to provide miniscule details about a specific program or browser that will become outdated upon the next release of said program or browser, but will instead focus on general tips and strategies for producing quality publications for the Internet. The Internet is a remarkably new medium in the grand scheme of things and it is likely that every part of what is currently the most amazing technology will be called archaic and primitive in the next ten years. Students can go to school for four years learning the latest technology only to graduate and discover that the latest software package makes everything they have spent four years learning obsolete. This is the state of affairs in the industry and Mesa State employees who work with the website will be encouraged to rely on the power of their software and fundamental design, planning and production skills rather than programming skills to accomplish sound Internet design as it understood that most already have a full time job and do not also need to be programmers.

The HTML (HyperText Markup Language) programming language was not designed for graphical page layout, but has been used for this purpose for some time now. Those who are new to web page design and layout will quickly learn that it is a far less forgiving and much more evolutionary environment than that of printed materials. The variability of different programs and browsers can prove endlessly frustrating if allowed to. The lack of a single standard for web page authors to aim toward creates an environment that can often feel out of control or like guesswork. While there are certain strategies that can help achieve a uniform look and feel on different browsers and system platforms, there is currently no magic bullet. Accepting this fact now will help you become a much more productive and stable web page designer.

Beginning Stage

1. Establish a purpose/goal
2. Identify the audience
3. Identify the benefits and consequences
4. Make an outline

As you prepare to begin work on a web site, you need to make sure that you have a clear purpose and plan for the site. If your reasoning for making a web site is that everyone else has one up or it sounds like fun, you are not ready to begin making a site.

Before work on a web site is ever started, there must be an established set of goals. Ideally, these goals should be committed to paper and revisited upon completion of the site to ensure that the stated goals have been met. Establishing a set of goals and researching ways of accomplishing them with the site is likely the single most important factor to creating a good web site. No amount of design skill, slick graphics, witty language or trickery can disguise a purposeless site.

In setting out to create a site with a set of goals, you need to make sure that you correctly identify your entire audience. This is not the same thing as identifying your target audience. Web sites are unique publications because literally anyone who has a connection to the Internet can potentially view them. Evaluate how people will be reaching your site, who they likely are, how you can encourage your target audience to reach your site and why your site is going to meet its goals.

A web site is not a good site unless it benefits everyone involved. If you produce a wonderful site that only benefits your target audience or only your area, you have failed to produce a truly good site. In web site creation, a good site is one that benefits both the audience and the site's creators. Establish in writing how your site will benefit the audience and how it will benefit you. Mutual benefit should be a target for every site within Mesa State. Sometimes the benefit to you may be as simple as, "People won't call me anymore asking me to fax this information," or "I will be obtaining information I can use to mail them brochures in the future," but this needs to be a benefit you are seeking and aware of prior to production.

Search for negative repercussions before you build your site. Think about what unexpected consequences your site may have. Will your site encourage people to not contact you and obtain all their information online? Does that deprive you of personal contact and diminish the likelihood of getting what you really want from the audience? Might your site lure people away from where they really should be going? Will your site produce too many phone calls and should you provide an e-mail link instead of a phone number? Are you building your site in a way that will require more updating and time than you can offer? Think of such questions before production and review your site after it is created to look for these sorts of potential problems.

Once you have reached this point, you are ready to prepare an outline. As you begin your outline you need to reflect on the points above. Be sure that you are planning for all the considerations you have made. Have you identified the likely technology level of your audience? Are you designing your site accordingly? Mesa State serves a wide audience and typically our visitors are not quite up to the industry standard. Keep this in mind as you develop your outline and restrict your use of technology to what you believe is appropriate for the area. If you are uncertain on this area, please contact the Webmaster, who likely has specific information on this topic and can provide you with updated details.

In creating your outline, you need to be sure that you are logically directing people to further content within your site. However, do not fall prey to the ownership principal of web site design. Many users feel that they should only link to content that they have created and maintain. This can be extremely frustrating and counterintuitive to users who expect to find relevant information on your site and not just segregated information. Consider other areas that are closely related to your site or ones that user's might expect to be linked to your department, even if they are not officially related. A useful method for creating an outline often involves beginning with your homepage. Diagram the primary areas that people should be able to reach immediately from your homepage and then continue to map out the overall picture. Be sure to include links for reaching the main divisions within your site as well as your homepage. Mesa State templates should provide methods for returning to the overall Mesa State homepage by default. If you find that your site has more than 10 main divisions, you are likely not grouping areas efficiently (though this is not always true). Often designers are very good about directing people to pages deep within their site but offer no way back out and have therefore produced a dead end. Be sure that both you and the Webmaster are clear about the pathway to reaching your site from the main Mesa State homepage. Creating logical pathways to information is one of the most critical and often overlooked aspects of web site design.

Interface

As you go about thinking about your pages you need to think about the interface you will be creating. Keep in mind that the majority of users on the web skim for what they are interested in quickly and often focus only on what is made to stand out immediately. With this in mind, you need to design an interface for getting people to information quickly and intuitively.

Avoid using "Click Here" for links. There are a few reasons for this. The primary issue is that it violates guidelines established for educational facilities due to the challenge it presents users with disabilities as they try to interact with a web site. Users with disabilities have a number of ways of using a web site, but making a link that simply states "Click Here" provides no useful information about what the link contains beyond it. When you make a link it should be descriptive of the content that is contained at the destination. Some users with disabilities have programs that allow them to skip to the next link and then translate the text link into speech. If the only information they receive about the link is "Click Here" they have no idea of what the link goes to and will generally not use the link. Also, as the average user skims through a page looking for the information that jumps out at them, a link that says "Click Here" provides no indication of useful information matching what the user may be scanning for.

As you prepare to build your pages you also need to be aware that too many links can be very distracting, especially when contained within a paragraph. As readers try to read a page if there are numerous links embedded within the paragraph it can be difficult to focus on the information contained within the paragraph. Numerous links can also tempt some users to click to a new destination before ever reading the full paragraph to learn the necessary information you would like them to know. Many users are "click-happy" and will click on a link almost whenever one is offered to them. If you need to convey critical information, consider keeping it free from embedded text links and placing the links below it or in an alternative location that encourages users to read your information first.

When you plan the user interface for your site, be sure that you are providing logical pathways to information your site contains and placing links in all the places that make sense to both an experienced user and to other more specialized individuals. Be sure that you are using language that is appropriate for a diverse population and that you are not using any "jargon" that is specific to your department or status. If you use abbreviations in your interface, be sure that it is clear to your user what the abbreviation means elsewhere.

Page Design

To make a strong site you will need to learn that web page design is an art of making tradeoffs that benefit the majority of your audience members. In the end, content is what will make or break your site. If you provide content that benefits your users and your area, then you have largely won the fight in producing a quality site.

While it is always tempting to utilize the latest technology and wizardry available, consider closely whether this actually benefits your site. Often such things actually delay the user and cause them to not find the information they actually need. All implementations of technology should help meet your established goal and not hinder it. Before implementing something you have not seen elsewhere in the site, be sure to contact the Webmaster to see if there is not a good reason why it hasn't already been done. There are several state and federal guidelines information to be easily accessible to everyone, including those with disabilities who may not be able to make use of the latest technology due to personal limitations or software limitations. A good rule of thumb is to realize that if something is quite new, the chance that the diverse audience of Mesa State already has the ability to make use of it is slim. Research has shown that for most computer tasks the threshold of frustration is around 10 seconds.

Good page design and layout is vital to creating a good site. There are numerous considerations you must make when you set down to design your page layout. It is recommended that you sketch out the "look" of your page before you ever begin adding elements within your design program. Doing this will allow you the chance to balance your pages, see where your pages are lacking something and will help you gain a clear understanding of how you would like your pages to turn out. This simple step can help you see what size of images you will need to obtain, what amount of text is appropriate and it can help you notice things that are difficult to be aware of when in a web page design program that has windows opened everywhere and limited space for viewing the overall layout.

Use tables to format your page. Tables allow a lot of page layout opportunities but they were not originally created for this purpose so they are not as flexible as we might hope. By making a table with no border you can adjust the columns and rows to position elements within your page to fixed locations. The table is invisible to the user, but allows you to lock things in place beyond just using left, right and center methods. Use bordered tables sparingly. Tables were originally developed for presenting information in a column/row format and for displaying data. They weren't created for graphic awe, so use them sparingly and tastefully.

One thing to keep in mind about web page design is that users of the Internet tend not to read large amounts of text from the screen and especially when it is very wide amounts of text. To help with this problem, consider using tables to add text columns to your page similar to a newspaper. Imagine how difficult it would be to read a newspaper if it scrolled from one side of the page to the next before wrapping a line. Now consider the distance on a screen for the eye to travel to read a line that extends from one side of the screen to the other. This should be avoided whenever possible. Setting up tables without borders can help you format your text into columns that are easier to read. People often skim the web in search of information so you should keep this in mind as you design your pages. Consider condensing information or excerpting important parts to clue your users to what information they would find if they further investigate.

When you sit down with your web design program to work on a particular page, your first step should be to provide your page with a title. The title appears at the top of the browser and helps identify the page to users and within the Mesa State search engine. You can use spaces, capitalization and phrases in the page title. Make your page title descriptive of the page. On most pages, you will also want heading to start the page off. This allows users coming from any location on the Internet the ability to quickly locate and identify what page they are currently on. Stick to the standard heading size used throughout Mesa State so that your site adds to the consistent feel of Mesa's site rather than detracts from it.

New web designers have a tendency to center everything. Avoid this. Large amounts of centering look very sloppy and jagged to eye as both the left and right edges become extremely uneven. Designing your page on paper will usually help you notice how jagged and rough overly centered pages appear.

As you design your pages, you need to keep the consideration of download speed always in mind. Graphics tend to be one of the quickest ways to add download time to your pages. Limiting the number and size of graphics is often necessary in order to keep your page downloading in an acceptable time frame. Try to always make your pages download in approximately 10 seconds or less on a 56k modem. If you do not keep this principle in mind and your page takes a minute to download, the vast majority of users will simply close the page and go elsewhere or log off in frustration. The approximate file size to aim for being under is 65 kilobytes in order for your page to load in a time of about 10 seconds or less on a 56k modem.

Avoid pages that scroll down for numerous pages worth of text. Users tend to dislike scrolling excessively and a page that has a lot of information buried beyond what is immediately visible on the screen can often be frustrating to a user. Most navigational elements of a page should always be immediately visible when a page is first loaded.

The best web pages are ones that have balance between graphics, content, speed and usability. With technology as it currently stands, you simply cannot have the best of all these worlds simultaneously. Part of your mission needs to be finding the right balance between these competing elements for your users.

Be sure that you do not use spaces, capital letters or symbols in your filenames and folders when working with pages on the Mesa State site. Remember that the longer your filenames and folders are the more you are potentially making people have to type in to reach your web page.

Content

The content of your pages should be "timeless" whenever possible. Timelessness comes from avoiding language that dates a page or places the information within a specified timeframe. For instance, using words like "next Tuesday" dates a page and if they page is not carefully maintained they can provide incorrect information or frustrate users when they learn that the page is outdated. Only use references to time in your pages when absolutely necessary. This allows you the flexibility to update your pages when you have the time to do so or when a change is actually necessary instead of weekly due to language you used but could have avoided.

An exception to the guideline above comes when you have content that changes minimally, but is important. If you have a contract that changes every semester, but largely looks the same, it can sometimes be crucial to place a date to signify to your users that the information is current. Sometimes placing a small "page last updated on…" at the bottom of the page reassures your users that they are not wasting their time and that they are receiving current information. Such "time stamps" can also help point out when a page has had content changes that might otherwise be overlooked by a reader who assumes they have already read the material once and do not need to pay further attention to it.

Never create a page that has no purpose or no real content. Evaluate all of your pages to ensure that they are there for a reason and not just to fill space. Sometimes a good indicator that your page really isn't worthwhile is if it contains less than a paragraph of information. If this is the case, often this information should be incorporated into part of another page to spare your users an additional click to find the information they are seeking. If you create a page for your department that only contains a single mailing address or something similar, you likely need to reconsider your design strategy.

Link to .pdf files and .doc files and other specific program files sparingly. Microsoft .doc files are produced by Microsoft Word and this is not a free program. You should only provide links to such files when you can reasonably assume that your audience already has the necessary program to view this file. Otherwise, you are creating information that is not usable. Adobe .pdf files are only a moderate solution currently. The .pdf format is a free format and can be viewed by Adobe Acrobat Reader, a free program downloadable from the Internet. This program has increased in size as it has developed and is no longer a quick download for modem users if they do not already have the program. If a user has to download a program before they can view information, they will often not bother to do so. Use .pdf and other file formats only when it is necessary and there is not a viable alternative. By placing information in downloadable files you create information, which cannot be found through the standard Mesa State search, engine and that can potentially take excessive times to effectively work with.

Typography

Avoid using all capital letters in your headers, especially if they contain more than one word because this dramatically interrupts the user's natural scanning. The human eye relies on "bumps" in words and lettering to quickly gain word recognition and using all capital letters creates smooth blocks of text that slow the eye down. Notice how the word "DIFFICULT" forms a rectangle around the word to the eye while "Difficult" contains peaks and valleys that the eye uses for rapid word recognition.

Text sizes should not be gigantic. In general, it should be very rare that you have any font sizes larger than size 14 point. If you find that you are increasing the size of words to fill space on a page, reevaluate the need for the page and the page's purpose. Just as when a student turns in a paper with oversized fonts, one of the best giveaways to a poorly thought out page is when the font size is large. Large text on the web can also have the effect of creating "loudness" on a page. Many users are disturbed by heavy amounts of large text. A lot of large text can have a similar effect to many users that yelling a person does and is often interpreted the same way. Overusing bold lettering can have an identical effect. If you are putting everything in bold text you are actually making none of it stand out and are making your text more difficult to read.

Use the Mesa State standardized font for the body of your pages. This allows the Mesa State site to have a uniform feel. Use good taste when changing the color of text. Keep in mind the necessity of presenting a professional appearance to the public. Do not combine clashing colors like hot pink and neon green. The Mesa State font will be standardized to display well on all browsers. Whenever you stray from the default fonts you run the risk of using fonts that will not translate well to user machines. Fonts are not sent to the user when they view a page and their computers will substitute the closest approximation, which is often drastically different than what you would like to display. Some of the safest fonts include Times New Roman and Arial fonts.

Limit the number of fonts used in any one page. More than 2 fonts in a page are usually too many and more than 3 are almost always unattractive.

Never use the <blink> tag on text. It is unprofessional and can cause seizures in people with epilepsy.

Web Graphics

Only use .gif and .jpg files as graphic formats for your web page images. Do not use spaces in your graphic file names or special characters like /, <, +, etc.

As a rule of thumb, use .gif formats when there are few colors in your images or when it is line art. Use .jpg format when you are dealing with photographs with numerous colors. There is a balance between file size and image quality that needs to be worked out with every photo individually when possible. If possible, try comparing the file size and quality of your image in both .jpg and .gif formats under different quality settings. Choose the one that has the smallest file size and still looks quite true to the original. Monitors do not display more than 72 dots per inch (dpi) so it is a waste of file size to save your images in a resolution that is higher than this for display on the web. The goal is to decrease the file size as much as possible while not degrading the appearance of the image. Always save your original files before converting them into compressed .jpg or .gif format. Once the file has been converted into a .gif or .jpg file its quality can never be restored from that file back to the original quality. Keep a watchful eye out for distortions that occur in both .gif compression and .jpg compression. If you cannot get the file size of your graphic to be small enough to download quickly through compression alone, consider reducing the physical size of the image on the screen. A combination of compression and physical scaling is often necessary to make your graphics look good, yet download quickly. Adding a large number of graphics to any page can quickly and dramatically increase the file size of the overall page. If you find that your graphics are pushing you well beyond the 65k target file size for your entire web page, consider removing some of your images from the page and perhaps relocate them to other relevant pages.

A general rule is that you can decrease the size of an image from its original size without degrading its quality. However, you cannot increase the size of an image on the screen from its original size without reducing its quality and causing pixelation to occur. Once you have altered the size of an image you may notice a little blurriness in the image. Most software programs have the ability to sharpen an image that can often remedy this blurriness.

All images on the Mesa State web site that convey any sorts of information (photos of students, a button, etc.) need to have an "alt tag" applied to them. An alt tag provides an alternative text description for images. Federal law requires that alt tags be present on Mesa State's site. The alt tag should contain information that describes the image. Alt tags are viewed when the mouse is held over an image, when users have turned off their graphics and can be read aloud by certain programs that assist those with disabilities.

Review Process

Begin your review by checking your site against the goals you have established for your site. Do you believe you have met your goals? Do you believe you have cut any corners that you feel have taken away from your goals? Are you happy with the finished product? Have you navigated through your site and found everything intuitive? Do you have the ability to have others test the site before it goes live to give feedback? Can you have a member of your intended audience test the site before it goes live?

Spell check your pages.

Ensure that all of your pages have page titles. Page titles are critical for properly identifying your pages and for indexing them in the search engine efficiently.

Check to make sure that you have no spaces, capital letters or special characters in your filenames or folders.

Check the file sizes of your web pages to make sure that they will download quickly.

Look for any layout errors or graphical errors in all versions of browsers you have available to you.

Check to see if you have built any useless pages as you experimented with building your site. Check for redundant information and ensure that you have grouped information logically.

Check for broken links in your site.

Check to see if you built any pages that you failed to create a link to.

Check to make sure all your graphics are in .jpg or .gif format, load quickly and are named without spaces or special characters.

Ensure that your site has been properly linked to by the rest of the Mesa State site and think about whether or not there are other are other sites that should link to yours.

Check for any "loud" pages that may need refinement.

Check for any poor quality images.

Look for balance and good design throughout your site.