Fractal Art: the Hidden Beauty in Numbers

My passion for making fractal art has deepened, to the extent that friends and family are beginning to worry about me. Virtually every evening, around 8:00 p.m. — after spending all day on the computer — I fire up a fractal program, and don't seem to be able to extricate myself til midnight, or later. (At least it's weaned me off the TV!)

I started out with Ultra Fractal, which I have blogged about here before. More recently, I began wading into the murky waters of a freeware program called Apophysis. The two programs are very different, as are the images they generate. You can often tell a UF image by the bold colours and almost psychedelic feel of the work. Images generated in Apophysis tend to be softer and more delicate, somehow — generally a little more subtle. The image at the top of this post was done with Ultra Fractal. The one to the left of this paragraph is an Apo fractal. Both programs are capable of creating mind-boggling works of art that explore unseen dimensions and seem to probe infinity itself.

I have recently been experimenting with Ultra Fractal's transformations — special effects you can apply to a fractal. One of these allows you to create a kaleidoscopic effect, as in the example at the right of this paragraph. Other transformations include the mirror ball and shimmering lake effects you see in the first image in this post.

Another recent discovery was a technique for outputting fractals as transparent PNGs. Removing the default black background opens up all kinds of creative possibilities. You can place the fractal on a background image, for example, as David Annal does at his site, ApophyStash. I use this method so I can create multiple versions of a fractal, with different background colours. To do this, just output your Apo fractal as a PNG. Then open it in PhotoShop. Add a new layer and drag it down below the fractal layer. Then choose a colour and fill the new layer with the paint bucket or gradient tool. The fractal will appear to float over the background.

Creating fractal art is definitely a trial and error process, and incredibly time-consuming. I don't want to use the word "addictive," but I'm beginning to feel like I'm in the throes of a very strong compulsion.

Where to Download Software

There are many fractal programs. Here are a few of the most popular:

• Ultra Fractal ($59 and worth every penny)
• Apophysis (freeware)
• Tierazon (freeware)
• Fractal Explorer (freeware)

If you try these out, let me know which you prefer and why. And welcome to the abyss!

Photo Duck Funnies Right On

Saw a link yesterday in the Shutterstock discussion forums to a clever online comic strip about the trials and tribulations of daring to earn a living as a photographer. What the Duck is shutterbug Aaron Johnson's wry take on all things photographic. Johnson lets his readers name each strip through his blog's comments feature, and just reading the comments on some of the strips can be pretty entertaining. Check it out. Some of the strips are hilarious.

Transparent PNG Generator

A while back, I blogged about CSS transparency techniques, describing two methods for incorporating transparent elements into your design. You can also introduce transparency by using PNG format images. Unlike GIF images, which are either "on" or "off" in terms of opacity, PNG images support full alpha transparency. This means each pixel can display a subtle range of tones from 0 to 255.

There are many ways to create transparent PNG images. If all you need is a plain transparent block to use as a background, check out Stian Grytøyr's handy transparent PNG generator. This useful tool allows you to select a colour by clicking on a color wheel. The tool creates a set of samples ranging from 0% to 100% transparency, in three versions of the selected colour (web-safe, "web-smart," and unsafe).

Lighten or darken the sample by clicking on the saturation/lightness patch to the right of the colour wheel. When you have the desired shade, click through on one of the percentage samples to see it used with some demo text against a busy background. From here, you can adjust the image dimensions, transparency, and colour. Right-click on the final rendered sample to save the image to your hard drive.

Note: The PNG graphical format enjoys strong support among compliant browsers such as Firefox, Opera, Safari and IE version 7. If, however, you view Grytøyr's page in IE 6 or lower, you will not see the transparency effect, as earlier versions of IE do not support full alpha transparency. For details, and a workaround, see A List Apart's article, Cross-Browser Variable Opacity with PNG: A Real Solution.

Output Your Designs on Merchandise

I mentioned a while ago that I was trying out some microstock photography sites as a sales venue for my fractal art images. I have been looking for novel ways to give these images as gifts, especially with the holiday season coming up. My Canon i9900 colour inkjet printer does a surprisingly good job of printing my fractals for use as greeting cards or as framed prints, but I've been looking for something a little more out of the ordinary. A couple weeks ago, I found the solution.

CafePress.com allows you to upload your own designs for output on a wide variety of merchandise. From sheatshirts, caps, and t-shirts to mugs, mousepads, buttons, and more, there is no upfront cost to customize an item whether for your own use, as a gift, or to sell. This solution is ideal for artists, designers, or photographers who want to showcase their work or supplement their income. And it's a useful low-cost alternative for small organizations that don't have huge budgets for logowear.

The site allows you to set up a free online store and set your own pricing over a baseline figure that they establish. They print your designs on demand and handle order fulfillment, payment processing, shipping, and customer service. The free shop service does place limitations on the number of products you can customize (basically one of each item), but for only $6.95 per month (less for longer terms), you can upgrade to their premium shop option, which imposes no such limitations. I'm trying out the premium shop service for three months, with a store that I have called Fractalicious. If you like any of my designs, I'd be grateful for your support.

Even if you don't have a creative bone in your body, you may still want to check out some of the other shops at CafePress. From politics to the environment, from pets to popular culture, you're likely to find something among their extenstive inventory for even the most hard to please person on your list.

Disabling the Blogger Navbar

Here's a great tip from reader Matt Mc. Matt commented in response to a post about customizing your Blogger template that he finds Blogger's default navbar annoying. Blogger doesn't let you disable this feature but Matt shared a short snipped of CSS that you can add to your template to suppress it.

I tested it out and it works great, though I have re-enabled it on this blog, as I don't mind the navbar and its search feature could be useful to you. (For readers new to blogging, the navbar is the black horizontal bar at the top of this blog, just above the header graphic. It offers some useful functionality and is intended, in theory at least, to deliver traffic to your blog from other Blogspot blogs.)

Turning Off the Navbar

Here's how to disable the Blogger navbar:

1. Open your template and locate the style section at the top, just under the <$BlogMetaData$> tag.
2. Find a space between two other styles, and type the following code:
   #b-navbar {
   height:0px;
   visibility:hidden;
   display:none
   }
3. Save your changes and view your blog. The navbar should be gone.

Once again, the elegant simplicity of CSS saves the day. Technically, this combination of style declarations doesn't really turn off the navbar; it just hides it from view.

Note: there is some question as to whether disabling the navbar violates Blogger's terms of service, though I could find nothing specific on their site relating to this.

Taking Your Password to the Grave

My daughter works in IT security, and every now and then she forwards me an interesting link on some security-related topic. Most go right over my head — they abound in techspeak or are outside my realm of interest or expertise. A recent article she sent me, though, certainly got my attention. In Taking Passwords to the Grave, News.com's staff writer Elinor Mills probes the implications of failing to ensure that your loved ones have access to online passwords and other important digital identifying information.

When people fail to leave such information behind, family members are increasingly unable to access important data and, in some cases, to attend to estate business. Even notifying a loved one's email contacts can become problematic, since e-mail providers and other companies may be reluctant to give out such information, for privacy reasons. Mills recommends avoiding this problem by ensuring that passwords to e-mail, photo sharing, music sites and other online accounts are recorded safely somewhere, preferably in an estate planning document.

She cites the case of William Talcott, a prominent Irish/American poet, whose estate was paralyzed after he died because his daughter could not access his email account or online address book.

I had certainly never thought about this! Like many people, I derive income from the Web and do my banking and investing online. I have numerous passwords stored in my head (scary thought!), along with multiple email logins. Ditto with access to all the various sites where I shop, download software, upload images for sale, register web domains, post blog entries, and on and on. There are dozens of them, and I have not recorded this information anywhere. If I passed away tomorrow, my daughter would have her hands full sorting out my online life. She'd have to close accounts, cancel domains, cash in accrued revenue, pay outstanding fees, and on and on. Then there are decisions about intellectual property, such as all the photos and fractals I have uploaded to Flickr and elsewhere. Just thinking about it makes me tired.

This sobering article is worth a look, calling attention to a little loose end that many of us hadn't thought about.

Searching When You Don't Know What You're Looking For

Searching the Net is not unlike detective work. More often than not, I find myself following a convoluted trail of clues, with success often requiring not so much ingenuity as sheer dogged determination.

A few days ago, for example, I needed to reference a style of art for something I was working on. I could envision several images that I thought typified it. Art from the Soviet era. Larger than life portraits glorifying salt-of-the-earth peasants and stoic workers toiling toward a common good. Scenes from a silent movie: a huge factory wall, cogs and gears conveying the mechanistic, soulless nature of industrialization. But do you think I could remember the name of this evocative art style, or the famous movie in question?

Where to start? I headed for Wikipedia, and typed in art style glorifying russian revolution, and got zero results. Way too specific for Wikipedia (which is an encyclopedia). I headed to Google, and retried the search, changing my query to art style glorifying workers OR labour OR toil. Bingo! That was easy. The very first link was to a Wikipedia article about Socialist Realism. The article was comprehensive, with lots of images, including some great examples of this heavily stylized communist art form. I was part-way home, but still had found nothing about movies.

Back to Google. This time, I tried cinema workers OR toil OR factories OR industrialization. Nothing promising. Changed it to movies workers OR toil OR factories OR industrialization. Jackpot. The fourth hit down referenced Fritz Lang's famous silent movie, Metropolis (1927) the name that had eluded me.

Wikipedia again. This time, I typed in Metropolis. Nope. That's just about big cities. Then, I noticed a link labelled for other uses, see Metropolis (disambiguation). I clicked through to a list of other Wikipedia entries for this word. Part way down the page was a link to a detailed page of information about the film. Getting warmer. I had my movie, but was it socialist realism?

Turns out I had it totally wrong. On reviewing the Metropolis wiki entry, I learned that the film's focus on massive architecture, mood, and symbolism was a nod to German Expressionism. The Soviet-era Socialist Realism style of art and the brooding futuristic cinematic treatment in Metropolis are poles apart. And, once again, the Web set me straight.

Google Strategies for Finding the Unknown

The Google queries shown above worked because of the boolean OR operator. This operator allows you to instruct Google (or any search engine that supports boolean language) to return documents that match any one or more of the words typed. Without it, Google defaults to a logical "AND" condition, returning pages that contain all the words typed (likely too narrow a result in this case). Here's more on how to use this operator, along with some other strategies to try the next time you find yourself wondering what to search on.

