Who Wants to Be a Webmaster

Principles of Web Design

Jim Wright – jwright@kennesaw.edu

Agenda:

9:00 Introduction and Overview

9:15 Introduction Presentation

10:10-10:20 Break

11:45 Wrap Up – Question

What makes a good web page or site?

What are some of your ideas?

Deadlinks
Slow moving pages
Complex URLs
Can’t find what you want

Some Basic Rules

· Easy to find stuff (3 click rule)

· Easy on the eyes (no obnoxious animated gifs!)

· Not too many links

· Simple

· Consistent across entire web site

· Downloads fast

Issues:

Long scrolling pages
No navigation support
Outdated information

Download Times- Need for speed.

Browser wars (Example: marquee) <marquee>This is a test</marquee>

htm vs. html

Case sensitivity

Single space vs double space <BR> vs <P>

Complex URLs

Frames

Over-use of "leading-edge" technology
Orphan pages

Screen size

The usability guru:

Jakob Nielsen http://www.useit.com/

What are you trying to say?

The message is everything!

Presentation is an undeniably important element of good Web design. But more folks use the Web as information source than as an entertainment source. Make your site’s purpose clear and explain who you are and what you do.

Always create from the end user point of view

Organize your files

Let’s Get Organized - Outlining and Storyboards

Plan out your site and the content. Think of your user. Plan things that

are logical and easy to access. You may want to include a site map.

Use Inspiration, MS Project or Org chart in Word

Navigation

Design clear and easy to follow navigation. If you use imagemaps or graphic buttons, always have text navigation too. Some people don’t have graphical browsers.

Clear Navigation
Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links.

Easy to understand
Make your links easy to understand and to the point. Usually you won't have enough place to have long links so make use of the space wisely. Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable or nobody is going to click on your links, which will defeat the purpose of designing a good navigation system.

Consistent
Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Don't confuse your visitors by putting your navigation links in different places in different pages.

Check for broken links
Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.

Layout

Fit in one page rule

Be consistent and use the same navigational structure and layout on all pages.

Have all sub-pages use the same style and font. Use the same colors.

Easy ways to do this is to design one master page and do a “save-as” and

rename the file.

White space – USE IT!

Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site

Color and Fonts

There Readable and professional looking fonts - If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.

The Web is not WYSIWYG.

Problem with web editiors – KWYSIWYG

It's frustrating but true. The Web is not What-You-See-Is-What-You-Get. Well, actually, that's not exactly true. What you see is what you get, of course.

The problem arises when you mistakenly assume that what you see is what everyone else gets. The key thing to remember here is that there are millions of Websurfers out there who don't use your favorite browser, your video card, your screen settings, or even the same kind of computer as you.

Most "cool tricks" aren't really all that cool

When you're new to the WWW, pages that automatically load other pages seem almost magical. But most of the cool stuff you're encountering for the first time has actually been around for quite a while. It's been done already. Truth be told, it's been done to death.

Browser Compatibility

Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.

Speed Kills

Fast-loading pages make for happy Websurfers. 68K to 100K total for a page

Most folks' biggest beef about the Web is piggish, slow-loading pages. Fast-loading pages make for more (and happier!) visitors to your Website. The key to building fast-loading pages is simple

Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load.

Screen Space

All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels.

Designing Web Sites For All Screen Resolutions - 800 x 600, 1024 x 768, 1280 x 1024 and higher

Designing web sites to fit all resolutions is a very important web design principle. They may look perfect in a 800 x 600 browser but if viewed in a 1024 x 768 resolution look a little empty. You'll find a lot of wasted space around it making the web site look quite small.

Absolute vs. Relative positions

Center is a cool trick

Graphics slices are a good way to hide the tables

Templates, Style Sheets, SSI and linked scripts

Work smarter – not harder!

Always use Templates while developing a web site

If your web site follows a basic structure throughout the site you absolutely must use a template. Imagine you have a web site with over 50 pages, all following the same basic structure. Creating a template is a huge time saver.

Style sheets allow you to control the font, color and background information on your pages.

What are Server Side Includes?

Server Side Includes allow you to write some commonly used code once and have the server insert it into the pages for you. In other words an include file has code that you would like to reuse. Any ASP or SHTML page that wants to use the code in the include file will have a special line that indicates the place holder for the code.
This code looks like: