Important Web Design Elements:

• It is easy to get sucked up into the Web design frenzy. Magazines talk about the latest technologies as if they were the second coming of Jesus. Well, they're not.

• Designers are not willing to embrace the Web as a design challenge; they have been fighting the basic technology from the beginning, trying to make it like all desktop-publishing programs rolled up into one. Very few sites I've seen have bothered to get truly into content design or focus on what can been done with basic HTML.

• Nothing sucks more on a business site than forgetting to provide a way for customers to order products.

• The most important thing for you to concentrate on is organizing your information in the best possible way. If not, nobody wants to bother trying too navigate them.

• If you must have a mission statement, make it a link from your home page so visitors can decide whether or not, they want to read it.

Site Design and Navigation:
• There are three things a home page should convey to the visitor:
  1. The site's propose -- the who, what, when, where and why
  2. What kind of content is contained in the site
  3. How to find that content

• All your pages - home, main topic, and subsidiary pages, all need to have links to the main topic pages on your site. Nobody knows how a visitor arrives at your site.

• Limit your home page to no more than two or three screens worth of material because people don't like to scroll forever and ever.

• There are three main navigational tools:
  1. Navigational Graphics

  2. Buttons
  3. Imagemaps
• Text Links: If you have more than 35K of graphics, the text will show up before the images and your visitors can happily click a text link before the image loads.
• Frames: Frames are controversial. Not because they are bad, but because of how people use them.
  • HTML validation services: a good doctor analyzes pages that physically reside on the Internet for errors and loading time.
    1. W3C HTML Validation Service - friendly, easy-to-use interface to an HTML validation
       service, based on a real SGML parser.
       
       

    2. Web Directory: HTML Validation Tools

    3. Bobby - program which graphically marks-up a web page with disability access and
       browser compatibility suggestions

    4. Dave Raggett cleans up and corrects markup from
       specialized HTML editors.

    5. HTML Validator - offline HTML syntax checker for Windows 95/98 and NT.

    6. Web Site Garage - services include site promotion and maintenance, traffic analysis,
       search engine registration, and more.

    7. Doctor HTML - web page examination tool which performs spelling checks, image
       analysis, hyperlink verification and syntax tests.

    8. HTML Powertools for Windows - a suite of useful HTML development tools for Windows
       to be used alongside your HTML editor.

    9. Meta Medic - designed to test meta tags for search engine compatability.

    10. InfoLink - link checker.

    11. JChecker - checks lost links, the hierarchical relations of the elements, and various tag
        attributes. Includes an editor.

    12. Web Directory: HTML Validators

    13. Essential Links to HTML - online resources to hypertext markup language references,
        editors, validation, tips, trick, WYSIWYG, validators, newsgroups, newsgroups and mail
        lists.

    14. NetMechanic - a online service (free and paid). Their robot will search your Web site and find broken
        links, spot bad HTML tags, and rate your server's response time.

    1. Identify Web Site Errors: Site Quality with Just One Click. As Little As $50 A Year!
    2. Find Browser Display Problems: Test Your Web Pages Like The Pros Starting At Only $15
    3. Optimize Slow Loading Graphics: Speed Up Your Pages Without Losing Image Quality!
    4. Search Engine Power Pack: Your Complete Solution To Increase Site Traffic
    5. Search Engine Submission: Build Traffic By Jump Starting Your Web Site
    6. Webmaster Resource Center: Fundamentals of Search Engine Optimization
    7. Site Monitoring Made Easy: Don't Lose Customers Due To Server Down Time

    15. A Real Validator - offline HTML and XHTML validator for Windows, based on an SGML
        parser.

    16. 16.htmlchek - Syntactically checks HTML files for a number of possible errors.

    17. Linklint - an HTML link checker.

    18. Dr. Watson - link verification, spell check, and HTML syntax analysis, all in one nice little
        hyperlinked analysis.

    19. Technology Workshop Inc. - services include printed and online documentation, HTML
        help, user manuals, software validation, requirements specifications, and training materials.\

    20. Markup Master - check an HTML file to see if it uses tags that may not be supported on all
        browsers.

