Web Log Costa Blanca

In my last post, I passed on a useful CSS trick. Of course, this is of no use to would-be designers who want to stay away from HTML altogether.

There is nothing wrong with this. If you want to design a site for yourself, a ‘Site Builder’ program can be a great help. Web Costa Blanca offers several for free download, to signed-up clients who want to take this route.

If you are going to design more than one site, however, and especially if you are designing sites for other people, you limit yourself by not working directly with HTML, together with CSS and JavaScript.

And if you work with them, it’s a lot more satisfying! If you use an ‘HTML-free’ WYSIWYG editor, the program stays in charge. If you are at home with these three basic technologies, you are in charge.

In my last post I mentioned the importance of white space. In this respect, do your pages always look different on different browsers? Have you ever spent hours adjusting margins and padding in order to achieve an acceptable result in Internet Explorer, Firefox, Opera, Safari…?

Here is a little CSS trick that you may find worth trying. At the very top of your style sheet, enter the following rule:

*    {
  margin:  0;
  padding: 0
}

The * is the CSS ‘universal selector’. It applies to every single element on the page. So what this rule does is give every element a default margin of zero, and zero padding (on all four sides). Which means that you can then give each element, or kind of element, the exact margin and padding that you want, overriding your own zero default—and not take pot luck on browsers’ defaults.

This trick seems to have been first proposed by Andrew Krespanis, in a blog post of October 2004, Global White Space Reset. This is a post worth reading, not only for the technique, but for the many comments.

Having chosen a base font, how do you best lay out your text? I’m not talking here about producing text (writing), I’m talking about laying out the text you’ve already written.

There are two things that you have to bear in mind.

1. Your site visitors will scan your page first, before they actually read any of it (if they ever do).
2. Text is another graphic element on the page. It needs to be placed and shaped and coloured in the same way as a photograph or a button. Each paragraph, in particular, needs to be shaped as a block.

So, you need to look at each piece of text as a shape—like a jigsaw piece that has the right shape to fit where it is put. Where should this header go, to have the clearest impact? Should it be broken into a two-line header? Should this paragraph go to the right of the accompanying image, or to its left? Should this line be in a smaller font? How big should the margin here be? Should the text here march in its own column, or flow round the images? And so on. Once you get to thinking of text as a graphic element, your visual sense will guide you to the look you need on each page.

Three final tips. 1: get the line spacing right. 2: give text blocks breathing room. (My first graphic design teacher used to say, “You can never have too much white space.”) 3: almost never allow text lines to run right across the screen. (Create columns and blocks.)

In my previous posts in this series, I have suggested a way of picking the best base font for a site.

You pick a suitable paragraph from your existing text. You look at the fonts available across systems. You display your paragraph in each possible font—with the versions one under the other on the same page. You keep looking at the display until you can see the one that goes best with the words, and with your specific aims for the site.

What if you want to use more than one font?

More than one base font is a no-no. I think this is pretty well understood now. Mixing fonts so that your pages end up looking like ransom notes is one of the surest sign of a beginner. Nor should you change fonts from page to page. Keeping to a single base font across pages is one of the simplest ways of making sure that your site has a consistent look and feel—that it looks like one site, and not two or three (or six).

On the other hand, using a different font—consistently—for headers, in images, or for special text effects, may well add a bit of life and interest to your pages. Try a few experiments!