WHAT IS A WEBSITE

Web Sites are virtual locations on the Internet (ie, Internet address is:
www.yahoo.com) that are accessed and displayed by Web Browsers (Internet
Explorer, Netscape Navigator)
A Web Site can be about anything, but often people use them to inform, entertain,
sell, or conduct business. On the Internet, content is king.
A web page is the individual page that make up a whole website.
Web pages are navigated using Hyperlinks (commonly referred to as links ).
These allow you to jump from one page to another, or access files directly.
Web pages are coded in whats known as HTML HyperText Markup Language.

HTML (HyperText Markup Language):

A simple, universal computer language that allows people to create simple or

complex pages of text, images, audio, video and other content for viewing on the
Internet.
HTML uses tags that encase regular text to give special meaning and functions
that a web browser (a program, such as Internet Explorer) understands.
HTML dictates the layout, formatting and linking within a web page. The browser
processes the HTML and presents the content/web page accordingly.
Format: Web browser on your computer contacts website ! Website server sends
HTML page and content (text, graphic/audio/video/other files) to your computer
! Browser processes HTML and content on local machine and displays page
accordingly.

Issues:

Purpose of HTML is that theoretically, web pages can be viewed by anyone on

the Internet and will always be displayed the same way, regardless of what kind
of computer, monitor or browser is used.
However, browser compatibility issues / different monitor sizes / screen
resolutions means not every page will look the same on every computer
This has created a number of problems for web designers when it comes to
building a website that will look the same in all browsers.
Best solution: write clean, efficient HTML code and design a website that adheres
to World Wide Web Consortium standards. Otherwise, there is a chance that not
everyone will be able to view your page as you intended.
In the old days, people used to code web pages in HTML by typing it out by
hand. However, a lot of people dont have the time or patience to memorize
HTML codes and create a website by typing in HTML.
Nowadays, there are web design programs that allow you to design the way the
site looks and will automatically write the appropriate HTML code behind-thescenes for you. These programs are known as WYSIWYG Editors (What You
See Is What You Get). Most people prefer these to hand-coding but it is very
useful to know and understand what most of the HTML tags do.

PLANNING YOUR WEBSITE

Before you even begin designing your website, consider:
As in other media, the heart of design is communication. Ask yourself: Who are
you, what is the point (topic) of my site, what are my goals with this site, how will
I communicate those goals?
Who's your intended target audience for this website?
Focus your ideas. Make sure everything you want to put on your page has a really
good reason for being there. Redundant and extraneous information is a waste of
peoples time and they will likely not read most of it anyway.
Some ideas for websites: Personal/family, business (e-commerce), music (band),
online portfolio, pets, movie fans, video games, etc.
Issues to consider:
How will your audience view and access your page (which browsers are you
targeting, cross-browser compatibility issues)? If you dont know about browser
compatibility issues, design for Internet Explorer as the minimum.
The Internet is all about bandwidth. The more content-heavy your site is, the more
bandwidth people will need to be able to load it in a reasonable amount of time.
Broadband (cable modem, DSL) is immensely faster than dial-up over a phone
line.
Speed of peoples connection (bandwidth) to the Internet will affect amount and
type of content you can offer, such as large files, video, etc (metaphor:
size/diameter of pipe, water = data. Small pipe = slow, Big pipe = fast)
Solutions: Either design two sites (broadband/dialup, more work), optimize site
for lowest common denominator (dialup, best route), or neglect dialup altogether
and stay broadband (only of you are positive of your target audience using such
technology).
Plug-ins only use if necessary. Plugins are extra programs for viewing specific
types of content not initially supported by a web browser.
If you decide to use plugins, it presents user with a choice:
1. they either have to download the plugin before being able to see the content
(takes time and is annoying when you visit lots of sites that use different
plugins)
2. or not download the plugin at all and wont be able to view the content of
your site
3. Either way it can be a deterrent to people visiting your site.
Navigation:
Map out sites navigation using a flow chart/hierarchy before you begin building
any web pages so that you can plan out how users will browse your site
Remember, users can often enter your site from any page. Make sure each page
has built in navigation to access other areas of your site.
Back, Forward, Home, Contact are common links to put on every page.
Pick relevant page titles than encapsulate the idea behind that particular section of
the site, ie Photos, Music, Projects, News dont put something nondescript.

The less clicks the better. Having to click through page after page to get to what
youre after is tedious and annoying. Design your site in such a way so that it
facilitates the straightest, most direct path to whatever content someone might be
trying to access.

DESIGN
Screen Resolution:

Screen (monitor) resolution is usually defined by the width and height of the
monitors screen in terms of pixels. Pixels are the tiny dots used by the monitor to
display images.
Monitors range in size from 14, 15, 17*, 19*, 21 (*generally considered
standard size today). The bigger the monitor, the higher the resolution it can
support but your video card must also be capable of displaying that same
resolution.
Depending on size of the monitor and capabilities of the video card, you can
display such resolutions as: 640x480, 800x600, 1024x768, 1280x960, 1600x1200
When designing a website, chances are not everyone will be using the exact same
computer/browser setup that you have to view the webpage. Thus, you should
design for a minimum set of resolution parameters, say 800x600.
Remember, not everyone has a huge monitor most important elements should be
at top of page/screen

Colors

Colors reflect theme or topic of site - do the colors you select work well with the
goals and message of your site? Try to be consistent with the colors you choose
and use throughout the site.
There is a universal, 216-color palette that all browsers can use as bare minimum
to draw from; do the colors youve selected exist on the 216 universal-color
palette? Otherwise, certain colors may not show up exactly as you intended (ie,
yellow looks brown)
Tip: use a limited palette: A few colors can go a really long way. Be smart about
the colors you pick and dont overdo it just for the sake of having color. Too
much garishness and contrast creates eye strain and is bothersome.

Text & Readability

People read left to right and top to bottom. Eyes reach upper-left corner first
thus, a good place to put something really important
White space helps the reader's eyes rest on what's important - whether an image or
words.
Type should sit comfortably on background color (Example: White type on black
is readable, but light-grey type on black = end result more comfortable to the eye)
You can never go wrong with black type on a white background
The bigger the type, the easier it is to read. The longer the line length, the more
difficult it is to read

Avoid making entire sentences links

Avoid blinking text its annoying

Content:

Keep your content fresh. If you update your site on a regular basis you will have
people coming back to read more, thus making your website sticky.
Maintain consistency in the voice of your writing, font selection, layout, colors,
graphics and navigation menus to create a unified image you are trying to
portray.
When creating your site hierarchy and content, maintain separate directories
(folders) that relate to your topics. This will help in organizing your files:
o Eg, if you have a photos page for 3 separate topics (family, pets and
friends) from 2001, 2002 and 2003, create a folder called pictures,
which is then subdivided by topic family, pets, projects which are then
subdivided by date (year) in each category.
o Eg, /pictures/family/2001 or /pictures/family/2002, or /pictures/pets/2003,
etc.
Include contact information (email address), date the site was last updated, site
disclaimer, browser/plugin requirements, site selection (if you offer more than one
version of the site, ie Flash or HTML) on front page, if you use a splash/entry
page. Most sites nowadays have done away with intro pages and start directly on
the main content page of site.

Using Images:
Use images selectively to enhance your page they are much larger than text in
terms of file size.
For gallery-type pages that display many photos, use thumbnails which link to full
size pictures, rather than full size pictures all on one page (takes forever to
download otherwise). There are many free programs available on the Internet that
will produce thumbnails automatically for you.
When creating graphics for web pages, remember to use web-palette as your basis
for color selection.
Optimize images for web. Many programs (Adobe Photoshop, Macromedia
Fireworks) have a Save for Web function that will optimize graphics
specifically for the Internet. This compresses the images with minimal loss in
quality for quicker downloading.
Website WYSIWYG Editors:
Netscape Communicator (free)
Macromedia Dreamweaver (trial/buy)
Adobe GoLive (buy)
Microsoft Frontpage (buy)

Reference Sites (learn more):

www.htmlgoodies.com
www.webmonkey.com
www.builder.com

ADVANCED CONTENT ISSUES:

Sound:
Sounds can be quite bandwidth intensive depending on the quality/filesize.
In general, sounds that the user has no control over starting up automatically when
visiting a web page can be extremely annoying.
The golden rule is: don't subject your web page visitor to sounds unexpectedly - a
page that offends is not likely to be revisited.
There are exeptions to the no-sound rule:
1. on a page whose known intent is sound, such as a music sampler page or
some humor pages.
2. the user has been previously informed (that is, prior to linking to this page)
that they are going to hear something, such as by a link to a flash
presentation, or to a video
3. the user has the option of turning the sound off (often only possible
through flash websites)
4. The sound is part of a navigation menu or button that reinforces the users
interactive experience of selecting or clicking that particular menu item or
button.
Video:
Video produces huge filesizes, but can be compressed to reduce file size at the
sake of video quality (compression can introduce visual artifacts, choppiness,
grainyness).
Video is extremely bandwidth-intensive, almost exclusively relegated to
broadband users, as dial-up modems simply cannot handle the huge amount of
data necessary to create full-motion (24 frames/second) video.
Streaming is almost always the best delivery method to use when it comes to
video. It will play instantly instead of you having to wait hours for it to download
to your machine, depending on your connection to the Internet. Audio can also be
streamed. Streaming requires you to encode video into a streaming file format,
and also have a web host that supports this feature.
To actually get video footage onto your machine from a camera is a process unto
itself (which I will not go into), but can be done cheaply using a Firewire
card/USB port and Windows XPs built in Movie Maker (free) or Adobe Premiere
(buy).

