Web Set-up Suggestions


 

Introduction

This section is for beginners. It's not a tutorial - just some ideas and experiences that might prove useful for avoiding pitfalls. I am not a professional web designer nor even a very good amateur. For me, a web site is simply a means to an end and the more easily this can be accomplished the better. If you are a guru or an "Einstein of the Internet" there's probably not much for you here although a couple of ideas might prove useful or interesting.

The Internet is a great place to share pictures and  ideas.  There are two main approaches:

  1. Open an account with someone like Flickr or Picasa (Google). This is free and you can post your material there. The catch is that these people have to make a living somehow and that means your visitors will see advertising and other promotional content. Furthermore, the amount of control you have over the appearance of your images may be limited. Despite the drawbacks, this is by far the easiest and least expensive way to establish a web presence. It works well and many are happy with the result.
  2. Establish your own web site with a web hosting service. This requires a lot more work but provides you with full control over presentation. The rest of this section explores getting started with this option.

 

Definition of a Web Site

A web site is really nothing more than a structure of folders, just like the directories you are already familiar with on your computer. These folders may contain other folders and within these folders are files of any type (extension). A special page file type has an "htm" or "html" extension (there are other page extensions but these are the main ones)  and that's what you see when your browser accesses a site. A publicly accessible site comprises a domain name (such as www.mysite.com)  which is the web root. The structure of directories is stored under the root. The root will contain some other directories and files placed there by the hosting service. These are to control security and log access activity. They are of no concern to you.

When you type in a Universal Resource Locator or URL such as http://www.mywebsite.com/Photos you are asking the remote host to open the folder "Photos" at www.mywebsite.com. For this to happen, that folder must have a page named index.html or default.html. That will be the page first presented in your browser window. It is possible to open a remote folder without such a named file but the visitor will be asked for the site password and user ID which would be impossible for him to know (unless you unwisely handed these over which would also him to modify your site or even delete it). The root itself can be directly opened (providing it has an index or default page), being a folder on the host. This is, in fact, the way most sites are first presented.

Pages may contain links - also called hyperlinks - to other pages or non-page content such as downloads and pictures. Links are specially displayed items of content which, when clicked, direct the browser to display a new page, picture, etc. Your index or default page will almost certainly have links to other pages and when you click these, they will be dished up by the host (also called a server) to appear in a new browser window, a panel in a frame or in some other place determined by the web designer.

A web site can exist on your computer in which case only you or others on your local network can see it (unless your system is configured as a remote server - not generally recommended). For a site to be accessible by the general public it is saved or published to a remote hosting service in which case it is available to everyone on the planet. Of course, you might want to design a web that is visible to only privileged visitors, in which case you can password protect the entire web or any selection of individual folders using a tool in your customer account control panel (provided by the hosting service - see later).

 

Where to Begin

You should build and maintain your site on your local computer. This can be done live on the remote host with a product like MS Expression Web but that's usually a bad idea for these reasons:

  • Your fledgling effort will probably be visible to random visitors and is unlikely to be in a satisfactory state for viewing.
  • Remote maintenance can never be as fast or efficient as working locally. That's because you will have to wait for pages to pass back and forth between your computer and the host over the Internet.

Once your site is ready for first public exposure you can then copy or publish it to the host. It's a good idea to continue your maintenance, updates etc. locally and upload them when ready.

 

Creating and Editing Pages

Once you have decided on your folder structure (more on that later) you must populate the folders with pages. Pages are coded up in plain text using Hypertext Markup Language (HTML). HTML is what tells your browser how to display a page (colors, fonts, etc). HTML is a nasty mish-mash of counter-intuitive codes, punctuation and other irritations that "grew like Topsy" over the years as the Web developed. It's not that hard to learn but coding pages by typing this stuff directly is tedious, error prone and - unnecessary. It is said that real men prepare Web pages using only HTML. The rest of us wimps prefer using a WYSIWYG web authoring tool. This turns site preparation/maintenance into something more like fun. The rest of this document assumes you are using such an editor.  The best known ones are Adobe "Dream Weaver" (DW) and Microsoft "Expression Web" (which supersedes MS Front Page).  I use EW but some say DW is better. It is certainly more expensive. There are other such products, some of them free, but you are on your own if that's the way you want to go.

