iBlog

tick-tock

I’ve always hated answering questions, but this I can do. My entry into this week's Photo Friday challenge...

»plink« · December 30, 2002

I harm end of Dec. slur

»plink« · December 30, 2002

My dad had just received his honorable discharge from the Air Force. I didn’t understand the war in Viet Nam—I was only four at the time. But it wasn’t something my dad wanted to be a part of anymore. He could have been a career officer, but he chose his family over that.

He found a job in Gila Bend, and a house in the Phoenix suburb of Glendale. I met a neighbor boy, and we sealed our friendship by throwing rocks at the windows of the new houses that were going up in the neighborhood—not an auspicious beginning.

We were only in that house for 9 months before my Dad was transferred to Tucson, but that was the first house I remember with much clarity. I remember the carrot farm at the end of the block. My mom tells me that she was doing dishes one day and looked out the window to see a plane flying right toward the house, only to pull up at what seemed like the last possible moment. I wonder what kind of pesticides were being used in that crop duster?

I remember watching in terrified fascination as some older boys lit firecrackers in their back yard. I remember the avocado green car seats in our ‘69 Pontiac Catalina, white with a blue interior. And I remember Christmas that year.

For a month my sister and I had not been allowed to enter the garage. Each night we heard my Dad in there—sawing and hammering. And my mom would not let us in my parents’ bedroom. She would go in there and sew. And then, just before Christmas, I left my tricycle in the driveway one too many times. I had it taken away for a week.

Before we knew it Christmas had arrived. I don’t remember opening any presents (though I know I did). But I do remember I had my tricycle back. And I remember going into the back yard to see a most amazing site—at least for a 4 year old and his 2 year old sister—a red and white biplane, suspended on ropes from a wooden frame. You sat in the seat, and used a joystick to swing, back and forth, left and right. We were the envy of the neighborhood. We sure were proud of our dad!

Later all the kids came over to the house, and my parents performed a puppet show—with homemade puppets. We used those puppets until they wore out, threadbare and well loved.

I don’t remember many other Christmases. I remember the family get-togethers, but not so much what I opened. The stuff we received didn’t really mean much to us after a while, I guess. But that Christmas 30 years ago still sticks in my mind. It wasn’t the stuff we got, so much as the love that it represented.

When I think about the plastic and hi-tech toys that most kids will open this Christmas I wonder how many will remember what they received in 30 years. Do such gifts communicate love in the way the swing and puppets did for my sister and me? Those gifts clearly were not from Santa (I never understood why anyone would want to give him all the credit, anyway), they were from the heart.

I hope I can do that for my kids...

»plink« · December 24, 2002

3 legged stool

It has been pointed out to me that the reverse chronological ordering of blog posts (combined with the haphazard way this month’s posts rolled off my keyboard) has made what could be a potentially useful resource something only slightly more intuitive than a hodgepodge of links. I didn’t really plan what turned into a series on standards, it just sort of worked out that way.

So I decided to formalize things a bit, and combine the posts into something of an article. As I attempted to tie things together, I found some additional resources and links to include as well. It finds a permanent home at Real World Style: The World Wide Web, a three legged stool...

»plink« · December 23, 2002

The DOM, holding it all together

Many of you probably thought that this should be the third leg of the stool. And there are good arguments for this. I prefer to think of the DOM as the cross pieces between the legs that keep them from flying out away from each other, and the stool from collapsing.

The Document Object Model

More than just an outline of your page, the DOM is a Model of the Document that is used to create the web page. Each element, or Object on your page is modelled, typically in a tree that examines the relationships between these objects. It identifies these relationships in terms of ancestry, parent-child, and siblings.

This is much more powerful than a simple outline, as each element can be described and identified, and manipulated. The DOM works with correctly structured XHTML and valid CSS rules to render the page. But you can also use scripting to manipulate any element on the page, changing it, adding or subtracting content and/or style, as long as it all remains valid.

What about accessibility?

The DOM allows a program to quickly find all the links in a page, or all the level 1 headings. It can extract all the lists, or even all the ordered lists. It can build a simple outline of the page. As far as I know current accessibility tools, such as screen readers, do not take advantage of the DOM to get these types of information, but they could.

Many sites feature DOM based style sheet switchers that allow you to choose a site wide style that fits your needs as a user. Some of these switchers allow for completely different styles to be applied to a site, and others simply offer the ability to change your font size.

So you can see that the DOM is really not a supporting leg, but what ties all the other technologies together.

Validate!

I can’t emphasize enough the importance of properly marked up pages and style sheets, and while we’re at it, correctly implemented accessibility hooks. So I might as well link to the validators again:

(X)HTML Validator
CSS Validator
Bobby, accessibility validator
WAVE, accessibility validator

»plink« · December 19, 2002

Accessibility, the third leg

By now you’ve realized that the platform of the stool is the Web. And you are probably surprised that I am calling Accessibility the third leg, after XHTML and CSS. You probably had something else in mind, but I’ll get to that tomorrow.

Not just a good idea

Accessibility is now the law for a great many sites. The courts are still determining exactly how the law will affect general web sites, but it is fairly certain that if you would be required to have a wheelchair accessible physical presence, your internet presence is going to have to be accessible as well.

But this is a good thing. If your site is more accessible to those with disabilities, it is really more accessible to everyone. And it really isn’t all that difficult to work into your current deign flow. The key is to make your sites accessible up front rather than trying to retrofit them later.

But How?

The good news is there are resources that will help. Ian Lloyd’s accessify.com keeps tabs on accessibility in the news and offers some excellent tools for helping you create accessible tables, forms and more.

Mark Pilgrim’s Dive Into Accessibility originally ran as a 30 day tutorial on creating amore accessible weblog. Now at it’s own domain, it is the most comprehensive and practical accessibility tutorial that I am aware of on the Web.

WebAIM is chock full of resources for the web designer who wants to do right by accessibility. And then there is Bobby and the WAVE, accessibility validators that will help you as you are creating your sites.

And you don’t want to miss the Slashdot interview with Joe Clark. Joe has written a critically acclaimed book on the subject, and is serializing it on the web. So far you can read the introduction and first chapter...

Addendum

Tantek shows you how to tie CSS and (X)HTML together in a meaningful and richly semantic way. See also Environmental Style at Real World Style for more on the subject...

»plink« · December 18, 2002

XHTML, the second leg

Well, it’s really the first leg of the stool, but I’ve already discussed CSS...

In order for CSS to work you really need a well structured document to style. XHTML provides that structure. And the good news about XHTML is that it can be read and understood by browsers back before even NN4.

What is XHTML?

XHTML is a reformulation of HTML in XML. It is much more structured and less tolerant of invalid code. In fact, if you write valid XHTML, the browsers will assume you know what you are doing, and render things according to their strictest understanding of the standards.

It’s not as scary as it sounds. And since it’s really still HTML at its heart, it isn’t that hard to adapt to. Rather than rehash the helpful sites that are already out there, I’ll point you to them and let you discover just how easy it really is.

Jeffrey Zeldman has written an excellent article at A List Apart that will show you how to convert your HTML documents (or workflow) into XHTML. Also at A List Apart, Carrie Bickner shows you how to make Dreamweaver 4 give you valid XHTML. It’s worth a look even if you are using the Dreamweaver MX. And, for a good overview of how XHTML fits into a site’s style guide, check out the New York Public Library’s Style Guide section on XHTML.

Tomorrow

The third leg of the stool...

»plink« · December 17, 2002

CSS: back to the basics—a fresh look

It's easy to get bogged down in doing the really complicated stuff, having fun pushing the edge of what is possible. Sometimes you need to take a step back and look at what you can do on a smaller scale. These things will often, in the end, have a greater impact on your site than a cutting edge design.

So today I offer a quick tutorial/idea generator from Christopher Schmitt. He discusses 15 ways to use CSS on your headlines to make them stand out and pull readers through your site. If you like what he offers in the article, take a look at his book site, which has a file containing 50 similar design ideas.

