Page Guidelines: Page Design
 |
|
Example of a Susquehanna web page template
|
When actually designing your University pages, there are many ideas and concepts to keep in mind. Outlined below are page layout guidelines and some examples of how to use them.
If you are working on a department or program page, it is recommended that you start out with our line of policy and guideline compliant web page templates. Once you have the templates, you can make any modifications you want within policy and guideline specifications.
The best way to get the creative juices flowing is to look at what other people are doing. You can look at other web pages on or off campus for ideas. You can be as creative as you want, but in the end it must meet the guidelines.
Here are some specific points to think about when you are designing or maintaining a web page:
- Browser Compatibility - Always check your web pages for functionality in the most popular Internet browsers. You should pay particular attention to functionality in both Netscape/Mozilla Firefox and Microsoft Internet Explorer.
- Graphics - If you use a lot of large graphics, your page will load slowly. This will discourage the user from looking at your page. When including graphics on your pages, take full advantage of the options that the <IMG> tag offers. Don't forget to include the ALT="" for each of your images. This can be used as a description for the image plus it is visible even if the viewer has images turn off. Don't forget to visit the Web Central University Identity Page for guidelines on the use of University logos.
- Page Length - Keep it short! Users do not like to scroll. Put your most important information at the top of your page so it is always viewable when the page loads. If your page becomes longer than a couple of screen lengths, think about either dividing the information up into several pages or providing local links to various sections of the page.
- Links - Try to create your page so that there are both textual and graphical links. Graphical links catch the user's eye. Textual links are sometimes more practical. It's a win-win situation if you can create textual links that look graphical. For ease of maintenance, always use relative paths when linking to other pages within www.susqu.edu, rather than absolute paths. Note that you will always need to use absolute paths when linking outside of www.susqu.edu.
- Page Title - Always include a page title on your page. The campus search engine will produce better results if you have a page title on every page.
- Enhancements for Searching - The campus search engine will give your viewers better results if you include <META> tags on each of your pages. This will provide searchable keywords and a page description that the search engine will use.
- Printing - Many viewers print web pages. Print a sample of your design to make sure that it prints well. Make sure none of the information is cut off when printed. Also make sure that the text is visible. Using a light colored text on a dark background could cause the user to print out blank pieces of paper since the text is so light.
- Grammar and Spelling - Nothing says amateur like a page that has misspellings or grammatical mistakes. Always proofread and check spelling and grammar. Some web page editors have built in spell checkers.
- Frames - Frames are not recommended for University web pages. They can be a critical design issue. In the past, frames have been a major problem with browser compatibility. Frames are no longer the subject of non-compatibility, but they are subject to design issues. Frames can be put to good use, but can also look very bad. Use care if you are thinking about using frames.
- URL and File Name Conventions - Always use the same file extension for your HTML files. We recommend using ".htm" for University web pages. The main page of your Web site must be named "default.htm" and located in the root of your department web space in order for it to be published. When creating links to pages or images, always type out the URL in lowercase letters.
- Animation - Use sparingly. Animated GIF's tend to look like advertisements and may not catch your viewer's attention anyway.
- Screen Resolution - This problem has actually reversed itself. The problem used to be that pages were too wide for the screen. Today the problem is often that the page is not wide enough for the screen. Today's standard screen resolution is 800x600 pixels. Many viewers are using even larger screen resolutions. Test your design on at least a screen size smaller and bigger than the one you are designing the page for. Make sure all elements of your page still "hold together" on different screen resolutions. Also try to avoid large areas of dead space on your page when it's viewed on a larger resolution.
- Java Applets - Be aware that Java can take a long time to load and many users will not wait around. Java uses a special "plug-in" called the Java Engine. It can take up to a half a minute or more to start initially, but once it is started, Java applets load as quickly as a normal web page. Some viewers also just turn off the Java Engine so that they do not have to wait for Java to load. Also be aware that Java applets can also look like advertisements and may not catch your viewers attention as you intended. Java applets are not recommended for University web pages.
- Scripting Languages - You should also be aware that scripting languages do not always produce the same results in all of the popular browsers. JavaScript works in both Netscape Navigator and Microsoft Internet Explorer, but each browser has their own extensions that don't work in the other. Client-side VBScript is specific to Internet Explorer and should be avoided at all costs since it will exclude roughly half of your viewers.
- Spawning Windows - Only spawn new windows for a very good reason. All viewers hate to look at their task bar and see 50 copies of their favorite browser running. A good use for a spawned window is to enlarge a small photo on a page...kind of like a picture viewer. If you use a spawned window, always make it obvious that you spawned a window and provide a means for the user to click on a button or link to close the spawned window or make it close when it loses the focus.
Once you are settled on a design, use the design as a template. All pages on your Web site should have the same overall design. The only thing that should be different on each page is the information.
If you have any questions about page layout, feel free to email the Webmaster or call 570-372-4348.
