Accessible Image Replacement

Mike Davidson — sIFR 2.0: Rich Accessible Typography for the Masses sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. It is described in this article by Mike Davidson. Many of the wow web designs on sites such as CSS Zen Garden rely heavily on image replacement. Not all image replacement techniques are accessible, however, sFIR is a step in the right direction.

Tip: The Dreamweaver 8 toggle displaying CSS Styles

I recently updated a page for the first time since moving to Dreamweaver 8 and noticed some changes in the way Dreamweaver 8 deals with absolutely positioned layers in Design View. It threw me off for a while and I asked for help. Al Sparber, from Project Seven came to my rescue with the advice to toggle off style rendering in Dreamweaver’s Design View. I’m now wildly happy over the toolbar that allows you to toggle style rendering! Here’s the whole story.

The page I updated uses a Project Seven scroller. This is an artist’s portfolio page on a site (hgwinn.com) that I’ve updated happily with several versions of Dreamweaver for a few years. Previous versions of Dreamweaver used an icon for each absolutely positioned layer that allowed me to select an individual layer for editing.

DW 2004 MX shows yellow layer icons

The absolutely positioned layers are shown as selectable with a yellow icon in Dreamweaver MX 2004.

Design View with layer selected

In Dreamweaver MX 2004, when I selected the first layer icon on the left, I could edit that layer and none of the other layers appeared in Design View.

This is a complex page and I normally worked on it in Code View, except that I liked changing the image size measurements in Design View. There is a small spiral arrow that can be used to insert the correct measurements for a new image on the Property inspector. But to be able to use it to change the dimensions for a newly inserted image, one must be able to select the image in Design View. Using the icons I just described, selecting the image was a simple matter.

Now move on to Dreamweaver 8. I open the portfolio page in DW 8 for the first time and things look very different. There are no icons, every layer is visible and it’s impossible to select parts from layers individually.

Portfolio in design view in dw 8

Notice the tag selector at the lower left. In Dreamweaver 8, a div is selected. I cannot drill down into the text or image elements of the div in order to edit anything.

Now, I’m not in a panic, because I normally work on this stuff in Code View, but remember my penchant for changing to new image dimensions with the Property Inspector. I have a very hard time remembering numbers, and going from an image size display readout in Fireworks, to typing width and height attributes in an image tag in Code View is a multi-step process for me. I have to go back and forth several times to get the numbers right. I really want to be able to insert a new image and just press the wonderful little icon on the Property inspector that will set the image size to the right dimensions for me.

So I call out to my cronies in the web world, and Al Sparber notices my question. (He’s always on the alert for folks having trouble with Project Seven products. They have great support for their products in the Project Seven forums, by the way, but that isn’t where I was asking my question.) Al tells me about a new option in Dreamweaver 8 that I hadn’t discovered yet. There’s a toolbar for style rendering. It’s at View > Toolbars > Style Rendering.

Style Rendering toolbar

This toolbar is such a fine addition to Dreamweaver 8! It allows you to render the page in Design View for screen media, print media, handheld media, projection media, tty media, tv media, or—the icon on the far right—toggle displaying CSS styles.

When I use the icon to toggle off CSS style rendering I get a linearized view of the page that is super easy to edit.

DW 8 with CSS rendering off

Each layer is now individually viewable, I can select text or image (note the tag selector at the lower right) for quick editing, and I am happy, happy, happy.

Now I’m using this toolbar extensively to work with other pages in other sites where Dreamweaver’s Design View was getting in my way. And don’t forget the value of being able to render your pages for print styles or handheld styles using this toolbar. I consider this advancement in WYSIWYG tools to be one of Dreamweaver 8’s best new features.

One is enough

Business and the world are changing fast. High tech has been the impetus for this and serves as a model for rapid adaptation. The music business, the long distance business, the mail order business, the broadcasting business, the publishing business: there are many examples of business models that have radically altered in the last few years. Not all the changes have been easy for business or even wanted by business. Some companies have dragged themselves kicking and screaming into new ways of doing things.

All it takes is one successful effort. One site successfully and legally selling songs for 99 cents is all it takes. One long and demanding waiting list for hybred cars is all it takes. One overwhelming response to a political fund-raising website is all it takes. Change follows.

I’ve talked about Cradle to Cradle: Remaking the Way We Make Things before. One of the stories in this book is about a Ford Motors plant where they planted grass on the roof, opened the windows for fresh air on the assembly room floor, and discovered that they not only saved a bundle on energy but had better productivity and happier employees. I notice that Ford is the only American auto manufacturer willing to make the leap into hybred techology. If they are successful, change will follow.