In the same vein, I'd like to point you to another tutorial that examines the several properties in CSS that allow for a certain shorthand when writing rules in your style sheet: Introduction to CSS shorthand properties, from Ove Klykken.

»plink« · December 12, 2002

CSS and NN4

This blog is my playground. It doesn’t work right in Opera, or IE6 for Windows. IE5 Mac gets it almost right, and Gecko based browsers such as Netscape 7, Mozilla and Chimera do the best job. But I don’t really care that much since the content is available to anyone who cares to stop by, including those who use version 4.x of Netscape.

Now at work I have to cater to Netscape 4 users. And most of them are using it on a Unix box. So, I have a number of tricks that I have developed and honed for these users. Many of these I share at Real World Style. But there are some things that NN4 just cannot handle. Like this blog, for instance. Fortunately there are ways to hide CSS from NN4 and other browsers.

Hiding CSS from browsers

Johannes Koch has put together a great resource outlining ways to hide CSS from browsers. Unfortunately his employer is ceasing operations at the end of the year, and his resource may be going away then as well.

Kevin Smith has also collated a number of CSS Filters, as he calls them, that allow you to hide problematic CSS from specific browsers.

NN4 specific issues

Now that you know how to hide CSS from NN4, you’ll need to know what CSS to hide. Perhaps easier is laying out what works with NN4. Bob Sawyer has kindly outlined the CSS that NN4 can handle. Trying anything else with this years old browser is risky.

What about other browsers?

You might also be interested in taking a look at a couple of CSS browser compatibility charts. One from WestCiv and the other from Web Review. Helpful in deciding what level of support you want to provide various browsers.

The above charts pretty much cover CSS1. CSS2 is a whole ‘nother world. There is so much interaction between CSS rules that can take place now that don’t particularly lend themselves to nice and neat charts. So Big John has stepped in and created a CSS bug ring - a loosely organized group of web designers who document and demonstrate a variety of bugs. These sites are a good place to check when you encounter strange behavior in a given browser.

Another thing to be aware of is that the latest browser versions are implementing web sites in one of two (or three) modes depending on how they are coded. If the browser contains a fully qualified Doctype, then browsers will use Strict or Standards mode. If not, then, depending on the browser, at some point it will enter a Quirks mode. Each browser has created its own set of rules for invoking these modes, and they will affect the way your carefully crafted CSS is interpreted.

Knowing all this is why we get paid the (big) bucks...

»plink« · December 11, 2002

A family of geeks

I think I may have mentioned before that we home school our three girls. This allows us to be rather flexible with our schedules, with schooling taking place at all hours of the day, and throughout the year.

For example, last month when I spoke in Boston, I took our oldest daughter along with my wife. This was the ultimate in field trips, as you can imagine.

We spent one day at the Museum of Science, and in the Mathematics section was an exhibit that featured a life size photo of a young boy. Above his photo was the same photo, but scaled down so that it was half the original height. If you continue to stack these photos on top of each other, each time scaling them to half the previous height, you will never go higher than twice the height of the original photo.

This can be a difficult concept to grasp, especially when it is just described as I have done above. So last night we were eating dinner, and I absentmindedly tore my tortilla in half, and inspiration struck.

If I lay that half a tortilla on a whole tortilla, I still have half in my hand. Tearing that in half, I can place it next to the half already on the plate. I still have a quarter of the tortilla in my hand. If I continue this process, and was able to tear each piece exactly in half, and continue to accurately tear each piece in half an infinite number of times, I would never create an entire tortilla, since I would always have a(n infinitely) small piece of tortilla left in my hands. And that is why you would never get higher than twice height of the original photo at the museum.

Of course I had to share this insight with my family, immediately prompting my wife to do some math with our almost six year old. My wife held up the bowl of cheese and told out daughter that there were five pieces of cheese in the bowl. After removing two she asked how many were left in the bowl. After a second or two of thought, our daughter answered, “three.”

Our daughter then proceeded to tell us the mathematical equation (with some prompting from her mom) that explained the “problem” she was given. After some similar byplay our ten year old announced, “Family fun with the Newhouses!”

