From Accessibility to Zope

What with the summer weather finally here and some good light, it’s a good time to be taking photos.

While I do encourage people to take nice, artistic photographs, and include them on a website perhaps in a frame, this is ultimately limiting. If you would like to end up with photos you can use within the design of a website, you need to take a different approach to setting up your shots. The composition will be done using graphics software at a later date, so you need to avoid doing the composition when you’re in the field.

The following guidelines are based on the main reasons I have to rule out a particular photograph as suitable for a piece of graphic design.

Don’t crop the subject

It may look artistic if the subject extends out of the frame, because it places the subject better in frame and leads the eye in the opposite direction. But it’s the number one reason for ruling out photographs from a layout. With no cropping of the subject, the designer can place a photo anywhere and composite the subject into the layout. With one edge running through the subject, the designer is constrained to place that edge along a natural edge in the layout, or failing that, hide it behind something else. With each additional edge that runs through the subject, the designer is more and more constrained with what can go where.

Don’t take black and white shots

It’s easy to convert colour photos to black and white on a computer; the opposite is not possible. Take colour photos just in case you need them.

Use a mixture of different shots

Most photographers will take multiple shots of a subject, but often this will just be a process of refinement - to try and capture one excellent photograph. You should aim for a much more varied mixture, of portrait and landscape, wide-angle and close-up, different angles and so on.

Try and take the same shot of different subjects

Designers will often be creating a suite of graphics to work together, so take similar shots of different but related subjects.

Include acres of background in your shots

In artistic photography you’re told to put the subject off-centre in the picture, roughly a third into the frame.

In web design we often have very long or tall regions to fill, quite different dimensions that you might encounter in print design. The aspect ratio of the photos that we might be putting on a website is rarely 16:9 let alone the traditional 4:3. We’re more likely to deal with aspect ratios of 10:1.

To successfully frame photos that can be cropped to a very wide or tall aspect ratio, your subject should be much smaller and nearer the edge.

Don’t use depth of field effects

A short depth of field can really 3D effect to a photograph. But it is difficult to cut out something that’s blurry, and sometimes that’s what designers want to do. A blurry background isn’t a problem, as part or all of the background may be removed, but when parts of the subject extend out of focus it’s impossible to separate the subject from the background.

A designer can fake a depth of field effect if the subject is in focus.

Don’t strive for contrast

As a rule of thumb, artistic photos look best with dark darks and bright highlights. Nearly all B2B and the majority of B2C websites are dark text on a pale background, and the dark darks contrast too much with the light and airy environment of the average website. That’s something that you can’t actually fix with colour curves as you can only produce murky greys. A subject that is mostly well lit but fades to black is as hard to work with on a pale website as one that is blurry or cropped: there’s no good way to blend the dark bit into the site.

If your website is on black or dark grey, you’re in luck. These are ideal for publishing artistic photography and really good contrast will look stunning.

When in 1981 Steve Jobs said that “Rectangles with rounded corners are everywhere” he began a trend which today sees dozens of rounded rectangles on millions of PC screens almost all the time.

On the web the situation is even more desperate. Bound by the available technology, and aiming towards intuitive and usable HCI, designers often draw on rounded rectangles to make functional layouts appear more friendly and personal. More than that, using rounded rectangles is perhaps the simplest way to design a site that isn’t just boxy and dull.

In CSS, there are two well-known approaches. The fluid-width approach is to stick small graphics of rounded corners into each corner of a box - these cover up the box’s corners and make it appear round. The fixed-width approach is to have top and bottom images that comprise the corners, and a tiling background to blend between the two. CSS3 offers an improved background model that will render these hacks unnecessary.

Of course, it’s not necessary to stick to plain rectangles: using the above approaches, it’s possible to decorate them with drop shadows, highlights, stripes, cutouts or whatever else you’d like to. These aren’t just techniques for cutting corners - they generalise to techniques for decorating web-based boxes.

There are some caveats with nested rounded rectangles that you should watch out for. This is how nested boxes with rounded corners should appear.

The arcs for all the nested rounded boxes that share a corner should be arcs of concentric circles. In practice, this just means tweak the radii until they look right - so that they appear to focus on a point. Any square boxes should fall inside that focus.

Notice in the diagram below how square corners don’t work unless they are inside the focus. Nesting rounded boxes inside square boxes is an absolute don’t. A more common mistake is to use the same corner radius for an outer rounded rectangle as for a nested one. Most tools preserve the setting for corner radius, and that’s not what you want. Notice how the outer box appears proud in the diagram below, right (cf. above, left)

Notice below how when the boxes don’t share a corner, you can use the same corner radius, but the effect is slightly different. Using the above rule-of-thumb throughout will keep the design a little more down-to-earth.

One of the most common things to store in a database are details of people, be they users, contacts, or third parties you record details for. People are also far and away the most common source of mistakes in the design of relational database schemas and applications. Here are some pitfalls with handling names.