• There are 216 "safe" colors a designer can use that will be seen by both Windows and Macintosh users without the image being messed up. Check out: Colours for extensive web links database URL's. Pick your 216 colors "live" on the web at: Web Designer's Color Reference Poster by VisiBone - 4X CLOSEUP
  Content Is King:

• Content is king. If your Web site doesn't have content, you don't really have a Web site.

• Updating your content is insanely important. Update it constantly. That's an order. It's the best way to get people to come back again and agin.

• New crap is still crap.

• Don't offer contests and sweepstakes as there are some legal issues to consider. They are a lot more complicated to conduct than you might think. The Arent Fox Web site: http://www.arentfox.com/quickGuide/businessLines/sweeps/sweeps.html

• A FAQ page is always a good idea. Any time you sell a product on the Web, people are going to have questions they want answered (band recordings, videos, T-shirts for fun raisers).
  Fixing Your Graphics Problems:

• Pages that take a minute or more to load just don't cut it with the average Web surfer whose attention span for new sites has been measured at only about 8 seconds.

• A high-end connection (128 Kbps ISDN, DXL or cable modem) is the greatest curse bestowed upon any Web designer because they forget how the rest of the world lives. http://www.emarketer.com/welcome.html and http://www.sc.edu/bck2skol/fall/lesson3.html

• 40% of the Internet users surf at 28.8 Kbps and more importantly, 30% surf at 14.4 Kbps. That means 70 percent of Internet users are surfing at 28.8 Kbps or slower.

• There are two situations where it's okay to use big images.

  1. Certain types of pages - fan pages, e-zines, and special interest pages (art galleries, movie, music, scientific, photography, game sites, others), people don't care how long it takes the page to load.

  2. If your files are on an intranet, the speed of the connection is significant faster.

  3. Graphics 35K take 31 seconds to download using a 14.4 Kbps modem or 15 seconds using a 28.8 Kbps modem.

  4. Remember: Web pages load infinitely faster from your CD-ROM or hard disk drive than they load from the Internet.

  5. Optimizing the size of your images.

  6. Bandwidth Conservation Society: http://www.infohiway.com/faster. This URL may be one of the most useful web sites for guiding one to optimize graphics to smaller sizes. URL is not presently working.

• Optimizing Web Graphics: http://www.webreference.com/dev/graphics

• This is an excellent tutorial on all aspects of graphic optimization.

• GIF Wizard: http://www.gifwizard.com/

• Business have to pay to use the service, many functions are free for person pages. You give it the URL or the filename of a GIF, animated GIF or JPEG file, and it performs the calculations and reduces the size of the image and shows you the results online. You can then save the image to your disk. You'll achieve a 20 to 40 percent reduction with little, if any, loss of quality.

• Cropping your images: the best way to cut down the size of your image is to physically crop the image.

• A GIF Image was Used Instead of JPEG

• GIF works best with images that use fewer, yet distinctive, colors, such as buttons, icons and straight-edge images (cartoons and line-art), and textual images. It doesn't work well with images that have blurred edges. Photographs with degrees of shading are perfect examples of this.

• JPEG works best with color or with black and white photographs where there are a lot of smooth color changes. While black and white photographs work well with JPEG, straight black and white images don't unless there are at least 16 shades of gray. JPEG also doesn't work well with text.

• The Height and Width Parameter Wasn't Filled In

• Why are the HEIGHT and Width parameters important? Because if they're set, the browser allocates space for the image, which it will fill in later, and then moves on to load the text. Assuming the parameters are set correctly, the text links will load before large imagemap graphics (an imagemap is an image that is treated by the browser as a navigational tool). The visitor can read the text links and click them before waiting to see the imagemap.

• Design pages for the lowest screen resolution possible: 640 X 480. Use safe areas. A safe area is the area where it's safe to design pages given either of the two following scenarios.

