Transcript Basic Web Design Cla..

BASIC WEB DESIGN
Presentation for:
RU Governmental and Nonprofit Assistance Center
Nonprofit Development Program
http://bac.asp.radford.edu/GNAC
November 8, 2007
Presenter:
Dr. Robert ‘Bob’ Taylor
Professor of Marketing – Radford University
Owner, NRV WebWorks, Fairlawn, VA.
http://www.nrvwebworks.com
WEB DESIGN MISTAKES
Believing that people care about your website
What visitors care about is solving ‘their’ problems
Most people visit a website to solve one or more of four
problems:
1. They want/need information
2. They want/need to make a purchase or donation
3. They want/need to be entertained
4. They want/need to be part of a community
An alien can’t figure out what your web site is about in less than four
seconds
You should be able to look at the home page of any site and
figure out what the site is about within 4 seconds, if you can’t
the site is a failure.
Using Graphics or Flash for text
Graphics increase the size of the page, are not search engine
friendly and mistakes are hard to correct.
WEB DESIGN MISTAKES
Background music which loads automatically with the page
People own iPods and stereos for entertainment they didn’t come
to your website to be entertained musically! THE ONLY REASON
TO USE BACKGROUND MUSIC IS IF YOUR PRIMARY
OBJECTIVE IS TO ANNOY PEOPLE!!!
Using Animated Gifs
These were popular in the stone age of the internet!
Confusing or unclear navigation structures
This is called mystery meat navigation! Always use a consistent
navigation systems on all pages of your site.
http://www.visualculture.wisc.edu/
Floral or highly patterned backgrounds
Distracting and unprofessional http://www.fredfrap.com/intro%20page%208.29.02.htm
Too little contrast between background and text
Makes text hard to read
This is hard to read!
WEB DESIGN MISTAKES
Placing an ‘Under Construction’ notice on a web page or site and asking people to
check back later (They won’t!)
A good website is always under construction!!
Not keeping your website updated regularly
If you aren’t going to update don’t bother to put it up in the first place!
Placing a ‘hit counter’
on your website
Gather statistics on your visitors but don’t use hit counters!
An Excellent (invisible and password protectable) free web statistics service
is StatCounter www.statcounter.com.
Horizontal antimated scrolling banners
Another internet stone age design technique
Pages that load slowly (too much material on one page and large graphics are the
primary causes)
People are impatient and most will leave your site quickly if the page takes
more than ~10 - 15 sec. to load (Yes, there are some people who do not have
broadband internet connections!)
http://www.jesus-is-savior.com/ (This website is the mother of all BAD websites, not because of
content but because of design! Download time for this website over a 56K dial up modem is 3 min. 11 sec.)
WEB DESIGN MISTAKES
Pages that must be scrolled horizontally to view entire page
People expect to scroll vertically but not horizontally
Using underlined text for anything other than links and Not Underlining text links
People expect underlined text to be links. If you want to emphasize non link text
use Bold, Italics, or color
Using splash pages or any other technique just to show your creativity
People are visiting your web site for information not to admire your creativity!
Definitely do not use a flash based splash page with a ‘skip intro’ button, that’s a
sure signal that there is nothing important on the page.
Mixing too many different font styles on a page
Doing so tells visitors that an amateur created the page
Excessive use of 3D elements or text on your site
Another indicator that an amateur from the internet stone age designed the
page/site
Using copyrighted material without permission
WEB DESIGN MISTAKES
Failing to check your web site in several different browsers
At minimum check in Internet Explorer, Firefox, Netscape, Opera and
Safari (Apple now has a beta version of Safari for PC’s, but it’s still buggy)
Failing to consider that different people use different screen resolutions
Some people (5 – 8% of internet users) are still using an 800 X 600 pixel
resolution monitor
Failing to put a link back to the homepage on every page of the website
Everyone doesn’t enter your site at the homepage
Having dead links on your website
Check external links occasionally to make sure they are still valid links
(pages are sometimes moved or deleted) – If internal links don’t work that’s
your fault!
Using content on your website which requires a plug-in and not notifying visitors
of that fact before they click the link
For example a video file or PDF document
WEB PAGES THAT SUCK WEBSITE
(YES, THERE REALLY IS A WEBSITE BY THAT NAME!)
For numerous examples of bad web design go to:
Web Pages that suck www.webpagesthatsuck.com
You can entertain yourself for an entire afternoon on
this website and learn a lot in the meantime!
SOME QUICK TIPS TO REMEMBER
1. KEEP WEB PAGES SMALL IN SIZE - IDEALLY UNDER 60K
2. KEEP PARAGRAPHS SMALL.
3. KEEP CONTACT INFORMATION (EMAIL, PHONE, FAX, ETC.) EASILY FOUND IN
SAME PLACE ON ALL PAGES.
4. KEEP LOOK AND STRUCTURE OF THE WEB PAGES CONSISTENT ACROSS
ALL PAGES.
5. PROVIDE A 'HOME' BUTTON TO TAKE THE USER BACK TO THE HOME PAGE
OF THE WEBSITE ON EVERY PAGE.
6. MAKE SURE LINKS WITHIN TEXT ARE ALWAYS UNDERLINED.
7. THE COMPANY/ORGANIZATION LOGO SHOULD APPEAR ON EVERY PAGE IN
THE SAME SPOT AND IT SHOULD ALWAYS BE A LINK BACK TO THE HOME PAGE.
8. FOR LONG WEB PAGES USE PAGE JUMPS (LINKS TO PLACES IN THE SAME
PAGE)
9. USE THUMBNAILS FOR PAGES CONTAINING MANY GRAPHICS (THIS WILL
MINIMIZE PAGE SIZE IN KB)
BASIC STEPS IN BUILDING AND LAUNCHING A
WEBSITE

