Archive for the ‘Accessibility’ Category

Jul 06 2008 at 11:55am

Do we still need em-based layouts?

Most of my recent layouts have been em based. That means that they scale when the font size is adjusted. This approach seems to make more sense than simply allowing the text to resize while keeping the layout the same.

Well, browser manufacturers have caught on to this. Following in Opera’s footsteps, IE and Firefox are now implementing zoom as the default method of resizing text.

If this is the case, then do we still need to code layouts in ems or can we go back to using pixels? I’m currently coding a new layout for this site and I’ve decided to code it in pixels. It’s so much easier not to have to do grid calculation in ems and worry about what the current font size is. My grid unit is 24px. That’s it. Much better.

So, do you think it’s still worth it to code layouts in em’s? The non-zoom font resizing functions are still there. Will people prefer to use them over zooming?

Apr 26 2007 at 10:20am

Developing a semantic FAQ with CSS & Javascript @ A Padded Cell

I’ve got two new articles up on A Padded Cell:

Creating a semantic FAQ page with definition lists and advanced CSS, Part 1

and

Creating a semantic FAQ page with definition lists and advanced CSS, Part 2

The first part goes over the structuring and presentation of a long Frequently Asked Questions page. The second part demonstrates two ways of creating navigation for the page. I hope you find them useful, and do let me know if you have any comments or questions.

Liam has also been releasing a lot of articles about standards, including What’s the Difference Between Usability and Accessibility? and Future Proofing Using Standards.

Mar 23 2007 at 10:57am

Can we Stop it With the Tiny Text Already?

I was starting to think this trend was over, but then I came across a couple of sites today that have some of the worst cases of tiny text I’ve encountered in quite awhile.

Please, stop making your font sizes so miniscule that nobody can read them properly! I could increase my font size in my browser (zoom in in Opera) but you shouldn’t have to make me do that. It’s annoying and I’m lazy. For many sites I’ve even had to build user stylesheets just so I don’t have to keep increasing the font size every time I visit. My opinion is that font sizes should always be set just a little bit smaller than the browser default size (between 80-90% of normal, depending on the typeface. Both of the examples linked above use Trebuchet, which needs to be bigger). This works well for a normal range of screen resolutions. If people like them larger or smaller they can change their browser preferences.

Even the W3C agrees with me.

So quit it :P

(Just as I was posting this I came across a post on YouMoz demonstrating that when tested, page views actually increased when the font size was set a little larger. This site was targetting seniors but I think the same could be true for other age groups as well.)

Feb 19 2007 at 10:48pm

Check out the Typography on Joe Clark’s site

I came across Joe Clark’s site today, rather randomly through a series of links leading to his Letter to Tim Berners-Lee about WCAG 2. Check out the typography on there. Gorgeous, isn’t it? I’m not sure exactly what you’ll see, since he is using the new MS fonts for his body text and headers which not everyone has installed. I must say, they look nice (does anyone know what’s up with the smoothing on those? That’s new - is it a MS thing or are all fonts able to handle that now? I actually think they’re a little too smooth).

<!--enpts-->Screenshot of Joe Clark’s Site<!--enpte-->Here’s a screenshot for those of you who don’t have Cambria and Calibri installed (I can’t get the names of those two straight!). Check out his typography stylesheet too. I don’t think I’ve ever seen such an interesting set of font specifications in a stylesheet before. So many elements are very specifically defined, with many more options than what designers normally include. He’s also got a very different set of fonts listed for various elements. His main body font list is Cambria, “Hoefler Text”, Baskerville, “Palatino Linotype”, Garamond, “Lucida Fax”, Georgia, “Book Antiqua”, serif.  Hmmmm…. interesting.

<!--enpts-->Screenshot of Joe Clark’s Site (Linux)<!--enpte-->Unfortunately, it doesn’t look quite as good on my Linux computer where the first available font is Georgia. It still looks nice though - classic typographic principles at work.

His header also works perfectly with the rest of the design even though it is using different typefaces. Brilliant! (although I do think the home page has a few problems…)

Anyway, I don’t necessarily think that typography is the most important thing, but it can really make (or break) a design, as we see here. Do you know of any other examples of outstanding web typography?

Nov 21 2006 at 4:24pm

Fixing my Wordpress Title Tags

Update 03/07/2008 - I am no longer using this solution for my title tags. Read more about my new solution in Fixing my wordpress title tags, revisited. The solution below may still be useful for anyone who finds the plugin options to be overkill.

I thought I’d document this just for my own info and in case anyone else is looking to do the same thing.

Default title format

The default wordpress titles look like this:

Home page: Blog Name (and that’s it)
Category Pages: Blog Name » Category
Archive Pages & individual posts: Blog Name » Blog Archive » Post Title

I wanted to reverse this for a few reasons. Firstly because it’s good for people that have a lot of tabs open and can only read the first part of the title. Secondly, it might be better for SEO and actual reading of SERP’s. Thirdly, because I just like it better that way.

Read more…

Aug 17 2006 at 2:36pm

UW Accessibility Conference

On Wednesday I attended the “Power of Ideas” a conference here at UW. The conference was about web accessibility in an educational environment. Presentations covered a range of issues including accessibility testing, designing accessible spaces, various learning activities and technologies including podcasting, and assistive technologies.

Read more…