1. First name, last name - Japanese people, amongst many others, disagree with the West on this ordering.
2. Christian name - I’m not a Christian.
3. Title as an enumeration - do you limit the choices of prefix titles people use? Have you included Dr., Sir, Prof., Prof. Sir, Rt. Hon., Cllr., Mayor, Cpt., Cmdr., M., Mme., Mlle., Sheik, Pope, HRH, President etc? Do you think you can compile an exhaustive list?
4. Are two names required? Sting, Lulu, Bono, Pocahontas, Countess of Wessex.
5. Guessing initialisms - If you’ve asked for my full name, don’t assume you can address me as Daniel J. Pope or D. Pope. I very rarely use these forms. Joanne Kathleen Rowling is usually announced as J. K. Rowling. Similarly, I’d always initial myself DJP and never DP.
6. Many US Americans (sadly lacking maps) require their generation after their surname for disambiguation. But you can’t turn John Davis III into Davis III, John. You would write Davis, John or possible Davis, John III.
7. Don’t force Title Case - Mohammed al Fayed, Manfred von Karma, John Davis III and so on shouldn’t be put into title case.
8. “Abdhul” is not an informal way to address an Arab whose name begins with Abdhul ie. the first word of a given name is not necessarily an informal name.
9. Have you stored aliases? Should your database be able to record the fact that Thomas C. Mapother IV is also Tom “Only scientologists can save the world” Cruise?
10. I happen to have a peculiarity with my names. I am not called “Dan Pope”. Dan is slightly diminuitive but “Pope” is slightly formal, and the combination shouldn’t be used. People have often assumed they may refer to me this way and they are wrong. To confuse issues, in recent years I sometimes sign e-mails this way because I’ve found it’s a good fit for the formality of the medium. But different criteria apply in the second or third person.

Names are a very individual thing and people feel strongly about how they should be addressed. How you index or sort names is your business and doesn’t influence how people wish to be addressed. If you’re indexing by surname, be aware that not everybody will identify themselves to you by the same surname you have indexed. If you’re sorting, you should perhaps be aware that individuals’ native collations may differ.

The tip, then, is this: store the forms of address you wish to use. Do not assume you can correctly derive other forms.

These are the variants I use:

Full Title: Daniel James Pope MA (Cantab.)
Full Name: Daniel James Pope
Name: Daniel Pope
Formal Name: Mr. Pope
Postal Name: Mr. Daniel Pope
Initials: DJP
Vocative: Daniel
Familiar Vocative: Dan
Nickname: Mauve
Preferred Username: mauve

Bullet lists are a wonderful way of formatting both because they convey structure and because they serve to visually break up otherwise impenetrable paragraphs of prose.

It’s possible to use a custom image for these bullets, by way of the CSS list-style-image property. This is a great way to carry your site’s theme through into the content.

If you can’t be bothered to draw custom images, you can at least make your bullets agree with the font using the list-style-type. With sans-serif fonts, square bullets usually look more professional. If you are using serif fonts - and this is a bad idea incidentally, because they aren’t as legible on a screen - use circle or disc (ie. unfilled circular) bullets.

In contemporary web browsers, favicons are prominently displayed in the browser’s UI. As such they have become an integral aspect of creating a site that looks professional. More importantly, they allow users to identify a website from a host of tabs or bookmarks. Alas only a third of web pages (based only on my bookmarks list, admittedly) offer a favicon.

What your favicon looks like is less relevant than having something distinctive. Favicons should trigger recognition, and need not stand up to examination.

A lot of hobbyist web designers start by creating the content for their web pages, then try to add graphics to “spice it up”. This is a mistake. It’s very hard to make a page look appealing in retrospect.

Start with a high-quality vector graphics tool - I recommend Inkscape - and properly design the website. To represent where to put content use Lorem Ipsum or simply rectangles to represent individual paragraphs. Once you are satisfied with a design, recreate it in HTML, exporting any graphical elements you need from the mockup.

You can use this approach even for sites that don’t need graphics; it is beneficial for choosing colours, fonts and layouts as well as for creating fully graphical sites.

Be careful though - you need to design a mockup that you can successfully convert to HTML. Graphics programs are WYSIWYG but the web is not and this places constraints on what you can successfully produce. Beware in particular of how the site changes as your browser window or text size changes.

Since I started this blog I’ve used it to document my experiences and thoughts on the field of web development, both as a record for me, and as a resource for other web developers. As a result a lot of the content of this website deals in-depth with issues which, unless you work with the web professionally or are at least an very accompished amateur, you are unlikely to encounter.

From the new year, I will also be posting brief tips which I hope will be useful to a wider audience of amateur webmasters and hobbyists. I am going to aim to post a tip once a week, at least initially.

Please let me know what you think of my tips segment. I’m also happy to answer questions or defend my advice; drop me a comment if you want to engage in any of the aforementioned.