Amateur Web Builders: Get Your Simple Site Seen!Easy Accessibility and Search Engine OptimizationThe material in this short article has been collected over years of trial and error, reading trade journals and taking courses. It is fast but valuable information that shows the quickest, most compact way of getting high search engine and directory listings. And when search engines can read a site, so can people.Guard this training; use it only to promote that which is good, wholesome and conducive to life, else it won’t work for you anyway. |
||||||
|
|
(02/24/05) |
![]() |
|
||||
|
(This article is composed with Trebuchet MS Font. Links mentioned in this article are spelled out in the endnotes.) by Jackson Snyder Here are a couple GREAT BOOKS on this subjectDavis: Google Ad Tools Comm The Adsense Code Grappone: Search Engine Optimization Even if your web building skills are minimal, what you build can be highly rated by users and search engine robots if you make some reasonably simple modifications to your site. Some of my suggestions to you are unknown by professional web builders and, if you implement them, your site will be easier to find than those of the pros – and much easier to use. But before you start getting all that traffic, you must first make certain that your site is ergonomically correct for those who will find it. (Ergonomic is a flashy word for user-friendly.) General Ergonomics Goodies: Is it loaded with graphical images, flash productions or Java Script goodies? If so, it will take longer to load, be passed up by search engines and will be bypassed by hasty visitors. Flakes: Is it idiosyncratic? (Or, is it all about your personal stuff?) Consider how many potential viewers are really interested in reading about your dietary habits and favorite colors? You may need some really interesting content. (Unless you are a celebrity or have your site on MySpace.) Eyesores: Are the fonts small and bold – could they be difficult to read? Many viewers will quickly pass up a site that uses tiny bold fonts, banners, an irritating color scheme, poor organization, loud music or obscenity. Ungluing: Are all the links working? Are the links in obvious places? If you want to get a message across, pass up the Java menus, animated buttons and PHP templates, and opt for simple textual links within an uncomplicated navigational system. Cobwebs: How long does it take to load on dial-up? Most viewers use dial-up and always will until something more affordable and less complicated comes along. 28 seconds of load-up time means your viewer is long gone. Check your load time on a dial-up system or with a program that estimates it. (This is a built-in feature of some HTML editors.) Crowds: Are you building for 800 x 600 resolution? Of course, screens are larger these days, but the public prefers 800 x 600. Advanced surfers with higher resolutions will still be able to see your site quite well and adjust their view, if necessary. Craziness: Is your site consistent? Are color schemes, themes and the general look of the thing pleasing? Look for sites that are conservative and tidy. Try to copy them. Download them and study them. If you are like me and can’t find the same color socks, rely on the color schemes of the pros – there are thousands of good examples from which to choose. Navigation: Do you have logical and friendly navigation? “Click the wolves to navigate our site” may be cute, but it is not ergonomic. It will be fun once, but after the initial thrill, your content must be the star; so it must be easy to find.[1] Hindrances: Do you need to have a site map, site search tool or “text only” pages? Answers: Yes, yes, and yes. These “customer services” are obsolete in the minds of many web programmers, just as people are obsolete in the utility company’s customer service department. Yet all these conveniences are easy to code or available pre-coded – free to include on your web – to help your visitors feel welcome.[2] To get more tips, put this phrase in any search engine: “tips to improve your site” (keep the quotation marks). You will get plenty of good advice and pay nothing. Now there are a few style rules that you will need to heed if you want to get your site seen – starting with FONT. FontsSans-Serif: Use common sans serif fonts for readability on a computer screen. Why? The serif eliminates enough white space to make smaller point letters appear crowded, especially if the text is bold or a hyperlink. Behold – which of the following is easier to read? Click here or Click here? Click here or Click here? Click here or Click here? E or E Ask your optometrist! The second of each set is easier for me to read; that is, the Sans-Serif font is more user-friendly, especially when the color scheme of text and background is not the best. By the way, sans is the French word for without. Serif refers to “a short line at the end of the main strokes of a character.” Stay in the same font or font family for each page if possible. Font families know how to get along.
Either the site owners are seeking out viewers with very sharp vision (highly educated birds of prey), or they want to exclude certain viewers (armadillos, possums), or they (or their corporate webmaster) know no better. In style characteristics such as these, often we who are simple web programmers have the edge.
Default:
A viewer can only see a font if the viewer’s computer has the
font installed. I like the font
If you use
Here is a good article with listings of the various operating systems’ default fonts: http://www.upsdell.com/BrowserNews/res_fonts.htm Best Viewing: What fonts should be used? Recommended fonts for best screen viewing include Arial, Verdana, Trebuchet, Tahoma, Gothic, and, for condensed, Arial Narrow. There are a few more. Why such a small choice? Because most computers, even older ones, already have these fonts installed by by default. It is highly likely that, if you use one of these recommended fonts, your site will be seen close to your ideal. Else you may embed your favorite fonts in a graphic – that is how to make them seen! Serif fonts are best for reading from paper, so are used for text versions of pages composed for printing (i.e. printer version, .pdf, e-books, etc.). Recommended for printing are Times New Roman, Book Antiqua, Bookman and Georgia. Again, if your viewer downloads your file and the font you used to write it is not installed on your viewer’s computer, one of these will take its place. Yet this swap is good because these default serif fonts are highly readable in printed material, especially in 10 – 14 pt. Size: Business sites seem to be going to smaller fonts, even tiny fonts – but those whom I presume to be your clientele would probably be far more comfortable with a 12pt. sans serif font for easy reading and a 12pt. serif for printing. The vast amount of text and resources packed on today’s sites, even on the front page, cry out for easier reading and thus better comprehension.
BrowsersThere is often a vast difference in how a simple site appears on different manufacturers’ browsers. Some HTML editors, like FrontPage®, have a built in function for previewing your site with various browsers. Microsoft® will be the first to tell you that this function is meant only to give a resemblance of what your site will look like on the monitors of others. Who knows what settings individual computer users have employed (purposely or accidentally) for viewing websites? When I visit friends, I am surprised when my sites actually DO present themselves the way I coded them (or thought I coded them)! Browsers are Free: If you are capable of doing so, download[3] the latest Internet Explorer (at this time it is 7.0), download 5.5 (which many older computers still use), along with Mozilla Firefox® (20% of the market now) and Opera® (savvy users have this as well as the other browsers). (The URLs for these download sites are in the endnotes.) Check out your site in each browser. Your site will not likely look the same, especially between IE and Firefox. Here is another excellent article about browsers and where to get them, current as of 2007: http://www.upsdell.com/BrowserNews/find.htm Tweaking: This is where knowing some HTML 4.0 comes in, for if you use FrontPage or any of the other WhatYouSeeIsWhatYouGet (WYSIWYG) HTML editors, you will need to dive into the CODE and TWEAK it some to get your site to look close to the same in multiple browsers. (Sometimes you simply have to settle for the close second.) Purchase a used HTML 4.0 reference book and skim through it. All your answers are there. Visiting: Make a point to visit people in your community who have Internet access. Check your site out on your host’s computer and, if she agrees, reset her browser (View > Text Size) to make it compatible with a few well-established websites (like Yahoo.com). She will thank you for it later and send you a key lime pie. Spend time with the lonely folks you visit. Your friends will appreciate it and you will leave feeling like a better person (because you will be a better person). And you may then have access to your friend’s computer in the future to check out your site. Mac: If you use Windows® , find someone with a Macintosh computer, especially a newer version, and check your site out there, too. If it’s important to you to make a good impression on the tens of thousands who will soon see your site, then you may go on to publicize it and therefore get your message out.
Tags and Meta Tags (or Metatags)Properly coding the tag fields (tags, or metatags) is one of the most important and certainly most ignored essential. This goes for both amateur and pro web site builders – and it seems especially ignored by those who use templates to build their sites. Standard Definition: “An HTML tag that contains descriptive information about a webpage and does not appear when the webpage is displayed in a browser[4].” This is the standard definition of a tag. However, this definition is incorrect and has led many to simply ignoring these important little fields because “they do not appear.” HOWEVER, tags can and do show up in the browser, and all of them show up when the viewer chooses View > Page Source from the browser’s menu. Learning how to code tags is easy and pays off greatly in “customer service” to your viewers as well as in the search engines’ ability to properly index your page. Properly Coding Tags: There are many free tutorials that teach coding metatags either in the source HTML or via your HTML editor (such as FrontPage® or Dreamweaver®). (Search on “adding meta tags” for easy instructions.) There are also free programs that lead you through the process and text templates that you may insert in each of your pages, then fill in the blanks. (I provide you one later.) It is not my intention here to teach HOW, but to point out the importance of tags, to show you a special tag that is seldom used, and describe an important tag recommended by the Americans with Disabilities Act (ADA).
Note in the illustration two web sites; the first, having the Title tag populated by the default text “Home Page”; the second, with the Title tag populated by the actual name of the site and the site address – “Focus Haiti FocusHaiti.com.” The Title tag is the first text that appears in the browser, no matter what browser. Familiarity: In the “Home Page” example, I had to look all over the page to find what the letters in the logo stood for. I finally found my host’s company at the bottom of the page, which forced me into an area of the screen that couldn’t be seen unless I scrolled down. :€ But such isn’t uncommon – corporate insiders who develop corporate sites are so used to seeing those initials, so familiar with the purpose of the organization, that they overlook the possibility that those outside, especially those using English as a Second Language or the visually impaired, would have trouble navigating from the start. The amateur web-ster, having seen the site over an over, will have the same problem of familiarity. Again, evaluate your site’s friendliness by looking through the eyes of a stranger. Cache (Cash): A tag often overlooked is the pragma tag. If the viewer has been to your site before, chances are your pages are already stored in the viewer’s computer cache (Temporary Internet Files in Windows). When the viewer returns, her computer will often bring up the page stored in their computer’s cache rather than the new page you just put up. Your viewer may continue to get the old page two weeks later until either they clear the cache manually, expel the old page by overrunning the cache by accident, or press the F5 to refresh your page. The viewer sees the same page he pulled up last month and says, “Nothing new here; goodbye” and surfs on, even though you may have updated the page several times since the prior visit. A little later, I will offer you a little coding trick so you may avoid “caching out.” Site Description: This essential field tells the viewer of a search engine entry what a page contains. Look at these search engine listings:
The first result has the description tag coded. The second does not. I must look further to find out about the second result, or abandon it altogether. I find exactly what I’m looking for in YOUR site if the DESCRIPTION is coded and I find it on a search engine. Otherwise, I only know the IRL / URL to which I’m being linked and have to go PEEKING AROUND. Code the KEYWORDS tag as well using the exact directions of your tutorial source. You will want to put some thought to what search terms you expect potential visitors to enter into a search engine to find you. Some search engines use KEYWORDS (or Key Phrases) to point searchers to sites – and even in some cases to rank sites. ALT Tag: The Americans with Disabilities Act alt tag is used to apply a description to an image (pictures). When the picture is moused-over, the description in the tag displays. Also, if the picture is gone, the <alt> tag contents still display. Alt was originally created to assist the auditory- and visually-impaired to learn the significance of an image or illustration through the text description, and if the image contains a hyperlink. Furthermore, now the alt tag is now used by web crawlers and search engines to rank a site; and as far as I know, a site builder can therefore add 256 more characters to a picture which means significant extra content that will definitely be used by engines and anyone who moused over a picture. Every single image, banner and button should be alt coded, and generously. This is a reason to exclude graphics and graphical buttons unless they are properly coded – handicapped users will not be able to navigate a site without alt- and Meta-tags. Plain textual links are still the best. Fancy Javascript menus are fun to play with, but maybe not always practical for a straightforward site. Simple is beautiful – so consider the kind of viewers you will have, including the aging population, some with disabilities and those with limited English skills. Here is a good example of a very descriptive advertisement using the <alt> tag: <img border="0" src="../images/napban.jpg" width="741" height="131" alt="Be sure to check out Park Models Manufacturing NEW Condo Cottage Models. You may click the sign below or this Naples Condo Model picture."> By the way, the alt tag may be coded in FrontPage through the “Picture Properties” form. Every Page Commitment: Search engines list and rank by the page, not by the site. That means every single page needs significant textual information in the Title, Meta-title, Meta-description, Meta-keywords, Pragma and Alt tags. For the programmer in a rush, the tags can be coded in Notepad and pasted into each page. Microsoft Help and Support suggests we do tags this way in order to assure that the Pragma tag works properly[5]:
<HTML> (This will already be in the code)
At the end of the BODY section, put in another short HEAD section: Now keep your content fresh and inviting. Modify it often.
|
||||||
|
Jackson Snyder (801) 605-1715 Vero Beach, FL |
||||||