Three-Column Template Generator!

I have blogged a couple of times recently about ways to create 3-column templates. These posts have provided free templates for you to grab and customize, both for blogs and for regular web sites.

If you don't care for my designs, or if customizing them is beyond your comfort zone, you might want to try Firda Beka's Firdamatic tableless layout generator. This easy-to-use tool gives you a choice of two or three columns along with several customization options.

Best of all, you can use the code generated by Firdamatic for a regular web site, or click through to XML versions of the code for blogs. She has one for Blogger / Blogspot users and another for Moveable Type. A great resource. Thanks Firda.

(FYI: If you don't see two side-by-side columns on Firda's site, resize your window: she's got a vanishing float thing happening at certain window sizes.)

Navigating the SEO Maze

Through a combination of my own neglect and Google's recent Jagger algorithm update, WebLens had pretty much disappeared off the map by last December. Since then, I have been working intensively to resurrect the site and restore its lost Google ranking. During this time, I have plunged deep into the world of search engine optimization. I don't profess to have all the answers, but I have discovered a few things that are worth sharing here.

Search Engines Hate Javascript

The need to revitalize WebLens prompted a major site overhaul for improved search engine friendliness (and, not unhappily, a better user experience as well). First up, a painful review of the site's flaws, from a search engine's perspective. Topping the list was way too much Javascript which, I learned, creates obstacles for spiders keen to access and index content.

Suitably diagnosed, WebLens began a series of facelifts, starting with elimination of most of the site's Javascript. Cumbersome scripted stylesheet-swapping was eliminated and the unwieldy Javascript menus were replaced by a CSS design that validates. Search engines don't like Javascript. Eliminating it at WebLens has led to cleaner, stripped down pages that are like candy for spiders and crawlers.

Ad Placement and Format Matters

Happy with the improved functionality of the site, I turned my attention to WebLens' AdSense ads. These are the reason I keep the site, which otherwise produces no revenue. The ads produce paltry payouts and, ironically, I had never bothered to experiment with the formatting or positioning of them within the page. Now I turned my attention seriously to this subject.

Ad Colours

There are all kinds of "experts" out there who claim to know the secret to AdSense success, for $29.95 plus postage. I think it's a matter of trial and error. Find a balance between ads that leap out at the user and those that recede to the point of obscurity. Most "experts" advise formatting ads to blend into site foreground and background colours.

I chose to tone down my ads to match the colour palette of the rest of the site. They are still boxed, but not quite so in your face.

Ad Position

Google maintains a heat zone map that indicates which ad positions on a web page generate best user response. According to this, your ad should be smack dab in the middle of the page. This layout impedes CSS dropdown menus in some browsers (notably Opera, IE 5.00 for PC, and IE/Mac 5.2.3), so I placed my second ad unit vertically down the right edge of the screen.

AdSense lets you create channels to track ad performance, so I created a separate channel for each set of ads. It only took days to confirm that people click the vertical ad units almost 150% more than the horizontal ad units at the top right of each page. Already my ad revenue is heading toward tripling, and we're approaching WebLens' slowest time of year, traffic-wise.

It's All About Keywords

The final chore is the most tedious, and I can find endless excuses to procrastinate. After revising site look and feel, I was faced with re-writing the content of every page on WebLens to make better strategic use of keywords.

Let's be clear: we're not talking about the Pulitzer Prize. This is writing for search engines. It involves loading your text with relevant keywords while simultaneously avoiding keyword stuffing, which can get you penalized. It isn't my idea of fun, but it's probably the most important piece of the puzzle. Here's what I've learned:

• Google wants content — lots of it. You can't just present pages as excuses to serve AdSense ads. There needs to be significant content to provide context for those ads. (On the theory that quality content is desirable, not just for search engines, but for humans, I am currently seeding the WebLens pages with brief tips relevant to each page's content.)
• Keywords should be plentiful, but not too plentiful. Aim for a keyword density of no more than 5% per page. Anything over this could be considered spamming the search engines.
• Keywords should be placed as near the top of the document as possible. Put them at or near the beginning of titles, headings, in paragraph text, and in image alt text.
• Keywords used in domain names or other parts of a document URL are given high priority by Google. Use keywords as document names, if possible, but be wary of renaming existing documents that may already be heavily linked to. Check first before you rename.
• Keywords should be unique to each page. Do not use one set of keywords across the entire site. Brainstorm keywords appropriate to page topic, and use them liberally. Online keyword research tools such as SEOBook can help you identify the highest volume and best paying keyword combinations. This is the biggest change I've made at WebLens, and it has paid off royally!
• Word order is important. Give careful thought to how your users are most likely to search and the order in which they type keywords. Vancouver car rentals produces different results than rental cars in Vancouver. Test various combinations in Google before you build your keyword list. (This is where it's helpful to check which combinations are highest paying.)
• Section targets can help Google (and possibly other search engines) circumvent problematic third-party code and to flag keyword-rich passages. Though it was time-consuming, integrating these into my pages has been one of the most helpful changes I have made.
• Strategic links among the documents on your site enhance the user experience by linking to related topics. And, if you're concerned about AdSense revenue, they keep users involved longer and increase the likelihood of click-throughs.
• Meta tags are not as important as they once were (Google ignores them entirely). Nevertheless, don't eliminate them. Some search engines may still acknowledge them. Place document-specific keywords in your document title, meta description, and meta keywords tag.
• [Update] And finally, as one reader has reminded me, the best optimized site in the world won't be found if no-one links to it. Link popularity is a primary factor in contemporary search engine ranking. Watch for more on this topic in the near future.

Length Guidelines

Though the "experts" vary somewhat, here are approximate guidelines re recommended maximum lengths of various HTML document elements.

• Title: 70 to 100 characters max. Bear in mind that Google truncates at 66 characters.
• Description: 200 to 250 characters max.
• Meta-Keywords: 100 words or 1,000 characters max.

One final note: regular updates are important. I paid a steep price for allowing WebLens to languish. With stale content, Google simply stopped coming to supper, some time around July 2005. Getting it back at the table has been a mighty big feat.

Fractal Art: Forging Order From Chaos

I have to confess to a new and compelling addiction — one that's had a major hit on my productivity. In fact, I spent the entire day last Friday at the computer, indulging this new passion. Skipped lunch. Forgot about dinner. Finally, only the cat's plaintive pleas for her overdue supper pulled me away at 8:00 p.m. It's been the same every day since.

I'm talking about fractal images. Making them, I mean, as opposed to viewing those created by others (which I had long considered the realm of true geeks). Fractal art is — literally — the visual interpretation of mathematical formulas that explore chaos and infinity. I have long been aware of this gorgeous art form, but I had never tried it myself until the last few days. And I am totally, utterly, irredeemably, hooked.

The image you see here is an example of the beauty that lies hidden within mathematics. I created it using a program called Ultra Fractal.

Since starting to post my own photos to Flickr about two months ago, I have begun exploring other people's work, and the tools they use to create digital art. There's much more on Flickr than just photos. There's a strong digital art community, and a huge contingent of Fractal enthusiasts. Checking out these people's work led me to several Fractal generators. I tried about four, and found Ultra Fractal the easiest to use.

Even so, it's not for the faint of heart. It's easy to manipulate the sample fractals provided with the program, but far more challenging to create your own from scratch. You can pick from a long list, including Julia and the well-known Mandelbrot set; zoom in infinitely; and play with parameters controlling the inside and outside shapes and colours. Adjusting parameters involves changing values in a whole bunch of controls and — being a math dimwit — I have no idea what they do. I couldn't tell your arctan from your cuberoot. But you don't really have to know what these things mean. Just play with the options until you achieve the result you want.

The program offers PhotoShop-like layer effects and even the ability to create masks, though masking is far more difficult than in PhotoShop. In the latter program, you just paint with black or white to mask areas of an image. Ultra Fractal involves moving gradient sliders around in a fashion that's anything but intuitive. On the plus side, however, the program comes with excellent tutorials.

It costs $59 US, and it's worth every penny. Download at your own risk, though. This is the ultimate addictive pastime.

For more examples, see my quickly growing Fractal set at Flickr. Click on any thumbnail for a larger view. Enjoy :-)

