KKC-KDOL is a Buddhist Sangha in Burnaby. I designed and themed this site for a friend who built it using Drupal. I started with the Zen theme. Zen is a barebones theme you can use if you want to implement your own design, rather than use one of the many pre-made designs available for Drupal. I’m pretty happy with the way this inexpensive site turned out, which is why I’m writing about it.

What I’m going to do in the following is go through the elements of the site and explain why they work; specifically, I will talk about colour, fonts and imagery.

Colour

“Vibrant” may be a word you would use for a particularly enlightened and successful monk, but I don’t think you would use it for the practice of Buddhism per se. “Calm,” “balance” and “equanimity” you might use in the description of Buddhist practice. The subdued colours, along with the ample white space reflect “calm,” “balance” and “equanimity”.

The Kagyu Kunkhyab Chuling logo – the flower at the top of the page – is burgundy so that was the site’s base colour. (Burgundy is also the colour of the monks’ robes, as you will notice from the photos.) I made the header and front page menu text match the logo, and coloured the rest to offset this colour; the background green, in particular. The client suggested changing the background to burgundy, which I felt would make the whole site heavy, somber – not what I think of when I think of Buddhism. They quickly changed their minds once they saw it in burgundy, however. Of course, I could have used a lighter burgundy for the background, but since equanimity and choosing the middle ground is so much part of the Buddhist philosophy, offsetting the relatively small amounts of dark burgundy with lots of it’s complementary colour, lightened, seemed perfect.

The colours of the menu pics are loosely based on the rainbow. I would have liked to work longer on them, but the timeline didn’t support that. I muted the colours, mostly to allow the text to stand out against the images, without having to add text backgrounds, or treat the text; however, the overall feeling of softness and light works well.

The brown of the headers is a lightened version of the burgundy, believe it or not, though I may have shifted it a shade or two. The links are just muted tones of the default links colour, with the breadcrumb colour lightened to differentiate it from the other links.

Fonts

With the web, you are restricted to a handful of fonts: namely, Arial, Helvetica, Verdana, Times New Roman, Georgia, Geneva and Courier. Since most people today have a lot more fonts on their computers than these, you can certainly work with other fonts, assigning second, third, fourth, etc. choices to be used if the viewer does not have the font you’ve assigned. Here’s an overview of fonts and their use on the web and here’s a “Complete Guide to Pre-installed Fonts in Linux, Mac and Windows”. I recently used this table to choose a cursive font for the headers of this medieval themed site I designed. Since anyone who has MS Office programs installed has Monotype Cursive; anyone with Mac OS 10.4 has Apple Chancery, and anyone with Ubuntu has URW Chancery L, it seemed a good bet that the vast majority of the site’s audience would see the headers in a Medieval-ish cursive font. For good measure, I assigned the font to the site’s forms, so that when a person applied to do a presentation at the conference, or filled out the site’s feedback form, they would be typing in the cursive font also.

There are several new options for using non-standard web fonts on your web pages. Here’s an overview to using the CSS @font-face tag. The main roadblocks to using @font-face are achieving cross browser support and font licensing. As noted in the previously linked article, here’s a good source of fonts you do not need to get licensing for. Http://www.dafont.com has great selections too, and great font preview tools; however, make sure you read the licensing restrictions at DaFont, before you go ahead and use a font.

Typekit aims to get around the licensing issue by offering a subscription based service that allows a web designer to choose from a variety of pre-licensed fonts. It’s easy to use, but can be expensive. Currently (April 2010), however, they’re offering a really good discount.

Cufon is a javascript solution to using non-standard web fonts. Here’s the awesome Cameron Moll’s overview of Cufon, compared to sIFR, instructions on using Cufon and, at the end of the article, list of drawbacks to using Cufon. The main, rather large drawback, is that users cannot select text made with Cufon.

Lastly, to paraphrase Mr. Moll, sIFR is a flash and javascript based solution to using non-standard web fonts. Flash is the main drawback to using sIFR. If you are not comfortable with Flash, it can be difficult to set up. Here’s the sIFR use instructions.

“Why can’t I just output a picture of my text from a photo or image editing program,” you ask? Aside from crazy load times, your viewers won’t be able to search your page for the info they are looking for, nor select the text and/or info they are looking for and share it. You really do not want to use jpgs, gifs or pngs for large amounts of text!

All right then, let’s get back to the font choices for KKC-KDOL. Choosing a calligraphic font was a no-brainer: there’s calligraphy in the logo. However, there are many, many, many calligraphic fonts. I chose a light one, that would look good in all caps as well as in lowercase. It had to be dark enough to have impact as a header, but light enough to reflect the “tread lightly” teachings and contemplative qualities of Buddhism. I gave it enough letter spacing to support the quality of lightness without causing it to break apart.

The rest of the text is Georgia, with nary a bold implementation to be seen, unless it’s added in the body copy to add emphasis. Again, in the service of simplicity, I chose font size, and a delicate underscore, to differentiate between headers. I chose Georgia over New Times Roman because it is slightly fatter; thus more “abundant,” and a little less ubiquitous than Times New Roman.

I chose a serif font over sans-serif, even though, it may be argued, sans-serif fonts are simpler than serif ones, because serif fonts harken back to “simpler”, non-technical times. Though sans-serif fonts have been around since the 5th C. BC, serifs are the result of font makers mimicking the brush strokes of ancient, calligraphic pens. In more recent history, the serif Times New Roman has been a defacto newspaper and book font since the 1930’s. Sans-serif fonts are supposed to be more readable on the web than serif fonts, but the difference is negligible. Here’s some background on serif vs. sans-serif legibility.

Images and Layout

Going along with fonts, though I narrowed the text area substantially, the width of that area could actually be further narrowed. Optimal reading length for the human eye is about 12 words. This site has line lengths of about 14 words. With Drupal, I almost always feel the need to decrease line lengths, and increase the line spacing.

The homepage was actually laid out by the client. I just interpreted their (awesome) hand-sketched wireframe.

The background image for the site is the Buddhist knot. I may have looked for a less obvious image, but the work needed to be completed quickly so I didn’t. I did work with effects on the knot image, finally settling on reversing the background and foreground, forcing the viewer to see the background (negative space) as much as the foreground (positive space). I then tinted the knot slightly to reduce the contrast between fore and backgrounds; then reduced the sharpness of the image ever so slightly. The combined effect is meant to bring to mind the fuzziness – in the good sense! – of middle ground thinking and feeling; ie. the unity of mind and heart, thoughts and emotions.

I love tight – but not uncomfortably tight – timelines, incidentally. I end up with more uniqueness when I work fast and this is rarely bad. The difference in the size of the Rinpoche pics was  the result of working fast. I like that the current rinpoche’s face is closer to the viewer than the older, former rinpoche. It reinforces the passage of time. Also, while the former rinpoche occupies the upper, more prominent position on the page, the size of the current rinpoche’s picture makes him more prominent. Ideas of what’s prominent and important are played with; something of which I’m sure Buddhists would approve.

The client sent me pics for the 8 auspicious symbols for the menu items, but the set was incomplete. They were so busy with other things that I went ahead and did a web search for replacements. When I found these graceful drawings, I punched them in as placeholders. Time went on and the client could not get me a usable set so I emailed http://www.clinicalanthropology.com to see if the owner would mind us using them. I actually have not had a response. If they ever do respond negatively, we’ll have to replace them.

So there you have it: a relatively inexpensive and elegant site built on a very powerful, open source content management system. Thanks for reading. Please weigh in in the comments.