Keep It Simple Stupid

---

---

I believe that one of the most important things to bear in mind when creating a web site is simplicity. Not necessarily in the way it looks, although I believe that is good too; but in the way the code behind it looks. Messy code will lead to bugs, and will be a nightmare to change later on. More importantly, messy HTML can hurt your search engine rankings! Making the search engine spiders lives difficult might not be the end of the world, but it will never benefit you. So what does one do? Well lets first look at what normally happens.

When you are initially learning to put together a web site, one of the first things you do it go out onto the web and either copy existing sites, or read the tutorials and examples in coding sites like this.

If you take an existing web site and try to copy its HTML you will likely be shooting yourself in the foot immediately. The vast majority of sites out there are done in some sort of scripting language in the background (PHP for example), and many of them hide the fact so the result looks like its a normal HTML page. Now even neat well made PHP can create messy HTML, and most sites will have had undergone a series of changes during their lifetime that will result in an even nastier mess.

Then of course when things don't work quite how you expect, you go looking at all the myriad of web design sites to be found on the net. Now most of them are run by intelligent people. The problem of course is that intelligent people like to fiddle with code, make it interesting, push the limits. While what you find on these sites may look cool, you'll find yourself developing a website who's design is controlled by these small parts of interesting code. This is not good, because eventually you'll looks back and want to change things, and changing the smallest bit of code will have ramifications for the entire page.

Now, obviously when a web site evolves, as things are added while others removed, the code will become jumbled and harder to maintain. This is essentially inevitable, but a good simple design at the outset can hold off the ravages of updates for years rather than months.

So where do you start? Well after you have chosen what content you want on your site, but before you have thought to hard about how it will look and how the data will be stored, you put together the simplest of web pages. This page should contain nothing but the barest outline, no formatting, just hard coded content.

The following is an example of just how bare the page should be. Click here for example page.

Now to go through the HTML in a bit more detail. We won't focus on the header information that comes before the body tag, if you have a good HTML editor like AceHTML it should auto create all these without any issue.

The first section of code defines the header for the web page and the menu. Note how each section is within a <div> tag, each tag having an easy to remember name to do with its position. The header has nothing more than the header text between <h1> tags, and the menu is a simple unordered list. While this will look very ugly right now, it is easy to understand, and will be easy to change drastically later. This menu should always remain as short as possible, only listing the most important sections of your web site. Too long and the user will get lost.

Next comes the most important div, the content. Don't bother placing anything meaningful here yet, you just want to put some filler text, and place the different headers you may need. You will also notice a div with the id "float", this can be added if you feel you may want some form of summary near the top of the content. This could be later formatted to be above all the content, of in a floated box off to the side.
While it is not a good idea to put everything you think you might need into the content right now, if you think you will need a few ad placements, or text areas that are formatted differently (like our code boxes here), then feel free to add them now, just remember they'll all look the same until later.

Finally we have the additional sections that finish the page. That is the side column (assuming you have one) and the footer.

Don't put anything into these unless you really want to. Currently they are just place holders for what will be added later.

Now sit back and read the site. If your site is more graphical (for instance a photography site) that doesn't mean you shouldn't do this step. Add a few images to the content section, add what text you might think you'll need. Try to think about all the different things your user will need to see. Just need! Don't add anything that your site could live without, if you find the simple unformatted design is getting complex, then you have added to much. It must still be understandable by itself.

And thats the initial outline of your website completed. Very simple with no embellishments, just the content that you will want your reader to see. Next you can begin to think about how you want all this to look; which we will be tackling in the next article about simple CSS.