Multiply CSS — Huh?

Over the last few weeks, I have puzzled at the frequent occurrence of the term multiply CSS in my stats. What!? Is there something I should know about the arithmetic capabilities of stylesheets?

Search engines don't understand context. Google has been making a literal keyword match on the query words multiply CSS, directing people to my post, CSS Showcase Sites Multiply Like Bunnies. I'm always happy to have the traffic, but I suspect this is not what people had in mind.

A quick Google query solved the mystery. Multiply.com is a photo and video blogging site, along the lines of MySpace, but focused on more intimate networks of friends and family. From the volume of queries in my stats, it's safe to assume that users of the service share the desire of Blogger users to be able to modify the default template.

So, for all you Multiply users drawn to this post through Google, the information you need can be found at Multiply's About Custom CSS page. Hope this helps, and please drop back again.

Need Inspiration? Check These Journalist and Author Blogs

To prepare for a recent talk for my local PWAC chapter on why writers should care about blogging, I dug around to see how other writers, journalists, and authors approach blogging. I found that some authors use their blogs to aggressively promote books sales or to publicize their freelance writing services and other activities. Others use their corner of the Internet to create dialogue, promote columns and articles, and build relationships with readers. Here are a few examples, along with sources of more blogs by authors and writers (as opposed to blogs about writing).