• Use Google, as I did here, for highly specific searches or for queries that contain lots of words. Start by brainstorming a list of words that describe the topic you are researching. Use boolean ORs to string together your list of words. ORs widen the search results and can be useful when you're not sure what you're looking for. Just type all the relevant words you can think of, separated by ORs. Be sure to type the word OR in upper case, with a space on either side.
• Once you've identified your research concept (as in my socialist realism example), give Wikipedia a try rather than wading through Google results looking for definitive information sources. (Keep an eye out for Wikipedia entries in Google's results lists. They often appear at or near the top.)
• In Google, save time with multiple sets of ORs in one query, such as cinema OR movies OR film workers OR toil OR factories OR industrialization. Think carefully about where you place the ORs. If there is no OR between two words, assume there is an implicit "AND," as between the words "film" and "workers" above. (Google does not recognize the AND operator because, in effect, there's already an AND there.)
• As you start to refine your search, combine words and phrases as needed. The query "german expressionism" cinema OR movies OR film workers OR toil OR factories OR industrialization, for example, produces a highly targeted results set. Use double quotation marks to signify a phrase.
• Don't hesitate to link multiple phrases with ORs, as in "socialist realism" OR "german expressionism" cinema OR movies OR film workers OR toil OR factories OR industrialization.
• Bear in mind that Google has a 32 word limit.
• Use parentheses, if you like, to group terms, as in ("socialist realism" OR "german expressionism") (cinema OR movies OR film) (workers OR toil OR factories OR industrialization). Google ignores them, but it can make it easier for you to understand.
• Try Google's whole word wildcard. Another useful strategy when you don't know exactly what you're looking for, this special character — discussed here earlier — lets you try a "fill in the blank" approach.

That's it for now. Hope you found these musings useful. As for me, I'm heading over to eBay to pick up a copy of Metropolis.

Blogger Categories Redux

Stumbled across yet another way to compensate for Blogger's annoying lack of categories functionality. This topic has been well covered here in the past, but in the interests of thoroughness, check out David Nicholson's Blogger categories hack. Me, I'm happy with my Labelr solution.

Major Victory for Canadian Freelance Writers

Yesterday was a pretty exciting day for freelance writers in Canada. The long-awaited Supreme Court decision in the landmark Heather Robertson vs. Thomson Corp. dispute finally came down — in writers' favour. It's been a long time coming. Canadian freelancers have been waiting ten years since Robertson first launched her $100 million class action lawsuit on behalf of an estimated 10,000 Canadian freelance writers against Thomson newspapers for copyright infringement.

Financed out of her own pocket, and helped by donations from writers, Robertson took Thomson to task over the unauthorized duplication of two articles she wrote for the Globe & Mail. These were reproduced in various online databases and CD-ROMs, along with the work of thousands of other writers (including yours truly), without her knowledge or consent.

The issue of electronic rights has been a contentious one that has profoundly impacted the livelihood of freelance writers. The heart of the conflict has been whether freelance material is covered by Canadian copyright as individual works, and thus owned by the writer or — as publishers claim — as part of a collective work owned by the publication.

Canadian writers have watched developments in the US (such as Tasini vs. the New York Times) with interest, waiting on tenterhooks as this case worked its way through seemingly infinite appeals. Debate in all of these battles has tended to center on whether online databases merely constitute a form of archiving, as publishers argue, or whether they represent a new distribution medium. These articles are re-sold on a subscription or pay-per-download basis, and creators argue that they should have the right to share in profits generated from subsequent uses of their work.

Yesterday, the Supreme Court announced its ruling, in a split decision in favour of writers (except on the CD-ROM issue, which they ruled was a different matter). For more information, see the PWAC web site.

Microstocks Shake Up the Stock Photography Market

For some time now, I have been selling photos and artwork online through a new brand of stock photography site that is shaking up this highly traditional marketplace.

At sites like Corbis and Getty — which have long dominated the industry — professional photographers sell their work for payments ranging into the hundreds of dollars per image.
Now, an emerging army of micropayment stock photography sites is creating serious competition for the traditionals. Still a relatively new phenomenon, the microstocks allow people to buy images on a subscription or pay per download basis, for as little as 25¢ each. You make up the difference on volume, at least in theory.

There are dozens of microstocks, with new players emerging every day. I have been experimenting with some of them for several months now. Here's what I've found:

• DreamsTime: Sales are sluggish, though this site pays the best of the few I have played with, at up to $10 per image. Purchase available on a subscription or pay per download basis. Slow approval response time (5-10 days). Moderate rejection rate (18%), for sometimes arbitrary reasons. They have rejected two images that are best sellers on other sites.
• Shutterstock: This site is my favourite, hands-down, even though they only pay 25 cents per download. Due to the volume of downloads, however, I have earned almost ten times the income generated by the other micros I use. For some reason I cannot fathom, my images sell like hotcakes here. SS turns around approvals speedily and, so far, I have enjoyed a 100% acceptance rate! The one time they rejected an image, it was accepted after I fixed the problem and resubmitted. Shutterstock works on a subscription basis only, which may be the key to their success.
• Fotolia: A new player, originating in France, this site caters to Europe and North America. Pricing ranges from $1 to $3. Approvals are fairly quick and rejections minimal (5%) though, like DreamsTime, they sometimes reject images for seemingly arbitrary reasons. Sales through this site, which are on a pay per download basis, have been slow.
• iStockPhoto: The grand-daddy of them all, this site is also the most picky and demanding in my experience. In fact, I gave up shortly after submitting my first batch of images. iStock rejected every single image, either as not suitable for their audience or due to defects that the other micros didn't see. iStock pricing ranges from $1 to $5, on a per download basis.
• 123RoyaltyFree: 100% acceptance rate, but abyssmal response time and only one sale so far. It takes weeks for uploaded images to be reviewed and OK'd at this site. I have stopped uploading, but maybe it will work for you. 123RF is well spoken of in some of the microstock discussion groups. Pricing works on a subscription or pay per download basis, the latter at $1.20 per image.

Though many professional photographers deplore the microstocks, debate in some of the online microstock discussion groups tends to suggest that some pros are experimenting with this new marketplace. More than a few people predict that the new market economics — why pay hundreds of dollars when you can get just as good an image for $1.00? — will spell the end of the traditionals. I wouldn't be surprised to see the big players launch their own microstock brands within the year.

For me personally, the microstocks have not been a fast track to wealth and fame, but they have generated a nice little income supplement. Be warned, though: you need a fairly high volume of images accepted to see any real return. Keywording is tedious, but vitally important. Get a good FTP utility, and save time by storing descriptions and keywords within images (look for tools that support EXIF/IPTC data retrieval); these fields will then populate automatically when you upload.

For a good introduction to microstock photography sites, see Stephen Finn's excellent guide. For more microstock and traditional stock photography resources, see the WebLens image search page.

100 Posts and Counting

With publication of the previous article, Random Bytes reached the 100 post milestone — a feat that seemed inconceivable when I started this blog. It's hard to believe I've had that much to say. When I started blogging, I worried about finding things to write about. Today, the primary challenge lies in managing my favourites, which are bulging with links to sites and topics I hope to cover in this space. That, and finding time to post. Oh well. Onwards and upwards :-)

