Tertal: Beginner's Web Design Tutorial

RoboBOT’s
Beginner
Web Design
Tutorial

Completed on January 17th, 2006
~

So, you have decided you need a website. Well, this tutorial’s purpose is to make sure you really need one, and if you do, that you do it right.

Objectives:

1. Learn to decide when a website is needed
2. Learn how to design a website
        A. Organization
        B. Colors, Fonts, and Graphics
3. Learn what not to do on a website
4. Learn what every html document needs
        A. Doctype
        B. Head
        C. Title
        D. Meta tags

1. Do You need a Website?

The most important part of any website has nothing to do with how it looks. The most important part of a website is the Content. When making a website, you must have enough content to justify the website. A person will not stay at a website with little or no content, even if the design is fantastic. Also, creating content just for the purpose of filling a website is also a bad idea. Remember, Content first, then a website.

2. How to Design a Website

If you are reading this, then you must have a good amount of content for you site (right?). Good. Lets talk about design.

A. Organization

        The purpose of a website’s design is to present the content of the page to the viewer with organization. When a person views a website, in addition to the content they must instantly see:
        a. What the Website’s purpose is
        b. What the content of the individual page is about
        c. Where else on the website he or she can go

This means that a website must have a title and description that lets the viewer know what is on the site. The title and description "Frank’s Website: The best site on the World Wide Web!" does not accomplish its goal. From this title and description, one cannot tell what the site is for. A better title and description would be "Frank’s GameMaker Productions: The games and tutorials you’ve been looking for!".
        In addition to a website title, each page needs a title. If the page contains a list of tutorials, make sure "Tutorials" appears near the top of the page. The page title is usually below the Website title, but above the Content.

