Constellation Design

The DIY Websiter should have a working knowledge of at least basic HTML code. There are a number of “WYSI­WYG” software packages on the market for build­ing sites without all that bothersome coding—Dreamweaver is a good one, and Micro­soft’s ExpressionWeb is a monu­mental improvement over their old FrontPage authoring tool—but these programs almost always pump your web page full of extra code that can get in the way of an optimum presentation (or at least bloat the file size). To have any real ability to troubleshoot or fine-tune any­thing you’ll need to have some idea of how HTML works and some level of comfort working with raw code. If you’re extra ambitious, you can learn variants like DHTML and XHTML too.

Links

If HTML and Javascript are the body and engine of a Website, Cascading Stylesheets (CSS) are its detail paintjob. Style properties used in CSS determine what colors are used on a site, where things are in the layout, what kind of fonts you see, that sort of thing. They help make a lot of Websites nice(r) to look at. If you don't use any CSS on your site, you might have a perfectly functioning site that looks, well, like this.

Stylesheets can be actual separate files that control your site’s styling, they can be “sub-files” within your HTML docu­ment, or they can be used “inline.” Often sites will use a combi­nation of two or even all three methods. Separate style­sheet files, used along with some rudimetary Javascript or HTML conditional statements, also allow you the ability to customize your site’s appearance on different Web browsers.

Links

Many Weblogs on the Internet—most, I daresay—are DIY operations utilizing one of several user-friendly blogging tools available to anyone in cyberspace. Some of these tools are free, some cost a little bit, and for the most part they are easy to use. Some, like Blogger, work with an optional “WYSYWIG” interface that lets you type as if you were using a standard word processor (you can bypass this and type plain text and use your own HTML code too) and display the blog in the one of several available pre-built template designs. Such blogs are typically hosted by the blog service, requiring no extra hosting or domain accounts. These are great for people who don’t want to mess with the look and feel of a blog but just want something simple that lets them post away at their whim.

Links

JavaScript allows you, the Website DIY maverick, greater control over how things are displayed and/or accessed by your Web page. Scripting often utilizes variables and arrays for displaying data, event handlers for triggering actions or changes in the display, and mathematical functions for things like clocks and counters. It’s used for buttons, for “rollovers” (changes from one image to another when you move your mouse over it), even for some animations. JavaScript, being what’s called a client-side technology—meaning it executes all its functions after the program arrives in your Web browser (other programming languages can be server-side, meaning it does its thng at the server stage and only spits out the completed result to your browser)—is also useful for adapting your Website to a user’s particular con­figura­tion; it can be used to identify what browser the user is running and what kind of computer or screen is in use.

Links

No two Web browsers are exactly alike and some differ considerably. Software makers seem to be approaching the point where browsers don’t radically diverge from each other, but for now they each have their kinks. From a user’s point of view, the dis­crepancies between browsers tend to be in the area of functions like tab browsing and hacker security; from a designer’s, they’re mostly in the area of CSS rendering and presentation. So if you are a Website DIY cadet, you will have to make a decision: does it matter if your Website looks and functions correctly in more than one browser or not? If your site is just for your personal use and you only use, say, Internet Explorer, maybe it isn’t important, in which case you can simply code for IE and not worry about what anybody else uses. But if you want your site to be seen and used by people all over the Internet, you might want to allow for some variation in browser choice.

The major browsers that do play well with others at this point in time are Mozilla Firefox, Safari, and Google Chrome. If your site looks right in one of those, it will most likely be fine in the other two. But the most widely-used browser is still Internet Ex­plorer, much to the frustration of designers every­where. IE is Mr. Hyde to Mozilla/Safari/Chrome’s Dr. Jeckyll: when coding a site, you will invariably do something that works brilliantly in most browsers and that wreaks havoc and/or looks monstrous in IE. (As of version 7.0, the types and scope of its problems are more manageable, but IE will still make you tear your hair out if you’re not patient with making fixes.) Internet Explorer has its very own interpretation of CSS properties that conflict with every other browser, which is annoying enough to outweigh the cool things that you can do with IE that you cannot in the other biggies, like custom-colored scrollbars, text filters, and...well, there might be some other nice thing about IE, but I can’t think of it just now. But it is the browser your site is most likely to be seen with, so if you care about presentation to the masses, you have to do battle with it and make it bow to your will.

Links

Search engines are so commonplace today that “google” has become a verb, so I probably don’t need to explain what their purpose is. But how they oper­ate and how to make your Website show up in a search engine’s listings can be mysterious topics. Without getting into too many details, there are a few key things one needs to keep in mind when coding for the benefit of a search engine: keywords, ALT text, and links. There are other items as well, but they are not universally recognized as important—some en­gines still depend heavily on META tags, for example, while others don’t (Yahoo’s is the only one left that uses the meta “keywords” tag).

Keywords are both a META tag item and a more general term. The term refers to specific words or phrases someone might run a search for that you want to identify your site with (if your site was about Japanese professional baseball, your keywords might include “baseball, Japan, Nippon Pro­fessional Base­ball, NPB, yakyuu, World Baseball Classic, Sadaharu Oh, Tokyo Giants, Chiba Marines, Central League, Pacific League, Michihiro Ogasawara” and other terms some­one might search for on the subject). You would use these keywords both in a META tag and in your site’s text copy. Repetition can be your friend in this case (though sometimes it does make for bad writing)—a search engine will determine that a word or phrase is important to your site if it pops up frequently. Don’t overdo it, though—some people have tried to take unfair advantage of this by hiding a massive repetition of their keywords in a largely invisible way (like type in the same color as the page background), but the search engines adapted and now ignore hyperuse of keywords. Keywords have extra power if they are used in Headline tags and page titles.

ALT text is background code for images. You may want to use a graphic image in place of straight text for appearance purposes, but search engines can’t read your graphic. To compensate, you include alternative (ALT) text the engine will read behind the image (this is also useful for those weirdos who turn images off in their browsers).

As for links, well, this one you don’t have as much control over, and it may be the most important factor. Search rankings depend on how many links to your site exist elsewhere on the Internet. Simplistically speaking, the more sites that link to you, the more important the search engine thinks your site is. So once you become popular and get links in, your search ranking will improve and you can become more popular. It’s the cycle of cyberlife.

Links

Like anything in this world, a Website isn’t something you have to have professionally made—you could build one yourself. You could also choose to install your own pipes or replace your own transmission, but fortunately there are plumbers and mechanics out there so you don’t have to. (Think of Con­stel­la­tion Design as your Internet grease monkey.) But if you are among the do-it-yourself crowd, the re­sources mentioned below might be useful to you.

Click on a category for info on that particular topic: