The following is an excerpt from an email between myself and a client. The client was experiencing type display issues while testing a site we provided design and front-end development for. The affected fonts were being served by TypeKit. We are huge supporters of TypeKit, but as with any new technologies, there are going to be kinks to work out. I thought this info may be of use to other TypeKit users.

The Symptom

Text on the site is rendering with very jagged edges and incorrect letter spacing. (The technical term for this is ‘aliasing’.) This makes certain text more difficult to read and/or affects alignment. You’ve observed this problem on multiple computers running Windows 7 and using the IE 8 browser.

Continue Reading →

Earlier today, Google unveiled the next evolution of its search engine. Considering that Google searches account for about 85% of the worlds search engine traffic, even small tweaks are headline news.  But Google is calling this latest development “… a quantum leap for search.” So the buzz surrounding this is going to be massive. But some of the doomsday SEO people are getting a little bit nuts.

What is Google Instant?

With the ‘old’ Google, you typed a search query and then clicked the ‘search’ button to begin returning results. Refining your search meant performing a series of individual queries to narrow the results. Google did prompt users with hints, but each query still resulted in its own unique results.

With Instant, Google tries to predict what you are searching for before you even finish typing. The search page is refreshed with dynamic results in real time based on the characters you’ve typed so far. So instead of browsing pages of results, you know in a fraction of a second if your search is on-target. (Google claims to save its users 11 hours every second with the new service.) The effect is almost instant feedback that seemingly reads your mind.

How does it work?

Google has apparently reworked their entire search mechanism to facilitate this feature. A combination of indexed pages and cached searches allows Google to predict what you’re searching for and selectively narrow and prioritize results. Then these results are updated in real time using AJAX.

Continue Reading →

Here’s a little tip that can save you some time and money. I received a request today from a client of ours to add a small PDF icon to a downloadable PDF on their website. “No problem,” I thought at first, but then it occurred to me, “What would happen if there were more than one PDF on the site? Wouldn’t it be weird if this is the only PDF with an icon?”

So after a quick Google search for “Automatic icons with css” I followed the top hit, Automatic Link Icons v2.0, a blog post with a set of step by step directions to do exactly what I was looking for; adding this icon to every PDF file in the site without having to go back through and recode hundreds of links. The most amazing part? This works without changing any HTML code within the site. So I figured I’d give it a shot. All you need to do is add a simple style to your style sheet, upload the icon of your choice and Voila! You’re done!

First I’ll show you the code, then explain how it works.

a[href$='.pdf'] {
display:inline-block;
padding:2px 15px 2px 0px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(images/icons/pdf.gif) center right no-repeat;
}

For anyone familiar with CSS, you’ll notice this looks pretty standard. However the first line, the selector, that’s where the magic happens.

a[href$='.pdf'] {

This is actually a conditional statement that will find all the links in your site ending with a .pdf file extension. That’s the beauty of it. Now that we have only .pdf files selected we have the ability to style those using CSS anyway we see fit. This is allows us to seek out and find every instance of a PDF file within the site like the find and replace function in Microsoft Word. Imagine all the brain cells saved by not spending hours upon hours relabeling every link to a pdf class=”pdf”. This is the perfect retro-fit!

And it is not limited to PDF files either. You can add icons to: mailto’s test@email.com, RSS Feeds, even Zip Files. Your options are only limited to your imagination and your CSS coding techniques!