If anyone missed the announcement, those lovely people at the London Transport Museum have only gone and put all their posters online for everyone to see and search (and buy).

These posters are by the brilliant Tom Eckersley. Used here without permission but with the best intentions. Respectful apologies to LTM for the liberty.

One of the CSS techniques most prone to failing in Internet Explorer 6 is floating elements up against each other.

For instance, you might have a main-content div, and a sidebar div. You then float both of these to the left, and give one of them some margin on the left or right hand side.

Bad idea! This often induces one of IE6’s many CSS layout bugs, so here’s a better way:

Float the two divs to different sides. That is, give the first column a float:left, and the second column a float:right.

Apply a width to each column, so that the whitespace in between the columns is as wide as the margin you originally applied.

Now, the columns aren’t even touching, ensuring that IE6 won’t push one column down below the other.

Just like that you’ve accomplished the same exact layout, without the need to float divs up against each other, making for a much more robust layout.

See also:

• CSS 101: There’s always another way
• CSS 101: Group by layout

Just look what landed on my desk yesterday, only Pearson's bloody book of Penguin covers.

A mighty volume of "classics and oddities".

Update: Same book, same old me, somewhere else.

In the current editor's draft of HTML 5, it is suggested that the alt attribute for img elements should no longer be required. The reasoning is that in some cases alt text will be omitted, regardless of whether it is required or not, so it might as well be made optional. Otherwise some authoring tools will automatically insert empty, repeated or meaningless alt text. At least that's how I understand the reasoning explained in Why the Alt Attribute May Be Omitted.

Basically it seems to come down to "Many people and many tools aren't using the alt attribute properly, and adding alt text to images uploaded to online photo galleries like Flickr is too much work for end users and tool developers, so the alt attribute should be made optional." Is that really the best solution though?

To help authors write useful alt text, the HTML 5 specification should provide guidance on that. I am pleased to see that the section describing the img element in the current draft does that well, except for the first example which seems a bit too long (and contains information that all users would benefit from). The rest of the examples are good. They could be worked on, but they are good.

Despite that guidance, there will always be cases where alt text is missing, either because of broken authoring tools or because of author ignorance or laziness. So the specification needs to define how user agents should handle missing alt attributes. In no way does that necessarily mean that images with missing alt attributes should be valid HTML 5.

Concerned that omitting the alt attribute might lead to increased problems for users of assistive technology, most notably screen reader users, Steve Faulkner conducted a series of tests. During the tests, Steve recorded the output from a screen reader confronted with pages containing images with and without alt attributes. The results and his conclusion are presented in Investigating the proposed alt attribute recommendations in HTML 5.

If you read Steve's article you will see that omitting the alt attribute leads to the tested screen readers announcing the value of the img element's src attribute when an image is in a link. In many cases the filename contained in the src attribute is pure nonsense that does not provide the user with any useful information about the image.

The text-only browser Lynx has similar behaviour to the screen readers Steve tested in that it displays the filename of linked images that have no alt attribute.

The HTML 5 draft somewhat cryptically suggests that Non-visual user agents should apply image analysis heuristics to help the user make sense of the image. It would be very interesting to learn more about how those heuristics are supposed to work. Have vendors of non-visual user agents been consulted to find out if this is at all possible? How are non-visual user agents supposed to figure out the author's intent by analysing an image?

Omitting the alt attribute clearly causes problems in some cases, so it is not a very good option. I have seen suggestions of a couple of other solutions that I think are better, though neither is perfect.

One is to add a noalt attribute that is to be used when alt text for some reason cannot be specified. I think it is a much better idea than simply allowing the alt attribute to be omitted since it makes it explicit that the author (or authoring tool) has intentionally not supplied an alt text. This would make it easier to use validation to check for mistakenly missing alt attributes.

Another solution could be that the alt attribute may be omitted only if the image is inside a figure element that contains a legend element, the contents of which may then take the place of alt text. An example from the current editor's draft of HTML 5:

1. <figure>
2. <img src="1100670787_6a7c664aef.jpg">
3. <legend>Bubbles traveled everywhere with us.</legend>
4. </figure>

In this case the text in the legend element can give the user at least some indication of what the image contains, and would be much better than being presented with the image's filename.

To me, both of those options seem much better than simply making the alt attribute optional.

One problem remains though. To be backwards compatible with current Web content I believe screen readers (and any other user agent that does not, permanently or temporarily, support images) will need to keep announcing or displaying something when the alt attribute is missing. In most cases the only thing available for them to display will be the image's filename, which as we have seen is often useless.

So, after much thinking back and forth on this subject, I'm not convinced that making the alt attribute optional is a very good solution. Gez Lemon seems to share my opinion, and explains his reasoning in The HTML 5 Image Element (where he also brings up the longdesc attribute, which is missing in the current editor's draft of HTML 5).

Like Gez, I believe that we need to keep encouraging the developers of authoring tools and applications like Flickr to improve how their systems handle alt text. Making the alt attribute optional won't help – it will only lead to lazy and ignorant authors and tool vendors ignoring it completely.

Visit site to read or post comments…

Add 456 Berea Street to your Technorati favorites.

Posted in Accessibility, HTML 5.

Two small boys to entertain so we find ourselves at another steam railway. The Brucie-bonus being the trappings and remnants of a bygone era.

