Science & Engineering Node Services - School of Engineering and Applied Sciences, University at Buffalo
Menu
- Getting Started With SENS
- Personal Web Space
- SEAS/NSM Web Space
- SENS Web Guidelines
- SENS Style Guide
- Resources & Links
- Hints & Kinks
- Back to the Web Style Guide Home
- Back to SENS
Design
SENS Guidelines
It is recommended that SEAS web sites:
- be text-based, with graphics used sparingly and as enhancements rather than as necessary elements of navigation (with exceptions for image galleries, high-resolution images that demonstrate research, etc.--see below).
- be designed so that the user has ultimate control over how the site is viewed: font sizes, viewable page size, etc. should be scalable to accommodate user preferences.
Questions you might have
What's an imagemap? Can I use one for my menu?
An imagemap is a graphic that is divided (or "sliced") into different regions, each of which is clickable. A formerly common way of creating a menu, and one that is still used occasionally, is to create one big image with an entire menu on it and rely on it for navigation. While we're not going to tell you that you can't do something, we hope you will consider these points:
- Some users, especially those with disabilities, cannot or do not use images in their browsers. If you do not design your graphic well, they will not be able to navigate your site.
- If your menu is an imagemap, you'll have to create a new one every time you make a minor change. If your menu is just text, all you'll have to change is the text.
- That also applies to those who come after you, especially if you are a TA who will graduate next semester and pass the webmaster status on to someone else. And the "someone else" might not know how to use the graphics software you used to create the imagemap.
When it comes to graphics, how big is too big? Why does it matter?
Very large images take up more space on the server and take longer to load in a page, especially for visitors who are using slower connections. Although many people have moved to high-speed broadband connections, there are still some out there who are dialing in with 56K modems. Most experts say that images should be under 50K, although that number seems to have changed in the last few years as the average connection speed has gotten higher.
What's .gif? .jpg? .png? Which one should I use?
The main difference that you'll see are that .gifs (pronounced "giff" or sometimes "jiff") are good for small graphics with crisp lines and fewer than 256 colors. .jpgs or .jpegs (pronounced "jay-peg") are "lossy", which means they're softer, a little blurrier, and use more colors, especially in gradients. .pngs (pronounced "ping" combine the best qualities of each in a much smaller size, but they do not always render on older browsers--or sometimes even newer ones. Also, you need fairly recent graphics software to produce a good .png.
How can I optimize my web site and its graphics?
- Use fewer colors;
- Use a lower resolution;
- Use fewer graphics than you think you need;
- Don't use the "slice and dice" method (creating your site as one large graphic, then converting it to a table with Dreamweaver or ImageReady) to create your site;
- Use image compression.
For my research site, I need to post the high-res graphics from my electron microscope. Are you telling me I can't do that?
We're not talking at all about research graphics. The audience for your research graphics is typically going to be willing to wait for your research graphics to load, because those graphics contain information they want to have. Do whatever you need to with your research photos, graphics, and videos; if you need more space to accommodate them, please send us a nodehelp. We encourage you to post graphics of this kind, and we can give you help if you need it. The guidelines for optimizing graphics only apply to menus, logos, banners, and other accompanying graphics.
