Web Team Services

 

Anderson Hall Room 3
West Chester University
610-436-0043
webmaster@wcupa.edu


How to Design Your WCU Website

A successful website is one that provides useful information in an easily read and accessible format. If a website has useful information but poor organization, that information becomes lost and therefore useless. If a website doesn't have any useful information but has a clean design, the website itself is still essentially useless.

This section will teach the fundamentals of how to create a well organized and useful website. No programming knowledge is required to learn any of what you are about to read. If you are looking for the guide that explains how to implement these design fundamentals into your website, please read either the Using Adobe Contribute or Using Dreamweaver guide.

Choosing the Content for your Website

Before you put any content on your page you should ask the question, "Why am I putting this on my website?" If you can answer that question then ask yourself this, "Who is most likely going to see it and will those people benefit from reading it?" If the people who visit your site won't benefit from the information, you may want to rethink why you're putting it there. Why are people coming to your site?

Another important aspect to be aware of is the purpose of your website. The content found on your web site should coincide with its purpose.

If you are getting content from a document you cannot simply copy and paste the text verbatim because people do not read the web like they would a hard copy. A rule of thumb is that the web version of a document should be half as long as the original. Paragraphs should be kept to a maximum of four to five rows that are 12 words long each.

If you would like to keep the document as it was originally written, you can put the document online as a PDF that can be downloaded and viewed offline. We offer Word document to PDF conversions as a service upon request.

Organizing the Content on your Website

Homepage Layout

When a visitor views a homepage they want to instantly know what the website is about and how to get the information they want. The homepage should present the user with as little text as possible while still providing enough information on what the site is about. Keep in mind the average user spends approximately five seconds looking at a homepage before moving on to another page. The homepage of a website usually contains a brief summary of the website or organization and/or the current news of the organization. It is usually a good idea to not make the user scroll down on a homepage to read its contents, so keep it short and sweet.

It is also recommended that you add a little "call to action" somewhere on the page to encourage users to explore further into your website (sign up today, check out these new links, etc.).

Navigation Links

Most likely your navigation links will discussed by you and the Web Team during the initial meeting before your website is built. In most cases, there isn't a need to re-organize your links, but this section provides you with more information in case you do want to make changes to your navigation links.

All West Chester University web pages use the same navigation setup with a vertical navigation bar to the left of the content area. Currently, if a user wants to add or remove links they will have to submit a request to the Web Team since it requires changes to the code.

The links for your navigation should be clear and descriptive. The most important links should be at the top with a link to the homepage of your site being the first. You don't want too many links since users will only scan the top ones. We recommend no more than 7 links. The current layout only allows for one level of drop downs. Please keep that is mind when designing your navigation.

Headings

The use of headings for each section of a web page is crucial. Without a heading your readers will become lost in a sea of text.

Headings should be uniform in size, color, and, in most cases, font type. It is OK to use different sizes of headings when you want to drill down further in your content. An example of using two different types of headings can be found at http://wcupa.edu/_ADMISSIONS/SCH_DGR/. Notice how the heading for Announcements is different than the headings for each announcement.

Tables

Tables are used to display tabular data. Tabular data means anything that can be displayed in a spreadsheet. If your data needs to be in columns and/or rows with headings, a table should be used. Tables are especially good for making calendars or displaying score sheets. Tables are also a great way to create announcement boxes on your homepage. A simple one or two row table can be used for this purpose. An example of such an announcement box can be found at http://www.wcupa.edu/_Services/CampusRec/.

Tables can also be used to break up a page up into columns or rows to further organize a web page, but it should be noted that a table's true purpose is to display tabular data.

Lists (Bullet / Ordered)

Lists are very useful in organizing content and it is highly recommended to use them whenever possible because web users users usually scan sites instead of reading them. Any list of data should be put into either a bullet list or an ordered list.

An example of a bullet list:

  • Data item one
  • Data item two
  • Data item three

An example of an ordered list:

  1. Data item one
  2. Data item two
  3. Data item three

Using lists in a web page is a great way to draw attention to your writing. Lists help break up content on a page so users see more than just paragraphs of text.

Paragraphs

When you put text on your web page it should be formatted in a way that is easy to scan and read. Formatting your text into paragraphs with spaces in between them is a great way to make your text readable. These paragraphs should be kept short if possible and boldface headings should be used to break these paragraphs into sections for readers to easily navigate through your text.

Page Titles

Page titles are a very important part of a web page, but they are often overlooked. A page title can be found as the text that appears at the top of your web browser next to the name of the browser you are using.