We've been to Downpatrick Railway before, a couple of years ago. It's really good. There's a small but nicely restored station with a workshop and engine shed to explore, and a static buffet car for a cuppa. Everyone's really friendly.

Then it's a short journey down the line to Inch Abbey for a picnic. If you're dead lucky, they'll be a real live monk lurking about in the shadows waiting to jump out and frighten the kids or offer some spiritual guideance, whichever you prefer. Nice.

More pics here.

As usual, if anyone would care to contribute, please do.

Before releasing Blueprint 0.6, I’d like to put it through its paces. If you have the time and ability, please check out the latest revision from our SVN repository, and try your utmost to brake it.

This release will be miles ahead of out current release, and is a giant leap towards version 1.0. If all goes according to plan, the versions between 0.6 and 1.0 will not bring any major changes, only subtle improvements, additions and bug fixes.

This also means that the release of 1.0 should not be too far away. :)

Here’s a quick list of the improvements in BP 0.6:

• We’re back to em units for vertical spacing, though with a much better implementation than what we had in 0.4.
• This release introduces a new plugin structure, keeping the core files light and nimble.
• Three plugins (two extracted from the 0.5 core, one new).
• A new IE stylesheet imported with conditional comments.
• A much cleaner directory structure.
• New compressor script for easy compression of core files.
• Compressed version of print.css.
• A CSS validation script.
• Greatly improved test files.
• Lots of improvements to the typography.
• .box, .clear, .append- and .prepend- 12 through 23 are back by popular demand. :)
• Loads and loads of small improvements and fixes.

This might seem like a lot of files, but while the number of bundled tools have increased, the use of plugins and a much better directory structure actually means that the CSS framework itself is lighter and more robust than ever.

Take a look at the full changelog for more details, though some changes might be missing from that as well. Also, the readme file in the SVN directory is of course the only updated documentation on 0.6.

Submit feedback in our Google Group, or by mail (olav at bjorkoy dot com).

I’ll be posting about who the people in the BP dev team actually are, and about all the new tools to use with BP in the near future.

In honor of the start of the school year, Core77 has put together the definitive set of tips, tricks, and lifehacks for design students: Hack2School. Divided into 5 groups–Classroom, Dorm Room, Represent, Crash Course, and Cheat Sheet–everything you need to survive a design education has been hunted down, written up, and offered to you on a blue foam platter. So to all the returning students, we say “welcome back.” And to all the new ones? Well, maybe you better read this first.

Super Bonus: Guest essays from: Ralph Caplan, Alissa Walker, Alice Twemlow, Steve Portigal, Jessica Helfand, Scott Klinker, Steven Heller, Sam Montague, and Jill Fehrenbacher.

My contribution is Practice noticing stuff and telling stories.

Not worth commenting on really, other than the name change probably makes sense, as for the logo…

UPDATE 09/06: Steve Jobs posts an open letter confirming that early iPhone adopters will receive a $100 voucher to be used at the Apple Store.

September 5th, Apple announces new iPod hardware - which iPod are you? Not surprising considering early rumors spoke of such updates weeks ago. What was not expected was the significant price-drop for the hottest selling smartphone last month [July 2007], the Apple iPhone. How significant of a price-drop? $200. As an early [iPhone] adopter, I was a little flustered with the news.

A few thoughts that came to mind after reading the news:

• As Apple’s hottest selling device, the iPod has never had as significant of a price-drop in a period less than 2 years, let alone 2 months.
• News of software / hardware SIM unlocking (confirmed by CNN) surely made at&t unhappy. Apple obviously does not "technically" condone such activities. However, 3rd party iPhone unlocking only translates into more money coming Apple’s way.
• Check here for the 4GB iPhone ($299) while supplies last. Otherwise, look for $299 [refurbished] Phone’s in the Apple Refurb store. Trust me, they’ll hit the refurb store within the new few weeks (or sooner). Check daily because as soon as they go up, they’ll all be spoken for by the end of the day.
• Umm, two months equals twice the storage - 8GB to 16GB? Come on Apple, admit it! These were ready at the end of June but the idea of making an extra $200 off of early adopters for an 8GB iPhone was too hard to resist.
• That iPhone Touch looks quite empty with 7 applications on the SpringBoard and 4 in the dock. *cough*. Better hurry up and get those 99 cent downloads to load Dashboard widgets on to the iPod Touch / iPhones.
• Speaking of 99 cent downloads… I can understand charging 99 cents for custom ringtones, but doing so for customers who have already purchased the song?! $1.98 + tax to purchase the complete song and have the matching ringtone? Psh, Ambrosia’s iToner is only $15 (alternatives below).
• Want to sell more of these handsets Apple? Hurry up and get Mobile iChat with support for AIM + Google Talk.

As difficult as it is to stomach the $200 price change, I’ll forgive you Apple. As long as you hurry up and bring MacBook Pro revisions with a model to replace the classic 12" PowerBook - give us a MacBook Pro Mini. If such hardware is released, I promise to be an early adopter again.

* Maybe send early iPhone adopters a free Bluetooth headset voucher eh?
** iPhone and soon to be iPod Touch users should check out some of the following alternatives to personalize their devices: Installer.app Beta, iFuntastic, and Shaun Inman’s An Easy SSH / SFTP iPhone Installer.