Web Design

When designing web pages, it is easy to get caught up in usability issues and completely stifle creativity. The basic principles of design should not be forgotten when designing for the web. A 2002 Stanford University study on Web credibility found that the “design look” held the most influence on web site credibility. This is not to say that you should ignore usability. Form and function need a balance. That being said, lets talk about some basic considerations to keep in mind when designing your site.

Site Display

Your web site is NOT going to look the same on everyone else’s computer. This is due to the fact that there are different browsers (which affect the way the site is displayed) and different screen resolution settings. So let’s talk about screen resolution first.

Screen Resolution

When people refer to screen resolution they are actually talking about screen size, or the number of pixels that are displayed on the screen at one time. Screen size reflects how much information the screen can display at one time.

The two most common screen sizes are 800 x 600 and 1024 x 768, so these are the dimensions that will affect you the most as a designer.

Browsers

Different browsers interpret code in their own way, so there are some minor and some MAJOR differences in the way a site displays. An important step to making sure a site displays properly is to test it in different browsers and make adjustments to the code as necessary.

As of July, 2005 the most common browser on the Web was Internet Explorer 6 (67.90%), then Firefox (19.80), Opera (1.20), Mozilla (2.60) and others way behind.

Different browsers take up different portions of the screen, so having a screen resolution of 1024x798 does not mean that’s the space you have to design within. So, a screen size of 800x600 in: IE 6 will actually give you a space of 779x400, in Firefox it gives you 781x434, in Opera it gives you 777x427, and in Mozilla it gives you 779x420. For a screen size of 1024x768 IE 6 gives you 1003X568, Firefox 1005x602, Opera 1001x595, and Mozilla 1003x588. Even then you have to consider the people who customize their tool bars, they might not have their browser window fully expanded, etc.

Percentage-Based Design

A possible solution to this is to base the layout on a percentage of the screen size, ensuring that all of the content is displayed within the given space. If you do opt for a fixed-width design over percentage based, you might want to base it on a screen size of 800x600 (762 × 400 design size).

Web-Safe Color

The web-safe color palette is composed of 216 colors that are standardized. Distortions in color can occur if one uses colors outside of the standardized web safe colors.. Programs like Adobe Photoshop allow you to specify whether you want to use only web safe colors. Most of the time this is a concern with older, color challenged computers. A good rule of thumb is to use web-safe colors in your background and text.

Image Compression

Images saved for the web need not be more than 72 dpi, since visible results gained from higher resolution are mainly seen in print, not on screen. In order for your images and graphics to display properly, you should consider the best form to save them in.

GIF (Graphics Interchange Format)
The GIF2 is best used for vector images, line art, or images with large areas of solid colors.

Color depth from 1-bit (2 colors) to 8-bit (256 colors)
Supports transparency
Supports limited animation
File sizes are typically 20%-90% of original size

JPEG (Joint Photographic Experts Group)
The JPEG3 format is best used with more complex photo-realistic images and color patterns.

Color depth of either 8-bit (256 colors) or 24-bit (16,777,216 colors)
Allows for quality control set in percentage
Typically file sizes are 5%-20% of original size

PNG (Portable Network Graphics)
The PNG4 format was developed as a successor to the GIF, and was intended to replace it. It has not been widely adopted, and all its features are not supported by all browsers.

Color depth of either 8-bit or 24-bit
Support for alpha channels with variable transparency
Support for cross-platform gamma correction
Support for interlacing
Typically compresses images 5% – 25% better than GIF

Attention Span

People tend to read in short chunks while on the web. Long, scrolling pages tend to wind-up tiring and confusing people, as they try to remember what is off screen. The best way to present large amounts of information is to logically separate them into readable chunks. Form a hierarchy, with the most important and general information residing at the top. Submenus links can be created from the generalized categories of links. Don’t overwhelm people with a menu that has a long list of links, but rather nest some of the links and categories into the general categories. On the other hand, be careful not to have a hierarchy where there are only a couple of general links and many nested links, which can be frustrating as well.

Accessibility

The WC3 has set standards to ensure that web sites are accessible and work with technologies and devices that aid those with impairments (physical, visual, auditory).

This includes: providing text equivalents for non-text elements in the form of an alt or longdesc tag, ensuring that information conveyed with color can also be read without color, or is available without color, clearly identifying row and column headers within a table structure for easier navigation.