Archive for August, 2010

Accessibility of Dingbat Webfonts

Tuesday, August 17th, 2010

Inspired by Jason Santa Maria’s Tweet:

I love the idea of dingbat webfonts, though I want someone to write an article on the accessibility of using them.

The idea is fairly simple: Draw up some beautiful flat-colour vector icons, wrap the whole set into a font, and then load it as a webfont to display the icons on your page. Simple and clean, right?

There are problems.

In effect, you will be littering your page with a list of ‘j’ and a ‘h m n p’ near the title, with some ‘s u f’ in some other places. What does it mean? It’s completely indecipherable unless you successfully load the font and have the required experience/cognizance to recognize the meaning of the shape. A lot of people just aren’t good with icons.

There are some standard solutions. Wrap everything up with plain-text mark-up, then add the symbol and negative-indent the semantic text away.
In browsers that don’t support web-fonts, and in screen-readers that read out text on the screen (which would be all of them), the code would still contain a bunch of odd letters or numbers everywhere.

Someone mentioned a page from Opentype in his post, where they make a characterset which has most of the letters blank, with the ‘W’ mapping to their logo.

So how’s this:
Make an icon set with most everything blank, and then put twenty-six icons in the capital spaces. Put the shopping cart in ‘C’, because ‘cart’ starts with ‘C’. In your shopping cart example, it could say “Purchase, go to shopping Cart” but the “, go to shopping art” would be blank, the “C” would be the shopping cart symbol, and you’d see “Purchase []” where [] is the symbol.

You’d be limited to twenty-six symbols, and each must be applied to the letter you’ll use to start its name (unless you don’t mind the text “caRt” or such).

Email Design

Friday, August 13th, 2010

Everyone knows how important email is. You probably check yours several times a day for new updates.

Let’s take a look at something I just got:

*Please do not reply to this message*
You asked that we send you a summary of Meetup message board
activity. The following is a list of discussions with new
messages posted since July 14, 2010 12:17 PM.

Forum: The Winnipeg Creative Freelance Society Discussion Forum

90 second quickie at portage and main
Latest message by Paul Clerkin on August 13, 2010 at 11:01 AM

Add to your address book to receive all Meetup

To manage your email settings, go to:
Meetup, PO Box 4668 #37895 New York, New York 10163-4668

Meetup HQ in NYC is hiring!

If you’re in Winnipeg, I encourage you to come to our monthly meetup. It’s a great little gathering of local creative/tech people.

Now, I signed up for email notifications because I’m just not going to check the site (which I never visit) every time I want to know if something new has been posted. In fact, the less I have to visit the site, the better.

When I sign up for email alerts on a forum or message board, I want to see something like this:

New discussion messages since July 14:

Forum: The Winnipeg Creative Freelance Society Discussion Forum

90 second quickie at portage and main
Paul Clerkin on August 13, 2010 at 11:01 AM:
The Winnipeg Film Group is proud to announce an open call to our second annual 90 SECOND QUICKIE film contest. The 90 Second Quickie was created in 2009 by the Winnipeg Film Group to encourage the creation of new, micro films. Blown away by the shorts in our first year we are doing it again – this time bigger, brighter and bolder!

To visit the thread, visit

To manage your email settings, go to:
Meetup, PO Box 4668 #37895 New York, New York 10163-4668

Even that could be shuffled around a bit, but there are some good practices:

  • Keep cruft to a minimum
  • Display the main information as soon as possible
  • Give links to things
  • Also provide fall-backs for plain-text email clients
  • Give them (at least some of) the content from the site, so they don’t have to click and load additional pages

Net (and a bit about Neutrality)

Wednesday, August 11th, 2010

The latest internet storm is the hubbub about Google’s and Verizon’s Joint Policy Proposal for an Open Internet. Essentially, wired networks aren’t allowed to prioritize traffic, wireless is interesting and unique and should be decided later, and the FCC should watch over things.

There are little points here and there. I encourage you to spend an hour reading it over, word for word, to discover for yourself what it means, because most of the internet has it wrong (quite like the iPhone 4 antenna issue, which has turned into ‘antennagate’, which is better described as ‘antennapaloosa’).
So what does that Google document mean? It’s a lot of high-level language with broad generalization and sets a framework for future law-makers.
To clarify, read Brian Fling’s Google, Verizon and an “Open Internet” from a Mobile perspective. He tells us all how wireless networks are different from wired networks (and believe me, they are).

When you get right down to it, what can we really do?

  • Cap bandwidth
  • Charge per-gigabyte
  • Create a tiered system of separate internets
  • Charge more all round
  • Destroy Hollywood
  • Create a foundation for peer-to-peer networking
  • Others

You can’t cap the bandwidth. Throttling might be fine, but most people get so little, anyway, and they can still download hundreds of gigabytes a month. Frankly, fast bandwidth is necessary, or you’ll spend hours a day waiting for your pages and things to load.