What’s mealtime like at your house?

»plink« · December 10, 2002

Email lists

Often better than books, email lists can be an invaluable resource when you find yourself up against a difficult task. There are lists for about any topic you might have an interest in, but I'll be focussing on three that deal with three different aspects of web design.

In general

Webdesign-L is an advanced, high traffic list, covering all aspects of web design. At any given time there may be threads on topics as diverse as back end programming (PHP, asp, perl, java, and others), CSS, and the vagaries of the XHTML 2.0 spec, not to mention a site check request or three. If that sounds exciting to you, you are probably already a member. If you don't think you can handle the extra 30-70 emails a day, sign up for the digest...

Arbiters of Style

CSS-discuss has just found a new home, and hasn't slowed down any. This is another high traffic list, but devoted entirely to the practicalities of CSS. Moderated by none other than Eric Meyer, this is a very valuable tool for anyone who has decided to jump into the pool known as table free design. Again, consider the digest if you aren't accustomed to an extra 30-70 emails in your inbox each day...

Keeping accessibility in mind

Does your place of employment have a ramp for wheelchair-bound employees? How about large stalls with grab rails in the restrooms? Does your web site have the equivalent, or are you still locking out a sizeable number of surfers due to an inaccessible site? It doesn't have to be that way. While no site is perfect (yet), there are techniques that can be built into your work flow that will allow for a more accessible web site, without sacrificing the style and flair your site already has. And there is a friendly group of folks out there who are dealing with this on a day to day basis, and are willing to share what they know. The Web Accessibility Forum is not nearly as prolific as the other two I mentioned, but they are no less helpful...

»plink« · December 9, 2002

Add WAVE (3.0 Alpha)

It figures. I finally link to the WAVE accessibility validator and they decide to release a new version. It has been taken over by the Web Accessibility In Mind (WebAIM), and now resides on their servers. Though still in alpha, version three is more robust than version 2.01 that I linked to last week, and continues to be updated. And it also includes a bookmarklet for one-click accessibility validation...

»plink« · December 9, 2002

Developer tools

A frequently asked question on the CSS design list I am on goes something like this:

“My style sheet isn’t showing up in Netscape/Mozilla when I upload it to the server. All other browsers seem to be able to find it, and when I view it locally with Netscape/Mozilla, I am having no problems. What gives?”

What gives, is that their server is serving CSS as something other than type="text/css". To check how your server is serving your CSS files, use Mozilla's web sniffer. Simply enter the URL of your CSS file into the search box on the page and it will tell you what content-type (those are the key words to look for in the results) your server is sending the file as. If that turns out to be anything other than text/css, then you need to fix it.

If you are able to modify (or create) an .htaccess file for your site, simply include the line:
AddType text/css .css

If you don’t have that ability, contact your server’s administrator and have him or her make the change. They really should do that anyway.

But wait, there’s more

On the issue of accessibility, many are aware of Bobby, the accessibility validator. While certainly the most popular such validator, I have found Temple University’s WAVE to be better, providing clearer feedback than Bobby. And it comes with a handy bookmarklet. Simply drag the following link to your tool bar and you'll have one-click accessibility feedback for any page on the internet! WAVE 2.01

Neither validator is perfect. So use them both!

On the subject of validators

The W3 has updated their (X)HTML validator, and you should also validate your CSS. I have found that fixing any errors in my page that these validators find will often fix any problems I might have been having. They don’t always explain things super clearly, but they can at least get you pointed in the right direction. And Tantek Çelik has created some favelets that let you do one click validation, as well as other cool things, like toggling the CSS on any page, or viewing it in a new window.

»plink« · December 5, 2002

Why I won’t be writing a book any time soon

Nick points to this essay that explains why most computer books don’t give you what you want. What interested me was the fact that computer book authors, by and large, lose 3-6 months of their lives, with very little return on that investment. Much as I enjoy writing, I’m not in any position to take a leave of absence from my life, just to get published. I’ll stick to the online world of writing for now.

»plink« · December 3, 2002