Creating%20Well%20Designed%20Websites

1
Using HTML to Develop Websites.

• Creating Well Designed Websites

Common sense is not that common. Mark Twain
2
What we will look at

• 9 design observations for clean working design
• How to get a design that customer needs.
• Designing with templates.
• How to find and use templates
• How to edit the image files.

3
Competency Objectives

1. Understand 9 principles for good design
2. Able to work with templates
3. Able to edit image files

Competency Alert You need to know this!
Common Problem Area! People seem to forget
this
4
Classic Design Criteria

• A Website is a little like a business card
• Must provide a needed function (address, title,
  contact information)
• Should have good form (look nice and appealing)

H. Munster - Plummer
Lots of functionality, less form
Plummers R Us H. Munster - President 1313
Mockingbird Lane Transylvania, Romania 112-121-121
21 hmunster_at_prs.com
1313 Mockingbird Lane Transylvania
Romania 112-121-12121
Too much form not enough function
5
9 Design Observations

• 5 Functionality Observations
• Find what you need
• Make it easy to do business
• Easy flow through site
• Consistent, easy-to-find navigation
• Work with a wide variety of browsers
• 4 Form Observations
• Design that matches the audience expectations.
• Make a good first impression
• Break text in logical design sections
• Use consistent design with good color choice

Competency Alert You need to know this!
6
5 Functionality Observations

1. Find what you need

Amazon makes it easy to find stuff, even though
they have lots of products.
Their search is effective.
Provide links (bottom) for other amazon needs
7
5 Functionality Observations

1. Find what you need