Blog Stolen Again!

Well, I guess imitiation is supposed to be the sincerest form of flattery. But I must confess that, this time, the main emotion I felt on seeing yet another unauthorized copy of this blog floating around the Internet was extreme irritation. At least, now I knew how to proceed.

A few months back, I posted about the shock of learning someone had cloned my blog, and the subsquent struggle to get the illicit copy taken down. This time around, I knew exactly what to do. The offending copy appeared at http://www.pkblogs.com/weblensblogs and at http://www.inblogs.net/weblensblogs. A quick WHOIS check revealed that these sites are hosted by DreamHost.com.

I fired off an email to DreamHost's abuse reporting address, citing the infraction and the name and contact information of the offender (all of which is usually available through a WHOIS query).

A big thumbs-up to DreamHost! Unlike Blogger, they were fast to respond and very co-operative, advising me that — once again — I needed to file a formal complaint under the Digital Millennium Copyright Act. But before I even got that far, I heard back from DreamHost: they had contacted their customer to warn that a complaint was coming. That was all it took. The offending copies were gone in less than 24 hours.

25 Worst Tech Products of All Time

Just sent to me this morning by my daughter, this link is worth sharing here. InterGovWorld's recent article, The 25 Worst Tech Products of All Time, makes for an interesting read, and will no doubt bring back some cringe-inducing memories for those of you who have been around high-tech for a while. The short-lived IBM PCJr. Iomega zip drives. Real Player. AOL (remember all those "free" CDs?) A wearable DVD player (I kid you not). PointCast's push technology (replaced, interestingly enough, by today's Web 2.0 RSS feed technology). And so much more.

Check it out.

Horizontal Suckerfish and More CSS Menu Resources

I blogged back in June about my efforts to enhance WebLens with CSS-based dropdown menus that were standards compliant and which work across all browsers, including the persnickety Internet Explorer. In a post on creating dropdowns that work in IE, I summarized the three approaches I had found. I chose the very popular Suckerfish solution for WebLens, and it has been a great success.

In building the menu system recently for a site about a popular Canadian television personality, I wanted to modify the Suckerfish code to display the sub-menus horizontally in a row instead of stacked one below another as seen on WebLens. Google queries on this didn't lead to much, except a few help requests posted to webmaster forums, so I puzzled it out myself.

You can see the result of this tweak at the site mentioned above, and the code is available here for your use, should you want to play with it. I'm pretty happy with it; the only failing has been my inability to figure out how to align the sub-menus with the left edge of the top menu containing DIV, instead of the individual list items. No amount of fiddling around with positioning seemed to solve this.

In trying to troubleshoot this challenge, I never did find a fix, but I came across more helpful CSS menu resources, including some great articles:

• aListApart: Hybrid CSS Dropdowns
• aListApart: Sliding Doors of CSS
• Vitaly Friedman's round-up of 37 CSS Navigation Techniques
• Stu Nicholls' Validating Flyout Menu

Had I seen the ListApart Hybrid CSS Dropdowns article earlier, I might have chosen that technique instead of struggling to modify the Suckerfish code myself. Oh well. Live and learn :-)

I can't wrap this up without mention of a couple of CSS and/or DHTML menu generators (free and/or for fee) for those not inclined to hand code. Check these out:

• Colly's CSS Rollover Generator
• Webmaster Toolkit's CSS Menu Generator
• ProjectSeven's Pop Menu Magic
• Brothercake's Ultimate DHTML Dropdown Menu

Hope you find these resources useful. Enjoy!

Making Old Blog Posts Findable

One of the challenges of creating a blog that's useful to readers is the default date order of content. Unlike a traditional web site, which is structured thematically by subject, blog articles are posted in chronological order. Once they pass off the index page, posts are grouped in monthly archives where they are also listed chronologically. This presents a big challenge in getting older posts found, especially in Blogger which (unlike Wordpress and some others) doesn't offer a way to categorize posts.

There are, of course, blog search tools like Technorati and others, but I find that the vast majority of my blog traffic still comes from Google, which you might reasonably expect to ferret out old posts based on the user's keyword choices. Unfortunately, however, Google doesn't seem to crawl blogs as deeply as it does traditional web sites (perhaps because of the date structure combined with the abundance of outgoing links on many blog index pages).

I have found that Google indexes posts in a hit or miss fashion. When users search on a topic that has expired, if Google has not captured that specific post, it is likely to direct people to your index page, where the article lived at the time that Google crawled the page.