I’d be all for charging per-gigabyte, except that providers invariably would charge too much. I would love to believe they could do some research to find out how much people need, and then create a simple stepping chart of prices, but they are either incredibly stupid or are greedy liars—they say you can visit so many webpages and get so many emails with whatever bandwidth, when really you can’t.
See the Rogers Data Calculator. It looks like they’ve made some improvements, lately, but they still say a webpage is 289 KB. I wish that were true, but it seems a lot of pages I visit are several megabytes in size. (Still, it seems fair, right now.)
A good per-gigabyte system should start off small, because basic internet access is very important. If people really want to torrent a bunch of videos, games, and music, they can pay for all that. Imagine if you could get a basic internet connection for $5 or $10 per month.

Obviously, creating a tiered system wouldn’t work, because everyone would have to pay a premium just to get basic bandwidth (although you already do). Worse, this would extend into the internet itself, and you’d subscribe to certain sites the way you subscribe to cable channels. Imagine only being allowed to go to the most famous and corporate sites.

Charging more all around won’t work, because they’re already charging us exorbitant amounts for relatively pitiful network connections.

Utterly destroying Hollywood and hunting down any famous musicians would reduce the amount of traffic downloading torrents. This obviously isn’t going to happen. (Though it would make a great movie!)

Most of the network traffic is duplicates: mailing lists, illegally downloaded movies, millions of upgraded FireFox installers, and the most popular YouTube videos.
If we could lay some protocols, programs, and infrastructure to allow local copies to be shared between local machines without hampering the network, it could really reduce the amount of bandwidth being used for large files.
CDNs already take care of the top-level branches, where the internet backbones would otherwise need to duplicate content, but that data still needs to be downloaded separately each time someone in that region requests the file. We need a way for this content to be managed AFTER the end-of-line provider downloads it.
It would basically be a Fractal Internet. The big pipes shuttle to the smaller pipes, which will share with the even smaller pipes. I don’t know if any research has been put into this, yet.


Friday, August 6th, 2010


This is a Daily Drop Cap from Jessica Hische. I encourage you to take a look at her typographical wonders.

Pixels Per Inch

Tuesday, August 3rd, 2010

When dealing with screens, the density of the dots that make up your picture is referred to as ‘pixels per inch’. This measures how many pixels, lain end to end, fit along a one-inch line. A screen 10.24 inches wide and 6 inches tall, at 100 pixels per inch, would contain 600 rows of 1024 pixels each. (The diagonal measurement of such a screen would be 11.86 inches, by the way.)

Here’s an example:
Because it’s hard to show high-resolution samples on low-resolution screens, I’ll show you a low-resolution example. This illustrates the difference between two screens; but the size depends on your own screen’s density, so the numbers aren’t absolute.

Take Monitor #1 and Monitor #2. Both are about 11.8 inches; but Monitor #1 has a resolution of 1024×600 pixels (1186px diagonal) while Monitor #2 has a resolution of 341×200 pixels (395px diagonal).
Pixels per Inch. 1186 pixels per 11.8 inches is about 100 pixels per inch. 395 pixels per 11.8 inches is about 33.4 pixels per inch.

Having few pixels per inch means your computer has very little to work with, and the images will be blocky. Having a large number of pixels to work with means your computer can display hairline textures, possibly at the limits of human perception.

Monitor #2 has only 33 pixels per inch, or a little over 1000 pixels in an entire square inch. Monitor #1, meanwhile, has 100 pixels per inch, which is 10000 per square inch. Nine times as much detail!

If you want to see how a hypothetical screenshot would look, see Monitor #1 and Monitor #2.

Some other numbers: Most monitors today are around 100 ppi. Laptop screens might be a bit more high-detail, at 120 ppi or so. At 280 ppi, you’re nearing the edge of human sight. Some people can see more, and others less. The iPhone 4’s screen is about 320 ppi.

So, now that you’ve seen the difference of high vs. low, you’re probably wondering what it all means.
When you look at the example above, you see how the text went from nearly-illegible to crisp and neat. You can probably still see pixels, though, if you looked hard at those letters. In the near future, monitors and screens will all be nearing 300ppi, and those letters will look beautiful. We’ll also have more design options than ‘no line’, ‘thin line’, and ‘thick line’.

Here’s the thing: There is little support for high-density devices.
Windows, the most popular operating system, has only the barest functionality, and is only truly usable on screens with height of at least 720 pixels per hundred ppi (720 for 100 ppi; 1440 for 200 ppi). (Rough numbers, of course.)
Most web-pages automatically set your text to something like 12 or 16 pixels, which is too small to read on a 300ppi screen (think of reading 5px font on your current screen). They also usually set elements of the page to specific pixel widths, which means the proportions will be all wrong and the text will overflow from their boxes.

We need to call on web designers to design for the multitude of screens we have, and to put the power into the browser’s hands. Front-end developers need to work with designers to make their layouts flexible.