In the continuing trend of large sites converting to web standards and CSS-based layouts, Fast Company finds the religion and adopts it as their own. FC relaunched their site today, giving up reliance on tables for layout. Instead, they turn to lean XHTML markup combined with the power and flexibility of CSS. File sizes of various pages were cut in half and speed up the site dramatically. New features make improvements to the site’s accessibility. Color schemes can be changed each month with little more than the flip of a switch. FC details some of the new features in a revised Site Guide. continued
Treading water
Keeping up with client projects and balancing an increasing amount of social activity makes me feel sometimes like I’m barely staying afloat. So far, I’ve been able to maintain a moderate pace without pulling too many all-nighters to catch up on work. But personal projects, big and small, never seem to get started and/or finished. New books pile up on the corner of the desk or get filed away on a bookshelf and don’t get read. Commitments to learning new technology (for me) like PHP are long overdue. Making a full switch back to the Mac is not happening as quickly as expected (partly based on giving up my reliance on ASP). U.S. income tax deadlines are rapidly approaching with no time in sight available to pull together my own financial information.
But I’m fortunate right now to be dealing with a small number of good clients with interesting work. Intriguing prospects may be in the pipe for the near future. I’m happily meeting and getting to know many new friends. And having fun with the ones I’ve already known for a while. So I really can’t complain.
Stirring it up in SF
Sitting down where we please. Foaming at the mouth. Blood pumping through our veins. Well, ok. Probably not quite what you’ve been seeing happen in San Francisco over the last few days. More like a distraction to get our minds away from what’s happening here for a brief bit. Eric will be in town starting this weekend. Assuming none of us have been arrested for innocently walking down a sidewalk, we thought it appropriate to gather in the Haight for our third — yet unnamed — caffeine-assisted discussion about style, standards, design, and blogging, etc.
Tantek discovered another open wifi network at Rockin’ Java. The three of us, and any other friendly folk who’d like to join us, will be there this Sunday (March 23) from 2pm until whenever. So far, our first two gatherings have been small and informal, with discussion floating freely to whatever we deem appropriate or interesting. We expect this one to follow suit.
Designing in public
Online content producers and software developers are learning new lessons about opening up their design process to public scrutiny. Good design firms involve and include their clients early and often in many of the design decisions. Both independent and commercial content producers are experiencing a closer connection with their users and/or readers by treating them the same. The recent trend of baring all is proving a very fascinating and eye-opening experience for the site developers and for those of us paying attention to — and sometimes particpating in — these public redesigns. continued
Strike a pose
I’ve posted a set of pictures from South by Southwest last week in Austin. I was slightly disappointed I didn’t snap more pictures, despite the fact that I had a really small camera which went everywhere with me. I was more disappointed in the quality of photos from the Sony Cyber-shot U20. Particularly with color and an over-emphasized red-eye effect in low-light conditions. Thus, the reason for playing around with the color for each of the SxSW thumbnails.
Most everyone seems to agree, despite the economic downturn and possibly a smaller attendance at the Interactive portion of the conference, this year was definitely a fun one.
More on background-image, II
Thanks to David Havelin, who just wrote in to report back the results of pointing JAWS 4.5 to the background-image text-replacement examples (Ex.1, Ex. 1.2, Ex. 1.3). David writes:
In all cases, when I asked JAWS to read the whole page, I heard: “Using background dash image to replace text vertical bar example one hello world exclaim“. [Replacing “one” by “one point two”, etc. as appropriate] I am using Internet Explorer 6.0.
More on background-image, I
Jeffrey Zeldman writes up a very worthwhile read on the recent hot topic of CSS backgrounds. He appropriately attributes the original technique to Todd Fahrner, (from whom we’ve all drawn a lot of inspiration and practical problem-solving) and dubs it the Fahrner Image Replacement (FIR). In addition to providing several more benefits of the technique, Jeffrey also gives us a hint or two of future intentions with his ongoing redesign of zeldman.com. continued
Flaw with using background-image to replace text
If anyone read the CSS tutorial I wrote last week involving use of the background-image
property, they should be aware of an apparent critical flaw in the method as it’s currently described. It’s hard to tell whether the flaw is in the method itself, or simply in the way screen readers verbalize text of a page. A footnote added to the bottom of the tutorial tonight reads as follows: continued
When names become people
As SXSW Interactive wraps up today, I find myself feeling like a kid again. A kid at the amusement park who realizes there’s only an hour left until the place closes, the rides stop, and everyone goes home. It feels like depression. But I know it’s only because the high is coming to an end, and reality will soon slip back into place. continued
Using background-image to replace text
Please note: The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers. Instead, see one of the alternative techniques mentioned at the end of the article under “Important Notes“.
This tutorial assumes a base-level knowledge of CSS, but not much more. Beyond that, it also assumes care will be taken to use these methods fairly and responsibly with well-structured markup.
Introduction
Do you still crave the typographic control of creating headlines and decorative type with images instead of pure HTML text? Even with all the options we have for styling text with CSS, sometimes there’s just nothing that beats the indulgence of opening up Adobe Photoshop, then setting type in your favorite font at just the right size, kerning, and tracking. You know if you save it as an image and place it on a webpage, anyone with an image-enabled browser will see your typographic mastery just as you intended. Right? continued