It's fine to talk about web design, but web design is nothing without a web page. To understand web design, we must begin by understanding what is a web page; it will come in handy. 

What is a web page? Is HTML just a series of tags? How can we make a web page pretty and presentable? Is there anything lying behind this object now extremely common and what? When you publish a web page what happens exactly? Let's make a quick inventory of what a web page is, what the underlying concepts are and how to have fun with all of this.

Concepts

We should always be able to break down a web page into three more or less independent conceptual parts. At least good design practice requires that we are able to do so. That said, we must recognize that this is not always the case. But this separation into three modular parts has some direct and very practical consequences, if only because the existence of distinct technologies or languages to handle them.

We will therefore distinguish three important concepts: content, form and presentation.

The content is the meaning, the value added, it is what will make a web page useful to others, the text of the news published for instance. We could try to list every kind of content, but it would be far from exhaustive even if we can identify some patterns: menus, links, a blog post with its metadata (author, title, abstract, ...).

This content is nothing if not a minimum structured: this structure is called the form. Incidentally, this is an unjustly neglected step in the creative process. It is all about extracting from content what is meaningful and granting a piece of content a place among the others: to recognize that a piece of text is a title, that this fragment is a subdivision of the displayed page, that this piece of text is important and needs to be highlighted. It may not sound like much, it is often overlooked since the final outcome is the only thing that matters, but it will become more and more important as work on the "semantic web" progresses...

And finally, because ultimately all that matters in the eyes of the visitor is the way things are shown to him, we must choose how to display this content and this form: it is the presentation. Because it often is what visitors to a site will remember, much effort will be devoted to it, probably too much compared to the true importance of content and even form ...

Content: you are the tool

Actually, and just for the pleasure of self-contradicting ⁽¹⁾, there is no language or technology dedicated to writing the "substance" or content of a web page: you have to roll up your sleeves and do it. If you want to write a post for a blog, use openoffice. If you want to create beautiful images for your website, use the gimp, etc..

Form: Brontosaurus HTMLus

Do we really have to introduce HTML? Yes, even if only to emphasize heavily on a neglected aspect of HTML and XHTML in particular. Behind this acronym lies the language allowing one to structure the content. It is a set of "tags" that will tell the browser what is and what to do with the text between an opening tag and a closing tag.

For example, there is one tag in HTML called ul. UL stands for "Unordered List". In addition, we can nest tags. Thus, a reader curious about the presence of a ul tag in the source code of the page will easily see that behind this tag, one usually finds li tags. Why li? It is not the legacy of a Mr. Li who may have contributed significantly to the existence of the Internet, it's just an acronym for "List Item" . Thus, the following code:

... specifies the existence of an unordered list containing three elements. It may well be interpreted by a modern browser as follows:

• Une pierre
• Deux maisons
• Trois ruines ⁽²⁾

Somehow, it's just about giving meaning to the text (or content, data, ...). Today, more efforts are put on the rendering part of creating a page. To even talk about HTML may seem superfluous: only the rendering part is important. But one use of HTML we can observe, is to use <table> tags for formatting the page fragments (align text paragraph horizontally, etc..). What harm is there in that, if we reach the desired result?

The problem with that is, quite simply, that it breaks the semantics of HTML tags. A table tag should only be used to display tabular data. The tag gives "meaning" to what is inside. Computers and browsers are stupid. They do not "know" what they are displaying, they are completely blind to the meaning of a text for example. Structuring a text and content with tags is a way to tell the machine about the meaning of the text, starting with relative importance. This is how we can help search engines to be effective and intelligent. For that purpose, we should not break the link between the container (the tag) and content (the text). This is the base of what is called the "semantic web". If you've already heard the term and had no idea what it is, well, here, you just had an overview (grossly simplified).

Enough digression, you can enjoy yourself structuring your web page with a simple text editor (notepad++) or using more sophisticated tools (à-la dreamweaver). Keep in mind that if you use turnkey solutions, you may have less control over the HTML structure generated. The result will be the same (usually) but your HTML will be full of "conceptual" mistakes, and it's a bad idea indeed.

Presentation: unleash the power of web-design (or die trying)

If you create a web page from scratch, thinking first of the content and structuring, you end up with a page written in HTML. If you then open this page directly in a browser, let's face the facts, it will look ugly. No spatial organization. A badly-chosen font. Etc. The look of your page clearly will not be up the wonderful sites found on the Internet.

Therefore here we will address the question of presentation. The language of choice to deal with presentation is CSS: Cascading Style Sheets, currently in version 2. The goal with CSS is to write a set of rules that will specify how to represent each element of your page.

In order to do this, we must begin by naming the element whose presentation you wish to specify (you can of course select multiple elements at once): this is called a selector. A selector may be an HTML tag (table for instance, as shown in the example below), in which case the selector will match all tags in question, or a « named » element which is an element that has been assigned an identifier or a class.

Then all you have to do is list all the graphic properties of the element you want to change. It ranges from extremely simple properties such as font color or background image to the more complex properties such as the positioning of the object on the page (source of many headaches for designers).

The possibilities of this language are immense. To convince you, you can start by looking at an example - rather rough – on the site of W3School of how a stupid HTML page can be changed to one or another style using CSS (click on links in the left menu). You can also have a look at the CSS Zen Garden, a reference site already featured on wd4all that will give you a good overview of the numerous design possibilities (the same page with a style applied and another completely different). You can also go see there the google home page changed by only changing it's CSS (added by Kameleoon; to have fun with the kameleoon design engine, just add ?kameleoon=true to the end of the URL, or press Shift + F2). We should mention that CSS version 3 is coming and, together with HTML5, promises even more flexibility, possibilities and fun.

To have fun with CSS, you can of course become completely familiar with the language and write CSS rules yourself. If are not ready for such a task, you can use tools like Artisteer or Kameleoon and rather finely control the appearance of your page elements, or you can trust the theme manager of your site or blogs provider...

And then?

However, the content, form and presentation are not everything. One could almost say that it is totally and completely old-fashioned to stop there. These concepts are fundamental but they are only the gateway to something else: interaction! Acting on the page, accessing features, etc.. But that's another story, which still has something to do with web design: ergonomics or how a nice web design can be good for ergonomics and therefore the interaction with a website ...

⁽¹⁾ somewhere in the text, Charles Baudelaire talks about the fact that one important neglected liberty is the liberty of being self-contradictory

⁽²⁾ one may recognize the beginning of a french poem called "l'inventaire" ("the inventory") by Jacques Prévert. In english, it's : "One stone, two houses, three ruins" and then follows a random list of items including a "dozen of oysters" or "another raccoon"...