Archive for October, 2007

The rain in Spain (revisited)

Monday, October 29th, 2007

When I wrote a whimsical piece on this topic on the 26th of August I had no idea that, in October, rains would bring devastation to the Costa Blanca—or the part of it where I live. Storms and floods destroyed cars, brought down a bridge, savaged buildings and wrecked entire beaches. The precipitation may have been as high as 400 litres per square metre, in 24 hours. The area was officially declared a disaster zone, the Vice-President came to see the damage, and for days the rains were the main item of news on Spanish TV.

A friend of mine had to swim out of the ground-floor of his apartment block into his garage, where he found his car submerged in water. It had been a new car; it was now a complete write-off.

The Peñon d'Ifach overlooks devastationFor some really revealing photos, have a look at the webshots.com album put together by Chris Young (from which I have borrowed my tiny thumbnail).

And where was I while all this rain was falling? In Manchester. (Yes, the irony is a little oppressive.)

However, I did get the start of it. It had been bucketing down all night when I got up on Friday to go to the airport. Since I was staying for a while, I’d decided to go by coach, and had ordered a taxi. It never came. When I telephoned, the dispatcher said it was impossible for a taxi to get to my urbanisation, because of the water. (more…)

Learning HTML

Friday, October 19th, 2007

Design

A friend of mine is just getting into Web site creation and HTML. He bought a standard best-selling book, now in its 7th edition (or whatever). I picked it up and glanced through it.

I immediately realised why it was really not the best book for him. Because it was a revision of a book that was originally published in the 1990s, it still taught HTML page design the old way, using deprecated element tags like font, attributes like align, and introducing page layout via tables.

It did get on to CSS, about half way through the book, but by then the damage will have been done. Why learn a new way of doing things, when you already have a way that works?

My heartfelt advice to beginning Web designers is to use only those HTML elements that mark up the document, staying clear of any tags that define how the page should look in a browser. For visual styling and layout, use CSS. From the word go.

Oh, and though it’s too late for my friend, don’t buy HTML books in their nth edition. Buy one that was first published in 2006 or 2007!

Design Elements: Images (‘alt’ text)

Tuesday, October 9th, 2007

Design tips: imagesI have one or two original ideas about alt text, but let’s start with the basics.

Firstly, you have to have it. If you don’t have an alt attribute for every image on your Web page, you won’t be producing valid HTML. It won’t validate. Worse, you will be depriving a large number of your visitors, who may be blind or colour-blind or have other visual difficulties. They will not get value from your page.

Secondly, it should provide the next best thing to the image itself. If an image is of something beautiful, for example, you should try to convey that beauty in words. Don’t say

alt="tree"

Say

alt="A cherry tree loaded with pink blossom, glowing
against a clear blue sky"

Similarly, if the image communicates meaning. Spell out the meaning in words. (And if it’s purely decorative and otherwise redundant, should it be on your page at all?)

Of course, we don’t often find the time to do this properly. We’re in a hurry, and want to get on to the next page on the site. And here I must hold up my own hands. I will spend hours getting a page layout right—but not give a few minutes to thinking of really useful alt text. (I mean to do better. I really do…)

Anyway, a couple of tips.

  1. Provide a title tag, too, if you don’t want Internet Explorer to display your alt text as a tool tip. An empty string is often useful here—or a single-word caption.
  2. Try beginning and ending your alt text with brackets, so plain text browsers like Lynx make it clear it’s not a continuation of other page text. Using the word “Image: ” straight after the opening bracket is often a good idea. So your actual alt text will be something like “(Image: a cherry tree loaded with pink blossom, glowing against a clear blue sky)”

That kind of thing.

Design Elements: Images (Size)

Thursday, October 4th, 2007

Design tips: imagesThere is so much to be said about images on Web sites, and on Web pages. (Two different issues already.) So I thought I’d start with something absolutely basic.

All graphical Web browsers will resize images for you. (Text browsers ignore them; if there is ‘alt’ text, they either display that or read it aloud. I’ll get on to that in the next post.) They will display images with the width and height you specify inside the image tag, whatever the size of the image sitting on the server—the one you uploaded.

This looks like a really helpful feature. (It seems to be taken advantage of by Microsoft Word, when it creates Web pages from Word documents.) However, you should never use this facility. The browser will upload your big images, perhaps at print-ready resolution straight from your camera, before it resizes them. So your page will take forever to load.

You may not notice this yourself, as the site owner/designer, because your browser will cache the big images on your own hard disc. Your pages will come up as fast as you like. But every visitor to your site, even if they have a fast broadband connection, will wait unnecessarily for the browser to upload the pixel-bloated monsters before cutting them down to Web size. They may well go away before the page has finished loading. (I almost always do.)

What you need to do is decide how big you want your images to be on the Web page, and cut them down to that exact size yourself before you upload them to your site. Any photo-editing or image-editing program will do this for you, and there are plenty of free ones available. Many digital cameras and scanners come with a disc which has such a program on—or you can download one from the Web.

All your visitors will be happier and—since they will stay on your site—so will you.