Everybody wants a website.

Truly, it feels pretty swell to have one - some nice cachet to your name also being a domain name (and lucky for the web late-comers with unique names; as "barton cole," I was able to secure my own name as a domain).

"Check out my website," is a nice thing to say, too. Feels good.

Lots of ways to go about having one, too, as it happens. It's pretty simple to get a domain name and a hosting account (this is like setting up a webmail account, except it takes a credit card - really: super easy). After that, it's merely a matter of getting the content and putting it on the server, upon which you've rented space with your hosting account.

Generating the content

Early on, when I made my move into web development, I had contemplated the requisite resources, but feared I couldn't afford one of the well-known web-authoring programs like Dreamweaver or GoLive, etc.

Of course, I found my way into web development initially through the internet (and then the library), and fortunately, one of the first HTML tutorials I scouted demanded that web authors work with text editors, and modify raw HTML code, rather than using some drag-and-drop, WYSIWYG interface tool.

We all have those simple devices installed on our machines, no matter what suite of office software we've purchased and installed - Notepad being the Windows OS default, and TextEdit the present Mac tool.

So it's just a matter of learning the code… which is where the work comes in. Still, to work with and modify it, the simplest tool installed is perfectly adequate and useful.

But there's the hang-up - learning the code. HTML is pretty simple and straightforward - sure, I'm saying this as a programmer, but that's not even something worth making a big deal about - really, folks, it's so simple to grasp and execute that I child can do it. They ought to teach it in schools. It's the attendant programming languages that are more slippery, starting with CSS and javascript, and PHP and Perl, etc…

That's really where the rubber meets the road - one thing to generate HTML content - fairly easy - but to give it a graphical user interface (GUI), you're going to either know how to get under the hood and do that, or find a way to have it done.

Web authoring options

If one isn't working with text editors (I use NoteTab Pro, a little Swiss marvel with a host of HTML and other code assists built in), then one will be doing it mostly with d&d, either using software installed on the machine, or at an online webhosting-authoring service (most registrars and hosts provide a simple, limited, expensive tool for making a website right away; our views on that below).

Don't look for reviews of these things here, though, folks. Being rather vertically-integrated, I don't need those tools, so am not too aware of them. I do have experience with them in a few ways, though, which prompted me to generate this manifesto to help you DIY web developers to make some good choices.

I recently helped a friend put his site on the web, hosted at Whidbey Telecom, our local telecommunications company (best in the US, truly). This was a simple matter of transferring files from his computer, where they were generated, to the web server where he had a hosting account. This is just what I do, bumping files up to the web, but he authored his with iWeb, a tool installed with the Mac OS.

iWeb, like any of the other d&d tools, includes a set of templates, featuring a range of text, color, and image tools, for creating sections on a page and styling them, including creating hyperlinks and all that.

The templates, from what I've seen of these things, feature perhaps ten or twenty themes from which to choose, and all very well designed, providing the user with a wide range of choices, particularly when one considers the divergence of the rest of the style choices to be made with text, etc.

Still, these are woefully limited: I dropped in on an art-dealer friend, who I found had just made coffee and was working on his website. He was posting it to his own domain, but working with Wordpress as his authoring environment.

He was grateful for the tools to which he had access - "look at all these background colors I can choose from," he said, showing me the conventional grid of 150 or so.

I pointed out, though, that by writing my own code, and modifying those hexadecimal color codes myself, I had access to all 16,777,216 of them. Just saying.

And up went his site.

Up went my iWeb friend's site, too, but with a difference - he generated the files locally, on his own machine, and uploaded them to a server.

My Wordpress friend had installed it at his domain, and worked the "dashboard" online; the files never really landed at his machine.

The subtle difference was that I was able to intervene with the html and css files exported by the macintosh, and tweak them a bit before bumping them up to the web.

In the other case, one must be content with the quite nice, although severely limited, range of choices presented by online web-authoring services.

Worse, with "WebsiteThisInstant" plans available from registrars, the choices are limited and often progressive expensive. One buys a plan with five pages, let's say, but then adding pages costs money, per each additional page…! With my NoteTab Pro, adding a page is faster than you can say, "hyperlink." Really, those things are a chance for the registrar to fleece users, or at the very least, take advantage of them as they stand poised at the all-night-three-ring-circus-rave-party-bordello-library of the world wide web.

