Cuil (pronounced “Cool”) just launched today with a lot of rave reviews. The new search engine was started by some ex-Google folk trying to take on the internet search giant. They have a long road ahead of them.

At first, I was very impressed with Cuil. I really loved the layout, and the color. The contrast and grid design really aided the search process and made scanning for information easy.

Then I decided to search for stuff I knew about: Me. I looked up my name, which is not a common name in the least. Google returns lots of relevant results, with my own website listed first, including a Wired letter to the editor from some years ago.

Cuil? Meh. My website was listed second, and on the very first page there were 4 results that had no mention of my name, or anything similar to it! They even had a page which was on my old site - it’s been offline for months now! Also, the image in my website’s listing was completely unrelated to me or my website. I have no clue where they got it from! Very bizarre. Lucky it wasn’t something offensive!! I do wonder how they decide which image was to be the lucky image.

News? Calculator? Local results? Conversions? Definitions? These are a few of the amazing features of Google which make it so useful, and they are not present in Cuil. While I really did dig the layout, they have a long way to go before it will actually work as a proper search engine, let alone replace Google.

I have decided to award 1 free illustration/poster to a lucky individual, business or organization. I will decide September 30 or sooner who the lucky winner will be. I would like to enter it in the Communication Arts illustration contest, and would like to choose a project which I would feel personally connected to and inspired by.

Please contact me via the form on the portfolio page if you would like to be the lucky winner of these free services! To see some of my illustration work, check out my Coroflot page http://coroflot.com/tevih (I am keeping the portfolio on this site strictly Web design).

Good luck!

Catch and Release Artwork has been launched! Jim Tingey creates beautiful watercolor illustrations of your catch, including details of the location and fish stats. Great way to memorialize a catch without doing taxidermy, or uber-expensive sculpture.

For such an industry, with all the fancy gadgets and gear, and high-tech gizmos, the “outdoors enthusiast” field has pretty low-end web sites. Odd.

I did the design of the look-and-feel for this ecommerce website. (liQuidprint project.)

CSS Image Replacement - the purpose: style textual content with a background image, and visually remove the text, so we see the image in stead. The text is still there in the code, readable by search engines, screen readers, or any browser that does not support CSS (text-based, like some handheld ‘puters).

None of the methods out there satisfied me. There was extraneous code being written, whether it be extra span tags, or funny hacks to get it to work in some less-compliant browsers. A major downside to the common Fahrner Image Replacement technique, where you hide the text inside a span tag with display: none; is this is not very helpful: the text is not being read by screen readers! (Search engines - as of the writing of this article - do pick up the span content as long as the css is being written and linked from an external style sheet.)

Stuart Langridge and Seamus Leahy came up with an “almost there” approach. Check out Stuart’s link:
http://www.kryogenix.org/code/browser/lir/. The basic technique is to bump text out of the viewable area of a div with top-padding and by setting the height of the div to “0″. No extra markup, all css, accessible, beautiful. However, in order to get this work with early versions of IE, due to their incorrect box model, is to hack the code.

I try to avoid hacks. And, so, without further ado, I present you with ‘THIRT’! ‘Tevi’s Hackless Image Replacement Technique’!

It’s simple: bump the text out of view with excessive line-height! Keep padding at 0, and set the height of the div as you want it. Line height to 3 or 4 times the actual height, overflow: hidden, and bam! Ok. here it is broken down. Sorry for my excitement.

ul#topnav a#blog {
display: block;
height: 100px;
width: 41px;
background-image: url('/images/nav-blog.png');
line-height: 330px;
overflow: hidden;
}


Going through the code above, line by line:

1. Set your div, or in this case anchor to “display: block” so you can safely set dimensions on it.
2. Declare your height and width. (Out loud is not necessary)
3. Your background image - the image which we will see in place of the text (you may want to do background-position or no-repeat, as well)
4. your very excessive line-height attribute. This is what makes this technique work! Make sure it is very excessive!
5. overflow: hidden; is actually what makes this work. Do this, and your text will be safely out of view!

This may come as a shock to you, unless you read the headline of this article, but your favicon does not need to be in .ico format! I’m not sure why the Internet forums and bloggers out there are trying to perpetuate this rumor, but it’s true! You can save your little 32×32 or 16×61 pixel image as a png (8-bit) and it will work just fine! (This site uses png, not ico for it’s favicon).

What is a favicon? A favicon is the little icon in the address bar next to the url of a website. Some browsers (in their bookmarks menu) and RSS aggregators will also use the favicon to identify a site.

How do I make a favicon? It’s easy! Create an 8-bit png file with dimensions 16×16 or 32×32 pixels in any image editting program! Png is just another file format, like bmp, jpg, or gif.
Upload the file to your server and enter the following code in the <head></head>
portion of your website’s code:


<link rel="shortcut icon" href="/images/favicon.png" />