Determined and/or lucky users may find the post in Google's cache, on an archive page, or through a link from another post. My stats have shown, however, that the majority of people landed on my index page, gave it a quick scan, and headed promptly for greener pastures, never finding what they were searching for.

Fortunately, there is a simple solution: after publishing each new post, take a second to submit the post's permalink directly to Google's Add URL page. I have been doing this for months now, and have seen a massive change in my stats. Fewer users are landing on the index page; the vast majority of people are going directly to the relevant post. Random Bytes is getting read, and people are finding what they need. (Note: for this to work, you need to ensure that you have enabled individual post pages in your blogging software's dashboard.)

Just in case you're wondering, while Google's Add URL page discourages this practice, nowhere does it state that submitting multiple pages from the same site is a policy violation.

And of course, remember that links from other blogs and web sites are still among the most important ways to get found and indexed by Google.

Hope this helps.

Intensifying Images With Photoshop Vivid Fog Effect

Hi folks. Sorry for the lapse in postings. I actually managed to get a break from the computer to enjoy some sunshine in these waning days of summer. Back full force now, though, with a great tip from James, a friend and fellow Photoshop junkie. Vivid fog is an easy three-step effect (which you can turn into a Photoshop action) that adds drama to ordinary images, and can also be used to create striking silhouettes of foreground objects.

To use this effect:

1. Start with a quality image with good foreground/background delineation and subtle colour. Low light levels and the presence of an obvious foreground object or figure add more drama.
2. Open the image in Photoshop and copy the background to new layer.
3. Bump up the saturation of the new layer (to the maximum for the most drama).
4. Apply a Gaussian blur to the new layer (10 pixels seems to work well, for 300 dpi images).
5. Change the new layer's blend mode to Soft Light.
6. Save your work in the appropriate file format.

Viola! James suggests you make these changes right on the background copy rather than applying adjustment layers. He also uses an "S" curve to heighten contrast, or a Levels adjustment to increase colour, such as the red in a sunset. He suggests making these adjustments before the saturation and blur steps.

You can see before and after examples at the top of this article. As you can see, the colour in the original image was quite subtle before applying the vivid fog effect. At right is a third version, with the foreground masked to reduce the sense of underexposure created by this process.

Hope you find some interesting uses for this. Enjoy!

Blogger Hacks: Uploading Template Backgrounds

In my previous post, I stated that, if you wish to use images in your template's background, you'll need to host them elsewhere since there's no way to upload them directly to Blogger for this purpose. Reader Paul Sutherland quickly set me straight, outlining a clever trick I'd never thought of but which — on reflection — is at obvious as the nose on your face.

As we all know, Blogger allows you to upload images for use in individual posts. Paul's hack takes advantage of this ability. Here's how it's done:

1. Create a new post as usual.
2. Upload an image to your new post (click the Add Image button).
3. While still in post edit mode, switch to HTML view (click the Edit HTML tab).
4. Find the code for your image.
5. Copy the image address (it starts with http://).
6. Return to the main Post screen and discard the temporary post.
7. Open your template and paste the image address into the appropriate spot, as per the instructions in the previous post.
8. Save your template and publish.

Thanks Paul! Great tip.

Template Background Hacks and Generator Tools

Random Bytes has had a facelift. For those who have been here before, the new look may be a bit of a surprise. If you popped by yesterday afternoon, my apologies. This blog's look and feel was evolving minute by minute, as I experimented with colours and backgrounds.

I think I've got something I like now, though, so it shouldn't change too much more. I felt it was time for a fresh look, especially since the old look and feel has been propagated through the blogosphere with the growing popularity of my three-column template.

For the new design, I wanted to focus on simplicity and readability. The first priority was eliminating the background mouse graphic, which had cluttered up the design and drawn some negative feedback for slowing page loads.

Creating Background Colours and Patterns

In choosing a color palette, I opted for a monochrome colour scheme, staying with green to tie into WebLens (albeit subtlly). I wanted the blog contents to display against a background colour or pattern, and found Rails2U's Background Image Maker indispensable. This useful tool allows you to generate any size background rectangles for tiling. You can specify desired color by dragging sliders or entering a hex code. The tool allows you to choose between stripes, dots, and gradients, and supports full PNG transparency.

There are also plenty of free online sources of background rectangles for tiling, such as the collection at GRSites. (If you use these, be careful of placing text directly against a busy background. Place a white or coloured background behind the text first, as I have done here.)

Adding Backgrounds to Your Blog

You can use the images produced by the tools mentioned above as your blog's main background as I have done here, or place them behind various CSS elements, as you seen in the sidebars and post titles of this blog. For this re-design, I finally settled on a striped green background for the main page and a subtle green gradient to use for emphasis and visual interest.

To add a background pattern to your blog

1. Open your template and locate the CSS for the body tag.
2. Between the opening { and closing } parentheses, add a background declaration pointing to where the background image is hosted, as in
   background: url("http://your-domain-and-filename.png") repeat;
   (Note that you will need to host these images elsewhere, as you can't upload them to Blogger.)

The repeat attribute controls tiling, telling Blogger to replicate the graphic both horizontally and vertically, as I have done in the main background here. To repeat only horizontally, as in this blog's post headings, change the repeat attribute to repeat-x. (For vertical repeats, it would be repeat-y.)

To add background tiles to post headings

1. Open your template and locate your blog's CSS post declaration.
2. Add the above code, but with repeat-x. Note: you may need to move the opening post div tag above the date header, to get the background behind everything. Depends on the effect you want.

To add background tiles to sidebar elements

In this blog, I could have placed a background gradient or texture behind the entire sidebar, but I wanted to use them to emphasize certain sidebar contents. To do this:

1. Create a style specifying the desired formatting, such as
   .BlueGradient { background:url("http://your-
   domain-and-filename.png") repeat-x; padding-top:2px;}
2. In the HTML, locate each set of sidebar elements you wish to emphasize, and enclose each within your new div, as in this example:
   
   <div class="BlueGradient ">
   <h2>Archives</h2>
   <ul class="archive-list">
   <BloggerArchives>
   <li>
   <a href="<$BlogArchiveURL$>">
   <$BlogArchiveName$>
   </a></li>
   <BloggerArchives>
   </ul>
   </div>
3. Save your changes and view your blog. You may need to adjust margins or padding to get the effect you desire.

For more on adding backgrounds to your blog, see this earlier post. Hope this information helps, and let me know what you think of the new design.

The Web's Most Useful Site?

I may have just stumbled across the Internet's most useful site — for webmasters at least. The Scrutinizer is a single page from which you can run dozens of different tests on the content of any page in your site. Available tests run the gamut from HTML and CSS validation and link popularity and rank checks to pings and traceroutes, plagiarism checks, site speed tests, and more.

Just enter your URL, select the test(s) you want, and click Go. Great resource.

Tips for Photoshop Memory Management

I feel like I've won the lottery! My laptop computer is the happy recipient of 1.5 GB of additional memory, bringing the total RAM available from 512 MB to 2 GB. I resorted to this move (reluctantly, and at considerable expense) after tiring of sluggish performance, overheating, and frequent crashing when using Photoshop and other memory-intensive applications. The hard drive churned like a demon constantly as Photoshop paged out what it couldn't handle in memory to the swap file. It was even worse with fractals. The screen refresh rate was slow and it took many hours to render complex images to disk because of limited memory.

The additional RAM has turned my humble little laptop into a powerhouse, virtually solving all my Photoshop performance issues overnight. If you are experiencing similar problems and you don't have the luxury of adding 2 GB of RAM, there are some things you can do to boost Photoshop's memory handling. For a good discussion of this topic, see the MacWorld article, Optimizing Photoshop CS2.

The tips provided in this article improved the situation considerably in the lengthy interim before I finally bit the bullet and sprang for more RAM. Among the things I learned was that I had been allocating too much memory to Photoshop. This caused long delays — and even crashing — when saving, as Windows and CS2 duked it out for the tiny amount of available RAM.

Getting Paid to Blog: Don't Quit Your Day Job Yet

It sounds too good to be true. I'm sure there are many bloggers — myself included — who would like to see their costs offset, or their time investment rewarded, but is it really possible to earn significant income through pay for content schemes?

Several companies want you to think so. AdSense-sponsored content has been around for donkey's years, of course, but other revenue models are emerging with the explosion of blogging and other Web 2.0 phenomena.

PayPerPost is the latest player on the market. They act as matchmaker between bloggers and advertisers who are seeking people to write about their products. PayPerPost publishes a list of advertiser opportunities on their site. Bloggers review this list, select a topic, and create a post. Once approved by PayPerPost, the post must remain live for 30 days before the blogger is paid (via PayPal). From a professional writing standpoint, payments are miniscule, ranging from $2.50 to about $20 per article.

Squidoo has quite a different approach. Organized like a directory, the site is a collection of articles on various topics (called "lenses") grouped into categories, rather like About.com. Bloggers are invited to create lenses on topics that interest them, and can link back to their blogs. There is no limit on the number of lenses you can create. You earn "royalties" on the lenses you write, based on a share of Squidoo's AdSense and affiliate advertising revenue. The company claims it distributes 50% of after-expense revenue directly to lensmasters.

Another company that wants to pay you for content is Associated Content. The site operates as a content syndication service for text, audio, video, and images. Unlike Squidoo, which derives revenue from advertising, AC resells content and offers cash up front. Your submission is reviewed by an AC content manager and, if accepted, you'll receive an offer within five business days. Payments range from $3 to $40.

In addition to these, numerous blogging networks claim to pay you to blog, out of income derived from advertising revenues. These include:

• BloggerParty
• WritingItUp
• BlogCharm
• Weblogs

ShigOdani maintains that, for those bloggers who do blog for money, payouts average $5.00 to $50.00 per month. Not exactly enough to retire on. What has your experience been? Does your blog produce income? What revenue programs do you use, and why? Drop a comment on me below.

Church Sites That Inspire

I'm not religious, but I love this web site! Stumbling around the Web late last night, I came across ChurchBeauty, and couldn't pull myself away. No, it's not about church architecture — though that would be interesting too — it's a showcase for quality church web sites, similar to the many CSS design galleries on the Web.

The site author (who, unfortunately, doesn't identify himself) has collected high-quality church sites and organized them into several categories, including clean, simple, colour scheme, photography, CSS, classic, video, and organic (not quite sure what that means). Though he focuses on visual design, he also provides categories for writing and usability. This is the first design gallery I have come across that acknowledges the importance of content.

He invites visitors to recommend sites for inclusion, and you can click through and rate the linked sites. A fun site to poke around, especially if you're seeking inspiration — divine or otherwise.

Preventing Disappearing Columns and Sidebars

Update: for more on troubleshooting Internet Explorer quirks and bugs, see this post.

Over the last few months, many people have downloaded the three-column templates provided here. These templates use a fluid layout, which means that content scales to accommodate the viewer's font size and/or browser window rather than being locked down at a fixed width. The templates were tested in a wide range of browsers before I put them online. Overall, their performance is solid and feedback has been great. A few people, however, have reported strange behavior in older versions of Internet Explorer. In certain situations, the right-hand column or sidebar may mysteriously vanish or jump around unpredictably.

This well known IE problem actually afflicts many three-column designs that use a fluid or liquid layout. It appears when you enlarge screen fonts or reduce browser window dimensions. And, no, Firefox is not immune.

However, IE versions 6 and earlier are responsible for much of this behaviour. It is due to IE's faulty implementation of the CSS box model, which describes the boundaries of HTML/CSS elements. According to the W3C specification, the width and height of a CSS element is based upon the raw dimensions of the element itself, before the addition of margins, padding, and borders. IE, however, uses a different box model, in which padding and borders are included in calculated base width. When fonts are enlarged beyond the width of a container, IE also improperly widens the container. These differences between the two approaches are responsible for many layout inconsistencies among browsers, including the wrapping third column problem seen in liquid layouts.

Fortunately, there are some simple fixes you can try. And, for the really stoic, all kinds of box model hacks that you can use to achieve virtually identical performance from IE and standards-compliant browsers.

Troubleshooting Tips and Fixes

If all you want to do is prevent a third column from wrapping and absolute consistency across browsers isn't huge issue for you, the troubleshooting strategies below may solve the problem:

• Check for images, form input elements, and web site URLs that exceed column widths and may force wrapping
• Reduce the width of form input elements until columns cease wrapping
• Reduce image sizes until layouts behave themself
• Shorten the alt text of web badges — long strings can force wrapping if the badge doesn't display for some reason
• Try reducing the width, margins, borders, or padding of one or more columns
• Reduce the font size slightly.
• Increase the overall width of the container div by a few pixels or percentage points
• Make sure the cumulative width of all columns, plus their margins, borders, and padding does not exceed 100% of the width of their container div
• Remember that borders add width — one pixel can force unwanted wrapping!

Often, a combination of these measures will seem to eliminate the problem. Don't assume, however, because your layout looks fine in Firefox or your version of IE, that no problem exists. Test in as many browsers as you can, especially older versions of IE. Often, the problem appears when window dimensions are reduced, so test at different window sizes. The problem can also occur when screen fonts are enlarged, so test at different font sizes too (click View / Text Size, and select increasingly larger font sizes, or press control while scrolling your mouse wheel). For the ultimate test, view at large font size in an 800 x 600 size window (type javascript:window.resizeTo(800,600) into your browser address field to simulate this width).

Box Model Hacks for Forced Cross-Browser Consistency

If you wish to trick Internet Explorer into acting like a standards-compliant browser and you are comfortable with CSS, consider using IE conditional comments to provide an alternate style for IE or try the box model hacks linked below. There are several versions of the box model hack, all of which involve "tricking" IE into rendering the box to the same dimensions used by compliant browsers. Be warned, however, that most of these are not for the faint of heart:

• Why does the box model need a hack?
• Tantek's original box model hack
• Getting Internet Explorer to play well with CSS

Hope these tips help, and if other strategies have worked for you, please drop a comment below.

Quick Tip: Tracking Down Misplaced Favorites

Ever bookmark an interesting or useful blog post, only to return later via your favourites to find it gone? I don't know about you, but I waste an inordinate amount of time hunting around blogs, trying to figure out what tweaked my interest weeks or months earlier.

When I stumble across a post that interests me, I usually tend to just click the Add to Favourites button without even thinking about it. But blog posts eventually disappear from index pages, to be tucked away in an archive. If you have bookmarked a blog's index page instead of a post's permalink (usually found at the bottom of each post), you could have difficulty finding that post again later.

Not to worry. There's an easy fix. Among the properties stored when you add a site to your favourites list (in Internet Explorer anyway) is the date the favourite was created. You can access this by right-clicking on the favourite, and selecting Properties from the pop-out menu. The date created is on the General tab, as seen in the screenshot here. Use that date as a guide to when the post was created or — if it goes back a ways — which archive to search.

I usually find what I'm looking for within a few days of the date the favourite was created. Unless, of course, I've bookmarked a much older blog post.

How to Create Amazing Circles and Bubbles

For photographers and Photoshop buffs, one of the biggest dangers of Flickr is its addictiveness. Since I first signed up a couple of months ago, I have spent endless hours posting my own images, exploring other people's work, and discovering all kinds of wonderful tools, tips, and tutorials. My latest Photoshop experiments have taken me into the realm of making amazing circles and phubbles.

Making an Amazing Circle

You can see my first attempt at an amazing circle at left above. I first noticed these dazzling spheres posted on various groups in Flickr, and a couple of quick queries led to tutorials on how to make them.

Amazing circles are not hard to make — the main challenge lies in choosing the right image. They are created with Photoshop's Polar Coordinates Distortion filter. BrilliantDays.com has published a short tutorial that walks you through the process.

Making Phubbles

Once you've mastered amazing circles, it's a good bet you'll want to refine the result to produce a transparent bubble effect. Phubbles, or Photoshop soap bubbles, are made from amazing circles that have been successively erased from the center out, to reveal just the right amount of image detail beneath. Flickr member Photopool describes the process in his popular tutorial. I followed his instructions to achieve the result you see at right.

For more examples, see Flickr's Amazing Circles interest group.

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.

Blog Promotion: Do Traffic Exchanges Work?

If you're reading this, chances are you've come from one of two sources: you have found this site through a Google search or, more likely, you're here from one of the traffic exchanges I participate in. Between them, Blogazoo, Blog Explosion, and BlogClicker are responsible for about 30% of the traffic I receive here every day. The rest comes from Google and other search engines and from links from other blogs.

Blog traffic exchange sites work on the principle of "you scratch my back, I'll scratch yours." Once you sign up, you earn credits by surfing other people's blogs, which the traffic exchange site serves up on a scheduled rotation. Your banked credits enable your site to be inserted into the rotation, usually on a 1:1 or 2:1 ratio. Others will view it because they have to (there's usually a mandatory minimum amount of time one must spend at a blog to gain credits). You can also buy credits if time is at a premium, which is what I have chosen to do. Either way, the result is guaranteed traffic.

But is it quality traffic? Debate rages online as to whether these sites are really useful in terms of building a long-term loyal reader base for your blog. I see this myself in my own stats. People deposited here by one of the exchanges spend barely 5 seconds scanning this blog, then they are off to earn the next credit. There's a chance these visitors may find something useful, but it's minimal since they've been directed here entirely at random.

Compare that scenario to someone who has found this page through a search engine query. Their need at that moment is highly specific, and the search engine directs them to a page containing the keywords they queried. It is likely they will find what they're looking for, if not from the information in the post concerned, then by following links to other posts or sites. My stats confirm this behavior. These visitors stay longer, explore the blog more thoroughly, and are more likely to become regulars.

So, are the traffic exchanges a waste of time? I don't think so. I have seen a handful of people originating from these sites stop by to post comments. A few have become regular visitors (maybe that's you?). Any traffic is better than no traffic, and repeat exposure builds familiarity and confidence. In fact, advertising research shows that repeated exposure to ads enhances credibility and aids brand awareness, message recall, brand opinion, and purchase intent. I remember learning, in a marketing course a million years ago, that it takes 5 to 9 ad impressions before the average consumer responds to an advertisement's call to action. Does the same apply to blogs? I think so. Each time you see this blog appear in an exchange rotation, your sense of recognition grows. The posts will vary. Maybe eventually you'll encounter one that's relevant to your interests. Ultimately, it's all about content.

If you wish to try out blog traffic exchanges, there are lots to choose among. Here is a short list to get you started:

• Blog Explosion
• BlogClicker
• Blogazoo
• Blog Soldiers
• BlogAdvance
• BlogMad
• BloggerSwap
• BlogMosh
• BlogXchange
• Virtual Loop

No endorsement implied, other than for the first three listed, all of which have produced good results for me (in terms of raw traffic).

Some of the most common complaints about exchanges include poor rotation, too many low quality blogs, and the risk of viruses or trojans.

If you have had experiences with any of the sites listed here, please drop a comment on me. Rants and raves equally welcome.

Tools for Taming Your Feeds

It seems to me that most of the Web 2.0 apps emerging every week are devoted to some aspect of retrieving and organizing Internet content. Every day, there are new tools for sharing favourites. Likewise, the ability of RSS to push relevant content to our desktops has led to a swarm of online applications for reading, organizing, and managing feeds.

Good thing too, because it doesn't take long to start feeling overwhelmed once you discover this potent automation tool. I'm struggling to keep up with the daily flood of posts provided by just nine feeds — and that's probably a fraction of the volume inundating the seriously feed-addicted. RSS has put us all at risk of information overload.

I have test-driven several of the feed readers linked from the sidebar at left below, but it was not until the recent discovery of two new tools that I began to feel that I might just be getting the chaos under control:

• Pageflakes is a higly customizable web organizer that combines a feed aggregator and reader with several useful desktop tools. You can add as many new feeds as you wish, organizing them on separate tabs for ease of access. Accept the default setup, which includes an address book, to-do list, notepad, weather, local movies, and more, or customize your desktop by choosing from a huge list of applets. You can append everything from mini spreadsheets and calculators to custom searches. I LOVE this application so much it has become my new browser start page.
• Netvibes is a virtually identical tool (I'm not sure which came first). Like Pageflakes, you can add new feeds, organize content and tools onto separate tabs, and customize the interface. It doesn't offer the selection that Pageflakes does, but it has one especially nice feature: you can color-code your different feeds for at-a-glance recognition. E.g. you could have all your web design feeds coded green, your pop culture feeds blue, and your mainstream media news stories orange.

I find both of these applications more intuitive and easier to use than the other feed readers listed here. Now, if I could just marry them, I'd be truly happy. For the time being, I'm using both of them to fend off the information deluge.

Using Photoshop's Wave Distortion Filter to Create Abstract Art

When I review my shots after a photography outing, I inevitably end up using Photoshop to make minor image corrections: using the curves tool to change the light and dark points, blurring backgrounds, sharpening a bit here and there, perhaps adjusting colour balance. But I rarely play around with Photoshop's other filters — partly, I guess, because I'm a bit of a purist, but mostly because time is always at a premium around here. I make an exception, though, for the distortion filters. The wave filter, in particular, can produce dramatic results.

Even mediocre photographs can be transformed into outstanding art pieces after being run through this filter. Any image with prominent horizontal and/or vertical elements and strong saturated colour is a good candidate for this treatment, which provides substantial control over the wave effect. The filter dialog box allows you to set the number of wave generators and specify wavelength, amplitude, and scale. (I'm not sure what scale does, but varying the setting creates interesting effects.)

I have included a couple of before and after examples to show you the results produced by this filter. The bold lines and strong colour of the image at top left made this architectural shot a good wave distortion candidate. The image of a stand of bamboo was uninspiring on its own. Running it through the wave filter transformed it into a colourful swirl of undulating pools and eddies. Two previously photo-realistic images have become delightful works of abstract art, and I am hooked.

I have created a Flickr account so you can see larger versions of both the originals and the distorted results.