Supplemental Web Design Tips and Tricks

1
Supplemental Web Design Tips and Tricks

• Multimedia/Internet

2
Reality Checkhttp//www.thecounter.com/stats/

• One major consideration in creating a web site is
  how backward compatible your site is.
• If you want current statistics on how many people
  are using each of the leading browsers.

3
Resolution Stats
4
Operating System Stats
5
Browsers

• You should keep the following browsers on your
  computer
• Netscape 3.x, 4.x, 6.x and 7.x
• Internet Explorer 3.x, 4.x, 5.x and 6x
• Opera
• Mosiac
• Netscape allows multiple versions
• IE, you will need to rename and create a shortcut
  to the executable before you upgrade.

6
Testing your site

• You will also want to test you site on a 28,800
  and 56K modem to check load times.
• Dreamweaver has ability to provide data on load
  times through the program

7
Tips for Using Images

• Many web browsers dont display anything until
  every last graphic is downloaded.
• To avoid this, be sure to specify width and
  height elements to your IMG SRC tag.
• Be sure to include ALT tags for each image.

8
Staying a Page Ahead

• If you have light menu pages but heavy graphics
  on pages deeper into the site, sneak a graphic or
  two into the users cache while he or she is
  reading your home or menu page.
• To do this, set the graphics dimensions to zero
  (so its not visible) by putting this tag
  anywhere in the HTML document
• If the user lingers on the menu page long enough
  for the images to load, the subsequent pages will
  loaded more quickly.

9
Refresh Pages with Client-Pull

• Sometimes its helpful to have a page refresh
  automatically, with no user intervention.
• This can be used to lead people through a
  multimedia presentation one screen at a time,
  redirect users from a dead URL to a new one.
• URLfilename.html
• 10 is the number of seconds you want to lapse
  before the page moves on.

10
Browser Plug-ins

• Disadvantages to using Plug-ins
• Unless you clutter up your pages with
  instructions on how to download and install the
  plug-ins your page requires, or users often see
  just a broken plug-in icon or are whisked off to
  Netscapes general plug-in info page.
• Help users get the right plug-in by appending the
  following argument to to the tag
  PLUGINSPAGEhttp//www.____.com.
• If the plug-in isnt found on the users
  computer, they will be taken to the right place.

11
Turn off Underlining

• To turn off hyperlink underlining, you can use
  stylesheets as follows
• A link colorcornsilktext-decoration none

12
The Thin Blue Line

• To add a touch of design to an otherwise
  text-heavy page, surround a few paragraphs with a
  thin color border to set them off.
• P border-stylesolid border-widththin
  border-colorblue

13
Search Engine Strategies

• Getting Your Site Noticed

14
Directories

• A directory is a categorized listing of documents
  on the web.
• Directories are created and maintained by humans.
• Examples of Directories
• www.yahoo.com

15
Search Engines

• A search engine, also known as a spider or
  crawler, is a computer that continuously scans
  web pages and stores the information in a large
  database.
• Examples
• www.altavista.digital.com
• www.excite.com
• www.webcrawler.com

16
Search Engine Strategies

• Create a meaningful title for each page.
• This information is what appears when a page is
  bookmarked.
• Appears in listings that come up when search
  results are displayed.
• Keep title as short as possible do not exceed
  50 characters (including spaces)

17
Write Your Own Descriptions

• When you site is listed in search results, a
  short description of your site appears as well.
• If you dont write this description, the search
  engine will do it for you.
• Example
• community college in Southwestern Michigan
• Try to keep your description at or below 256
  characters, including spaces and punctuation
  marks.

18
Create Multiple Descriptions

• Some search engines will let you submit a 10 word
  description while others will let you go on
  forever.
• To play it safe, create different description
  with the following word counts
• 10, 20, 30, 40, 50, 60, 75 and 100

19
Create a Key Word List

• A keyword is a word or phrase that somebody may
  use when searching for your site.
• Write a list of words that a person might search
  for write down everything you can think of.
• Syntax college,Michigan
• Words should appear in quotes and separated by
  commas. It is not necessary to place a space
  after each comma.
• Do not exceed 750 characters.

20
Keywords for Each Page

• You should use a slightly different set of
  keywords for each page.
• Use your core set of keywords for all pages
• Add additional keywords as appropriate for each
  page.

21
Test your Keywords

• After you create your list of keywords.
• Visit a search engine site and try typing in your
  keywords and see what sites come up.
• Look at the keywords for other sites.
• Dont use common words as keywords, like
  computer, internet, etc.

22
Take Advantage of Typos and Plurals

• If there are common misspellings of your
  keywords, use the misspelled version in your
  keyword list.
• If someone mistypes the word in a search, your
  site will appear.
• Dont forget to use the plural version of your
  keywoards.

23
Case-Sensitive Keywords

• Most search engines do take the case of a word
  into account.
• However, if someone uses one upper case letter,
  then the search engine does a case-sensitive
  search.
• Therefore, you should use a few case variations
  of some of the more important keywords in your
  list.

24
Use Keywords in the Body of your Web Page

• Search engines give more credence to your
  keywords if they also appear within the first two
  or three paragraphs of your web page.
• Therefore, you should try to insert some of your
  keywords on your web page.

25
Hide Keywords in ALT Tags

• Add additional keywords to the ALT tags for your
  images, for example
• Michigan College, a community college located in
  Dowagiac, Michigan.
• Try to include these in ALT tags near the top of
  the page.

26
Insert Keywords in Comment Tags

• You can also insert keywords in any comment tags
  you have inserted in your HTML coding.
• Some search engines read these comments when
  scanning the site.

27
Keyword Bad Techniques

• Dont insert keywords which have nothing to do
  with your web site in an attempt to trick people
  into coming to your site.
• Some people use white text and white background
  to put in references to words which are not part
  of their site, like movie star names, etc.

28
Reciprocal Links

• The more your site is linked to by other sites
  the higher rating you can get for your web site.
• Try to get others to link to your site.

29
Frames vs. Search Engines

• Some search engines ignore pages with frames
  because they dont know how to follow the links.
• If you have framed pages that you want indexed,
  then make sure you put keywords in the
  part of the page.

30
Site Verification

• Take advantage of site verification sites For
  example
• http//www.siteinspector.com
• Also utilize GUI HTML editors like Dreamweaver
  and Front Page to check
• Links on your site
• Spelling
• Proper HTML coding

31
Good Design Techniques

• Consistency Develop a common look to your
  pages.
• Navigation Develop a simple and consistent
  navigation scheme that lets users get to their
  desired information as quickly as possible.
• Focal Point Draw your viewer to the most
  important parts of your page.

32
Good Design Techniques (cont)

• Palette Stick to a color palette for browser
  compatibility Netscape 216-color palette
  (remember the more images you have, the more new
  colors you may introduce)
• Fonts Keep to one or two fonts.
• Size your canvas When creating art for your
  site, dont create pages that are too big for 640
  x 480 screens. Test your images on small screens
  to avoid scroll bars.

33
Good Design Techniques (cont)

• Reuse images Use the browser cache
  intelligently. Reuse images on your site. Once
  the graphics are cached, your browser doesnt
  have to make a separate request to load an image
  on more than one page.
• Branch Efficiently Make sure none of your
  content is more than 3 clicks away from the home
  page.