• If you want the maximum screen area for graphics and are not concerned with people printing the pages, the dimensions are:

  1. Maximum width: 595 pixels

  2. Maximum height: 295 pixels

• If you're designing your pages so they can be printed, the dimensions are:

  1. Maximum width: 535 pixels

  2. Maximum height: 295 pixels.

• The average: the length of the average monitor screen is roughly 295 pixels.. At 1,836 pixels, this page is at least six screenloads long.

• It is important to have text links son your site. If you're using imagemap, if the imagemap doesn't load or the server is acting up, clicking the image won't send the visitor to a new page. They'll be stuck, and most likely leave, never to return.

• There is one school of Web page design says you should never use background images. The rationale is that a background images can make the text harder to read and can also make the Web page take longer to load. On the other hand, many people believe that background images can enhance a page. Suggestions, use one continuous image, rather than a bunch of squares.

• Seamless tiles: http://www.stink.com/web/webtile/

• Search on Altavista: "seamless tiles"

• In PhotoShop, create a new image at 96X96 pixels using 72 dpi.
  1. Fill it in with a nice neutral color.

  2. Select the Noise Files and add a value. 40 is a good value for some graininess to the image.

  3. Apply the Blur filer.

• One of the best sites that discusses color theory is: http://www.andrew.cmu.edu/user/dw4e/color/index.html

• Yahoo: http://www.yahoo.com/Arts/Criticism_and_Theory/Color_Theory/

• Don't put light-colored text on a light background

• Contrast: Don't use dark text colors on dark backgrounds.

• ColorCenter can solve your text, link, and background color problems: http://www.hidaho.com/colorcenter/

• Browser-Safe Colors: 216 colors

• http://www.lynda.com/hex.html

• The Discriminating Color Palette: http://www.adobe.com/products/adobemag/archive/pdfs/9605htdb.pdf

• The 216 Colors of Netscape: http://www.connect.hawaii.com/hc/webmasters/Netscape.colors.html

• The Safety Palette: http://www.microsoft.com/workshop/design/color/safety.asp

• Computer Graphic Techniques: http://www.thelightingcenter.com/lcenter/software/lightscape/lightscape.asp

• Web Engineer's Toolbox: provides a clickable 216-color palette: http://lightsphere.com/colors/

• ColorSafe: will help you finesse the browser-safe color problem: http://www.boxtopsoft.com

• Be sure to put a description of the image in the ALT parameter of the <IMG> tag. The ALT parameter is the descriptive text that is displayed when an image is broken or when a visitor has set his or her browser so graphics are not displayed.

• Best Software for Creating Animated Gifs:

• Don't Use Free Clip Art That's on the Internet: Either it's bad or everybody using it.

• Sources of Good Clip Art: http://www.imageclub.com/

  Publisher's Toolbox: http://www.pubtool.com

• http://www.photodisc.com/

• Don't Use Under Construction Signs:
  Fixing Your Text Problems:

• Avoid black backgrounds

• Don't mix text attributes (fonts, font sizes, bold, italics, underline

• Limit the number of text colors

• Resist the temptation to sue blinking text

• HTML guides:

  1. Yahoo: http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Information_and_Docmentation/Beginner_s_Guides/Beginner_s_HTML/

  2. The Bare Bones Guide to HTML: http://werbach.com/barebones/

  3. A Beginners Guide to HTML: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

  4. HTML Reference Library: free Windows 95/98 Help file: http://www.htmlib.com

• Tables: tables are the best way to imit the width of a Web page. They are the only way you can place elements in a grid-like pattern.

• If you need more information on how to create HTML tables, there's a great tutorial on tables: Table Tutor: http://www.pagetutor.com/

• Tables are best for width control, but <multcol> and <Blockquote> are options.

• Blockquote:

• Poor color choice means a color-bind person can't see your text.

• The same font on a Windows system is larger than on a Mac system.

• Not all fonts are available for Mac, Windows, UNIX operating systems.

• Not all browser support the <Font> tag.