Expression Web is a great product:

  • 100% standards compliant, including full support for CSS (see later)
  • Easy to learn and use
  • Supports all custom HTML (supposing you want to add your own HTML the no-nonsense, "manly"  way).
  • Provides most of the page functionality you would ever want
  • Fast
  • Excellent interface
  • Relatively inexpensive
  • Trouble-free (if it has bugs, I haven't found them)
  • Despite what you may have been told, EW is nothing like Front Page. It is superior in every respect.

No doubt most of this could be said of DW as well. It has a great reputation. Google the reviews to find out more. If you go with EW, avoid taking advantage of Front Page Extensions (FPE) which will probably still be installed on the remote host. FPEs were a fantastic facility but MS no longer supports  them (probably because competitors could not bring themselves to use them) so you want to avoid dependencies. Too bad. FPE was a great idea and way ahead of its time.

 

Choosing a Host and Domain Name

Once you have your local web looking the way you want it you will want to make it available to the general public. There are three ways to do this:

  1. Establish your own hosting/server facility and go through the hoops it takes to get on-line as an approved host. I know very little about the process and don't know anyone who has actually done this. You would be saddled with regulatory obligations for sure, additional costs, having to keep your computer on all the time and dealing with the likelihood  your consumer grade Internet connection will quickly bog down dealing with multiple simultaneous visitors. Let's just forget about this option.
  2. Choose the free remote hosting service offered by your existing Internet Service Provider (ISP). Most ISP's include some free space for you to set up your own web and if your requirements are modest this might prove an excellent solution. The advantages are ... it's free and you already know with whom you are dealing. The drawbacks are ... the free space you get may soon prove insufficient. After that you have to pay which eliminates the main advantage. You may have to comply with onerous content and bandwidth restrictions or other rules. You won't get your own domain name but instead, your site will be a folder within the ISP's site. There's nothing technically wrong with this but does detract somewhat from the "coolness" of your offering.
  3. Open a full service account with an independent web hosting provider. There are thousands of these. In fact, your ISP probably offers such a service and may have a reduced rate for existing customers. You can get excellent hosting for $10 or less/month. This is by far the most flexible approach, giving you full control of your site at low cost (including your own "www" domain name) and is the option assumed throughout the rest of this document. You should check reviews of appropriate services by Googling "hosting services" and "reviews". The host might be anywhere. In general, the geographic location doesn't matter although you might find performance a bit better with something reasonably local (like on the same continent) and within a jurisdiction providing dependable communications infrastructure.  A US or Canadian host could be expected to give more reliable service than one in Chechnya, for example. During your search for a host you will come across many high-cost premium services ($50/month and upwards). These may offer scheduled backup of your site, guarantees of availability, etc. and cater mainly for large businesses and organizations whose survival may be dependent on exceptional performance. The amateur can seldom justify the expense for any of this. Take your own backup and if your site is down for a few hours/year, so what?

Once you have chosen a hosting service you will be asked to hand over some money in advance. This is normal practice. They will almost certainly offer some sort of deal to register your "www" domain name, which means no one else can use it. Prices range from $5 to $30 per year to keep your domain name registered depending on how much the host chooses to subsidize the cost and retain you as a customer. You will have to find something not already in use which can be a challenge. A lot of good names are already taken and the problem is compounded by individuals and organizations playing "dog in the manger". They have registered as many good names as they can think of, then, when you try to register one of these, you get a message saying you can buy it from them for some shocking fee. Unless you are desperate, don't give in to this unethical game. Just use your imagination together with the search and registration tool provided by your hosting service. You will eventually find something. Let's say it is "www.mydomain.com" as a convenience for later discussion.

The host will now send you instructions or a link to online documentation confirming your site is ready and waiting to be populated with pages. The setup at their end will take a few hours or possibly a day or two. You will also receive a user ID and password for access to your site for maintenance. The host will have a customer login protocol and a self-service panel that should give you all the control you need for site administration. This control panel will give you things like ability to change your password, a tool for setting passwords to individual folders (let's say a folder for family pictures and news you don't want the general public to see) and something for viewing access statistics - plus much, much more. You are now good to go. The host will also tell you exactly where to publish your site. It could be directly to the domain name itself or to a folder they provide. Follow these instructions carefully.

LINUX, UNIX, Windows?

Hosting servers will provide support using Linux, Unix, Windows or all three (your choice). Unless you intend writing server side code that has an OS dependency (most unlikely) it really doesn't matter which you choose. They all work just fine. Linux hosts may be a little less expensive because the OS is free. I have two domains, one is Unix hosted and the other Linux. The Linux site is noticeably slower but it's hard to imagine this having to do with the OS itself. Because the service is exceptionally inexpensive it attracts a huge number of customers and the vendor simply may not have kept up with demand by installing more equipment.

 

Publishing Your Site

The Internet is notorious for encouraging high-falutin' terms for ordinary actions. "Publishing" merely means copying the directory structure and content of your locally built site to "www.mydoman.com" (or a folder therein, as determined by the host). You open your remote www.mydomain.com with a suitable web management tool (see below) and simply drag and drop the whole mess there from your local version or to a special sub-directory if the host requires it (he will inform you of the exact place).

In Expression Web you open both the local site and the remote site (which will prompt for your ID and password), then drag and drop as you would using Windows Explorer. It's that easy. If your prefer, you can use the EW "publishing" option which provides some other controls such as copying only those pages that have changed since the last time but this is hardly a revolutionary feature.

Alternatively, you can copy your files in the same way using a product such as WSFTP or SMARTFTP (my favorite) which are highly useful products to have in conjunction with EW. Unlike EW these are not web authoring products but, rather, powerful web management/diagnostic programs with some features you won't find in EW (or DW, for that matter). Both have first rate user interfaces and are largely intuitive in use. You should get one or the other although this isn't absolutely necessary - just very nice to have.

Depending on the size of your site, the first publishing initiative could take from minutes to hours. An advantage of using SMARTFTP is that it has extremely robust recovery facilities so if the transfer is interrupted it will always resume properly once the connection can be re-established. EW is less forgiving and better suited for smaller or piece-meal uploads.

Transfer Protocols

There could arise some confusion concerning transfer protocols for uploading and maintaining your site. I won't pretend to understand the entire nonsense but it goes something like this:

In the beginning there was FTP (File Transfer Protocol) and it ruled the Internet. Then the experts came up with a more powerful, flexible protocol called HTTP (Hyper Text Transfer Protocol) and we were told it would replace FTP. For a variety of reasons that never happened and, in fact, FTP remains dominant for web maintenance. HTTP is nicer to use because it supports many great things like file copy on the remote site, re-calculation of links on the remote site, etc., etc. BUT ... you must have Front Page Extensions (now unsupported) at the remote site for this to work with Expression Web (!). The irony of the situation is disturbing. I have no idea what DW does.

The upshot of all this is that you might as well just use FTP for all your web work. That's all SMARTFTP supports and, of course, it works with EW. It's a bit primitive but nothing can be done about it. If you are using EW, all the great things enabled by HTTP will work on your local site because EW incorporates it's own functionality for these. Once you have taken advantage of things like file copy and link re-calculation, upload to the remote site using FTP.  To do this with either SMARTFTP or EW you will have to identify the remote site as ftp://www.mydomain.com rather than http://www.mydomain.com.

Quite frankly, there remain some mysteries surrounding this subject but that is my understanding of the situation.

 

Active Content

These days it is practically expected that web pages will have some active content. By this is meant content that moves, makes sounds or otherwise exhibits some sort of behavior, rather than a static appearance. The instructions for driving active content are part of the HTML defining a page or are referenced indirectly after the manner of a hyperlink. A lot of this material is a confounded nuisance and intense irritant when injudiciously used but sooner or later you will probably want to implement some. In fact, this site uses a small amount of active content for certain types of menus and for counters. Active content comes in two flavors: client side and server (or host) side. Client side active content is executed by your computer, according to information provided on the web page, whereas server side is executed by the site host before sending you the page. 

Client side active content is encapsulated by technologies such as ActiveX, JAVAScript, VBASIC and others. It's quite a mess. The advantage of having your computer do the work is that this sort of content can run continuously with no load on the host. Some types of client side active content can post the results of computation to the server and have this saved in a file.

Server side active content is executed by the server, the result being to change something on the web page or in a file within your remote site. This is done before the page is handed to your browser for display. The server knows it is expected to execute something on a page (or referenced by a page) by examining the page extension. If this is "htm", that means nothing to do. If it is "asp", aspx" or "php", among others, then it reads the page to find and execute the active content. PHP is a popular scripting language for server side active content and you will have come across "php" pages many times.

Active content can be very useful but for now, avoid it. Learning to use it involves some challenges and you can always add it later, when you really think you need some.

 

Appearance

Because papyrus or wood pulp is white(ish) and ink produced by the cuttle-fish is black the black text on a white page has been tradition for a few thousand years. This is not necessarily the most readable sort of presentation. These days we have options.

 Like a camera, the human eye is subject to flare and this gets worse the higher the ratio of bright light (white in this case) to dark (black) content in an image. People with impaired vision are especially susceptible. Psychologists making a profession of producing highly readable, non-fatiguing text presentations advise me that light text on a dark background is really the best combination for maximum visibility and minimal fatigue. That's why this site appears as it does. Give black text on a white background its due, however. It is vastly superior to some schemes found on the Internet. It is not that unusual to find red text on green, blue on red or other distressing combinations. Color can be effective, however, if harmoniously chosen so as not to produce violent clashes. One of my favorite sites uses dark blue text on a pale yellow background. This is a good deal more interesting than black on white and, more relaxing to read.

If you are using CSS (and you ought to be) you can instantaneously change content color and, thereby, experiment to obtain the best effect. Some of this is a matter of personal preference so don't get caught up in trying to find a perfect solution. There is none. Just try to bear in mind there may be better options than black on white.

There is also the matter of tradition in other respects. We probably never will see government documents, scholarly papers and other formal content on the Internet in anything other than black on white. Academia, bureaucracy and stodginess are an indivisible triumvirate.

Finally, be careful with line lengths. It is common to find sites having text running full-screen entirely from left to right. It is very difficult for the eye to scan from the end of such a line to the beginning of the next. Confine lines to easily scanned lengths. On this site text is centered in the browser window at 60% of the maximum possible. You can change line length by dragging the right side of the window but it is always substantially less than full-screen. On his site, Thom Hogan confines text to a column on the left side of the window. It's up to you how you do it but - do it.

 

Domain Name Registration Renewal Scams

Your domain name will usually be registered and annually renewed by your hosting service. This arrangement isn't mandatory and you could elect to have some third party deal with this paperwork. Using your host is usually the least expensive and trouble-free ... he will simply auto-bill your account when renewal is due and that's that. Hosts like the business and will usually offer very fair pricing for administration.

Whichever way you choose, there's a chance you will one day receive an e-mail or snail-mail letter from some company you never heard of urgently advising "Your domain name is about to expire! Renew with us to keep your name!", etc., etc.  This will usually happen a couple of weeks or even days before your renewal anniversary (which is something that never crossed your mind before as a concern) so as to minimize the time you have to think or check the contract you have with your host. What's going on is this:

  • Domain registration information is public and anyone can find out when renewal is due.
  • They know you probably have auto-renew with someone else but are betting you are so dumb you think you have to do something yourself right now - and with them. These third parties tend to pick on new domains where the owner is liable to be a bit naive.
  • If you bite on their offer they will cancel your present auto-renew (let's say it is with your host) and take up the admin work themselves for the stated fee you agreed to and signed-off on. The process is entirely legal, by the way, because it is your contractual right to cancel with the host and go with any third party domain registrar.

Is this what you want? Auto-renew will now be with the new administration service. Your credit card wll be on file with them (for domain name renewal) and the host (for hosting service only). The third party renewer could be a good deal, assuming they are honest (I am sure most are and the business is certainly legal). If the price is attractive and the company reputable, it might be in your interest to bite. Just do it with your eyes open and don't let them stampede you with hysterical warnings about domain name expiry. Quite frankly, I would not want to give business to a company that pulls this stunt. A decent outfit would send you a respectful offer without the scare-mongering.


 

Tips and Reminders

  • Use a WYSIWYG web authoring tool.  Consider Expression Web or Dream Weaver. There are other good products, some free (even from Microsoft).
  • Build and maintain locally.  EW supports working directly on the remote copy of your site but it's less efficient that way and poses some risks. What if you really break something and now your site doesn't work until you figure out how to fix it? Sure, uploading changes is a nuisance but it really is the best way.
  • Keep it flat. Avoid having deeply nested directory structures. Although this is somewhat a matter of personal preference, a relatively flat structure of folders is easier to maintain and understand. You will be glad you kept it simple.
  • Locality of reference.  It is tempting to have links pointing all over the place but site maintenance is much easier if related elements (pictures, pages etc.) are grouped together within the same folder or distributed across only two levels of folders (this can be helpful in separating page content into meaningful categories of similar components). Local referencing also makes small backups of frequently updated sections simpler to manage and less error prone.
  • Relative links. Use relative as opposed to absolute links. That is, avoid having the web root name in a link (such as in this example ... http://www.mydomain.com/Photos/Vacation). This makes the reference dependent upon the physical location of the root. If a hyperlink references something higher up in the directory structure, the ../ (for one level), ../../ (for two levels, etc.) notation should be used. In general, Expression Web looks after this by default. Just be careful when clicking open file/folder names to have them made into link targets as they may have a local disk or folder name referenced. Those local references will go into the hyperlink and will have to be cleaned up.
  • Don't use Windows Explorer for local site management.  It may be tempting to use Explorer to open your local site just like any other directory structure and do a bit of re-organizing with drag-and-drop, delete etc. This works just great except that if any hyperlink targets are moved, deleted, renamed, the associated hyperlinks will NOT be updated and are, therefore, broken. Better to use these tools from within Expression Web which will always ensure links are updated, provided you have enabled "manage the Web site using hidden metadata files" in the "Site" menu from the EW toolbar.
  • Learn CSS (Cascading Style Sheets) and DWT (Dynamic Web Templates).   Honestly, this is the most important advice you could take. You may have heard CSS involves a steep learning curve. This isn't really true. Most of the problem arises from the majority of introductions and tutorials making ambitious assumptions concerning your pre-knowledge of terminology and traditional design practice. You need learn only the basics and that shouldn't take more than a couple of hours. Dynamic Web Templates are understood within minutes of reviewing the topic. With these two tools the styling of a web page turns into a "point and click" operation and a mass change to large numbers of pages becomes an almost trivial operation. Your productivity will improve by an order of magnitude over traditional page design. Last year I prepared a short introduction to CSS which you can view by clicking here. If you are totally in the dark concerning the subject, that might help. You will also find links to an excellent Expression Web Help forum and a CSS tutorial.
  • Remember to SAVE. This will sound pretty stupid but hard to believe I am the only one who has been bamboozled by this oversight. Once you have made changes to a local page and are ready to copy it to your remote site, Save the local copy. If you don't, the remote site page remains as it is when you drag from the EW local window to the remote. Doh! I don't want to think how many times failure of a remote page to update was caused by failure to save locally first and I then spent a lot of time trying to figure out why. After all, the local page on your monitor looks just fine. Have this happen a dozen times or so and it finally sinks in.
  • Refresh. Up top in the EW toolbar is "View". Under that is a "Refresh" control. Use this if something is mysteriously missing from a folder. EW sometimes does not automatically update the folder/page view when you put something new in there and that can prove very puzzling. Ditto for the remote site view. Always try "Refresh" first if something seems to have gone AWOL.
  • Take backups. This shouldn't require saying but ... regularly make a backup copy of your entire local site. Write this to a DVD or another hard drive or computer on your network if you have one. Similarly, before making significant changes to your site, copy the original folders to be changed to a backup folder somewhere on the site. You can always clean this out once the changes have been tested. It's tempting to avoid the nuisance of this simple precaution but if you yield, you will live to regret it. IMPORTANT: When making a backup of a page (or pages) to another folder the authoring tool may ask if you want to have hyperlinks updated to reflect the new location and/or name. Decline this offer because you still want links to the original, active page to remain valid.
  • Be patient (but not too patient). Updates to a remote site do not always appear immediately. The delay is very dependent upon your ISP and host load and how they handle updates internally. Several seconds delay is usually acceptable and not uncommon. Some Internet services are notorious for using 3rd party caching which can make it very difficult to discover who is at fault when you have a real problem. My ISP and host are effectively instantaneous 99% of the time but there were a couple of times over the last several years when updates were taking hours to appear. If that happens more than rarely, it's unacceptable even from bargain providers. Lodge a formal complaint with your provider(s) and/or use the freebie phone number to contact customer support.
  • Please yourself. We are all different. No matter how much care, attention and expertise you put into your design there will always be someone who tells you it stinks. Respectful, informed criticism can be helpful but you will never please everyone. If certain aspects of your site regularly attract negative commentary, consider doing something about it. But at the end of the day it only matters if you like the way your site looks and works.