Tags: icons

3

sparkline

Icon fonts, unicode ranges, and IE8’s compatibility mode

While doing some browser testing this week, Mark come across a particularly wicked front-end problem. Something was triggering compatibility mode in Internet Explorer 8 and he couldn’t figure out what it was.

Compatibility mode was something introduced in IE8 to try not to “break the web”, as Microsoft kept putting it. Effectively it makes IE8 behave like IE7. Why would you ever want to do that? Well, if you make websites exactly the wrong way and code for a specific browser (like, say, IE7), then better, improved browsers are something to be feared and battled against. For the rest of us, better, improved browsers are something to be welcomed.

Shockingly, Microsoft originally planned to have compatibility mode enabled by default in Internet Explorer 8. It was bad enough that they were going to ship a browser with a built-in thermal exhaust port, they also contemplated bundling a proton torpedo with it too. Needless to say, right-minded people were upset at that possibility. I wrote about my concerns back in 2008.

Microsoft changed their mind about the default behaviour, but they still shipped IE8 with the compatibility mode “feature”, which Mark was very much experiencing as a bug. Something in the CSS was triggering compatibility mode, but frustratingly, there was no easy way of figuring out what was doing it. So he began removing chunks of CSS, reducing until he could focus in on the exact piece of CSS that was triggering IE8’s errant behaviour.

Finally, he found it. He was using an icon font. Now, that in itself isn’t enough to give IE8 its conniptions—an icon font is just a web font like any other. The only difference is that this font was using the private use area of the unicode range. That’s the default setting if you’re creating an icon font using the excellent icomoon service. There’s a good reason for that:

Using Latin letters is not recommended for icon fonts. Using the Private Use Area of Unicode is the best option for icon fonts. By using PUA characters, your icon font will be compatible with screen readers. But if you use Latin characters, the screen reader might read single, meaningless letters, which would be confusing.

Well, it turns out that using assigning glyphs to this private use area was causing IE8 to flip into compatibility mode. Once Mark assigned the glyphs to different characters, IE8 started behaving itself.

Now, we haven’t tested to see if this is triggered by all of the 6400 available slots in the UTF-8 private use range. If someone wants to run that test (presumably using some kind of automation), ’twould be much appreciated.

Meantime, just be careful if you’re using the private use area for your icon fonts—you may just inadvertently wake the slumbering beast of compatibility mode.

Iconic imagery

There’s been some fantastic collaborative work done recently on the tricky issue of responsive images. Witness the community group and its attendant website, complete with logo.

Meanwhile, there’s been some great research into dealing with high-DPI displays (which the world and its dog have decided to label “retina”). There’s the in-depth analysis by Daan Jobsis which looks at what you can get away with when it comes to compression and quality for “retina” displays: quite a lot, as it turns out.

In fact, you may well be able to double the dimensions of an image while simultaneously bringing down its quality and end up with an image that is smaller in file size than the original, while still looking great on high-DP..“retina” displays. The guys over at Filament group have labelled this Compressive Images. Nice.

I like that approach. No JavaScript polyfills. No lobbying of standards bodies.

I’m generally fan of solutions that look for ways of avoiding the problem in the first place. Hence my approach to image optimisation for all devices, widescreen or narrow.

Of course this whole issue of responsive (or compressive) images should really only apply to photographic imagery. If you’re dealing with “text as images” …don’t. Use web fonts. If you’re dealing with logos or icons, there are other options, like SVG.

Then there’s the combination of web fonts and iconography. Why not use a small web font containing just the icons you need?

I tried this recently, diligently following Josh’s excellent blog post detailing how to get icon shapes out of Fireworks, into a font editor, and then into an actual font. It works a treat, although I concur with Josh’s suggestion that the technique should really only be implemented using the ::before and ::after pseudo-elements in combination with base-64 encoding the font file. That means it won’t work in every single browser, but that’s the point: these icons should be an enhancement, not a requirement.

