Creating even a single Web page is a multi-step process, starting with an idea and never ending with updates. Creating an entire Web site is, obviously, a multi-multi-step process; many ideas must be created and updates must be continuous. After performing these steps many times, I will describe them to you so that the process may be passed on. True, experience is what is needed, but some mistakes are not worth doing.
First one must think of an idea: without an idea, there is no content; without content, there is no point; without a point, there is no visitor. Try to think of a stable idea that has not been done many times before; documenting an under-documented programming language or data-basing all software for a specific operating system are good examples. Design how one would best implement the idea; maximum simplicity, searchable, customized, in Japanese? Run the idea through some trusted friends to see if anyone would need or care for it. The basic principle is: if you care, some one else does too.
Now design how this idea would be best shown. If a full Web site is needed, layout the navigation. A hierarchy of links and sublinks is suggested for navigation, but make sure each sublevel is relevant and needed. A great suggestion is to take a large sheet of paper and create a tree of information, starting at the root and ending at a leaf. Make the tree as simplistic as possible, for easy user navigation, and plan for additions. Remember to plan everything out; once the page is posted there is no turning back. Keep this tree handy throughout work on the site.
After laying out the site or if only a single page is needed, design the basic page. Use an 8.5x11 inch piece of paper and sketch what would be best for navigation, readability, and style. Transfer the tree hierarchy drawn earlier to the design, move/remove all distractions (animations, bright colors, pop-ups, et cetera), and use wise color/size/font/miscellaneous selection. Remember that people read 25% slower online than in the Real World, so try to keep the text simple and minimalistic. Reduce the total amount of text to about 50% its Real World amount.
The basic page design just created is extremely hopeful: now one must design a minimal basic page design; text only using structure instead of presentation. For example, place labels of Table of Contents and Paragraph instead of sketching how you would like the table of contents and paragraph to look. This is helpful, especially later, for remembering that you are creating content with a structural language.
The language used to create the pages is the next necessary decision in the Web page/site creation process. My suggestion is to use the HyperText Markup Language (HTML) level 4.0 strict, as it provides just about everything one would need. Study it, then use it. Keep the Document Type Definition (DTD) handy for quick reference later. Another option, probably not for those new to Web development, is to write your own markup language using the eXtensible Markup Language (XML). This has the advantage of being customized to your tastes, but the disadvantage of being relatively new.
Depending on the markup language you chose and the basic page design you created, you may now decide on a stylistic language. Again, I would recommend Cascading Style Sheets (CSS) level 2.0 due to its features, but you may also roll your own using the eXtensible Style Language (XSL).
The text editor one uses is probably an extremely important decision, as you will spend most, if not all, of your time in it. I would suggest using the most basic, non-distracting ASCII text editor possible; I personally use TkNotepad, a rewrite of MicroSoft's Notepad "applet" in Tcl/Tk for Linux. On MS Windows I would suggest Notepad, and on MacOS I would suggest SimpleText. Try to find an editor you are comfortable with and that presents the code in a readable format; if the tab-stop size is too small and unchangeable (which should be illegal), use a different text editor. I use a tab-stop of 8 characters, but you may use a different size. Tab-stops, of course, bring me to … coding style.
Try to visualize the Web page as you write it. Visualize the minimal basic page design and how you would create it. Use only structure elements. Be sure to write the code as human-readable as possible; indent to show descendants (h1 is a descendant of body, which is a descendant of html) and use comments and white space to your advantage: if you think you will forget why you did something later (or if you are programming drunk), comment about why you did it. Also, use comments to keep a log of your work; at the top of the page put your name, email address, the date, text editor, operating system (kernel version, if necessary) for not only yourself but others.
After writing the minimal basic design, one must now decide how to implement the original basic design. Two common ways are using a stylistic language or presentation HTML. If you are using HTML 4.0 strict, as suggested above, the logical (and only) choice is CSS2. If not, you should still use a stylistic language, unless you have created your own markup language using XML, but even then you should use a stylistic language. CSS2 really is a good stylistic language, but I do not believe it will work with XML; all we have left to do is wait for XSL to become a recommendation. Either way, link the style sheet in as a separate file so one universal style will be on all pages; consistency is the key to an online following.
Write to the standard; if your browser, or any known browser, does not support an attribute, ignore them and do what you want. If a browser mangles the page because of a half-supported style, you may have to not use that style. At no point shall you use an attribute or a form of an attribute not specified in the standard. If you write your own stylistic language, write a standard for it to help yourself and others. Remember: if you care, someone else does too. Share your standard.
Now comes the boring step: filling in the content. My suggestion would be to write the content out, either on paper or in a word processor, to review and check. Spelling and grammatical errors are really annoying. After writing the content out either copy/paste it or type it in to the template created previously (the basic page design). Double check it and make sure the markup is correctly modified (title, headers, et cetera). Highlight the important facts with strong text (or its equivalent in your XML language) and cross-link it with other documents (anchors and hypertext). If the content is rather long and makes important points, or if it is broken up into very different sections, use some way to mark those sections with a specific way of going there (<a name="x">y</a>, for example, or id="z").
A final check should be done on the entire Web page or site with a HTML (or XML) and CSS (or XSL) validator, specifically from the World Wide Web Consortium (W3C). All hyperlinks should be checked, manually or automatically, and the page/site should be shown to a test group before being public (intra- or Internet hosted). Remember, once a file is posted to a network, it should stay there permanently to avoid linkrot.
There is one final step: repeat.
As I've mentioned in other retros across this site, I was a teen writing about the new toy I was playing with, and I was not alone. None of us knew what we were doing and lots of this information was passed on via word of mouth.
A now-dead link that was originally in this document was to a similar article from someone one year younger than I; he works as a dev at Twitter now. I find similar links across this site. A whole underground of teens finding their identity through teaching each other how to make Web pages. Graffiti for the shy?
The bulk of this article is a series of links to my favorite articles by Jacob Nielsen.
Glad I no longer use TkNotepad. Some time after this my coworker and I spent a week trying a different editor every day. We settled on vi in the end.
Reduce the total amount of text to about 50% its Real World amount.
I especially like this quote because it juxtaposes Web content against something that barely exists anymore. And to an extent, Twitter took this to an extreme.
decide on a stylistic language
The idea of using an alternative to CSS is crazy now. But at the time … sure, why not? It's not like the W3C mattered — it was just some people on the Web writing about how to write HTML.
use comments to keep a log of your work; at the top of the page put your name, email address, the date, text editor, operating system (kernel version, if necessary) for not only yourself but others.
My boss at the time suggested we try CVS, but we didn't see the point and he didn't push it.