DOMAIN NAMES

Once youve designed and built your website, you will probably want to uniquely
identify it on the Internet by registering a domain name.
A domain name is composed of three parts:
1. www.
2. the actual name of the site
3. the extension

Extensions can be: (Visit http://www.norid.no/domenenavnbaser/domreg.html for a list of

all available):
o
o
o
o
o

.com (commercial)
.net (network)
.gov (government)
.org (organization)
or newer suffixes such as .biz, .tv or .info (visit
http://www.wdbc.com/domain/extensions.cfm for explanations)

For a fee, you can register a domain name at any of dozens of Domain Name
Registrars such as www.godaddy.com (you can find a list of more registrars at
www.internic.net and there's also a non-technical explanation of the name system
there too).
Once your domain name is registered and setup, it looks like
www.yourdomain.xxx (where .xxx is the extension).
Because millions of people have registered domain names over the years, the
chances of a common name being already taken are fairly probable, especially
when it comes to .com names. To get around this problem, you can try:
1. registering extravagant names that others (hopefully) may not have thought of
before you (ie, instead of trucks.com, try superdupercrazytrucks.com)
2. registering the name you want under a different extension (for example, while
www.yourwebsite.com is already taken by someone else,
www.yourwebsite.net or .org may still be available)
3. offering to buy the domain name you want from the current owner/registerer
of that name (use www.samspade.org to help you find info on the owner)

It is also possible to hang your website off someone else's domain name
(www.theirdomain.name/yourwebsite). While this does work, it's not very elegant
or professional (especially when it comes to representing a business website), and
makes it harder to remember the longer a name gets. Often times, this is how free
webhosting works.

WEB HOSTING:

There are two options when it comes to having your web page hosted somewhere:
Free and Paid. Remember the old saying theres no such thing as a free lunch?
Well, this also holds true when it comes to having your website hosted on the
Internet. Beginners often start out with free hosts and then migrate to paid hosting
as their web design knowledge progresses. As well, people may want more
functionality in their website that a free host simply cannot provide, they get sick
of ads and pop-up windows, or want to have their website accessible through their
own domain name.

Free Hosts:

In exchange for providing you with free hosting services, free host companies
usually place their own ads and content on top of your website as a way gain
exposure to your visitors and hopefully generate revenue through clickthroughs
(users clicking on their ads). These advertisements are usually in the form of popup windows, banner ads and animations that can sometimes annoyingly take over
the users whole screen until they close them. These ads will show up for all
visitors to your site (read: ANNOYING).
Free hosts often have built-in website building programs that will allow you to
construct simple (but limited in style, layout and functionality) web pages directly
on their website.
If youve designed and built a web page on our own computer using other
programs, free hosts will often have built-in methods on their webpages for you to
upload (transfer) these files from your computer to theirs. For beginners, using a
free hosts uploading webpage is oftentimes easier than having to use a FTP (File
Transfer Protocol) program to transfer these files.
The domain name will not be yours it will often be appended to the free hosts
domain name and may not even reflect the nature of your website at all (eg,
http://www.geocities.com/Area51/Cavern/2690/)

Free Webhosting companies:

www.geocities.com
www.angelfire.com
www.tripod.com

Paid Hosts:

With a Paid host, you have complete control over all content that is displayed on
your site (no annoying pop-up windows or banners ads). Because you are paying
the company for their hosting services, they do not put their own content on top of
your site. Your site remains clean and free of all advertising unless you put it on
yourself.
Paid hosts often do not provide any web page building software. People who use
paid hosting are oftentimes knowledgeable enough about web design (or have

paid another company to design their site for them) that they do not need to rely
on the free tools provided by the hosting company.
When it comes to transferring files, paid hosts usually rely on FTP (File Transfer
Protocol) using programs such as SmartFTP (www.smartftp.com, free), instead of
built-in upload webpages.
The domain you registered will be the actual name of your website (eg,
www.yourwebsitename.com).
Hosting companies charge monthly/yearly fees for their services. Pricing is
usually based on the amount of storage space (for your website files) required,
potential bandwidth (website traffic) usage you use (or will potentially use),
number of email accounts youd like, and other features such as databases,
shopping carts and forums.
Just like any other product or service, shop around and compare what each
company offers for the money you will be paying. Decent hosting can be had
anywhere from $6 - $20+ a month, depending on the number and types of features
you require.

Paid Webhosting companies (disclaimer: I make no guarantees about, warranties for

and am not responsible for the quality of services offered by the following providers.
These are companies I found after doing a brief websearch for web hosts in Canada
I myself use Stormwire even though they are located in the US):

www.stormwire.com
www.blacksun.ca
www.allover.ca
www.hostroute.ca