Easy Steps to a Great Site
Next year the World Wide Web will reach its 13th birthday, which in Internet years is pushing middle age. The Web is no longer a novelty--it's a part of everyday life. And that makes it both easier and harder to establish yourself online, whether for personal or for professional reasons.
Building a Web site is easier these days because of the profusion of high-quality Web tools and services, many available at little or no cost.
But it's also more difficult because simply having a Web site isn't
enough anymore. Your site has to be
If you're just starting out, this month's
That's where we can help. We created a basic Web site (see
We created our 11-page Web site and got it online for the cost of a Web
hosting service, which handled the registration of our domain name for an
additional $32 (see "
Before you begin building pages, decide who you want to bring to your site and what you want them to do there. The goal of our simple site was to introduce people to potential pets currently housed in shelters. The steps we followed are applicable to all sorts of business and personal sites, however.
Think of site visitors as your guests. The design of your site should make them feel welcome and should help them find the information they're looking for quickly. That's why the interface and navigation elements are so important, even on a site that consists of just a handful of pages.
Prioritize the information and services you want to offer your visitors, and make the most important ones easiest to get to.
We planned five sections for our make-believe site, each of them accessible with a single click from the home page or from any other section. All 11 pages on our site include links to the home page and to the top levels of the other sections.
Consider how people will move through your site. Web professionals create "user scenarios" that describe different types of site visitors.
In our example, a young couple looking for a new pet might want a quick way to locate potential adoptees but would also need the shelter's street address and phone number. Recent adopters might want advice on caring for their pet, so we would have to ensure that the shelter's pet-care information is easy for them to find.
Web developers often use flowcharts and storyboards to help them
visualize the content of a site's pages and the links between them. You can use
a flowcharting program such as the
We made another important choice in designing our pages to use a basic version of Cascading Style Sheets, a powerful method for formatting Web pages. Sites created with CSS can have simpler code than HTML sites.
Versions of Microsoft's Internet Explorer and Netscape prior to 4 don't
support CSS, so we duplicated the CSS formatting in each of our site's HTML
pages. Most Web editors can handle both CSS and HTML. For a discussion of the
pros and cons of working with CSS, see "
Getting a URL is a simple matter of visiting a registering-service site, entering your first choice in the site's domain-name search box, seeing if the name is available, and plunking down your $35 (or less) for the first year of use. Here are a few things to think about.
The granddaddy of registrars is
When it comes time to beef up your site's features, you can find lots of free or inexpensive Web site additions on the Net. And getting them on your site often involves little more than pasting some code into one of your pages. Here's a quick look at some of the better add-ons we came across.
Looking to track how many people have visited your site? Microsoft's
A quick and easy way to engage your visitors is to poll them.
We used a couple of JavaScript applets to add interactivity to our
demonstration site. Two sites--
Speaking of message boards,
The board on our demonstration site is
Finally,
The Web's pizzazz comes from its active elements, many of which are powered by the JavaScript language. JavaScript can make page elements jump, move, and otherwise respond to a site visitor's input. And most of them do so without having to rely on constant communication with a Web server, because they're designed to download to the visitor's browser along with the Web page.
We added two JavaScripts to our basic site's home page--an image slide show with links to pages elsewhere on the site, and a rollover menu with descriptive text that appears as a visitor mouses over menu options. We also created a simple product catalog for the site, using Microsoft's BCentral service. In all cases, introducing the new elements entailed pasting some code into the site and making a few minor tweaks to get everything working properly.
"
Adapting code from free repositories or other sites is a time-honored
Web tradition. Just be sure to give credit where it's due. We got our
slide-show script from 24fun.com, but you can view it by going to
furrycompanions.com and clicking
Some of the JavaScripts you'll find house their code in an external
file, which you'll need to download before adapting the script to your site.
Our slide show requires the file
Once you've opened furrycompanions.com in your browser and you've
brought up the source code, select all the text from the end of the
<body> tag down to and including the second </DIV> tag. Press
Collect the images you want to include in the slide show. You can use
as many images as you like, but they must all be the same size for the dissolve
effect to work. To alter the size of your images, open them in an image editing
application such as Adobe's Photoshop Elements (see "
Once you've prepared the images you want to use, it's time to start tweaking the script to make it work in your site. Start by backing up the pages you're working on. Then go back to the JavaScript you just pasted, and start changing variables.
Most free scripts include instructions on which variables to change,
and they're easy to find once you know what to look for. The quoted text that
follows each 'imgsname[
You'll need to make a few of these changes to get a script working,
but once you get the hang of it, you'll have a powerful technique for
customizing your Web site. "
Some JavaScripts are set up so that you can paste all the code
directly into your Web page. The menu on our site was adapted from a script
written by Clarence Eldefors. We simplified the original by removing the
background and rollover colors. You can
The menu script is located in two places on this page. The first begins immediately after the </title> tag, starting with the line <style type="text/css"> and running to the first </script> tag. Copy all this text and paste it into the Web page at the far left of the line below the page's </title> tag. This chunk of the menu's script doesn't need to be altered at all.
Now return to our sample source code, and find the second section of this script. It's in a table nested in our page's main table. Select all the text starting with the tag that reads '<table border="0" cellpadding="3">' and ending with the first of the page's three </table> tags. Copy this block of text, and then go back to the page you're adding the menu to. Place the code where you want the table menu to appear within your page's <body> and </body> tags.
Customizing the items for your menu is a simple matter of tweaking
some text and variables. See "
It's never been easier for a small business to place its product
catalog on the Web. You can pay a developer to custom-design an online catalog
and an order-processing system if you like, but many businesses find it faster,
cheaper, and easier to use the e-commerce services offered by such companies as
We used BCentral's Commerce Manager--which costs $25 a month and offers you a 30-day free trial--to create an extremely simple ten-product catalog for our pet-adoption site's Pet Resources section. Signing up for the service took only a few minutes, and we had our brief catalog of pet-related books posted on Microsoft's MSN Marketplace just a few hours after our initial registration.
The first time you log in to Commerce Manager, you enter into your catalog the products you wish to sell, either singly or many at a time, using the service's spreadsheet template. You must provide a name, a summary, an identifying number (SKU), and a price for every product. Dividing your store into departments is optional--the service defaults to 'top level' until you designate subcategories in your catalog. You can set shipping charges by package size and weight, upload a picture of the item to include with its listing, and provide a longer description.
Other optional abilities allow you to add keywords, set auction
attributes (reserve price, opening bid, and minimum quantity), designate as
many as 30 product variables (size, color, and so on), and add the
shopping-cart HTML code to your site.
Even if your site's visitors will number in dozens rather than millions, they'll use many different browsers running on a wide range of systems. Some of your visitors will browse at breakneck speeds over a broadband connection on a 1-GHz or faster Pentium 4 running Windows XP; others will be stumbling along on a geriatric Windows 95 machine with a 33-kbps modem. Test your site on as many types of systems as possible, try it on every version of every browser that you can get your hands on, and use all kinds of access devices, from an office T1 connection to an old 33-kbps modem.
You can build the best site in the world, filled with information and services that your target audience will love, but you won't draw any visitors until you spend some time promoting your site.
The first way most people think of publicizing a Web site is by submitting it to search engines. Many site owners spend considerable time and effort making sure that their site ranks near the top when a prospective visitor enters specific search terms. But quantity isn't everything. In some cases, getting a couple dozen of the right people to your site can be more advantageous to you than getting thousands of the wrong people there.
Think about who you're trying to attract. For some local-interest or special-purpose sites, getting ranked in a search engine might not be the best way to go. When your site serves a small, dedicated community of visitors, a Web ring, which is a site that lists links to other sites on a specific subject, or a banner-exchange program, such as Microsoft BCentral's Banner Network, might be the best bet.
You submit your banner to the ring or exchange and agree to allow
other banners to appear somewhere on your site on a rotating basis, just as
your banner will rotate onto others. You gain free publicity, but you lose some
control over your site's content because you won't know whose site banner will
display when a visitor comes to your site. Yahoo's
The site's up, your traffic is increasing, the postings are piling up in the message board, and all the e-mail comments about the site are glowing. But remember, your work isn't done: It's really just beginning. There will always be more content to add, new images to place, and revolutionary Web technologies to explore. No matter how carefully you plan, something will always surprise you.
But provided you maintain a strong sense of the site's goals and its target audience, Web services and free add-ons make it just as easy to run a great Web site as it is to run a good one.
Every site needs a good home. And the quality of your Web host can mean the difference between putting up with a slow, banner-laden site and enjoying a speedy, reliable home page. Here are a few things to keep in mind when you evaluate Web hosting options.
Paid hosting services from such companies as
Most hosting services also provide basic page-setup and traffic-tracking tools, as well as assistance registering your domain name. You'll likely have to pay the registration fee (usually around $35) yourself.
Two reliable places to shop for a Web hosting service are the
In creating our sample site, we developed two JavaScripts: a slide show and a rollover menu. Here's a quick rundown of how to adapt each of these scripts for your site.
To add more images to the slide show, copy one of the lines under 'var
imgsname=new Array()', and paste it into an empty line under the line that
begins 'imgsname[3]='. Change the number appearing in the brackets to
To add a new menu item, copy an entire row of the nested table and paste it onto an empty line immediately under your last menu item. Edit the new entry as described above.
You don't need to have $5000 worth of software running on a $10,000 chunk of metal to put stuff on the Internet. Here's a quick look at tools for the Web in three categories: no-end, low-end, and midrange.
One of the newest tools in the Web designer's arsenal is Macromedia's Flash 5 ($399), a vector-graphics program that produces animation files small enough to download quickly over a 56-kbps modem.
The terms
Still, people have used a hodge-podge of standard and nonstandard HTML to create Web sites, and developers haven't felt the need to work in compliance with the most recent standards: HTML 4.01 and XHTML. Little of the code generated by HTML editors complies with either standard, and typically Web pages that don't comply still display in most browsers just fine, even if they include tags such as <font> and <center> that have been deprecated and are no longer standard HTML.
So why comply? XML. The Extensible Markup Language promises to integrate Web content with corporate databases and other non-Web-based data quickly and seamlessly. The future of the Web is clearly XML, so if you want to be ready for it, make sure your site is XHTML-compliant.
Before you write your first <html> tag, you have another standards-related question to answer: Should you position your page elements using tables or Cascading Style Sheets? Both approaches have advantages and disadvantages.
Tables have long been the Web designer's method of choice for ensuring that text, graphics, navigation elements, and other page components display correctly in the many types and versions of browsers that run on site visitors' machines.
The tables are rarely obvious to site visitors (unless they view the page's source code) because nearly all are coded to be borderless: Within the HTML <table> tag, the site designer sets the "border" attribute to "0". Specifying values for the "colspan" and "rowspan" attributes of the <tr> (table row) tag allows the contents of a table cell to span several columns and rows, which makes the intermingling of table elements look seamless.
This approach to Web design has served developers well, but tables have two big problems: First, search-engine spiders--the programs that scan Web sites and index their contents for retrieval in the engines--usually don't read a table's text and image tags (the text descriptions of a page's images, which all conscientious Web designers place within <alt> tags for the benefit of people who browse with images turned off). Second, tables wreak havoc in the browsers used by sight-impaired Web-site visitors, rendering a Web page's contents all but meaningless.
You can overcome the search-engine indexing problem by using the "Description" and "Keyword" metatags inside your page's <head> tag. The second problem is a bit trickier to solve.
Many Web developers create a second version of their sites for nonstandard browsers, including those used by handheld computers, cell phones, and other mobile devices. Then they embed code in their pages to determine the type of browser a visitor is using and to redirect people working with a nonstandard browser to the alternative page automatically.
Coding with Cascading Style Sheets is actually easier than coding a table in HTML, and with CSS you can position page elements both absolutely and in relation to other elements on the page.
So why don't Web developers just use CSS? Because CSS isn't supported in Internet Explorer and Netscape browsers prior to version 4. It's easy to say that people should just upgrade their browsers, but not everyone can. Many people still use 386-, 486-, and Pentium-based PCs running Windows 3.1 or 95, and the newer browser versions don't work on all of these systems.
The Web Standards Project has begun an
The Web Standards Project site also contains advice for site designers and supplies blocks of code for automatically redirecting people using non-CSS-capable browsers to the upgrade instructions, as well as code for identifying visitors with noncompliant browsers and alerting them that they won't see the page as it was designed to be viewed.