There are businesses that resist change and don’t seem capable of looking for new ways of doing things. The oil companies seem to fit that category. It is as if oil companies don’t breathe the same air or drink the same water that everyone else on the planet does. It is as if oil companies have no emotional intelligence. Remember the book Emotional Intelligence : Why It Can Matter More Than IQ from 1997? One of the stories in this book was about how researchers set out a treat (for the sake of argument, we’ll say it was a marshmallow) for a child. Then they told the child that they were leaving the room for a minute and if the child would wait until they came back there would be more marshmallows. Or they could eat the marshmallow immediately. If they chose to grab the one there now, there would be no more later on. The researchers considered it a sign of emotional maturity for the child to wait for the promised marshmallows instead of grabbing the one that was immediately available. Oil companies seem to want that marshmallow right now, and the future is forgotten.

Somehow we have to show these folks the way. All it would take to help the oil companies out of this immature attachment to a brain-dead business model is one successful gas station with a pump dispensing biofuel and a line down the street of eager customers. All it would take is one energy company selling fuel made from soybeans from Missouri to be more profitable than an energy company selling oil made from petroleum drilled in the Middle East. All it would take is booming sales of energy efficient cars or energy efficient homes or energy efficient applicances. If business can’t exercise the emotional maturity to do something because if is right and good for the population in general, we have to win them over with success.

A new book is In Their Time: The Greatest Business Leaders of the Twentieth Century. This book talks about contextual intelligence, or the ability to understand the period in which you live and exploit its opportunities. Here’s an example. I sometimes drive across Texas from San Antonio to El Paso through the heart of nowhere on Highway 10. My XM radio works fine the whole trip. My Sprint phone service is spotty at best. Should my car break down in the middle of the south Texas desert, would I want to listen to music or phone for help? That’s a failed opportunity. One successful phone service that works everywhere is all it will take to change things. What is that one thing: VOIP, wireless-everything-everywhere? Whatever it is, it’s coming from some company with the contextual intelligence to figure out what’s needed and provide it.

The petroleum industry, the boxcar-sized auto makers, these are businesses that don’t show much contextual intelligence. They are like politicians who shoot themselves in the foot by making statements like "the Geneva Convention only applies to them, not to us." Leaders with such a startling lack of contextual and emotional intelligence are doomed to failure. Grabbing for that one visible marshmallow while refusing to turn just slightly to the side to consider other ideas is not successful problem solving behavior. Clinging to an old and harmful paradigm is like diving over a cliff along with the other lemmings running beside you. Stop and look for that one new way, just one, that will work and be a change for the better.

Accessibility, CSS, standards: these ideas are not harder and more expensive to implement. They are current best practices and should be taught as such. But once you’ve finally figured them out, don’t insist that they are the only way, because that one new thing may come along and stand the web design world on its head at any moment.

New PVII Tutorials; New Jump Start Designs

A new series of tutorials at Project Seven was announced today. Written by graphics expert Linda Rathgeber-Stewart, the series focuses on making background images in Fireworks. Here’s the first: PVII Tutorials – Making Background Images in Fireworks: Pixel Tiles

On another front, Community MX released a new Jump Start design today designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. This Jump Start design is not free, unless you are a member of Community MX. The design is Traverse City.

Zoe Gillenwater, by the way, is one of those invisible women of the web. She is a CSS expert on a par with any big-name CSS celebrity you might mention, but she is very low profile. She writes amazing and helpful advice as a member of the CSS-Discuss newsgroup. She can analyze and fix any goofed-up, hacked-up, misguided CSS problem you can throw at her. She’s helped as many or more people grasp CSS than anyone in the web design community. Lately she’s been contributing a bit more publicly in articles at Community MX, but she is a perfect example of a woman whose quiet accomplishments go unnoted because she’s not out calling attention to herself, she’s simply getting the job done.

Tip: Dreamweaver 8 CSS Styles panel improvements

Dreamweaver 8 is more CSS-friendly than previous versions. I’m going to describe a couple of welcome improvements in the CSS Styles panel.

If you select a style or element in the document window, the CSS Styles panel displays information about it in two modes now: All or Current. There are now three views to choose from, controlled by three icons at the lower left. If you select Current mode and click the Show only Set Properties icon Show on Set Properties icon you’re treated to a big bag of very specific information. This is the mode and view I want to talk about in more detail.

CSS Styles Panel for Dreamweaver 8

The highlighted style can then be inspected and edited for its individual properties. The new About pane gives information about inheritance and can help you clear up Cascade problems if you are experiencing a conflict. The Properties pane also gives information about inheritance. Properties inherited from a style further up in the cascade are indicated by a strikethrough of the selector name.

Property names with strikethough

Hover over the property with the strikethrough, and you’ll see a pop-up window explaining more.

Together, the new Current mode, Show Only Set Properties view, and About pane constitute useful advances in Dreamweaver 8’s CSS interface.