Having a website is a wonderful idea, and sounds great, let's do it - but it's a daunting prospect, to go about dreaming it up and then sending that balloon aloft with all that other traffic…

Once you've bought your hosting plan, which shouldn't run you much more than a $100 or so a year - with email included and what not,

here are your options for getting content to the web:

1. Write the files and generate the content yourself. Quality: depends on your skillset. Cost: free (other than preciou$ time) Limitations: virtually none. Best way.
2. Hire a web designer and developer to generate the files and content. Quality: depends on the developer; generally pretty high - but you get what you pay for, as with all else. Cost: at least $300, even if you're lucky. Find a developer who's into your political cause, or has a sliding scale… Don't be afraid to ask them if they can work with your budget, and appeal to their sensibilities - it works with me; try me.Limitations: skillset and budget
3. Author the files yourself with tools installed on your machine (such as iWeb or Wordpress - if not installed, easy to find and download), and upload them. Quality: skillset? Cost: free (other than time) Limitations: skillset, available features, typical dashboard capabilities ("all those background colors!").
4. Author and edit the files yourself online, and transfer them to your domain. Quality: skillset? Cost: free (other than time). Limitations: skillset, typical dashboard.
5. Buy a rapid website plan with your hosting, author the files yourself, and make the files go on the web right away. Quality: skillset? Cost: rapidly expensive; fees applied for routine and silly things, such as modifying the meta-data, or adding more pages… Limitations: skillset, typical dashboard, budget, and flexibility.
   If you're interested in a hack-job website that makes you or your products look perhaps marginally legitimate at best, this is your best option.
   If you're interested in staking out some piece of turf on the web, perhaps you'd do best with one of the options above.

Considering the treacherous and perilous alien landscape, if one doesn't have the skills and can't hire a native guide, then one is best going with the well-known guidebook and traveling with confidence that way.

At all costs, avoid getting picked up by leeches at the terminal, so to speak. See below.

Here's what I'd do in your case:

Get a domain name (more on that in "best tips" below).