The drop-down style navigation is not obvious
until you place your cursor over it
This design element took about 15 seconds to load!
A man from Mars can't figure out what your web
site is about in less than 4 seconds - Vincent
Flanders. The Biggest Web Design Mistakes of
2004. (http//webpagesthatsuck.com).
8
5 Functionality Observations

• 2. Make it easy to do business

Amazons 1-click buy-now button is an example of
a site with a quick transaction
9
5 Functionality Observations
2. Make it easy to do business
Sticky forms, do not ask user to re-enter all
fields again. They remember filled in fields.
Missing fields have asterisks for prompts
Question to ask. . . Does my web site solve the
customers problem?
10
5 Functionality Observations

• 3. Easy flow through site

Direct links to PDF, can take a long time to load
and change navigation method.
Pop-up ads and content windows break flow. (They
are also annoying)
Dont put up links that have no content!
11
5 Functionality Observations

• 3. Dont Break the users flow.

This site says I got to have IE. What if I dont
like IE?
Is this a good thing or bad thing?
12
5 Form Observations

• 1. Design that matches the audience expectations.

Paul Simons site certainly doesnt look like a
corporate site
CNN looks like a news site.
This is probably what youd expect here.
13
5 Functionality Observations

• 4. Consistent, easy-to-find navigation

How do I get out of here?
How do I navigate this thing?
14
5 Functionality Observations

• 5. Work with a wide variety of browsers

In IE I can clearly see these navigation items.
In firefox they seemed to have disappeared.
15
9 Design Observations

• 5 Functionality Observations
• Find what you need
• Make it easy to do business
• Easy flow through site
• Consistent, easy-to-find navigation
• Work with a wide variety of browsers
• 4 Form Observations
• Design that matches the audience expectations.
• Make a good first impression
• Break text in logical design sections
• Use consistent design with good color choice

16
5 Form Observations

• 2. Make a good first impression clean
  identifiable home page
• Easy to tell where the person landed.

Actual home pages. Took a while to figure out
where I landed.
17
5 Form Observations

• 3. Make a good first impression.
• Make a clean, easy to identify homepage.
• Easy to tell where the person landed.
• Make a good first impression

Wasting all this space forces me to scroll.
Clearly tells you who they are
18
5 Functionality Observations
3. Make a good first impression.
Finally after 20-30 seconds get to this page.
Suppose I only wanted their phone number?
This sight has a lengthy flash intro.
19
5 Form Observations

• 4. Break text in logical design sections
• That is, design content for display on the web

This site looks like the read portion of the ACT!
Notice how the fonts change, use of color, even
side graphics make page more inviting
20
5 Form Observations

• 5. Use consistent design with good color choice

• Consistent Design elements with
• Colors
• Navigation
• Tag Lines
• Font Choice

You might need a template to get coordinating
colors. Still its better than looking ugly.
Nice coordinated color, site is also good example
of text broken into inviting areas
21
9 Design Observations

• 5 Functionality Observations
• Find what you need
• Make it easy to do business
• Easy flow through site
• Consistent, easy-to-find navigation
• Work with a wide variety of browsers
• 4 Form Observations
• Design that matches the audience expectations.
• Make a good first impression
• Break text in logical design sections
• Use consistent design with good color choice

22
What we will look at

• 9 design observations for clean working design
• How to get a design that customer needs.
• Designing with templates.
• How to find and use templates
• How to edit the image files.

23
Getting the right design

• How to determine basic functions of the site
• Need to ask some questions . . .
• What are major categories of information (e.g.,
  Contact, products, support, etc.)?
• How dynamic is the content? (and who will change
  it?)
• Who supplies the content for each category?
• How will we/you assure its up-to-date?
• What style image are you looking for (e.g.,
  corporate, earthy, homey, flashy, high tech, etc)
  

24
Start with several mock ups
You might show several different mock ups to
customer. It might be templates or hand-drawn
sketches.
From mock-ups, you develop a better idea of what
is needed.
25
Consider Designing With Templates
26
The problem with HTML templates
Here is where you need to update your content.
Can be difficult to work this deep in the tables.
27
Use CSS for Layout
Navigation
Logo
Style sheet does all the positioning. So, html
code looks clean
28
Consider Searching for HTML Templates

• Do a search on Google for Free html templates or
  something similar
• Carefully read their license agreement

One site (myfreetemplates.com) Will download the
template into a zip format. You can expand the
file just by double clicking in explorer.
29
Looking at your template . . .

• After expand and open the template. You will get

These are image files that need customization
Customize your text.
30
Two problems when working with templates

• When Working with Many Template Files
• How can you alter to get consistent navigation?
• How can you customize the graphic files?

Competency Alert You need to know this!
31
1. How to get consistent navigation

• To get consistent navigation can either
• Set the site up to be frames based
• Use a language on server side such as PHP

This information changes when click frame link.
You want this information to be the frame
32
It may not be obvious
The template can be quite large. This one is 140
lines
Note everything is in there as one big html file
33
1. Look for start of content area.
Find where navigation ends and where youd place
your content. Line 74 starts a new table.
Line 81 is the page header
Line 85 shows where content goes.
So, everything before line 74 is probably frame
material! Save everything line 74 on into a
separate file say, home.html.
34
2. Now find the top and left hand sides
Look for where top table ends and left hand
starts.
Save top table (lines 1,53) in 1 file (call it
top.html) and left hand navigation (lines 53, 72)
into separate files (call it left.html).
35
You now should have 3 pieces
left.html
top1.html
content.html
Note Depending upon the template, you may have
to edit each of the 3 pieces. For example, to end
or start tables.
36
3. Create your own frameset. . .

• Create the frameset

1 ltHTMLgt ltHEADgt ltTITLEgt A Nested Frames Example
lt/TITLEgt lt/HEADgt 2 ltFRAMESET rows"15,"
gt 3 ltFRAME SRC"top1.html"gt 4
lt!-- right frame is another frameset --gt
5 ltFRAMESET cols"15,"gt 6
lt!-- top frame --gt ltFRAME SRC"left.htm"
targetbottom"gt 7 lt!-- bottom frame
--gt ltFRAME SRC"content.html"gt 8
lt/FRAMESETgt 9 lt/FRAMESETgt 10 lt/HTMLgt
Now its a frames exercise. How do you remove
scroll bars? How to you size things right? How
do you get the targets to work right? How do you
change css colors?
37
Two problems when working with templates

• When Working with Many Template Files
• How can you alter to get consistent navigation?
• How can you customize the graphic files?

38
How Change Navigation Buttons
There are 2 graphic files for each navigation
button. Each needs to be edited to change text.
Competency Alert You need to know this!
39
Use GIMP to Change Image Text
Open the file in Gimp
Use pick colors from image to find exact color of
background
Move tool
Text tool.
Eraser tool,
Use eraser tool to remove text and text tool to
add text.
40
A Few More Tools . . .
Rotate the image
Scale image
Change image perspective.
Eraser tool,
41
Summary

• 9 design observations for clean working design
• 5 Functionality Observations
• Find what you need
• Make it easy to do business
• Easy flow through site
• Consistent, easy-to-find navigation
• Work with a wide variety of browsers
• 4 Form Observations
• Design that matches the audience expectations.
• Make a good first impression
• Break text in logical design sections
• Use consistent design with good color choice
• How to get a design that customer needs.
• Designing with templates.
• How to find and use templates
• How to edit the image files.

42
Module 1 Hands on Assignment

• Rework the following template to support frames.

Create a file frameset.html, top.html and
bottom.html
http//www.indelible-learning.com/website/template
s/topblue.zip
43
One possible solution top.htmlhttp//www.indeli
ble-learning.com/website/templates/Basic_blue/fram
eset.html

1. ltHTMLgtltHEADgtltTITLEgta0001lt/TITLEgt
2. ltMETA HTTP-EQUIV"Content-Type"
   CONTENT"text/html charsetiso-8859-1"gt
3. ltlink href"style.css" rel"stylesheet"
   type"text/css"gt
4. lt/HEADgt
5. ltBODY BGCOLORFFFFFF background"images/base_bg2.
   gif" text"000000" leftmargin"0" topmargin"0"
   marginwidth"0" marginheight"0"gt
6. ltdiv align"center"gt
7. ltTABLE width"100" BORDER0 CELLPADDING0
   CELLSPACING0gt
8. ltTRgt ltTD height"16" background"images/pixi_w
   hite.gif"gtltimg src"images/pixi_white.gif"
   width"16" height"16"gtlt/TDgt
9. lt/TRgt ltTRgt
10. ltTD height"2" background"images/top_twogre
    ys.gif"gt ltIMG SRC"images/top_twogreys.gif"
    WIDTH4 HEIGHT2gtlt/TDgt
11. lt/TRgt
12. ltTRgt
13. ltTD height"72" background"images/top_bg_bl
    ue.gif"gt
14. lttable width"100" border"0"gt
15. lttrgt
16. lttd width"1"gtltimg src"images/top_bg_
    blue.gif" width"1" height"70"gtlt/tdgt
17. lttd width"514" valign"top"gtltimg
    src"images/pic_companylogo.gif" width"185"
    height"48"gtlt/tdgt
18. lttd width"239" valign"top"gtltimg
    src"images/pic_company_slogan.gif" width"103"
    height"48"gtlt/tdgt
19. lt/trgt

44
One possible solution bottom.html

• lthtmlgtltheadgtltlink href"style.css"
  rel"stylesheet" type"text/css"gtlt/headgtltbodygt
• lttable width"100" border"0"
  cellpadding"10"gt
• lttrgt
• lttd width"25"gtnbsplt/tdgt
• lttdgtlth1gtPage Headerltbrgt
• ltspan class"date"gtDate
  dd/mm/yyyylt/spangtlt/h1gtlt/tdgt
• lttd width"25"gtnbsplt/tdgt
• lt/trgt
• lttrgt
• lttdgtnbsplt/tdgt
• lttdgtltpgtltstronggtSub-headerlt/stronggtlt/pgt
  
• ltpgtPage content goes here To use
  this template you simply have
• to build theltbrgt
• html for it from the graphic.
  First export all your buttons, backgrounds
• andltbrgt
• other images. You must decide
  whether certain elements will be
• imagesltbrgt
• or html generated.ltbrgt
• First build one template page and
  make sure it is exactly right

45
One possible solution frameset.html

• ltHTMLgt ltHEADgt ltTITLEgt A Nested Frames Example
  lt/TITLEgt lt/HEADgt
• ltFRAMESET rows"140," gt
• ltFRAME SRC"top.html" targetbottom
  scrolling'no' border0 noresizegt
• ltFRAME SRC"bottom.html" targetbottom"
  scrolling'no' border0 noresizegt
• lt!-- bottom frame --gt ltFRAME
  SRC"content.html"gt
• lt/FRAMESETgt
• lt/HTMLgt