Marketing Defined

Using “dropcaps” or a large, bold drop capital at the start of an article not only increases readership by an average of 13%… but improves website stickiness.

Those of you who visit this blog with any sense of frequency, might have noticed I have been playing around with the idea of introducing a drop capital, just like the magazines employ, for the first letter in the body of content

If you are interested in using drop capitals to increase the length of time a reader spends at your web site, I’ve included examples, instructions, CSS code and the span tag you should use so that the drop capital renders well in both the Firefox and IE7 browsers for you.

I guess now is not the time to scream out “how darn frustrating that IE7 browser can be”. Nothing I try with CSS appears to render correctly in Internet Explorer. I had to tweak the measurements for the drop-cap half a dozen times, before IE stopped chopping off the bottom half of the letter.

In a perfect world, all internet users would smartly, only ever use the Firefox browser, and thus the lives of “L plate” web designers like myself would be made that much easier.

The idea for the dropcap came from David Ogilvy, a giant in the advertising industry, who wrote in his marketing/copy writing book “Ogilvy on Advertising”:

“Starting your body with a Drop Capital has been shown
to increase readership by an average of 13% !”

After the recent mishaps with my WP installation breaking (resulting in the blog being closed for repairs, for about 2 weeks), and losing thousands of subscribers, who probably thought my blog had just closed down, heck! I’ll be happy with an extra 13%, providing they took the time to read some of the stuff in here.

Instructions, CSS code and Span Tag for using dropcaps

Here is the CSS code to include in a style-sheet for more regular usage.. or for simple one off use, just include in the “head” tag of a web page.

.dropcap {
 float:left;
 margin-top:0px;
 background-color:#ffffff;
 color:#333365;
 padding-top:.1em;
 line-height:23px;
 font-size:35px;
 font-weight:bold;
 font-family:"times","Times New Roman";
}

To display the large bold drop cap correctly, when composing your post and at the very start of your first paragraph, the first letter (or the bold “dropcap”) needs to be surrounded in a span tag . Here is an example of how such a span tag is written:

< span class="dropcap">T</span >his is a drop cap span tag

DO NOT leave any blank spaces between the brackets and before the words “span class=dropcap” or after the word “/span” — as I was forced to do in the above example. This was the only method that allowed me to properly display in a browser for you, the required code for a “drop cap” span tag

The above span tag when applied properly should display in your browser as follows.

This is a drop cap span tag

The background color of FFFFFF or “white” was included in the CSS, but in your blog, you might change it to a grey background for example, so you match the color used in the body of your posts.

It is also possible to substitute a “named color” like “white” in the CSS, instead of its HTML equivalent “#ffffff”. [See resources at bottom for the entire list of acceptable "name colors" to be used in website design]

Possible display issues with different browsers for the drop capital tag

The bottom half of the dropcap letter might get chewed off in IE, which means you need to play around with the ratio/sizes of the font-height vs. line-size until they line up. For another website I had to change the “padding-top” to .2em for the drop cap to align with the top line of the paragraph.

The spacing of lines declared for paragraphs in your current stylesheet might also need to be tweaked, but did not present a problem for me. I found the line spacing used in the “dropcap” CSS seemed to over-ride the line spacing stipulated for “body” paragraphs in this blog which is 1.25.

FREE resources for DropCap tutorials and related CSS web optimization tips:

This excellent website at Mandarin Design gives comprehensive but easy to follow tutorials, not only on the subject of dropcaps, but for other interesting web design tricks like changing the opacity of photos to use in your header graphics. Really great, usable stuff that even a beginner can easily learn from and achieve some excellent results:

Go directly to this page on their site for tutorials on CSS design and Dropcaps

They also have a page detailing the entire list of “named colours” for CSS design - which allows you to use colors like silver, gold, darkgoldenrod, etc. when designing web pages, making for easy color swaps without having to go to the trouble of looking up equivalent numbers:

Go here to access the Comprehensive Palette of Colors used in CSS web design for Named-Colours

Just give me a hoy through the contact page at the top of this page, if you get stuck with your first effort at using dropcaps… I’ll try to help.

Get Your Links Clicked On.. With The
World’s Best Affiliate Tracking Software!