• Italics fonts are hard to read.

• All caps text is frowned upon.

• Underlining text is confusing. It appears to be a link.

• <Strike> is a specialized tag and should only be used in situations where its meaning understood.

• The fastest way to chase people away form your site is to have a Web page full of typographical mistakes, especially if the page is for a business or nonprofit organization.

• Don't <CENTER> tag everything on your page. Use the <Center> tags judiciously and only when its needed.
  Frames and Links:

• Frames cut up already small screen real estate into even smaller segments. Frames cause the pages to load slower. Many search engines have problems indexing sites with frames. Printing framed pages can be a problem.

• Use tables instead of frames. This will eliminate using too many frames.

• HTML Editors such HomeSite 3, HotDog Pro and WYSIWYG editors like Dreamweaver, Microsoft FrontPage and NetObjects Fusion come with frame-building wizards built in.

• A list of frames based programs at Dave's Central: http://www.davecentral.com/htmlframe.html

• The logical solution to eliminating most of the frames is to put the pictures into a table so you can reduce the number of frames from six down to two.

• Excellent Frames tutorial: Frames Tutor: http://www.jct.ac.il/tutor/frames/

  Don't Use Form Button as Links: It's difficult to read buttons. There are too many of them. And if you move your mouse over the button, there's no message in the status bar describing where the button will take you.

  It's Not Called the Bleeding Edge for Nothing:

• If you do use sound files, please inform your visitors how large they are by listing the size of the file next to the sound icon.

• Definitive list of plug-ins: http://browserwatch.internet.com/plug-in.html

• The bad news for Flash is that they have to install the Flash plug-in for their particular browser.

• WYSIWYG editors: let you create Web pages without having to mess with the complexities of the underlying HTML language. Non-WYSIWYG HotDog Pro

• NetObjects Fusion: Its main claim to fame is it allows you to precisely place objects in an HTML document.

• PageMill: first WYSIWYG

• Dreamweaver: Ability to create pages using Dynamic HTM for both Netscape and Internet Explorer. Does an excellent job handling tables and frames

• FrontPage

• Dynamic HTML = combination of HTML style sheets and scripts that allows documents to be animated.

• Technology features: streaming video and sound, videoconferencing, chat, , databases.

• Business aspects of chatting: http://www.ichat.com/
  Maintaining Your Site:

• Once the web site is posted, that's when most of the work starts. Is web content static? Let's hope not.

• Testing Aids: Bobby: http://www.cast.org/bobby/

  Bobby checks to see if the tags in your document are supported by different browsers.

