Web pages and/or sites must be treated as official publications and should therefore be designed. Too many sites are put together in a seemingly random fashion. Don't let this happen to your website! A little time and effort can pay off in a big way, with a useful, professional-looking site.
What / Who is the website or page intended to serve?
Answering this question will help you to make a lot of the important decisions in the design of your site. A teacher page used to post resources for elementary students will have a different look and feel than a page intended for parents, for example, or a page used to post personnel forms for employees to download.
What websites or pages do you like?
Browse around and look for inspiration! You're looking for examples of:
- Page layout ideas
- Color combinations
- Navigation menus
- Clear, attractive fonts
- Banner designs
- Use of images to make a page more attractive
- And much more!
Remember: you don't need to use a design as a whole. You may wind up combining ideas from several websites into your finished product. This is not stealing! You aren't using someone else's information or work, but rather looking for ideas for better ways to create your own images and present your information.
Here are some (of the many!) websites that were looked at while designing the NISD Student Connection:
Click each image below to visit the website.
One secret to a good design is to choose your colors at the start of the project. Pick one or more colors to use in menus, headings, horizontal lines, etc. It's generally best to go with a white background and black text for the page content.
If you can't draw a design, you probably can't create it. You don't have to be an artist, but you need to draw enough to get an idea of what the finished page might look like. Use colored pencils or pens, highlighters, etc. Your sketch is a good place for notes about colors, fonts, and other aspects of the design.
Web page sketch. See the finished page.
Don't Re-invent the Wheel: Reverse Engineering Existing Sites
If you're using a program like Dreamweaver, it's easy to reverse engineer a site on the Internet. This may not work if the site is built with database tools like PHP and MySQL, but many websites will reveal their secrets with this method.
Saving a Web page
Save the Web Page to Your Computer
- Open the page to be reverse engineered in your Web browser.
- Go to File > Save As and save the Web page. Be sure to select Web Page, complete (*.htm; *.html) in the Save as type: box.
Open in Dreamweaver
- Open Dreamweaver
- Select File > Open, browse to the page you just saved, and open it.
- Now play with the site in Dreamweaver to figure out how it was made!
Reverse-engineering a Web page with Dreamweaver
Setting Priorities: What do you really need?
Content is King!
We often get wrapped up in fun technology that really doesn't improve the presentation of information. Animated images, popup menus and slideshows are cool, but are they really needed?
Add the Bells and Whistles Carefully
"Branding" Your New Site: Banners and Colors
Part of your design should include a color scheme and a banner to make your site immediately identifiable. Even a CMS Outreach page can benefit from a banner. Clip art is not a substitute for a banner.
Be careful with color. Use color in accents, such as Horizontal Rules (HRs), rather than using it as a page background color. Unless carefully chosen, background colors can make a page hard to read.
- Use a program that allows the creation of layers, such as
Fireworks, Photoshop, or Photoshop Elements. Each part of the layer
— the various pieces of text, images,
etc. — require a separate layer.
- Keep the banner simple and easy to read.
- You might want to create a smaller banner for pages
within your website.
Keep it simple!
Visit one of the media sites, like www.ESPN.com, to find out what "too busy" looks like. Busy pages make it hard for visitors to find anything. They are also more difficult to build and to maintain.
Important Content Should be in the Top-Left Part of the Page
The top-left corner is the part of the page that always displays when a page opens. If a visitor is using a device with a tiny screen -- such as a Blackberry or a cell phone -- most of the page will requre scrolling to view. The most important content in your pages should be as close to the top-left corner as possible.
Don't Make Wiiiiiiiiiiiiide Pages
Very wide pages require horizontal scrolling to read the content. This is such a pain that many visitors will probably just leave. Remember that a wide variety of devices are being used to browse the Web now. Many of them do not have wide screens. Here are some suggestions for widths in Web pages:
- Maximum page width: 750 pixels
- Maximum page width if people need to print it: 650 pixels
- Comfortable text width for reading: 500 pixels or less
Use Good Images, Not Clipart!
Clipart always looks like clipart, and much of it has been used before. There are some good sites for free photos and images that can be used in an educational site without violating copyright restrictions. Two of the better ones are Wikipedia and morgueFile. See the Resources at the bottom of this page for more information.
A Simple Design Model
Simple layout, with a table
Hint: Use a Table!
Tables may not be the cutting edge, but they work very well for positioning page elements, and they are not hard to use.
Keep Your Table Simple!
Simplicity is a recurring theme here, and for good reason. A complex table structure slows down the page and is usually not needed, if you plan your page well.
The image to the right shows a basic table with three cells. For many pages, this may be all that's needed. A table like this is easy to make:
- Create a 2x2 (two rows, two columns) table
- Merge the cells in the top row into a single cell for the banner.
Vertically Align Cells to "Top"
Make all of the cell contents "float" to the tops of the cells. This keeps the navigation menu from "drifting" down to the middle of the page if the main content area is larger than the nav. menu.
Use the "Table Trick" to Make
Table-Based Pages More Accessible
A table constructed like the example to the left will "read" differently with screen reading programs like JAWS. Screen readers are used by people with visual disabilities. In a traditional table, the first row of the table contains the banner and the second row contains the navigation menu and the contents, so JAWS reads the page in this order:
1. Banner (program reads the Alt text).
2. Navigation menu.
3. Main content area.
This means that a visually impaired person would have to listen to the contents of the navigation menu of every page, before he or she could hear the main contents of the page. If the navigation menu is very long, this will be a frustrating experience for the person, and it will make the website less accessible to the visually impaired.
With the table trick, the cell with the invisible (transparent) GIF image is in the second row with the main content. The navigation menu is in the third row, so JAWS reads it last:
Banner - JAWS reads the Alternate Text that accompanies the image.
- Invisible GIF - There is no Alternative text with this 1x1 pixel transparent image, so JAWS skips it. It's so small, it won't be noticed by visitors to the page.
- Main content area.
- Navigation menu.
The link at the bottom of this box connects to an invisible (transparent) GIF image
that is a 1x1 pixel square.
To copy the invisible GIF:
- Right-click the link below.
- From the menu that appears, select Save Target As
(Internet Explorer) or
Save Link As (Firefox).
- Browse to where your site is stored on your computer, and save
Tables for Northside CMS Outreach
Using a Table in CMS Outreach
Tables are an excellent tool for laying out content in CMS Outreach. They make it easy to position various page elements, as well as enabling the designer to use background colors and other features.
To create a table in Outreach, just click the table icon (shown to the left) and "draw" out the table that you want to use. See your campus CIT for help in modifying tables. Remember that CMS tables aren't really difficult to use, once you get some practice with them.
A new website can be a liberating experience, and a chance to get rid of a lot of clutter. Plan to keep your site organized from the beginning.
Create Folders for Images, PDFs, etc.
Keep files such as images in folders to prevent clutter in your root directory.
Get Rid of Clutter!
Avoid at all costs the temptation to copy all of the files from the old site into the folders for the new site. Old sites are often full of unused files and pages that are not used anymore. Take the time to browse through the old files and use only what you have to.
Sample Web Pages
Here are a few "empty" Web pages, to save time.
for larger image.
Simply right-click on any of the icons below to open the page in your browser.
- Select File > Save As (Internet Explorer) or
File > Save Page As (Firefox).
- Browse to a location on your computer.
- In the File name box (red oval), type a new file name for the page.
- Under Save as type drop down menu (green oval), choose Webpage, HTML only.
- Click [Save].
- Open the page in your Web editing software (Dreamweaver or other), and replace the "placeholder" text in the page with your content.
A Few Free Resources
Free or Fair Use images. Browse for any subject and click any image you see to find out if you can use that image. Many of the images are either Public Domain or are available for Fair Use by educators.
Free images. The morgueFile database is quite extensive, and images are searchable by subject.
Printer-friendly version of this exercise (PDF)