The first site completed—completed just in time for their Halloween party—was for the Lower Red Lion, a pub and guest house in St Albans.

It has 400 years of history behind it, with some visible timber and brickwork, and featured in the ITV series Foyle’s War.

My aim was to make the site as useful as possible to people thinking of visiting St Albans, and to showcase all the pub’s attractions.

I am now working extensively with typographic grids, creating pages which balance vertically as well as horizontally. This site was my first complete site to use such a grid. It was also my first HTML 5 site.

The site which I designed and developed for the theatre group Footlights Calpe is also an HTML 5 site. A bit simpler than the Lower Red Lion site, it still allowed me a few theatrical effects.

For a few more details about the two sites, you can glance through the Website notes and Design notes which accompany each display on my portfolio page.

It’s such a cliché. And yet, still true. If you want it good and fast, you have to pay. Over the odds.

Most of my clients have limited budgets. They get me cheap, and I produce at least halfway decent Web sites. Check for yourself.

I lift my glass to all my fellow professional Web designers who charge little, produce great Web sites—and whose clients keep wanting to see the Web site up tomorrow…

So I have attacked the dreadful custom of asking for ‘First names’ and ‘Last names.’ And I have put in a protest against the illogical American system of numeric dating. In this post, I tread on even thinner ice: is it ‘sex’ or ‘gender’?

In modern English and American Web forms, this not only reflects a misunderstanding of the original radical purpose behind the use of ‘gender’, it also stifles that very purpose. From being a mind-changer, it has become a system-enforcer.

In many (maybe most?) of the languages of the world, gender is a critical feature. Articles, possessive pronouns, adjectives, and so on, all have to agree with the gender of the noun. If you are speaking Spanish, you have to know that a tie (una corbata) is feminine, and a dress (un vestido) is masculine.

This gender is quite arbitrary, as my examples suggest. So radical thinkers in the early days of structuralism extended this to masculinity and femininity generally. There were no given masculine qualities or feminine qualities. It was all arbitrary.

A liberation, which led to much ‘gender-bending.’ A liberation for all of us, men as well as women. And then one day some English speakers got hold of this idea, and not understanding its origins in the grammar of other languages, decided that using ‘gender’ instead of ‘sex’ would show everyone that sexes are also arbitrary.

You might applaud the thinking behind it. However, its net effect has been to freeze what had been fluid. You can now ask people for their gender on a Web form. So it’s fixed.

You have to be an English speaker, and not very good with languages, to think that there can be a ‘male gender’ or a ‘female gender.’ So a great radical liberation has been lost. We are all back in our (check) boxes.

I am really proud of this Web site. I spent a lot of time researching and thinking through the basic issues: what pages there should be, what should be on each page, and how we could make visiting the site an enjoyable and informative experience for a range of distinct kinds of visitor. In particular, I wanted every page to answer the questions: are these people worth booking? and (for singers) is this a group I would enjoy being a member of?

On the visual side, I began—as in my design for the Football Prophets site—with the idea that I wouldn’t frame the content, even though I stuck to my own 960px ‘rule.’ I experimented with a new style for top-of-the-page navigation, plus (on the home page) a really inviting visual jump menu. For more detailed design notes, you can check out my Web design portfolio. You can also visit the Costa Barber Web site itself.

People who design forms for airline flight bookings aren’t likely to be reading this post. But lots of us design forms for local car hire companies, or local property agents, so that bookings can be made online. And both of these are common on the Costa Blanca.

The first point is really obvious. Don’t expect people to enter dates by hand. Give the website visitor a popup calendar for each date field. In particular, I recommend the jQuery UI date picker. You can style it exactly the way you want, and, in its recent versions, it has all the options any Web designer could ask for.

And now a free goodie. Lots of us want to set a second date picker to start at the date already set by a first date picker. I spent months Googling for a simple way to do this before I came across a solution. And this is my simpler version. (In programming, as in maths, the simpler solutions are the more difficult to work out. And the more useful to other people.)

$( document ).ready( function() {
	$( "#start" ).datepicker({ dateFormat: 'yy-mm-dd', firstDay: 1 });
	$( "#end" ).datepicker({
		dateFormat: 'yy-mm-dd',
		firstDay: 1,	// Monday, for Spanish calendar
		beforeShow: function()	{
			dt = $( "#start" ).datepicker( 'getDate' );
			return { minDate: dt };
				// JSON - dt could be 'null' (which is OK)
		}
	});
});

This relies on your knowing some jQuery, of course. But you’ll need that to use the date picker. Date field 1 has an ID of start; date field 2 an ID of end. You won’t need ‘firstDay’ at all if your week begins on Sunday. Check the date picker documentation for the other option fields.

That could be it. But I have one axe to grind. If you have to ask for dates using separate days and months, do not use the provincial American order of month-day-year, especially if you’re asking for numbers.