• HTML Validators: The Web Page Purifier: http://www.delorie.com/web/

  • Those that check the Internet

  • Those that check what's on your computer

  • Yahoo: http://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Validation_and_Checkers/

  • Checking Links:

    1. FrontPage does!

    2. Dave's Central: http://www.davecentral.com/uricheck.html

  • Reviewing Web Page Statistics:

  • WebTrends: http://www.webtrends.com

    1. How can you determine the return on your investment?

    2. How Can you measure the traffic on your Web server?

    3. Can you measure both the quality and quantity of visitors to your Web site?

    4. What paths do visitors take when they browse your Web site?

    5. From what countries do suers connect? What Cities? What states?

    6. From what departments do users connect to your intranet server?

    7. Which is the most active day of the week? The most active hour?

    8. What kind of information is accessed on your server?

    9. Which pages are the most popular?

    10. How many pages are accessed in each directory?

    11. How many users are accessing each directory?

    12. What browsers are used to access your Web server? What operating systems?

    13. Which forms are submitted more than others?

    14. How is your Internet Web server utilized?

  • Yahoo: http://www.yahoo.com/Business_and_Economy/Companies/Computers/Software/Internet/World_Wide_Web/Log_Analysis_Tools/Titles/

  • Dave Central: http://www.davecentral.com/webstat.html

  • Links: pages get removed, moved, and renamed

  • The most effective way to update and revise your site is to add content. Without content, you don't have a Web site, you've got a brochure.
    It Takes More Than Luck To Make the Bucks:

  • Four stages to creating a site on the Internet

    1. Planning and designing the site

    2. Gathering and/or creating content

  • Creating the pages

  • Marketing the site

  • Creating significant content

  • Acquiring appropriate domain names)

  • Preparing your pages for search engines and directories

  • Submitting your site

  • Marketing on the Web

  • Marketing through other channels

  • Is Your Domain name Descriptive?

  • Get A Domain: http://rs.interic.net/cgi-bin/whois

  • NSI Domain Name Dispute Policy Statement: http://www.cmcnyls.edu/Misc/NSIDNRP3.HTM

  • Don't use a construction sign. Your site should always be under construction!
    Search Engines and Directories:

  • When indexing a page, some search engines will use only the first x number of words or characters. This means you should put your keywords and description as close to the top of the page as you can. http://home.earthlink.net/~jkuzmich/

  • The Internet is the world' largest highway with no marked exits.

  • A search engine uses a software program known as a spider that goes out and searches for prey, it feeds on URL's. After your pages are indexed, they can then be searched using keywords.

  • Register your site with the most important search engines and directories.

    1. Yahoo

    2. Excite, Magellan

    3. AltaVista

    4. Lycos

    5. HotBot

    6. Infoseek

    7. Webcrawler

  • Yahoo uses real people to check out each submission

  • Sources for Promoting Your Site to Promote Yourself:

  • Yahoo: http://www.Yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Information_and_Documentation/Site_Announcement_and_Promotion

  • Preliminaries To Submitting Your Site:

  • Yahoo: http://www.Yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Information_and_Documentation/Site_Announcement_and_Promotion/Search_Engine_Placement_Improvement/

  • Search Engine Secrets: http://www.globalserve.nt/~iwb/search/index.html
    1. Search Engine Secrets - Discover the secrets to achieving top ten rankings in all search ...
       
       
    2. Improve Search Engine Positions - Market your site online with WebPosition! WebPosition

    3. WebPosition Gold Improves Your Rankings! - Free download. Much more than just a
       submitter ...

    4. Search Engine Secrets More sites about: Search Engine Optimization

    5. Search Engine Secrets - Kaleidoscope Desktop Services - information on the use
       of keywords, meta tags, title tags, ALT Text, and HTML body copy.
       

       100 Search Engine Secrets - offers tips on high search engine rankings, positioning,
       and meta tag optimization.
       

       Search Engine Secrets Net - offers search engine marketing tips and submission
       advice.
       

       Google Search Engine Submission Secrets - provides Internet search engine
       submission secrets.
       

       Search Engine Secrets Revealed - newsletter offers tips on placing and promoting
       sites.
       

       Winning Search Engine Secrets
       
       Search Engine Secrets - offers tips, secrets, and URL submission services.
       

       N.B. Web Solutions - offers site submission and search engine secrets, online shopping,
       web site sponsors, and links to ecommerce services.

       Submit Site to Over 1000 Search Engines - Search engine submission plans from $19. Let
       us ...

  • Search Engine Placement Points:

  • Web Ranking Tools:

  • Four Steps to Preparing Your Site For Submission:

    1. Create 10 keywords and a sentence that describe your business or site. Could 20-30 words!

    2. Use the keywords and description in the <Meta> tags

    3. Use the keywords and description at the beginning of your page(s).

    4. Choose the title for your page very carefully.

  • Meta tag is found between <Head> and </Head> tags.

  • <Meta> name="keyword" content="computer music technology, videoconferencing, family history, genealogy, web development." Don't use competitor's names in <Meta> tags
    Other Ways to Market Your Site:

  • If you won your own domain, put your URL on everything you can - letterheads, business cards, anything you give away as a promotional item, any advertising, billboards, and so on.

  • The Internet is a world of free content, free software, free bandwidth, free everything,

  • Ask Visitors to Bookmark Your Site

  • Reciprocal Links