Go ahead and buy a hosting plan with the registrar, ideally including one or more email addresses for free (that's an easy add-on for registrars; more ought to throw them in).

Do Not Buy into a "WebsiteThisInstant" sort of plan - your choices will be limited, and you soon will feel as constrained as one on a bus tour gone wrong, with unhelpful guides in hostile territory. Or if you don't, and like that sort of thing, then skip the remaining steps.

Download and install some sort of web authoring tool, such as Wordpress (despite the limited backgrounds, that's the case with them all - don't want to slam the poor and excellent tool).

Open it up, find your way around the interface, create your pages, generate and edit your content, and somehow, as is easily found in the file menu with these kinds of things, export your files to a directory (a folder) on your machine.

Now, you merely have to upload them to your hosted server - you can log into that with username and password, which you created when you bought the hosting account (like webmail, but with a credit card, as I said), and upload the files.

That part's easy, too - using a file-transfer-protocol (FTP) program - many free and useful ones on the web - one logs into the hosted server with the host name (your domain name), and the username/password login stuff, and there you are - the contents are right there in a window on your desktop, with a window alongside of the files on your "local server" - that is, your computer.

Just find the ones you want on your machine and drag them over; it's that simple.

Best to do it this way, I think, as one can get a programmer to intervene along the way. We have access to all that code, and all those colors…

Simple but essential design tips:

If you're going to design your own site, by all means go for it.

Consider these few things when choosing a domain and structuring your site, so your users will be able to find you, and have the best experience.

Domain name

Keep it short. Your own name is a good one, if pertinent, with no spaces, hyphens, or underscores is best. If it's for an interest or product, try to keep it short, but also intuitive. For instance, the company, P & Q Limousine Service could go with www.pandqlimousineservice.com, or www.pandqlimousine.com, but why not go all the way and have www.pqlimo.com? Easy to remember and short to type; got all that going for it, as well as intuitive; a user might think of it, without access to a search engine or what have you.

Regarding .com, .net, et cetera, I don't know that it matters much any more. Something that aligns with the content of the site - "yourname.org" sounds silly. Save that for when you're actually a non-profit. In the US, .com is best and most obvious, and its regional analogues elsewhere.

Best website practices

Although you might not think of these things as an ad-hoc web developer, you're aware of them to a degree as a web-user, although you've given them little thought. Here are some ways to make your site the most user-friendly, by giving people enough of what they expect, but putting your own spin on it. This is rather like a restaurant serving food on a plate - don't take the novelty of designing your site so far as to serve food on magazines, or bricks, or something like that (although you can probably get it that way in New York).

Logo in upper left corner.

Always. Any worthy site places it there, and ensures that it's also a link back to the home page. This is easy for you to do, whatever your web design circumstance, and essential.

Reasonable header graphics

Most websites have some kind of graphic header, whether it's simply a tiled gradient, or a photograph or other image, stylized or perhaps not. No reason why your site shouldn't have one - it's rather like choosing the color scheme when painting your house - this gives you a chance to express something of your aesthetic or other ideals; on your house, you might go with turquoise trim on yellow walls, or something equally flamboyant - or perhaps just natural-finish wood siding with discreet trim, playing it safe.

The graphic header is a nice touch: similar to a "welcome mat" at the porch of your site.

But keep it reasonable - don't go with something too loud or garish; if your visitors are going to have it in view much of the time, you want it to be capable but not overly assertive, or it becomes annoying by drawing too much attention to itself.

Or worse: a friend was telling me about his artist friend's site - "He designed it himself - he does sites, and he's good."

He gave me the url, so I went there. The graphic header immediately told me much about the artist - his medium and style - and it was huge, perhaps 400 pixels high (four to five inches, ten to thirteen centimeters).

The navigation links ran along the bottom of the header, so I clicked one, and went to another page.

Same header, but still huge. The content began down at the bottom of the screen, barely visible, like a frog lurking in a pond.

Every page had the same huge header, with the content beginning down at the bottom; to view any of it, I had to scroll. That rapidly became annoying, so I left.

It's the old newspaper rule about keeping important content "above the fold." The screen can be thought of the same way - some conventions from printed media apply with websites, but the two media are fairly divergent.

Still, don't make your users work at merely seeing the content on the page to which you linked and sent them. Don't make them have to scroll unless you've paid them off with something first, such as a nice taste of the content right there on the screen when the page loads.

Another thing to consider - if this artist had scaled down his header - I think about 125 pixels is about the maximum height you should claim with it - I would also have enjoyed different header graphics on each of his pages, which were devoted to different aspects of his life and work.

Keep it consistent

Although I suggested above that one might apply different background images to headers on each page, don't get carried away with making each page too customized. The style should serve and support the content, not the other way around, and you want to keep your users feeling at home and comfortable.

Style your links the same on each page, and be sure the navigation is located in the same place on each page, as well as the other core items I'll mention below (breadcrumb links, email address, sitemap link, etc.). Each time your visitor goes to a new page, you want them to know they're still at the same site - divergent page styles among pages can easily confuse, and confused users leave.

Avoid the dreaded horizontal scrollbar

Keep your page width under a reasonable maximum. Screens are now routinely about 1200 pixels wide, but it's not the best idea to base your site's width on that; if a user has their browser window scaled down from full screen, or is working on one of the common, tinier laptops, and you've based your scale on screen dimensions, they'll see a horizontal scroll bar, likely causing them to work to see some of your basic content.

Some designs are fluid, and will expand to fit the browser window, while others have a fixed width. If yours isn't a fluid design, your best bet is an 800 to 900 pixel width, either centered in the browser window, or flush left, as is often the case.

One notable exception is found at the website of Banksy, the notorious London street artist. It's the format best suited to his work, but generally, sites work best oriented vertically.

Style your hyperlinks

By default, browsers style hyperlinks with blue text, generally underlined on hover, red when clicked, and purple if the link has been visited.

This generally looks fine on search results pages, or other lists where we're searching for links as resources, but can easily intrude in a page in which the links support the content, rather than drive it, if you see what I mean. Pages of text, styled appropriately for the web (more on that below), can look rather odd when bits of blue pop up all over.

On the other hand, users are accustomed to seeing links this way, so they're not as intrusive as they would be in a magazine article or newspaper.

Those colors might not suit your page style, though (particularly if the background is black - links look too garish that way), but if you choose to style them otherwise, be sure they're still obvious as links. You wouldn't want your users to miss them. Shades of gray are good, provided they're dark enough, or dark oranges if your site goes toward deep earth tones…

Make sure the links are obvious, and be sure they have obvious link behavior - when the user hovers over them with the mouse (as you've encouraged them to do, by styling the text or image as a link), be sure they know it's a responsive link by giving it what call "hover behavior" - change the color, or add an underline (a good and simple choice).

Whether you style visited links in a special way is up to you; it's a way for users to keep track of where they've already been but isn't always necessary.

Also, you might consider styling "external links" in a way that lets users know the link will navigate them to a different website, away from your own. Generally, the little image of a block with an arrow projecting out of it, commonly seen, is a familiar convention, and lets users know they're about to jump elsewhere. I don't always use them, but if the link might be confusing, not indicating the eventual destination to the user, I'll include an extra bit of style to let them know.

Breadcrumb links

Helpful if your site has a deep structure with various levels of linked content, to help users find their way back up the chain of links.
With a small site, access to navigation will suffice.

Accessible navigation

This is a tricky one. If you put your site navigation across the top in the header (common; good choice), or down the left below the logo (also a good choice - users expect this), where does it go when users scroll down your content? To get around they'll have to go back to the top to the navigation. This really can't be helped, much - if you have a lot of content, duplicate your site navigation in the footer, so if users get that far down, they won't have so far to go to get around.

I try to employ strategies for keeping the navigation in view at all times (this site is an example), by fixing the screen position and keeping it small and out of the way. This is taking accessible navigation to an extreme, but it's most helpful, if well-designed.

And be sure your navigation links are text - if images don't load, the navigation goes away, and no one can get around.

There are strategies for making the text links look graphic, by putting them on buttons, either the jelly-style or not, but the links are still text. Those are good choices.

Email address

It's best to have an email address associated with your domain - again, many registrars and hosts provide at least one free email address with a domain; I think your best bet is to set it up as info@yourdomain.com, whether you plan to use it for correspondence or not. "info@" is good, and so is "admin@," but you can use your name, too - as in "bcole@bartoncole.com" (I pondered "himself@," but when it came down to the one email address for that domain, I went with "info@").

And then post the address on your site prominently, so users always feel like they can send feedback. Generally, they won't, unless you also have the email address appear in content, and specifically request contact, as for initiating threads of communication on topics covered at your site.

Sitemap

I consulted with another friend, authoring a website online; I urged her to include a sitemap, telling her, "All the good sites have them."

True, they do, and a sitemap is helpful.

It's essentially a list of the principal links within your site; the navigation, but expanded so it's a list of all the pages in your site, ideally representing the hierarchy, as well.

A sitemap is a great tool for someone to examine the overview of content at your site. Rather like an index; if I had a list in my library of all the books on the shelves, in alphabetical or other specific order, with specific instructions on where the book was to be found (the old Dewey Decimal card catalogue, in action), I'd be completely delighted. As it is, I often have to scout around for titles; imagine the challenge for someone who's unfamiliar with my collections? Browsing for specific items is nearly impossible - one has to wade through the content, hoping that pertinent data is to be found, and hoping that they'll find it.

Make it easy for them. Include a sitemap.

Funny, too - when I was recently uploading my personal website (bartoncole.com), I had been visiting my friend authoring her site online just a day or so before, and remembered, with my finger on the FTP launch-pad trigger to upload the directories and files when I had completed what amounted to months of glorious work, that I had not written and included a sitemap - after having impressed upon her how essential one was - so had to stop and gather all the links on a new page and format it as a sitemap before I could upload the site.

Only took me half an hour (three cheers for hand-coding and fast typing), but we've devoted effort to the sitemap since, and think it's just about ideal; take a look.

a little sample of some of these points

Below, an image representing a few of these little issues; this shows one common strategy for dealing with these things.

You can scout around on this page, too, or elsewhere on this site, and see how I've employed these same points. On this page, you'll find the breadcrumbs and email link and the sitemap link and all that, but in alternative locations to what's shown below.