Example of a Page Title

Although this may be the most common way page titles are used it is not the only one.

Page titles are used a lot by web browsers; they will appear as the name of bookmarks, on the browser's title bar, on the browser's tabs (if tabbed browsing is supported), in a browser's web history, and on the task bar if you are running Windows.

Search engines will also use a web pages' page title. They use the page title as the link to that page if it comes up in a search result. That is why it is important to use a descriptive page title that represents the information found on that page. A good page title will improve your search results.

More importantly, it is important to note that page titles for your website should not all be the same nor start the same. You should keep page titles descriptive of what is found on that specific page. As an example the undergraduate admissions website uses different page titles for each web page. Each page starts with what is on that page such as "Request for Information" on the information request page, and "Come Visit Us" on the visit us page. These page titles give users and search engines a more specific idea of what is on each page.

Using Different Color Text, Backgrounds, and Styles

All West Chester University web pages must follow a similar standard look and use the default styles for all backgrounds and text including links and headers, but not tables.

This rule is here to enforce consistency for all WCU web pages. Our styles have also been tested for support on all web browsers and screen resolutions so they are compatible with the vast majority of web users. We also used ADA testing to make sure our styles are ADA compliant.

ADA Design

West Chester University is required to follow the Americans with Disabilities Act (ADA) and make all of its web pages ADA accessible. If the default styles for text and links are used (which you are required to follow) your website will be ADA accessible.

If images are used on your website you are required to provide alternative text to describe what the image is. It is not recommended to use blinking or moving images as these are difficult for some people to decipher.

Text should be formatted with the default styles to make sure the background color and the font color don't blend together. Non-default color text should also be avoided because some colors cannot be viewed by those with colorblindness. Blinking and scrolling (marquee) text should be avoided as it may cause seizures in some people. Small text sizes should also be avoided as many people have difficulties reading small text.

If you have not already, please read the paragraphs section above to get an understanding of how to format text so it is easier to read on your web page.

Images

Images are great way to make your website more visual. The use of images on your website is highly recommended. Any image that you own or have the rights to use can be put on your website. The following sections will explain how to use images and how to obtain them.

Please note that any WCU student or staff member pictured in any image on your website must fill out a photo release form. The completed form should be kept by the head of your department or organization.

Proper Use of Images

Images are a very important aspect of a website. They can be used for navigation, to display data, and to improve the aesthetics of a web page. Unfortunately, many people misuse images on web pages.

The most common way people misuse images on the web is by putting a very large image on their pages and letting the web browser to shrink them down. This forces the user to download a larger image than they are actually seeing. This leads to longer loading times and more strain on our servers. If you know how to use an image editing program please resize your images to the actual size they will be displayed on your page. If you do not know how to resize an image please contact the Web Team by filling out a request form and ask us to do it for you; we will be more than happy to help you!

Generally speaking the use of animated images for decoration is frowned upon. These images are very distracting and generally serve no useful purpose.

How to Obtain Images

Images you own or images you have the right to use may be put on your website. If you need more images for your website they can be obtained several different ways.

  • Web images can be found by searching SharePoint.
  • Photographs can be taken for you at your request by the web team.
  • Stock photo websites are also a good resource for more images.
  • As stated above any image you own can be put on your website, so feel free to take your own photographs for the web.

As stated above, any image you own can be put on your website, so feel free to take your own photographs for the web.

Video / Audio

Video and audio usage on websites has vastly increased in the past few years. Video and audio files will bring exciting, dynamic content to your page and are recommended if you have them.

The proper way to put video or audio files on a webpage is to provide a link for the user to click before they view them. If a user opens a page that has a video embedded in it, they will be forced to download that video even if they didn't want to view it. This may not seem like a big problem with today's faster internet connections, but not everyone has a high speed internet connection. This will also put a strain on our servers.

Adobe Contribute will allow you to put video and audio files on your webpage up to 1024kb in size. To learn how to do this please follow the Using Adobe Contribute guide. If a larger video or audio file needs to be on your website you may submit a request so that the web team may assist you.

To meet ADA requirements, videos and audio clips should be accompanied by a transcript if possible.

Blog / Forums

Blogs and forums provide a way for a community of web users to openly express opinions and share knowledge with each other. Due to current legal issues, West Chester University cannot support open blogging or forums. We do however encourage one way blogging and third party options such as https://www.blogger.com/ for open blogging. A link can be provided on your web page to direct users to your blog or forum.