• Greg Bear
  Hugo and Nebula award winner science fiction author Greg Bear seems to enjoy using his blog to converse with his readers.


• Daisy Dexter Dobbs
  Romance author Daisy Dexter Dobbs is a prolific blogger who enjoys interacting with readers. Her blog is also a good source of other writer blogs.


• Lynn Viehl
  Viehl uses her blog to sell current books and to promote upcoming titles. Great source of links, though Viehl could tell us more about herself.


• Seth Godin
  Well-known tech pundit Seth Godin uses his blog to promote sales of his various books. He has a blog, All Marketers Are Liars, devoted exclusively to his upcoming book by the same name.


• Tess Gerritsen
  Medial thriller writer Tess Gerritsen uses her blog for self branding purposes. In one post, she admits she still struggles to overcome the label "romance writer" and laments the pigeonholing created by labels in general.


• Crawford Killian
  There is perhaps no more prolific blogger than author and web writing guru Crawford Killian. He maintains no less than ten blogs, all of which are accessible from the one linked here. He uses his blogs to promote his books and provides an excellent collection of writing-related links. His blog, Ask the English Teacher, is a good source of links and information on grammar and web writing.


• Terry Glavin
  Author and journalist Terry Glavin uses his blog to promote his books, columns, and essays.


• Colby Cosh
  Canadian sports columnist Colby Cosh claims his blog has been visited more than one million times since its advent in 2002. It features odd headlines from around the world and an interesting blogroll highlighting Canadian journalists and bloggers.

More Blogs By Writers, Authors, & Journalists

• The Author's Dilemma: To Blog or Not To Blog
• Authors' Blogs (massive alphabetical list)
• Cyber-Journalist Blog List (scroll down for independent journalist blogs)
• The Writer's Life List of Writers' Blogs

PWACers who want to get started blogging will find links to everything you need in this blog or on WebLens' blogging tools page. Just explore the categories at left above, or type the term you want to know about (RSS or social bookmarking, for example) into the search field above to pull up posts on that topic. If you'd like a presentation on blogging for your PWAC chapter or writers' group, please contact me through the comments feature on this post.

Happy Accident

Silly thought. The blog graph illustration from my previous post (which you can see full size at my Flickr page) looks oddly like a bird — right down to the beak, feet, and pouffy tail. It's even got a little tuft of head feathers, like a quail.

Reminds me of one of those plastic bobbing and drinking birds from my childhood, like the one you see here. Ah for simpler times.

Have a great weekend.

Graph Your Site Code!

ProBlogger's Darren Rowse has a post this week about an entertaining little Java applet that graphs the HTML entities that comprise your web site. Websites as Graphs generates a swarm of colourful — and strangely mesmerizing — dots that coalesce into interesting patterns representing your site's structure.

Rowse used it to illustrate his post with several graphs that plot competing sites, including Google versus Yahoo and Engadget versus Gizmodo.

