As I was browsing the web, a new flash ad campaign caught my eye; in an interesting approach to marketing their new Bravia LCD TV, Sony is targeting both men and women by claiming it is “The World’s First Television for Men and Women.” This first catches one’s eye because a television isn’t immediately thought of as something that is dichomotized into male-geared/female-geared; after all, are there TV’s that are designed specifically for a woman, or even specifically for a man? None come to mind.

After this piqued my interest, I clicked on the ad to find out more about what could possibly gear a television toward either sex, and I came across this product site. The site is split horizontally into blue and pink, the ubiquitous girl/boy colors, and two buttons allow you to discover “Why Men Like It” and “Why Women Like It.” Expecting interesting differences between the two, I clicked on both and scrolled through reasons why men like the Bravia TV: “Amazing HD Picture, Wider Viewing Angles, Broader Color Gamut, and Slim Design.” And then I scrolled through the “women” reasons: “Amazing HD Picture, Wider Viewing Angles, Broader Color Gamut, and Slim Design.” They were the exact same reasons, but the descriptions were geared toward each sex by slight variations in the wording!

Ultimately, I felt cheated by the entire concept, which you could veritably apply to any sort of product at all. Even though the ads did catch my eye and bring me to the Sony site, wouldn’t it have been much more gratifying to see a more creative execution of the whole male product vs. female product? Not only was I disappointed after reaching the page, which contained little else besides the lists of reasons, but to view actual information about the product, you had to go to a different site altogether. At least they didn’t make a pink TV (see The Little Pink Toolkit for women).

Sony’s Bravia site

Most of us have run into this problem before. You want to have rich typography in your design, but you also want to have it work predictably in a good chunk of browsers. I’ve gathered a few techniques that come into play when that plain black-on-white <h2> just isn't good enough.

Fahrner Image Replacement (FIR)

Popularized by Jeffrey Zeldman in Designing with Web Standards, this method is very widely used today. I use them on my site for the vertical section heading on the right side. The code is not 100% semantic markup, but it’s close enough that no one should complain. You put a <span> tag inside your heading tag, and using two CSS rules, the <span> (which includes the text) is hidden from visual browsers and the image is displayed as a background of the heading tag itself.

It is completely transparent to search engines and non-CSS browsers since it is simple text. It scores higher than the alt text of an image placed inside an <hX>. No programming or extra libraries are needed for this effect to function, only CSS and images. It is instantaneous with no more lag than any other image being downloaded on the page. The usability problems are that you cannot highlight the words, and you have to be careful how you hide that <span>, as using display: none or visibility: hidden will hide the text from most screen readers. Using extreme margin or positioning settings is a better (although hackish) solution. Read about the many ways of using FIR.

PHP Dynamic Text Replacement

A Javascript library finds heading tags and feeds the text within to a PHP script, which returns an image with the text in a typeface you specify. No extra markup is needed, and the resultant images are sized appropriately depending on which heading tag you chose. I’ve noticed that the replacement can lag a bit, due to your initial web page loading fully before invoking the server-side script. Other than the lag, this method provides the same benefits and drawbacks as FIR.

The how-to is an ALA article linking to the example. The necessary libraries are linked within the article.

Scalable Inman Flash Replacement (sIFR)

sIFR is a flexible solution in that it combines the semantic markup you desire with the smooth, anti-aliased look you set out to achieve while maintaining the ability to highlight and (on page load) resize with browser text setting changes. Score. Though it is a fairly modular solution, it takes a little time to set up and you have to have the capability to edit a Macromedia Flash file. Regardless, it produces wonderful results and degrades gracefully into normal CSS-formatted text if the user doesn't have Flash or Javascript capabilities, which is in turn visible as plain text to non-CSS media and search engines. Double score.

sIFR is a programming library licensed under the LGPL, giving free access to anyone. You can download it at mikeindustries.com.

Archived at my site

The importance of accessibility

Web development can be a rapid process with all sorts of distractions and obstacles. It’s easy to hack a page together, step back and say to yourself "OK this looks good; we're finished." But what is that really saying? The world wide web is not just an art exhibit, it is a communication medium. A designer must be concerned with the information before the eye-candy.

As the web becomes more prevalent in the general population’s lives, not only will it be good practice, but it will be necessary. Already many countries require accessibility to be considered when designing a government-affiliated site, just as they require buildings to be handicap-accessable.

Start with the Basics

You probably know what I’m going to say. Get that page cleaned up with semantic markup! Not only does this ease the job of any viewing device and add value and meaning to your content, but it takes you 80% of the way. I’ll stop there since we’ve discussed this before multiple times.

Not only the Blind, but the Visually-impaired

If you’re like me and your design eye just sucks, this mini-app can be extremely useful. The WellStyled Color Scheme Generator [2] lets you visually select many different color schemes, and has very useful options, such as a "web safe color" mode and simulation of different modes of color blindness, allowing you to check the contrast of a palette from the eyes of many individuals. You can even save a configuration via hyperlink of your scheme.

Be helpful

Michigan State University recently launched a new standards-based accessible website. Part of being accessible is being helpful. If you use acronyms on your website a lot, use the proper tags and consider a glossary page that can be referenced. Include accesskeys and "skip to content" anchors. These do not even have to be visible to all browsers, they just have to be there. I visually hide my skip to content anchors on almost every site because the people who need it will probably not be viewing my content from the latest mainstream browser, where the meat of the page starts an inch or two from the top of the rendered content.

Archived at my site