Going crazy with CSS, Craig said it looks like a crayon factory exploded. 🙂 I think it gets the point across: With a little CSS you can do anything. (But that doesn’t mean that you should.)
Category Archives: Web Standards
Mac IE 5 Support Worth It?
In Joining the Dark Side -OR- Is Mac IE 5 Support Worth $1,500, Scott responds to Tantek’s calling out of the new Feedster’s lack of support for Mac IE. Personally I’m sympathetic to Feedster’s case because I’ve had to spend hours talking to someone with a Mac trying to debug Mac IE issues with this site and wordpress.org and ended up having to change my favorite list menu technique from using floats to display: inline, which meant changing all the other menu styles to compensate. It was a pain.
I know that when I’m tweaking and checking things in different browsers, the number of my audience who uses that browser isn’t always the most important thing. In the previous case the only Mac IE I had heard anything from since both of the sites started was Tantek, and that was important enough to spend a couple hours of my time on. Imagine if you’re doing a job and the client’s boss uses Netscape 4, (god help you and) suddenly that browser becomes much more important in your testing, and you should triple your rate.
However, is this something the Web Standards Project should be interested in the same way we have been All Music or Odeon? I don’t speak for anyone but myself, but in my opinion it’s not the same at all. Feedster’s pages are a few trivial mistakes away from valid XHTML 1.1 and valid CSS, which is no easy task. (MIME issues aside.) Of course they should fix those mistakes, but it is a matter of a few minutes rather than 1-1.5 days. They aren’t writing to one browser or propietary technologies, they’re writing to modern standards and excluding browsers that have serious flaws in that area. Is that so different from the browser upgrade campaign?
From a user experience point of view, excluding Mac IE users might be a good idea as well. If Feedster allowed Mac IE users to visit and they saw a messed up layout (or no layout at all), as Tantek has suggested, then their perception of the Feedster brand, reliability, and image would be negative. I bet Keith would have some great thoughts on this. If they’re given a message that the site doesn’t support Mac IE, (honestly) they’ve probably seen this before and will just switch to another browser for that site. In my experience Mac users tend to be total browser flirts, and have every browser you’ve ever heard of installed. I would rather they open up my site in Safari or Firefox.
If Tantek was here I imagine he would counter that those browser options are really only valid for users on OS X, and that ignores hundreds of iMacs and such in libraries and such. Of course the question that a site owner needs to ask himself then is that in terms of costs and benefits, does that half of a single percent audience in libraries on older computers overlap with the audience you’re targetting with your site? If I was doing an ecommerce selling something like BMW accessories, I wouldn’t even give it a second thought. This isn’t about the many innovations that Mac IE introduced or its excellent standards support for its time, the issue is where Mac IE stands today.
On the bright side, Feedster has characterized this as a business cost/benefit decision and said if anyone sends them Mac IE CSS they’ll use it, which seems like a good concession. Of course I think Feedster should support Mac IE, and a day and a half to add support seems a little high, but if they choose not to I can understand.
W3C Weblogs
Karl Dubost asks about weblogs by W3C team members. Can blogging bring the W3C back to relevancy? (Notice any similarities about the three weblogs he links? 🙂 )
Jeremy’s Comments
Jeremy’s comment policy, #4 (don’t provide a URI to a non-weblog site) site is something that has always bugged me but I’ve never pinned down. I’ve had a fellow weblogger comment with his URI as his business site instead of his weblog before, presumably to help generate inbound links. Generally in these cases I nuke the URI but leave the comment.
Super-Efficient Image Rollovers
Super-Efficient Image Rollovers using javascript. This seems to be the JS predecessor to Pixy’s CSS-only fast rollovers.
Between the Lines
Between the Lines is the ZDNet blog. Looks like WordPress to me. 🙂 (By the way, that page isn’t far from validation. It’s mostly pretty nice markup. Must be a staging area, because the main site has markup straight out of the 90s.)
Matt May on SVG
Matt May on Implementing SVG: “Hyatt is, of course, neglecting to mention that, alongside the KHTML engine Safari is based on, there is a KSVG engine. They wouldn’t have to reinvent the wheel to use that any more than they did to integrate KHTML.” My impression is they’ve put a lot of work into KHTML, but the point stands. Even a subset of SVG would be immmediately useful.
mod_validator
mod_validator offers several advantages to the W3C validator. Worth checking out if you run Apache 2.0.
Structural Naming
Eric on structural class names again, but my question is whether or not semantics belong in class in the first place? No matter how you cut it, divs and spans are still the semantic duct tape of the web, and it seems like a better solution would be a richer array of semantic elements available in a way that’s backwards compatible with current HTML. (Not XHTML 2.0.)
CSS UI
Simon says “Maybe a friendly UI on top of the custom per-site stylesheet would help though” A fantastic idea.
March
The part of this essay not about deliberately invalidating every page on your site is good.
WaSP Survey
Take the WaSP web survey, because your opinion will make a difference to what the organization does in the future.
XHTML
Why XHTML, a classic from Tantek.
Standards Police
The Standards Police, I think Keith is totally off here, as I began to express in Dave’s comments. A laissez-faire approach to compliance isn’t helping anyone. Someone needs to set an example, and if it’s not these guys who will? Jeffrey and Doug, each with no small amount of content on their site, seem to have no problem keeping things compliant. Neither does Eric, Tantek, Joe, Lars, Anne, Mark, just to name a few. Don’t tell me “validation is very hard and takes quite a bit of effort.” That’s a weak cop-out. Accessibility is very hard, design is very hard, music is very hard, driving in between the lines is very hard. If you don’t want to make the effort, then don’t dabble and make flippant comments that hurt the field as a whole and insult the people who work “very hard.”
I’m coming out. This site is to the best of my ability valid XHTML 1.1 sent with the proper MIME to browser that can handle it. Even the photolog, which took me hours and hours of work to get to the point where it is now, and for a long time was far from decent markup. However I am fairly certain that there are some comments (particularly on the mosaic thread, which now has almost a thousand replies) that have broken validation, and though I am very busy I will personally check each of these. WordPress helps a lot. The WordPress site is also XHTML 1.1 with the exception of the forums, which are compliant by default (more hours of work) but which could do a much better job of validation input. These are my weaknesses, out for the world to see. Even though the sites work just fine, and “validation doesn’t pay the bills,” I’m going to devote my time to fixing these problems because how can I presume to be a member of an organization devoted to standards without following them myself?
Update: Pulled and republished.
XML Content Sink
“The XML content sink is non-incremental, so, all XML documents start laying out only after the entire content model has been constructed.” That includes XHTML documents sent with application/xhtml+xml. You just can’t win. Hat tip: Henri Sivonen.
Web Standards ROI
Keith on Web Standards ROI. Show me the money!
Lockergnome Happy Ending
Chris Pirillo has floated another Lockergnome redesign that embraces web standards and looks good to boot. I couldn’t be happier. Here’s Chris’ post on the matter:
Boo-yah! I’m going to keep nagging Jason until he applies this weekend’s test code site-wide. No legacy tags, beyotch! Oh, and… “This Page Is Valid XHTML 1.0 Transitional!” I’m not sure if I wanna play with a fixed-width or stick with the variable. Doesn’t look great on anything less than 1024×768, but those folks are in the minority. Hey, I got it to look fantastic in all the major browsers on all the major platforms – that’s gotta count for something. Props to glish for the guidance. So, what did I use for my editor? Notepad, baby. Metapad, actually (the best clone around). Thanks to everyone else for the virtual ass-kicking; you accelerated the inevitable.
Most of you will be happy that it looks like a page from this century, but I know some of you are wondering about the markup. It’s decent. Eric Meyer actually covered the Lockergnome debacle and their redesign in his part of the panel on CSS and said it suffers from “classitis” — using too many class declarations. Example:
<ul class="menulist">
<li class="menuitem">
<a href="http://www.emtec.com/mailbell/index.html?lgnm" title="POP3/Hotmail and IMAP Email notification and mail preview">Mailbell - be notified about new email</a>
</li>
<li class="menuitem">
<a href="http://www.vypress.com/" title="Instant messaging and conferencing for LAN">Vypress Chat</a>
</li>
<li class="menuitem">
<a href="http://www.emtec.com/pyrobatchftp/index.html?lgnm" title="Perform automated and unattended ftp file transfers via scripts.">PyroBatchFTP - Scripted FTP v2.08</a>
</li>
Instead of explicitly addressing the menuitem class you could just use the CSS selector .menulist li which would apply to all list items under an element with the class of menulist. I forget the name for this type of selector, but it’s the most useful technique I use daily in CSS.
What’s great is now we are discussing what Lockergnome is doing well and how they could tweak it to make it better rather than wondering how the hell they went wrong. I commend the group at Lockergnome for doing the right thing.
Previous articles on the same subject:
- Invalid Gnome — the post that started it all.
- Transitional Layouts — Dave Shea comments.
- Why Go Backwards? — Paul Scrivens comments.
- More on the Gnome Regression
- Almost April — April fools joke?
- Lockergnome Reverts — Simon Willison comments.
- It’s Worse Than You Can Imagine
- Code is Food — 70 comments and counting.
- Lockergnome Critique — From Paul.
Lockergnome Critique
Paul Scrivens has written one of his famous critiques of the Lockergnome redesign. He covers the redesign point by point with far more detail than I have, taking a multidisciplinary approach. He loses his cool at one point, but try to understand this is incredibly frustrating.
What’s strange is there hasn’t been a peep out of Lockergnome regarding any of this. Aren’t they plugged in to customer feedback?I think a simple statement or clarification would do a lot to clear things up. Though in the comments some people have used names of people at Lockergnome, it isn’t at all about that. This is simply a matter of supporting companies and organizations you can respect and routing around ones you can’t.
Code is Food
Even if you normally skip my “geek” entries, please read this.
Scoble sees I’m unsubscribing from Lockergnome and says:
I’m more pragmatic. Can I look at the page in my browser? Can I subscribe to the RSS feeds? If so, why does it matter whether the code underneath was done with tables or CSS? Call me a fool, but I judge web sites by whether or not they have content and experiences that enrich my life, not whether the code underneath them fits my expectations.
Robert isn’t a fool, we obviously have a breakdown in communications though. I can’t understand why anyone wouldn’t be shocked at the code snippet I posted and Robert doesn’t understand why anyone would care. In fact there is probably a large segment of my audience here who doesn’t have a clue why I get so worked up over this stuff. All morning I’ve struggled trying to think of an analogy that captures the essence of what is going on here.
It became more obvious to me that HTML and CSS code and the health of the web has many parallels to the food you eat and the health of your body. HTML is the ingredients and CSS is the world-class chef that takes the ingredients and arranges them in an attractive, delicious way.
So lets take your token bad markup—multiple nested tables for layout, badly nested tags, font tags all over the place—this is McDonald’s. If I’m on a road trip and need a quick bite, I’ll drive through because it’s convenient and ubiquitous. Though it’s obviously bad for you, it’s not going to kill you if you have a Big Mac. However if you try eating it every day, your body revolts and starts to deteriorate rapidly (original article).
Within a few days of beginning his drive-through diet, Spurlock, 33, was vomiting out the window of his car, and doctors who examined him were shocked at how rapidly Spurlock’s entire body deteriorated.
“It was really crazy – my body basically fell apart over the course of 30 days,” Spurlock told The Post.
His liver became toxic, his cholesterol shot up from a low 165 to 230, his libido flagged and he suffered headaches and depression.
I think the Big Mac is a pretty good example of bad ingredients crappily presented. Bad markup and no CSS.
Now lets move away from McDonald’s to a fictional restaurant like McDonald’s but without the nice clown and all the charities. This company has the same sort of mediocre food but also mistreats its workers, has lax sanitation standards, puts farmers out of business, has slow service, and uses slave labor overseas. Now in additional to the health reasons for not eating at this restaurant, you have a number of ethical reasons. Why should you support any restaurant that is so contrary to principles that you believe in?
That is the web. Think of your poor browser, which has to work incredibly hard to try and interpret what is essentially markup gibberish and shape it into something it can present to you. The worse the markup is, the slower the page is going to load and the more likely it won’t be presented as the author intended. RSS and syndication doesn’t do a thing to solve the problem, it just tries to shield you from it. (Let me mess with my RSS 2 feed until its at the markup level of their page, and see if your aggregator even still reads it.) Robert of all people should know that the quality of code on most websites wouldn’t be accepted for a second inside of any of Microsoft’s products. Longhorn is not being built on crappy code held together in an ad-hoc fashion, it’s being built on standards. Why shouldn’t the web expect that same level of robustness?
Sure some people don’t care about whatever markup is behind the web pages they visit. Out of site and out of mind, right? (Very apathetic American.) But I care, and it’s because of people who care that the web has moved beyond the near-unusable mess it was 5-7 years ago. On one level I care about the health of the web, the long-term viability of the sites and pages and documents that are shaping our culture and society. On a deeper level I hold a number of principles that the web should be efficient, standards-based, and accessible. No site is perfect, but some try and some don’t.
Lockergnome regressing from the standards-based is more than just a bad business decision, it is essentially giving the middle finger to the community around the world that cares about these things. Their lack of communication on this issue beyond a few flippant remarks in a newsletter is insulting. They either don’t care or are ignorant, neither of which I’m inclined to tolerate. I’m not even going to address the point, as other have, that they are supposed to have a web development newsletter.
I’m not just unsubscribing, I’m boycotting. There comes a point when you see blatant disrespect for things you care about and you can either sit back and pretend it doesn’t bother you or you can speak out. It’s two different types of people, and if you’re one of the former then you should examine the effects of your apathy.
To recap, Lockergnome just isn’t just serving bad ingredients with bad presentation, they’re the restaurant you visit every day for its great service and food that one day changes into a dive with spoiled food and flies in the kitchen, and then tells you that keeping the place clean is too “fancy-schmancy” and that they don’t need to keep using fresh food because no one will notice anyway and it’s too much trouble. The next day you see them on the news for rat droppings, food at the wrong temperature, and slime in the ice machine.
Of course at some point the analogy breaks down because I don’t know of any food that is incredibly cheap, tastes great, is very healthy, and stays fresh forever without refrigeration. That’s well-formed XHTML and CSS.
So that’s why I care. I don’t expect everyone to care that much, but at least understand why I do.
It’s Worse Than You Can Imagine
At first I was optimistic that the Lockergnome redesign wouldn’t be that terrible, I mean they have smart people there. Then the evidence mounted that there wasn’t going to be any good hybrid approach. Why go backwards? Is it a joke? Is ruining their website some twisted form of RSS evangelism?
Earlier today a comment from Simon said:
Well, the redesign appears to be out now and it�s much worse than I expected – blockquotes for indentation, paragraphs with non-breaking spaces in them for added vertical spacing – tag soup if ever I�ve seen it. Yuck.
He expanded his thoughts illustrated by the code snippet:
<p> </p>
<p> </p>
<table border="0" cellspacing="0" cellpadding="0" width="778"
bgcolor="#FFFFFF">
<tr><td align="left">
<div id="footer">
<blockquote>© 1996-2004, Lockergnome LLC. ISSN: 1095-3965. All
Rights Reserved. Please read our <a href="/about/privacy-policy.phtml">
Privacy Policy</a> and <a href="/about/terms-of-service.phtml">
Terms of Service</a>. Web site hosted by
<a href="http://www.webair.com/cgi-bin/in?51">Webair</a>.
Email newsletters powered by <a href="http://www.whatcounts.com/">WhatCounts</a>.
Domain registered at <a href="https://www.gnomedomains.com/">GnomeDOMAINS</a>.
</blockquote>
</div>
</td></tr></table>
One can only assume that the newsletters will be following suit, and no one wants that kind of filth in their inbox.
All joking aside, I am going to be unsubscribing from all Lockergnome newsletters. I am not under the illusion that my action will be anything more than a number blip to the people there, but principle of the matter is I don’t have a lot of respect for them anymore. How can I take web development news seriously from an organization that is in the wrong decade code-wise? Even worse, they had something great and threw it away. If enough people were to do the same and unusbscribe they might take notice, but I don’t think that’s going to happen.
I might even be forgiving if their markup (which is invisible to the user when it works) devolved but the site was much easier to use or aesthetically pleasing, but the site has degraded in every conceivable way. I decided I could tolerate the design long enough to unsubscribe, but couldn’t even find that on the site. Google brought up a cached page that no longer exists which pointed to the correct URI, which incidentally still has the old design. So if you also disagree with the recent direction things have taken, unsubscribe from Lockergnome.
Looking for something to fill the void? It didn’t come to mind the other day, but I highly recommend the SitePoint newsletters for web development topics. Blogs are also great, but sometimes it’s nice to get something in yoru inbox. I’m open to suggestions for other newsletters.
Update: I’ve written a new entry that explains why I care.