Self taught lessons in publishing for the web

Of the many first-impression reactions I received from friends, acquaintances and even total strangers, many commented on the presentation aspects of this blog. The writing, I understand is not everybody’s cup of tea. I was pleased to receive positive feedback on the presentation because over many years I have been drawn towards the many intriguing aspects of publishing. Perusing typefaces endlessly, studying character spacing, word spacing, line spacing and paragraph spacing. I also had a weak spot for publications that lay out it’s text and images on sublime background colours and images, creating just the perfect contrast that makes it both eye catching as well as readable. Some of the better one’s like Wired had a spread that could match even the best buffet layout in getting the drool going. So, when I decided to publish my blog it was only natural that the layout be satisfying to the senses.

Publishing for the web has it’s own challenges. It’s ironic that the very same technology that enabled mass adoption of many unique publishing techniques for the print are unavailable for web publishing. The reasoning is easy to follow if you know the history of web; but that history is monstrously complex for me to attempt and simplify at the moment. The availability of fonts are limited; the best options among the serif types are Times New Roman and Georgia. Among sans-serif it’s Arial and Helvetica. Without the proper sizing and background some fonts come out looking disturbingly anorexic. And if you would like to layout the text so that it flows around the outline of an image of Coke bottle the challenges are just too much to even make it worthwhile. That is why the creative talent at most magazines find their product’s online avatar embarrassing, and rightly so.

In the case of a blog, the primary objective is simple – readability. Black on white has worked as an effective contrast ratio for print in attaining that objective. That, coupled with optimal spacing are perhaps the only 2 considerations. However, black on white does not work that well for computers. The contrast created by black text on white background on a typical LCD monitor – that is backlit by a CFL tube – with a luminescence rating of 250 cd/m2 is beyond the zone of comfortable reading. Special considerations have to be made. These, and a few other factors influenced my choices for this blog. Here’s a list of some of the concepts which I incorporated:

a) Text is king – Ideas take form as text on a blog. As such it’s essential that it be pampered with attention. Avoid congestion wherever possible. Give them as much space as needed without splurging.

b) Pleasant surroundings – Making the right choice of background image is essential. A background image should be just that, something that stays in the background.

c) The first page fold – The section of a web page that is viewable without needing any further action is what’s termed as “above the fold”. It’s essential that this section announce the intentions of your blog as honestly as possible. Some of the better funded websites commission an Eye Tracking study which tracks the movement of a volunteer’s retina after they first chance upon a page. They have special labs with equipment and the right ambiance needed for such experiments. The equipment records the sequence of user’s “looks” on areas on screen as well as the amount of look-time. Google uses this study to support their policy of charging different rates for different ad locations on their search results page. A poor man’s alternative is to showcase the page to a fresh pair of eyes (preferably someone who is within your target demography) for exactly 3 seconds and then ask them to recall it. The sequence of their answers will be invaluable feedback.

d) No inline links – Web pages offer a unique user experience where users may follow a link within the text to another page. This practice is in fact encouraged by Google by how they rank pages (higher ranked pages are displayed higher in search results). Wikipedia is the poster child for this practice. I differ in my take on this. If you imagine the web page as a room then each link is a potential doorway. A doorway for users to walk out; either to another room within your establishment or to another room in another establishment. Either case it’s an avoidable temptation and an unnecessary distraction. My preference is to bunch all such links in a section at the end of the page. Of course this practice can be compared to casinos and their penchant to lay out floor space in such a way that exits are not easy to come by. This is not an easy balance to achieve and I prefer this approach for a blog. You may choose differently.

e) Creativity is important too – Even though the web platform is limiting for creative layout without significant effort, it does offer some gains if one is willing to invest some effort. Tweaking with border variations to demarcate sections, highlighting the first character of the essay, using extra large quotation marks to highlight quotes, a unique logo, watermark at the bottom of the notepad, etc. are few of the understated creative efforts on this blog.

My final thoughts on this matter was best expressed by Frasier. In an episode I happened to watch the other day, Frasier (Kelsey Grammer) is holding an oversized greeting card in the shape of a pink bunny rabbit; a get well soon card for a colleague. He was just catching his breath from a rant about the choice of card when he opens it to sign it…and it starts to chime a tune. In his inimitable high brow style, he rolls his eyes and wits sarcastically “Yes, the pageantry never stops.”

Remember, it’s a website, not a pageant.

15th September, 2010. Mumbai.

One Comment (+add yours?)
  1. Anoop
    Sep 17, 2010 @ 07:24:32

    I agree with point d. When you open wiki page you land up reading so many pages. You ultimately get distracted or lose interest from the main topic you are reading, too many things at a time.

    Another aspect of inline links is the dictionary and other weird popup. Its such a pain while scrolling.

Leave a Reply

CAPTCHA Code:

CAPTCHA Image Reload Image