I sometimes wonder if the effect of their date system on their infant minds is why some Americans have such odd ways of thinking. Year→month→day (as in the MySQL format above) makes sense, going from greater to lesser; so does day→month→year, going the other way. But month→day→year? Month→day→year? It just leaps about the place, without any logic to it. 11/09/2001 is a date to make all of us feel a sense of human solidarity with Americans. It’s the eleventh day of September, 2001. The problem is that Americans write it 09/11/2001, which can only logically refer to the ninth day of November. I suppose it’s a sign of our solidarity that almost all English speakers now refer to the date as “nine-eleven.” But we mustn’t let our solidarity influence us when asking for dates in Web forms.

In order to put a proposal to “Tom de Selby”—as he wants to be known—I did a bit of research into tipster Web sites. I was staggered to discover how many of them there were, and how many of them specialised in betting on football matches.

I very much hope that “Tom” is successful in this crowded market. I have never met him, and never even knew what he looked like until last month—when I did a bit of sustained detective work and tracked him down to someone else’s Facebook page. But it was obvious from his many emails that he is a really nice guy.

You can visit the Web site itself: it is called Football Prophets. You can also read my design notes on my Web design portfolio.

I filled in a Web form like this just this morning. And how did it ask for my name? (Wait for it.) First name and Last name. This is so common it’s appalling. The clear assumption (and this is proved by automated replies, which always start ‘Dear [First name],’—or even ‘Howdy, [First name],’) is that the Web visitor’s first name is their personal name, and that their family name or surname is their last name.

This is to be as bizarrely provincial as you can get. OK, in the USA and in the UK, this is common. But the majority of human beings on this planet put their family name first. I’ll say that again, in case there are any provincial Americans reading this post: the majority of human beings on this planet put their family name first and their personal name last.

At this moment a Chinese woman tennis player is going great guns in Melbourne. Her name sometimes appear as Li Na, and sometimes as Na Li. Commentators still seem to find it difficult to get their head round the name, to work out which is her personal name. I also remember hearing Americans, during the Iraq war, referring to “President Hussein.” This is like saying “President George.” Saddam was the dictator’s family name, so he put it first. Hussein was his personal name, so he put it second.

The consequence for Web form designers? It is vital that we abandon the awful First name/Last name or First name/Surname practice. Web form designers must ask instead for Family name and Personal name. That way our Web forms will be understood (and can be translated) across the planet.

When setting it up, I discovered that Facebook had already set up a page itself, probably by following a link from my personal profile. What is more, the page had six fans, none of whose names I knew. Unfortunately, I lost them all in setting up the real page, so the new page has no fans yet.

I plan to update it regularly, and will shortly be offering 6 months’ free Webmaster Services as a prize. Have a look yourself!

That’s because it was a property site, and the owner sold her property. I am now using the same Web domain name to promote another property, on sale by one of my near neighbours in Calpe.

I actually had this new Web site up at the end of August, but I have been really busy with work for clients, including a football tips Web site in the UK. I have at last found the time to add this Calpe villa Web site to my Web design portfolio.

I am really quite pleased with it. The property Web site genre is only too predictable. Here in Spain at least, estate agents are happy with really dull Web sites based on templates, or try to jazz them up with time-wasting animations such as videos or slide-shows which the visitor can’t control or even stop. This Web site puts the visitor firmly in the driving seat. It is as interactive as a property Web site can be.

Don’t take my word for it. You can have a look for yourself.

I am not here concerned with the more complex colour effects you can get by creating a background image with the effects you want—gradients, radial bursts, stripes, and so on. I just want to make a small point about the use of colour names.

I have 2 recommendations to make, and I make them to the most talented and experienced of my fellow Web designers, because they don’t always follow them.

1. Use the colour names of the 16 originally defined colours: red, green, blue, etc.. It doesn’t take long to learn them. Especially, use black and white. There is absolutely no excuse for writing
   background-color: #000;
color: #fff.
2. Add a comment to any colours that you can only identify using hex (or RGB) values. After
   color: #cf2200,
   add the comment
   /* a red, from garden flower */,
   or at least
   /* a red */

Anyone who has been a programmer as well as a designer knows the value of comments. In particular, they make it easy for other people to identify your colours and your reasons for choosing them, while reading your code. And they make it easier for you, when you come back to the code a few months later.

I should mention here that modern browsers know a huge array of colour names, but I am not suggesting we need to use them, except when by chance a name identifies a shade/hue that we have already chosen. It’s better to get into the habit of adding comments.

Actually, while we’re on the topic of CSS colours, I feel like passing on a practice of my own which is not so generally useful as to count as a recommendation, but which I find really useful as a designer. And here I mean designer, not coder.

I put all my colour rules—for backgrounds and borders as well as text and links— in a separate section at the end of my style sheets. This is a bit of an irritation when coding, since I have to create the other rules for a given element in another section of the style sheet. But it really pays dividends when I want to make small changes to site-wide colour schemes. The relevant values are all together, and can be changed together—sometimes in a single rule.

Why not see if it works for you?