Already, a community is growing around this tool. Check out the graphs that people have posted at Flickr.

I was curious to see how it would treat WebLens. You see the result here. Give it a try for yourself. Just type any URL (web address) into the screen form and watch the fun begin. (Tip: scroll down the results screen for an explanation of the colors used.)

This Glossary's a True Knowledgebase

Ever need a quick tech definition? Motive Corp has put together a pretty impressive Web Design Glossary. The definitions they have amassed aren't extensive in quantity, but they certainly are in the depth of information provided for each term.

In fact, this handy resource borders more on knowledgebase than mere glossary, providing concise mini-tutorials and links to further reading on various web-related topics. It's not as comprehensive as a Wikipedia entry, but provides quick introductions to various Internet concepts for those in a hurry. Definitely worth a look.

For more Internet glossaries, scroll or jump to the bottom of WebLens Reference Tools page.

CSS Menus: Create Dropdowns That Work in IE

Update: For horizontal Suckerfish, see this post.

WebLens has undergone yet another facelift. Having never been happy with the previous horizontal menu bar — accomplished with a kludgy Javascript that worked unpredictably — I set out a week ago to replace it with a CSS menu that uses semantically correct HTML. The process is worth sharing here.

The Challenge

When it comes to CSS drop-down and pop-out menus, there's good news and bad news. The good news is that it's absurdly easy to create elegant CSS-based drop-down menus that are standards compliant and cross-browser compatible. The resulting pages are cleaner and more compact. They load faster, are more search engine friendly, and pass W3C validation. The bad news, as usual, lies with Internet Explorer's refusal to play by the rules.

CSS drop-down and pop-out menus are built with nested unordered lists. The drop-down effect is enabled by the ability of standards-compliant browsers to apply the :hover pseudo-class to any element in an HTML document, including list items. Unfortunately, Internet Explorer — which still has a market share of over 90% — does not support :hover on anything but the <A> element. Achieving the drop-down or pop-out effect in IE requires extra measures to make the browser mimic the :hover behaviour.

Three Possible Solutions

I bookmarked dozens of sites in attempting to find a true cross-browser solution for CSS menus — one that works not only in standards-compliant browsers like Firefox, but also in IE, which still sets the standard, whether we like it or not. The techniques I found cluster, essentially, into variations on three fundamental approaches:

Suckerfish: CSS with Javascript Help for IE

One of the first solutions proposed was Patrick Griffiths and Dan Webb's Suckerfish Dropdowns. Elegant in its simplicity, Suckerfish involves using CSS to style a set of nested lists, with a short snippet of Javascript to attach mouseover and mouseout events for IE. Griffiths and Webb's original AListApart article describes the process in clear, straight-forward language and provides code samples you can clone and make your own. Numerous variations of Suckerfish have been proposed, and discussions of solutions to challenges encountered with this approach are ongoing. This is the method I ultimately chose for WebLens.

WhateverHover: CSS with DHTML Behaviors for IE

A similar but — to my mind — more technical approach involves using dynamic HTML behaviors to make Internet Explorer behave itself. This method uses CSS to style drop-down menus for browsers that understand the :hover pseudo-class, with Microsoft conditional comments containing a call to an external HTC file for IE. The technique is explained well by Claire Campbell and Peter Nederlof. Mark Wilton-Jones provides a version for vertical pop-outs.

Stu Nicholls' CSS/HTML Hybrid Solution

Finally, one of my favourite CSS sites provides a novel third approach. Stu Nicholls' CSS Play contains dozens of examples of innovative CSS implementations, including a huge collection of menus. One of these, the Ultimate CSS Only Dropdown Menu, uses CSS together with IE conditional comments and simple HTML tables to style dropdowns that work in both IE and compliant browsers. Nicholls' solution uses just CSS/HTML; no Javascript or IE behaviours.

Note: Nicholls' solution validates, as do the other approaches discussed here, if implemented correctly. WebLens passed the CSS validation easily after including the Suckerfish menu. The new CSS WebLens menu also passes HTML validation, but many of the pages fail because of the embedded ad code, which is not standards compliant.