Having gone through the tortuous steps required to get my Mac all set up with the software required to follow Josh’s tutorial, I then spotted the note at the end of his article that pointed to Icomoon. That turns out to be a fantastic service. You can pick and choose from the icons provided or you can upload your own vector shapes. Then you can assign the unicode slots you want to use for the icons and you can get the resulting font file base-64 encoded. Very, very cool!

There’s a whole slew of icon-font services like that out there now: Pictos, Web Symbols, and Symbolset with its ingenious use of ligatures to allow for an accessible fallback.

Jenn is currently casting a critical eye over each of these service over on the Nerdary: part one, part two, and part three are all deserving of your time and attention.

And debate goes on

The RSS vine is humming with point and counterpoint this week.

Adobe revealed their new range of icons, based on mashing up a colour wheel with the periodic table of the elements. Lots of people don’t like ‘em: Stan doesn’t; Dave doesn’t. Some people do like ‘em: Veerle does. I can’t say I’m all that keen on them but I honestly can’t muster up much strength of conviction either way.

Let us leave the designers for a moment and cast our gaze upon the hot topic amongst the techy crowd…

Dave Winer looked at JSON and didn’t like what he saw:

Gotta love em, because there’s no way they’re going to stop breaking what works, and fixing what don’t need no fixing.

James Bennet wrote an excellent response:

Of course, this ignores the fact that the Lisp folks have been making the same argument for years, wondering why there was this great pressing need to go out and invent XML when s-expressions were just dandy.

The debate continues over on Scripting.com, where the best comment comes from Douglas Crockford:

The good thing about reinventing the wheel is that you can get a round one.

The discussion continues. Be it icons or data formats, the discourse remains remarkably civil. Perhaps it’s the seasonal spirit of goodwill. Whatever happened to the good ol’ “Mac vs. Windows”-style flame wars?

In contrast, Roger has posted a refreshingly curmudgeonesque list entitled Six things that suck about the Web in 2006. He had me nodding my head in vigourous agreement with point number six:

Over-wide, fixed width layouts. Go wide if you must. Use a fixed width if you don’t know how to make a flexible layout. But don’t do both. Horizontal scrolling, no thanks.

Perhaps I should post my own list of things about the Web that suck, but I fear it would be a never-ending roster. Instead I’ll restrict myself to one single thing, specifically related to blogs:

Ads on blogs. They suck. I find them disrespectful; like going into somebody’s house for a nice cup of tea only to have them try to flog you a nice set of encyclopedias.

Just to be clear: ads on commercial sites (magazines, resources, whatever) I understand. But on a personal site, they bring down the tone far more than any use of typography, colour or layout could ever offset.

I used to wonder why people put those “Digg this” or “Delicious this” links on their blog posts. I couldn’t see the point. But combined with google ads, I guess they make sense. They’re a way of driving traffic, eyeballs, click-through and by extension, filthy lucre. That’s fine… as long as you don’t mind being a whore.

Remember the term “Cam whore?”:

A Cam whore is a term for people who expose themselves on the Internet with webcam software in exchange for goods, usually via enticing viewers to purchase items on their wishlists or add to their online accounts.

I think it’s high time we coined the term “Blog whore” to describe people who slap google ads all over a medium intended for personal expression.

Alas, most of my friends, colleagues and co-workers are Blog whores. Scrivs manages to be Blog whore, Digg whore and pimp all at the same time with his 9 Rules bitches. In his recent round-up of blog designs, he says of Shaun’s site:

In a perfect world there are no ads, but we don’t live in that kind of world yet for the time being we can escape to the land of make believe when visiting Inman’s site.

Well, I see no reason why we can’t all live in that perfect world. In the style of Robert’s ludicrously provocative hyperbole, I hereby declare that a blog with ads isn’t really a blog. So there.

Ah, that’s better. There’s nothing like a good rant to counteract all that civilised discourse.

Happy holidays, Blog whores!