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 →

Mobile usage is up - how does your website rate?

A while back (read: months) I happened across a very interesting survey done by Gomez, the web performance division of Compuware which focused on consumers shifting attitudes and usage of the web.

Specifically, the article I found talked about the general user’s increasing impatience with websites that are slow to load, bog down or are difficult to use. While this has been anecdotally discussed amongst folks in the web industry for years, it’s nice to finally have numbers that back up this feeling.

However, users’ ire with slow or difficult sites isn’t the part of the survey that I want to hold up for examination in this post. The second half of the Gomez survey has dedicated to the growing mobile market and users’ evolving attitudes to web access on mobile devices.

Continue Reading →

They say that pictures are worth a thousand words, and that’s just one of the reasons why I love infographics so much. They can take the most complex concepts and make them accessible and humorous in a way that a well thought out 10-page paper could only dream of.  Take, for example, the image below:

I know that the best browser debate has been raging for years, and I’m definitely not about to delve into the nuts and bolts of that argument since I barely understand some points myself. But what I so loved about this infographic is that it’s a straight forward, visual representation of why everyone should be using the newest version of whatever their preferred browser may be. *coughfirefoxcough* But really, use anything you like, so long as it’s not IE6.

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!