Define purpose of website

Diagram structure of site

Create graphics for site

Write text for site

Choose basic layout for all pages

Choose color scheme and fonts

Build the website

If you don’t already have a domain name and host provider then:
 Choose a domain name (You can check available names at sites
such as http://www.whois.net/)
 Register domain name
 Select a hosting service provider (My personal recommendation
is http://www.siteground.com)

Upload web pages to host server
WAYS TO CREATE A WEB PAGE
1. Use Pre-Made Templates
FrontPage contains several templates and numerous websites offer free
or for fee templates
2. Use WYSWYG Software
1. Two Most Popular
1. Microsoft FrontPage (Latest version is called Microsoft Expression
Web)
Download 30 day trial here:
http://www.microsoft.com/downloads/details.aspx?familyid=44fa7f9
3-7d57-4523-b0c9-2ce54397b732&displaylang=en
2. Adobe Dreamweaver (Newest version is Adobe Dreamweaver CS3.
Download 30 day trial here:
http://www.adobe.com/downloads/
(Note: Microsoft Word has the ability to save files as html files, BUT it
creates very sloppy code – DON’T USE MS WORD)
3. Hand Code using a text editor
USING CASCADING STYLE SHEETS (CSS)
Cascading style sheets allow for the separation of
content from structure of a site.
 For large sites (over 8-10 pages) CSS is a much
more efficient way to create sites than using tables.
 CSS allows the modification of one file to change
the corresponding design element on all pages of
the website
 The major problem with CSS is that not all
browsers currently support all the benefits of CSS.
Many people still use older versions of the current
browsers.

SOFTWARE DOWNLOADS
Microsoft Expression Web (The replacement for FrontPage)
Download 30 day trial here:
http://www.microsoft.com/downloads/details.aspx?familyid=44fa7f93-7d574523-b0c9-2ce54397b732&displaylang=en
Adobe Dreamweaver CS3.
Download 30 day trial here:
http://www.adobe.com/downloads/
Adobe Fireworks CS3.
Download 30 day trial here:
http://www.adobe.com/downloads/
Smart FTP
Download Free Version here:
http://www.smartftp.com/download/
Sothink DHTML Menu Builder (For building JavaScript menus)
Download Trial version here:
http://www.tucows.com/preview/243711
THE FILE STRUCTURE OF A WEBSITE
IMAGE FILE FORMATS FOR THE WEB
GIF – Graphics Interchange Format:
Advantages of GIF files
Most widely supported graphics format on the Web
GIFs of diagrammatic images look better than JPEGs
GIF supports transparency
JPG (JPEG) – Joint Photograph Experts Group
Advantages of JPEG images
Huge compression ratios mean faster download speeds
JPEG produces excellent results for most photographs and complex images
JPEG supports full-color (24-bit, "true color") images
PNG – Portable Network Graphics
VECTOR GRAPHICS VERSUS BITMAP
GRAPHICS

Vector graphics are created using mathematical
formula rather than pixels.


Primary advantage of working with vector graphics is
that they can be scaled as large as needed without
losing resolution
Bitmap graphics are created using pixels
(Photographs are bitmaps)
You can scale a bitmap smaller without problems
 Increase the size and the picture becomes pixilated

LET’S BEGIN BY CREATING SOME GRAPHIC
ELEMENTS!

Open Fireworks AND LET’S GET STARTED…..
PAGE LAYOUT – YOUR FIRST PAGE DESIGN
DECISION
1. Fluid Design Versus Fixed Width Web Page
1. Fluid Design stretches horizontally to fill entire
width of screen
www.nrvwebworks.com
www.ipma-va.org/SRC2008
2. Fixed width remains the same width regardless
of screen resolution
http://bac.asp.radford.edu/GNAC
USING FONTS ON YOUR WEBSITE

Limit fonts to no more than 2 or 3 different fonts
Sans Serif fonts work better for copy on web sites than do
Serif Fonts (Verdana or Aerial work well)
Serifs are non-structural details on the ends of some of
the strokes that make up letters and symbols


This is Verdana Font (A sans serif font)

This is Times New Roman (A serif font)
Cursive fonts should be avoided except in very limited situations

USING COLOR ON YOUR WEBSITE
1. Limit the number of colors used on your website
2. Many Colors have symbolic meanings and convey feelings and emotions in people (the
meaning of color can vary in different cultures)
In the Western Culture:

Purple and gold are often associated with Royalty, wealth and opulence

Red, White and Blue reminiscent of the American flag, immediately convey notions of patriotism and, to
some extent, conservatism.

Green has taken on a very strong connotation as the color representing ecology and concern for the
environment, however, it also conveys meanings associated with money and the suggestion "to go
ahead" which is obviously derived from traffic lights.

Colors represent holidays and seasons of the year.

The Fall foliage colors of Red, orange, yellow, and brown are clearly expressive of Thanksgiving.
Halloween: Orange and Black. Red and Green represent Christmas. Purple and Yellow and other
pastels colors represent Easter.

Blue, Red, White and Grey = Stability, Power, Trustworthiness, Conservatism

Yellow, Brown, Orange, Green = Nature, earthiness, warmth

Red, Orange, yellow = more warmth

Blues and Aquas = water and coolness

Primary colors (Red, Blue, Yellow) = Convey fun
USING HYPERLINKS
Absolute Links
Contain full URL of link, such as
http://www.radford.edu
Relative Links
Applies to links within the current website
FINDING AND DOWNLOADING GRAPHICS
FROM THE WWW
A good source for locating graphics on the web is to
use Google image search www.google.com
 Found a picture on the internet you would like to
use on your website? (But, keep in mind copyright
law!)

Right click on the picture
 Click ‘Save picture as’
 Save to a location on your computer where you can
later find the picture – Viola!


If the site has disabled the right click function you can use prt scrn command
on your keyboard, open MS Word and click paste. This will print the entire
page but you can crop the picture you want in Fireworks.
USING PICTURES AS BACKGROUNDS IN
TABLE CELLS

Why would you want to use a picture as a
background rather than merely inserting a picture?
Two possible reasons1. You want to be able to add text over the picture
(It’s possible to add text over inserted pictures if you
want to use a layer, but layers create position issues in
fluid designs)
2. You have used a fluid design and you don’t want the
picture to cause horizontal scrolling on lower
resolution monitors.

USING IMAGE MAPS FOR NAVIGATION

An Image Map is a graphic with hotspots used for
navigation or other actions.
http://mypage.iu.edu/~lschinai/T284/i-map.html
COLLECTING INFORMATION FROM YOUR
VISITORS USING FORMS

Form Data can be sent to an email address and/or
collected in a data file

An easy task with FrontPage


Form example from the College of Business & Economics
Website http://cobe-web.asp.radford.edu/request_form.html
Let’s Create a Form using FrontPage!

A form created in FrontPage will only function when placed
on a server running the FrontPage server extensions. The
form will not operate from your local hard drive.
UPLOADING WEB FILES USING FTP



FrontPage has built in FTP capabilities so if you have
modified or created the file in FrontPage you can upload
directly to the server.
 But sometimes you need to upload files such as PDF
documents, Word documents, etc.
Internet Explorer also has FTP capabilities using a web
address of ftp:// rather than the usual http:// address
designator.
Third party FTP programs work much better and are easier to
use.
 I prefer WS_FTP from Ipswitch – 30 day trial
http://www.ipswitch.com/products/ws_ftp/index.asp?t=featu
re_comparison
 But, SmartFTP is free http://www.smartftp.com/download/
MODIFYING PAGES USING MICROSOFT
FRONTPAGE (OR EXPRESSION WEB)
Open the page you want to modify in Internet
Explorer Browser
 Click ‘File’ – ‘Edit with FrontPage’ - FrontPage
should automatically open.
 Enter login and password when prompted in
FrontPage
 Make your modifications to page
 Click ‘File” – ‘Save’ to replace existing page or
‘Save As’ if you want to save under a different
name.