Picture 1 (http://www.glassinesurfer.com/americanstamps.shtml)

        In the website shown in picture 1, we can see that the title and description of the page clear tells us the purpose of the website (stamp collecting). We also see the title of individual page underneath. This clearly tells us where we are in their website.
        The third thing that the viewer should see instantly is navigation. Navigation is what gets the viewer from one page in the site to another. Navigation should be organized and easy to find, but out of the way of the content. In picture 1, we see the navigation listed vertically on the left side of the page. This effectively separates the navigation from the content. The navigation is also sorted into categories, and contains links with descriptive titles. This ensures that we can find our way around the site.
        Navigation links are usually put vertically on the left or right side, or horizontally between the website title and the page title. Whether you use a horizontal or vertical navigation bar doesn’t matter, it’s a matter of preference. The thing to remember is what the viewer will see first without scrolling. If the navigation is vertically on the right, then those with narrow resolutions will have to scroll horizontally to see your navigation. I recommend using the left side for vertical navigation. Horizontal is useful because all of the links are visible on the main page. It is best to use horizontal if you don’t have very many pages, because if your navigation takes more that one row it will look sloppy, and also it will move your content further down the page (picture 2B). An example of this is picture 2A.

Picture 2A

Picture 2B

        Another thing to remember is that a webpage needs separation. The links need to look separate from the content, the title from the links, and so on. This doesn’t necessarily mean putting a box around each element of the page, but that is an option. You can also use space to mentally group elements. If there is nothing directly above or below your links, then they will appear as one group on the page. Colors also can separate. Choosing a different color for a vertical navigation bar is a classic example of visually separating content and navigation.
        Now that you know how to put your links on your site, you must decide how to break up you website into pages. You cannot have everything stacked on one page, but on the other hand, you cannot over-divide up your content.
        The index page is a good place to put a welcome message, updates, and news. Another page would be useful for contact information if you want others to know how to contact you. Another page can be made for putting links to other websites. Note that you don’t need a links page if you only have one or two links (such as the GameMaker website and the GMC).
        Now look at the rest of the content you have. Try sorting it by type. A gamemaker website, for example, might have unfinished games, tutorials, and examples; finished games, tutorials, and examples; graphics and sprites; and music. If you only have a couple finished products, you can put them all on the same page under sub-headings. If you have many, then separate pages might be needed for each type. Just remember that the viewer will be expecting content on each page, and for good reason. Don’t make a page that you aren’t using.

B. Colors, Fonts, and Graphics

Picking colors is a very important part of choosing your design. Colors can drive a person away from your site if chosen badly.
The key to choosing colors is to think about how the colors interact with each other. Certain colors clash on websites just like in that ugly sweater you got last winter (just kidding, it looks great on you...really). Some colors stand out on other colors, while other colors seems to blend in. This has to do with the Contrast. Here is Wikipedia’s definition of Contrast: "In visual perception, contrast is the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background." What this means is that some color combinations will make you squint and struggle to read the text, while others will make your eyes water. Choosing colors of correct contrast prevents both situations.

Picture 3

In picture 3, we see two color palettes for a website. The first has a white background with black or red text, along with a maroon sidebar with gold links. Notice how the black text is very readable on the white background. It would be much harder on the maroon. Notice how the red text is readable on both the white and the maroon, but much more readable on the white. To determine good contrast, you must try different combinations until the site looks good, and can be looked at for an extended amount of time.
        Now look at the second color palette. The red on the blue is difficult to look at, and the green looks bad with the red and blue together. Pay attention to how each colors interact separately and all together. Color choices really just requires effort and common sense.
        Now lets talk about fonts. There are two ways that fonts can annoy people away from websites: using Times New Roman (the default font), or using excessive, indecipherable fonts, such as "dingbats". Fonts should be unobtrusive, meaning the viewer never really stops and thinks about your font. The font can subtly continue your website’s theme. If you have a website about some top secret government facility, using Lucida Handwriting is probably a bad idea. Agency might be a better choice.

        Graphics are a big part of websites. It seems that all of the fancy websites are made entirely of graphics, or at least have a fancy banner. While a nice banner is a good idea, excessive graphics is not. A web design made purely of graphics will not stretch or shrink for different resolutions, can easily become out of line due to browsers interpreting the code differently, and graphical links cannot be read by search engine spiders. Search engine spiders catalogue websites for their search engine’s database, and they look for keywords on your webpage to see what your site is about and where it links to. If your link is a graphic, then the spider will not be able to read the word, and suddenly the spider doesn’t know that you have “tutorials” on your website.
        Some graphics are good, and encouraged. The key to good web graphics is to be unobtrusive. If the picture is not part of the content of the site, then it should not stand out.

3. What not to do on a Website

    1.    Blinking text and marquees
    2.    Spelling/grammar errors
    3.    Useless JavaScript effects
    4.    Popup messages
    5.    Publishing a website when some pages aren’t finished/don’t exist.
    6.    All capital letters
    7.    Animated Backgrounds/Patterned backgrounds that prevent reading of text
    8.    Publishing of copyrighted materials without permission
    9.    Introductory Pages ("Welcome! Click here to enter!")
    10.    Making it too wide or too narrow
    11.    Frames
    12.    a scrolling inline frame within a scrolling webpage
    13.    Any of the problems mentioned in the above sections

4. What Every Html Document Needs

This is not an Html tutorial, so I’m not going to go into detail, but I want to tell you what every HTML document needs to have.

A. Document Type

A "doctype" is a tag that goes at the very beginning of an html document, and tells what language you are coding in. A normal HTML document is either coded in HTML 4.01 Transitional, or HTML 4.01 Strict. Transitional is a better choice for most. Here is what a doctype looks like (there are no line breaks):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

When you go to http://validator.w3.org, you can have it "validate" your website. This means that it checks your HTML to see if it is coded cleanly. The doctype tells W3.org what language to check. If you don’t put a doctype, it won’t know what you coded in.
If your code is one hundred percent clean, then it will tell you that you can display an image (picture 4) on your website. This lets others know that your site complies with HTML standards.

Picture 4

B. Head

After the doctype, you begin the page with <html>, of course. Before the body of the page, you must have a header section. This begins with <head> and contains important information.

C. Title

The title is the most important part of the document’s coding. This is where the title that goes in the window’s top bar is specified. Not only does this label the window, it also helps search engine spiders in crawling your website. The title should be descriptive and specific to the page its on. The title goes between <title> and </title> tags.

D. Meta Tags

        Meta tags let you include information onto your website about the document. Here are some important meta tags:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

        This meta tag defines the document’s character set. This is the set of characters that will be used in the website. http://www.htmlhelp.com/reference/charset/ shows everything on the ISO-8859-1 character set. There are many others, but this one is pretty standard for a website in English.

<meta name="author" content="John Doe, M.D.">

        This tag is rather self explanatory. This defines the author of the document.

<meta name="description" content="A website about birds and other flying animals, containing a glossary of bird-related words.">

        This tag defines the description, which is sometimes used by search engines when displaying results. The description should not be a site promotion, but an objective description of your site’s contents.

<meta name="keywords" content="Birds, birds, avians, avian, bats, falcons, Falcons, feathers, glossary, types of birds, birds of prey, flying squirrels">
        This tag defines keywords that help search engine spiders catalogue you site, and it helps your site appear on search result lists.
        These are the most common meta tags, but you can define any tag you like. To learn more about meta tags, go to http://www.w3.org and search for meta tags.

        If you start your web page with these things on it, then you setting yourself up for a proper website.

5. Final Notes

        I hope that my comments here about Web Design encourage you to build a great website. There is a lot more to learn, and most of it I don’t know, but if you have the basics down, then everything else comes much easier.
        If you find web design overwhelming, or if you just want to see some examples of good web design, check out http://www.oswd.org (Open Source Web Design). This site has free templates for viewing and/or downloading.

        Don’t forget to check http://tertal.sitesled.com for more tutorials from time to time!

--RoboBOT

<< Back to Finished Products

RoboBOT’s Beginner Web Design Tutorial