| the wannabe webster or, the adventures of a new kid in cyberspace website design & webmaster resources for the e-business beginner | trapped in a frame?
...best check-up links |
|
a website, a webpage A small web-based business relies on the design of its webpages to be readable to browsers and search engine spiders, as well as the surfers who find their way to its site. Website design has to arise from a combination of concern about search engine submission and search engine listings and clear, effective, human-oriented, interesting content. two target audiences Your target audience: surfing customers You want a page that is enticing, impressive, informational, easy and quick to load and easy and quick to understand. Your web page design needs to make it easy to find information, navigate and (if selling) make purchases. Web sites with lots of content -- information, articles, links to related sites, contests and/or freebees -- are most likely to be bookmarked and remembered and returned to. Your target audience: search engines Search engines will be your largest source of hits to your site. Most hits on your web site will come from surfers checking out no more than the first 30 listings on whatever search engines they use. No matter what types of surfers you believe will be your best customers, most of them won't be your customers until a search engine has referred them. Your website must be optimized to be understandable and attractive to the search engines and their spiders. This makes it very important to find out what the search engines look for, what strategies they use to understand the content of a site, what results in higher ranking, and what the search engines might misunderstand, ignore or punish a site for. This tends to change with time and thus is an ongoing task. the basic website design The design of your website, of course, gives an impression about you, your product, your general level of success and esthetics. You can have a service or other individual design your website and it's webpages or you can do it yourself. There are many very competent companies with skills in putting together polished websites for what you may or may not believe to be affordable rates. If you do your own site, this will be much less expensive on the one hand, but you need to balance it against the possibility that you may miss ecommerce opportunities if your site looks too slapped-together homemade and doesn't have enough enticing content to offset that impression. If you decide to design your own site, then the issues are basically 1) what information, offers, etc. do you want to have on your site? 2) how do you want to organize the information? 3) what colors and graphics do you want to use? 4) what parts of what you want to say and do on your web site should be on your main page (your home page) and what should be on other pages? 5) will you use CSS, frames, tables, or what to organize it? and 6) how careful and patient do you have time for over the next year? The pages for your site: the great divide. In addition to the various pages you decide to have with additional content, specific focus on products or information, etc., there are some pages that are helpful to have on your site. If you make sure you have lots of your keywords in meaningful sentences on these pages, each one can end up spidered and listed on the search engines and thus each can function as an alternative entry portal to your site.
speeding up load times With websites loading time is important. We live in an immediate gratification world where people are known to lose patience if a site takes to long to load.Generally speaking, the "wisdom" is that it's important for your page to load in 15 seconds or less for a 33.6K modem. You can speed load times by minimizing the size and number of graphics and by minimizing the amount of text, comments and formatting tags. Reducing even the number of unneeded spaces and carriage returns can speed your page a bit. You can also speed the loading of the first part of a page so that the initial information can be viewed while the rest of the page is loading. (If you have other ideas, please email me.) load time: Size matters! Believe it: size matters. The most immediate way size will matter will be in the loading time of your webpage. The more stuff you have on it, the longer it takes to load. The more different graphics you use, the longer the load time. The bigger the graphics you use, the longer the load time. Another general rule of thumb is that each webpage, graphics included, should not be much more than 40K bytes in size. (This site is a good example of slow load times.) Crunch it or not. There are some sites and some software that offer to optimize your pages by eliminating all unnecessary carriage returns, spaces and comments. They cruch your page code down to a bare minimum -- as much as 20%, depending on how much of those extras you use in writing your pages. This can save a chunk of file size but can make editing tougher because you lose line breaks, indents and comments that otherwise contribute to by-human read-ability. Yook seems to do the best job of the options I've found. It's online, it's quick and it's free. Check your within-page links, though, because Yook decided to remove quotation marks which rendered them inactive. optimizing graphics. Optimizing graphics comes in two flavors: as few as possible and as small as possible. Generally, if you can stick to a very few graphics, you're going to be better off. And any graphics you intend to use should be optimized for internet by a graphics program that can make them as small as possible without losing a lot of their quality. You can often get a graphic down to 1/3 or 1/5 of its original size. Optimizing may cause a degradation of the quality of your graphic, so be aware that it may be a trade-off of speed for sharpness of image. Most good graphics editing programs that come out now have a web optimization option. There are also some on-line services that will optimize your graphics for free. The best I've found online is ( Recycling graphics is good. Keep graphics to a minimum, but once you decide to use one, you can use it as often as you like. Load time is pretty much the same whether the graphic appears once or twenty times -- and whether it is presented the same size every time or different sizes. Table formatting trick for speed. Okay, so a page should be no more than 40K and load in no more than 15 seconds for a 33.6 modem. This goal doesn't work for me, personally. The pages on this site are all pretty size intensive. One day I may break it all down into tiny pages but for the present I find it is much easier for me as the writer to have a lot on one page so when I want to add or edit something I don't have to hunt through many little pages. Though I haven't read or heard this from anyone, I found a way to accomplish what I hope is at least the next best thing -- that is, to be sure that something is loaded within 15 seconds so that the surfer can start reading while the rest of the page loads. This can be accomplished -- at least for the browsers I've used -- with tables. (If you're not familiar with what tables are and how they are used for formatting, briefly take a look at the section on tables, below.) Browsers, it seems, load up various parts of the pages they come across in the order that they find them. As soon as a browser has completely loaded a graphic or a table or whatever, it displays that part of the page. If you have a graphic at the top of your page, all by itself without being within a table, it will appear to the visiting surfer as soon as the browser has all the information on that graphic. If you have a table, browsers will present them to be viewed as soon as they are completely loaded. If an entire page is within one table for formatting purpose, the whole page -- the entire table -- will need to load before the viewer sees anything. On the other hand, if you divide a page up into three or four separate tables (which can be invisible to the eye if border="0"), when the first one is loaded, the browser will present it to be viewed while it begins to load the second -- and it will present the second table to the viewer while it begins loading the third... etc. In this way if you have a large page, you can still set it up so that the surfing visitor can be seeing and can be reading the first part of the page while the rest of the page loads. |
|
HTML, CSS HTML (hyper text markup language) and CSS (cascading style sheets) are the means to put together -- format -- your pages with the paragraph indents, font changes, bells and whistles that make it look like you want so that browsers can interpret it. Like the basic text editing programs before Windows, HTML code can be easily learned with some practice. WYSIWYG html editing software. Since Windows, many people like to use WYSIWYG (what you see is what you get) programs that simply show the finished product without showing code. Microsoft Word has a WYSIWYG webpage editing option. Microsoft's FrontPage is a polished WYSIWYG html editor that I have not used myself but many people have recommended to me. Hands-on html text editing. Like the text editors before the days of Windows, you can use html editors that allow you to directly write code to the webpage's html file by keystroking it in on your keyboard or clicking on buttons for little subroutines that add formatting codes (tags that change font face, font size, font color, background color or image, text centering, text underlining, page breaks, etc.). This is basically "WYSIWMWYG" (what you see is what makes what you get). It's very handy to understand and be able to edit the code that makes the webpage come alive on the internet. It's easy to learn. You only have to learn a half dozen things to start and then you end up learning as you go -- usually learning a new little formatting option every day or so. The two leading hands-on html text editors that I have run across are Coffee Cup There are also many free hosting services that may attract your attention. There are many free sites available where they will host a limited sized website for you and offer online html editing in return for allowing ads on your site. Beware of the possibility that free sites may not be optimal for ecommerce because they may not be taken seriously or accepted by some of the search engines and online services. Another issue is that some sites present your page within a frame with their ad on top. This confuses or defies some of the search engines. Otherwise, free does seem possibly a good price. WYSIWYG vs. hands-on. Though it is much easier in some ways to use a WYSIWYG program -- either online or via WYSIWYG html editing software -- this can cause you endless troubles in adding special codes for affiliate programs, general tinkering and looking for errors -- because you can't trouble shoot code if you can't see the code. Like many places in life, one needs to make a choice between one set of potential hassles and another. Much of the information below is only valuable if you can tinker with code. |
|
2CreateAWebsite's very basic HTML Tutorial Annabella's HTML Help Boogie Jack's HTML Tutorials NCSA Beginner's Guide to HTML WebEnalysis HTML code Computerhope.com cool tricks HTML code Computerhope.com HTML code & Web Design w3schools.com HTML 4.01 / XHTML 1.0 Reference http://www.sfsu.edu/training/guides.htm http://javascript.internet.com/clocks/ Steal this code. You can view the code of most pages you see on the internet very easily. This enables you to view and copy codes for special formatting strategies that you might see. This is often a much more effective way to find out how to do what you want to do without pouring through the many available tutorials. (It is said in some circles that this is plagiarism, but it is difficult to understand why it would be -- any more than looking in a novel for an example of how a word is abbreviated rather than looking it up in a dictionary.) In Netscape on the upper menu bar click on View and then Page Source. In IE on the upper menu bar click on View and then Source. If you use Netscape you can highlight the part of the page source that you want to copy and then hit Ctrl + C. Copying the IE page source is even easier. A nice article from Tom Dahm and NetMechanic covers this strategy: See Reverse Engineering Page Layout. pay for services. If you are willing to pay more to have someone else deal with these hassles, check out services like WorldMall and Better Web Design. no errors allowed. It is very important that the code be right. Some browsers may forgive little errors that search engine spiders do not. It is very easy to make a nice looking page that looks great on your monitor at home but that has multiple coding errors that might turn away a search engine. css. Cascading style sheets -- are formatting information files. A cascading style sheet is formatting information that is kept on a separate page and accessed by the surfer's browser when the page loads. Cascading style sheets are intended to offer more control over the appearance of the webpage with greater readability for people with accessibility problems (see accessibility below). If you haven't already designed your pages, you might look into cascading style sheets to manage your formatting. Some predict that much of the formatting of webpages in the years to come may be expected to be on cascading style sheets as current on-page html codes are phased out to make pages easier to read by search engines and people with visual impairments. Boogie Jack's CSS Tutorials CSS Pointers Webmasters Library CSS Tricks House of Style - Cascading Style Sheets: CSS1, CSS2 Tutorials, Resources, Help MaKo 4 CSS - CSShark answers Frequently Asked Questions CSS Check Color-coding - codes for colors. When you add color to background or text, you have the option of naming a few colors by name. Otherwise, colors have 6-digit codes that are preceded with a "#." Green, for example, might be coded as "color=green" or "color=#007700." My understanding is that at least some of the search engine spiders don't like colors to be named. Webenalysis' HTML Color Chart Nutrockers' Web HTML Color Code Chart WebMonkey's color codes Calvin Kyle Bobbitt's color codes Heartland Plains www.html-color-codes.com HTMLGoodies color codes Lynda.com Color Chart by Hue Lynda.com Color Chart by Saturation HiTMilL color codes Nesting errors. Nesting errors are HTML errors where one tag (tags direct changes in font, etc.) is opened and then another is opened and then the first one is closed and then the second one is closed (e.g., open TAG A, open TAG B, close TAG A, close TAG B -- ABAB). Tags are intended to encompass (e.g., open TAG A, open TAG B, close TAG B, close TAG A -- ABBA). Nesting errors can cause you problems with browsers and search engines. Using frames vs. NOT. Frames are an organizational strategy for presenting various information in various parts of a webpage. Everything I read says to stay away from using frames on your website. Though nifty in some ways for the organization of a website, they can be very frustrating, aggravating and confusing for the surfer and spiders that visit. They make adding a page to Favorites or bookmarking a page impossible or unpredictable, they make browsing impossible for the visually impaired, they confound search engine spiders, and they frustrate and aggravate surfers when they can't click on links without staying trapped inside a referring site's frame. <A HREF="http://www.wannabewebster.com/" target="_top"escape a frame</A> Using tables to organize. Tables are an organizational strategy for presenting various information in various parts of a webpage. Tables allow you to have some information on one side, other information on the other, and still other information in between. This website is organized with tables. The index above and the codes below are small tables with invisible borders (border="0"). Take a look at this little table formatting demonstration in which the difference is the code <table border="0" and <table border="1" (takes about 15 seconds - loads in a separate window - use your stop button to halt the loop). A speed of loading note: When using tables, many browsers seem to want to display each table as soon as it is completely loaded. This means that if you have a page that is encompassed by one table, the entire page will have to load before anything shows up on the surfer's screen. On the other hand, if a page is formatted using a number of separate tables, each will display immediately as its code is understood by the browser program. If you have a long page that is a bit excessive in loading time, by dividing the page into separate tables you can assure that at least the beginning portion of the page begins to display for the surfer while the rest of the page is loading. Some decent resources on tables: TutorMatrix: tables; HTML Clinic - tables.
Codes for special characters. There are many special characters that are not directly written into your text when coding html. The sign for copyright, the ampersand, greater than, less than, and many more characters require special coding because these characters are used in html code with other meanings. Webmonkey's complete guide to special characters is an excellent resource. Below are codes for some frequently used special characters.
| ||||||||||||||||||||||||||||||||
|
Code checking, spell checking, etc. Once you get your page done, you need to be certain the code doesn't have problems. There are several ways to check your pages and I recommend you do them all.
Meta Tags Meta Tags (AKA, "metatags" without the space between) are part of the code that needs to be in place before the page is launched onto the server. Meta tags tell the search engine the title of your page, the description of your page, the keywords, the publisher and copyright holder and other things you might want the search engine to know. Meta tags can also be used to redirect a surfer to another page or authorize or reject viewing by the surfer on the basis of adult content or kid-safeness. the basis of adult content or kid-safe. Meta tags are also used to tell browsers whether to cache text and graphics. Some sites want a browser to refresh each time it's loaded -- though this turns off a browser's ability to more quickly load pages if it returns later. Meta tags can also be used to inform browsers about whether the page conforms to kid-safe standards so that the browser can decide if it displays the page or not. Metatag checker. Get a Free check of title, description and keywords metatags at ABS Metatag Analyzer. metatag: description & keywords These are important metatags used by search engines. Keywords lists are apparently fading somewhat in importance, but description remains very important (and is likely to be the description used when a search engine lists your page. In your description metatag, try to use as many of your keywords as possible and try to have the best information within the first 195 characters. The description and keywords metatags looks like this: <META NAME="description" content="This is where you put the description."> <META NAME="keywords" content="keyword1, keyword2, keyword3, keyword4"> Note: When you type in your description or keywords or anything else on a page of HTML, make sure all information between quotation marks is on the same line (no carriage returns). This is a coding rule. If you use an HTML editor that uses word-wrap, this is okay -- a line may look as if it is broken onto two or more lines on your screen. Simply be certain that there is only one line number for any material between two quotation marks. |
metatag: turn off smart tags To turn off Microsoft's new Smart Tags to keep them from enticing visitors away from your site, you need the following metatag: <META NAME="MSSmartTagsPreventParsing" content="TRUE"> metatag: automatically send surfer to a different page If you want to automatically move surfers that arrive on one page to a different page altogether (if you change an address but maybe someone has the first address bookmarked or you have it cited throughout your site and can't be sure to change them all), you need the following metatag placed in the metatags on the first page: <META http-equiv="refresh" content="1; url=http://www.domain.com/page.html" metatag: to stop browsers caching a page or using the cached version of a page. If you make a lot of changes to your site and want to be sure browsers get a fresh view each time they visit, you need to either turn caching off or indicate to browsers that cached information is outdated. To turn off visiting browsers' caching of a page or to mark the page as expired add one or both of the following metatags: <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> OR <META HTTP-EQUIV="Expires" CONTENT="-1"> Metatag Resources. There are several sources of good information about meta tags.
keywords Keywords are the keys to a site's success. Keywords are the "key" words that the search engines believe represent your web site. These are the words that search engine users (surfers) will find your site with -- the words and short phrases that a surfer might put into the little search engine input box that starts the search process. If you sell widgets on your site and a particular search engine has your site url associated with the word "widgets," then anyone who types "widgets" into that search engine's input box will get a list of sites that will include yours. You may be the 37,000th url on the list, but you will be there. (Position ranking on search engines is discussed in greater detail in the discussion of search engines.) If the search engine doesn't have your web site url associated with the word or phrase that the surfer plugs into the input box, the search engine won't be offering your site's url. keywords in a metatag AND keywords in text. Keywords are only "keywords" if the search engines decide they are. Though it is a good idea to put keywords in a metatag, this is important but perhaps not as completely crucial as as in the past when search engines relied on keyword lists to inform them of a site's content. The current wisdom is that search engines decide what a site's keywords are on the basis of the text (meaningful text) on a webpage -- sometimes, perhaps most times, with guidance from the keyword list in the metatag. With regard to the metatag keywords list, keep in mind that some search engines may not read past the first 200 characters, while others may read on no matter how long your list is. Search engines don't publish their procedures and this is basically a rumored suspicion. To be safe, have your most powerful keywords listed in the first 150 characters. Separate keywords with commas. Keywords don't need to be single words (for example, "hypnosis tapes,stress management,relaxation" in the metatag would be considered to be three keywords). Avoid repetitions of keywords unless used in coherent sentences. Your keywords should be everything relevant but the list in your metatag or the list you furnish search engines when you manually submit -- and anywhere else on your pages -- avoid meaningless repetitions. Search engine spiders ignore words that seem repeated without purpose. They are programmed to watch out for "spamming" -- repetitions of words to artificially make certain words seem more important. This was a very successful tactic in the earlier years on the internet and spidering programs try very hard now to avoid getting tricked like this. A 5 step strategy for your keywords list. First write out a list of the words you think should be listed as likely keywords for surfers. (Keyword Thesaurus) Then go to a couple of the more popular search engines and do a search for those words. Go to the sites listed in the first few rankings, look at the Page Source for each and see what other keywords they use. You'll find a bunch of new ideas for important keywords. Then use one or more of the keyword frequency tools that can help you see how many times those words get searched for -- and what other similar keywords there are that might be more or less surfed -- Overture's Tool, BrainFox.com's tool, Google's Zeitgeist. Then write the text for your page, including all the information you want to use and using the keywords on your list. Then put together your keyword metatag, using the keywords you think are going to be your primary targets for high search engine listings and put them in the first part of your metatag list. (By the way, as explained elsewhere on the site, if you pick words that pit you against millions of competitors you probably won't ever get yourself into the top rankings. If you pick words that only a handful of people ever search, you won't be getting much traffic even if you get number one position on all the search engines. If, however, you initially target keywords that put you in competition with 40-60K other sites, you may have a good chance of getting into top search engine rankings within a few months of gathering reciprocal links. If you have a site that people will want to bookmark and return to, ranking high on these moderately competitive words can then pull you up on rankings for words that have a much greater competitor base.) "see"-ability Resolutions. Design your page so it looks good and sells whether the viewer is looking at it at 640x480, 800x600, 1024x768 or whatever. July, 2001 data on resolutions suggested that 61% of the browsers were browsing at 800x600. If it looks okay at 640x480, it will probably look okay, just smaller, at any of the other resolutions -- but the other way around is not the case. Text that looked like it was okay at one resolution can be pathetically broken up at a lesser resolution. Relationships between text and graphics can change radically. Unless you build your site using 640x480 resolution, its a good idea to check different resolutions every once in awhile to see what they do to your page. Browser compatibility. Not only do webpages look at different resolutions, they load and look differently on different browsers. Some browsers don't understand the code that others do or may interpret it in different ways. Most recent info articles site Internet Explorer 5 as the most popular browser and Netscape 4x as the second. These two account for the vast majority of browsers with IE5 being about 3 times more popular than Netscape 4x. If you make sure you are compatible with those two browsers, you've covered most of the surfers. If you don't already have |
|
Accessibility. As with curb cuts and elevator labels of Braille, the internet can be browsed by individuals with visual impairments if the website is handicapped accessible. That is, if the website makes itself accessible through an avoidance of certain coding problems, like using ALT= with images, etc. These links can help you meet the standards: Bobby and Accessibility Guidelines. restrict-kids filter - ICRA This is important if your site is NOT an adult/XXX site. Internet Explorer and some other browsers and several filter programs designed to keep kids from being exposed to pornography may refuse access to any internet page that doesn't have a meta tag labeling the site as kid-safe by the Internet Content Rating Association (ICRA). It's free. Just visit the site for explanation, how-to's and code to place on your pages. add bells & whistles Some little tips
Counters/trackers Adding audio. Adding audio to your site can be an iffy idea. Many people find background music invasive. Many block audio because of fear of viruses, etc. If you do have a need to put audio on your site, the following may be helpful: nch.com.au, hitsquad.com. If you have an urge to put music on your site, check out Music for Web Pages 101 for free add-audio resources for webmasters and free 6 to 60 second WAV songs that are encoded, making them smaller and easier to load. (Check out this site's use of sound -- time4somethingelse.com.)
Adding a bulletin board. Adding bulletin board to your site can be a popularity building idea. If your site focuses on any sort of topic, a bulletin board can be a place for people to post ideas, concerns, questions and answers. This is an area that I am toying with, myself, so I can't readily give a comparison of how hard these are to set up but they are bulletin boards that are available for free or very little: BOARDhost.com, CoolBoard.com, CustomizedCGI.com, Dream-Tools.com, Everyone.net, EZBoard.com, ForumCo.com, HomePageTools.com UltraBoard, MyComputer.com, and SiteGadgets.com. adding a site search engine. You can add a search engine to your site, too. Check out the search box at the top of this page in the page index. If you plug in a word or phrase, it will return results on which pages those words appear. FM SiteSearch offers the cgi code and instructions to add free search engine capability to your site (for small to medium sized sites). WhatUSeek offers free search engine capability that you can add to your site (searching your site or searching the web through Chubba search). FreeFind offers free search engine capability also. FusionBot offers free search engine capability and, for a fee, with more features. Adding forms to gather info. Information about adding forms to gather comments, information or other data: Web Designers' Paradise; Forms Tutor; iDocs Forms Resources; TutorMatrix Forms Tutorial; Weballey.net; HTML Clinic. Adding a guest book. You can set up a guest book for people to list their comments and leave their urls. The utility of this feature is a little iffy, but if it sounds good, here are some sites to check out: Alxnet.com, DreamBook.com, GlobalGuest.com, Guest Gear, GuestPage.com, HomePageTools.com GuestBook, LPage.com, and theGuestBook.com. . Adding a pop-up window. You can have a little window pop up at the same time as your webpage. Advertizers call these "pop-unders." Here's the code to add at the bottom of your page of html code, just before the </BODY> tag and adjusting the variables as needed: <script language="Javascript">pop1=window.open("http://www.website.com/popup.html", "pop1","toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars= no, resizable=no,width= 450,height=180" ); window.focus()</script> Passwording pages. You can set up a sub-directory on your server that requires passwords for pages. This requires having a separate area (easy to set up) for pages that you want to restrict access to. When someone tries to access a page in this area a box appears and asks for a user name and password. I found several links on the internet that briefly discussed setting up passwords but basically found that the assumption was that I had a lot of knowledge that I didn't have, but you should look them over if you want an idea of the procedure to use: htmlgoodies.com, mirage.golden.net, alts.net, HTML Writers Guild. I ultimately found it was most effective to speak to tech support at my server. They set it up within a few hours. More Stuff.
Uploading your webpages to your server From your computer to the internet: ftp client. Uploading your website's pages to the "webhost" (also called "server") you've chosen for your website is also called "launching" your web pages. (This is a task that is already done if you have a server/webhost where you create and edit your pages online.) Launching/uploading your site's pages in their basic form as html files and graphics files is done by way of a program that resides on your computer and is called an "ftp client." The most popular ftp programs are available as shareware or as functional free demos -- usually named something-FTP or FTP-something. I like WS_FTP, available from most shareware sites (i.e., Tucows, Sharewarejunkies). Another very popular ftp client is cuteFTP. When you sign up with a webhost, they will work out with you an account name and a password and will give you the the host name of your account. You plug these into the ftp program you are using at the program connects you via the internet to the server and gives you access to the directory on the server where your pages will reside. You then upload each page's html file and any graphics that are involved on each page. The ftp program functions as a file manager -- like the one you use on your computer -- allowing you to make, delete and rename subdirectories and add, rename and delete files. Page check-up services, programs As already mentioned above, it is very important that your code is right, your graphics are as compressed as practical, your spelling is checked, your page is browser compatible and your load time is brief. Of the programs that reside on your computer, CSE HTML Validator has so far been very valuable while the others I've found aren't worth mentioning. There are several programs that check your page, but the best I've found is NetMechanic WebSite Design Resources software
online
Note: Recommendations on this or any other page on my web sites are candidly made on the basis of what I really believe, but keep in mind I'm not suggesting I'm all-Knowing and I'm offering no guarantees or warrantees. |