Web design

In 1995 I volunteered to have a go setting one of the first government websites, at the Ministry of Health. (I thought it was fun being able to play with a Silicon Graphics Indy, a computer with a lovely faux-granite finish.) For the next 10 years I did the site of the Health Information Service — organising, editing, designing, coding and generally juggling a site of over a thousand files of complicated material. I think it’s fair to say I learned a few things in the process.

Ban the bullet

I tried to enter my address on a local website recently. It turned out to be impossible because the only way to fill in the compulsory ‘City’ field was by a dropdown list of towns and cities that did not include my town (population about 11,000). But that’s another story (see below).

Another irritation got me thinking — why can’t I see my password when I type? All I see is a row of bullets onscreen. As it happens, I very often hit at least one wrong key or hit two together, especially when I’m in a hurry, but I can’t know that I’ve mistyped until the password gets rejected. I think this is inefficient.

Obviously I’m being protected from anyone who sneeks up behind me and watches me type so that they can memorise the password. But there isn’t anyone behind me. In fact there’s no one else in the house. So all it does is inconvenience me.

Here’s a radical suggestion: how about having a button to give me the option of hiding or revealing what I type?

Odd characters

I’ve learned something new. New to me anyway. I’ve always assumed that HTML was restricted to the ASCII character set, and anything outside that had to be input as an HTML entity. So, for instance, if I wanted to write café with an e-acute I would write the e as é.

Well, I’ve just finished reading Spell It Out: The Singular Story of English Spelling by David Crystal. A fascinating book, which got me thinking about the characters that were once part of the English alphabet but which have now dropped out of use. Specifically eth, thorn, ash, yogh and wynn, which look like this: ð, þ, æ, ȝ and ƿ. I wondered how to represent them in a web page. The first three are easy, because they are still in use in Icelandic: ð, þ and æ. A bit of hunting and I found the next two (ȝ and ƿ), but I also tried typing them directly as characters in OpenType, using the Character Viewer in OS X. And it worked! Online! And this wasn’t just a fluke, because I tested them with Safari, Chrome, Firefox, Opera and even Internet Explorer.

After a bit of research I found that this has been the case for a while now. In fact, Wikipedia now automatically parses HTML entities as UTF-8 characters. I feel a bit dumb — I suspect I should have known that.

Typography can be important

A while ago I went to a workshop on the subject of self-publishing e-books. What I got out of it was an appreciation of what an immature mess it all is without the quality control that should be provided by an editor, and without any idea of the principals of typography. To put it simply: no matter what their merits as stories, a lot of the self-published e-books are extremely difficult to read. And what has this to do with the web? Well, e-books are basically written in the same HTML used for web pages.

This came to mind when I read a rather garbled news report recently that a book had been rejected by Amazon because it had “too many hyphens.” In fact, that was not true — the real problem was that the author had been too clever and had replaced the hyphens of the original manuscript with HTML entities, but instead of hyphens (-), he had used minus signs (−). This seems like a minor difference, but there are two problems: a minus sign is actually closer in length to an ndash (–) than a hyphen, and it would also be read by blind-reader software as “minus”, which is nonsense.

The connection with this website is that I use real typography throughout. Properly matched open and close quotes (“ ”), for instance. Have a careful look. On reflection, I think that living in New Zealand has something to do with it. You can’t go far in publishing local material without coming across the need to be able to use macrons in Māori words.

What influences design?

One thing I hate is a client telling me to change something in a carefully thought out design. I ask why. “Because I just like it that way” is the answer that makes me cringe, knowing that this piece of work is not going to make it into my portfolio after all. But now I’m the client, and there are some things I just like.

You may have noticed that the banners and photos on this site have rounded corners. Why do I like rounded corners? I think it might be possible to look back and see where this originated. In the 50s when I grew up, rounded corners were part of the design language of the time (a Scandinavian influence, perhaps?). Perhaps that’s why it feels familiar, but there’s another factor — to me, it seems more natural, more organic; it’s less hard-edged and more tactile.

Coincidentally or not, it’s also a dominant part of the design language of Jony Ive at Apple. I can see it on my iMac, a MacBook, iPad, and various other pieces of Apple kit that I own, and it probably seems familiar to me from that if nothing else. Or perhaps Sir Jony and I just think alike.

As an aside, when I first put rounded corners on a website, I had to construct a nine-cell table with four different graphics for the corners. For this site, all I had to do is include {border-radius:12px;} at the appropriate places in the style sheet. This is an example of the maturing technology I talk about below.

A maturing technology

Over the space of 45 years I have seen the technology of typesetting go from hot metal, to phototypesetting, to computer typesetting (using SGML) and finally into the digital era with desktop publishing. The last leap went briefly through a phase of ‘ransom note’ typography before settling down to the standard professional method it is today.

When I made the diversification into creating websites in the early 90s — made easier by the relationship of HTML to SGML — there was a similarly undisciplined indroductory stage, this time involving garish colours and blinking text. Things gradually settled down, but then ceased to develop because development foundered for over a decade in the wasteland of the dreadful and tragically popular browser called Internet Explorer. However, three things have now come together to move development forward. They are HTML5, CSS3, and the gradual demise of Internet Explorer.

At last, the principles of design and typography that have been learned over hundreds of years can be applied to the web. That’s why this site exists: to experiment with the new advances. That’s why, for instance, you are (hopefully) reading this in Droid, a typeface that you probably don’t have installed.

The final touch is responsive design, which automatically adapts the layout to the mobile screens. I think I’ve got this site to be reasonably readable on a phone, not quite so good on a tablet. I’m working on it, but I might have given up for now on the idea of drop-down menus, hence the link to a site map on the home page.

I’d love to apply, but…

Have you ever been frustrated by an online form? One in which you have to give your address, and there’s a field that says “City” — and it’s compulsory. And you don’t live in a city. And it won’t accept the usual workaround of typing in something innocuous like a hyphen but instead tries to validate your entry against a list of accepted cities. Or worse, when it only gives you drop-down of cities to choose from.

So what to do? If I can, I enter the name of the town that I live in as a ‘city’. If I can’t, I’ll put ‘Wellington’, on the basis that at least I live in the Wellington region. With luck, any resulting mail will still get to me fairly directly by virtue of having the postcode.

Why do they do it that way? Only two reasons I can think of. The first is that they’ve copied the coding of the form from some other site, like a gingerbeer bug gets passed along without anyone really knowing how it works. The other is that they meant it that way because they haven’t ever paused to consider whether there are people who live in different situations. They and all their friends live in a city, and they can't think beyond that.

No excuses. It’s simply poor web design.

© 2016 Tony Pritchard