Doug Bowman's Throwing Tables Out the Window is required reading for all web designers and developers. I'm still seeing designs that use the occasional table or two for presentation. Yes, the markup may be valid, but it's not semantic. Here's a short snippet from the article that reminded me of a recent conversation:
The frequent reason we hear cited for dropping support for other browsers is that MSIE/Win is THE browser used by a MAJORITY of people, and that it takes TOO LONG to develop for (and render properly in) any other browsers. Others complain that development for browsers other than IE/Win is TOO EXPENSIVE.
Both the too long and too expensive claims are false.
Had a quick IM conversation this morning with Dunstan about designing new markup languages for the Web, and I realized there are two rules nearly every XML language inventor seems to break:
Specifically, work hard to reuse semantic elements from XHTML Modularization rather than making up new names for the same thing. XML architects and academics seem to love reinventing semantic wheels. Insert NIH ignorance/arrogance/conspiracy theories.
E.g. for text that a person is likely to be expected to read or write, such as a name or a description, put it inside a tag, like
<person>Tantek</person>
Whereas code-like things like URLs should go into attributes, e.g.
<person href="http://tantek.com/">Tantek</person>
Any programmer knows there is no hard and fast line between human and machine information, just listen to the gibberish that us technical types speak at conferences, and note that URLs are advertised on billboards and TV. However, if you think about it, information of any kind is typically biased more towards human or machine consumption and production.
Another useful way to distinguish information that is more human than machine is to ask if it will be translated into another human language. Human language words that are used in code, like the types of inputs, class names, or CSS properties and values, are not translated, whereas the text that users view, like labels and help text, is translated.
Note that HTML breaks the second rule in several places, like by placing human readable text into the 'alt' and 'title' attributes. Nobody said (X)HTML was perfect — it's pretty good however, and has avoided and overcome lots of mistakes that other markup languages made before it. Also, at least for that 'alt' attribute on the empty <img> tag, there is the alternative (so to speak) of using the <object> tag which can actually contain the alternative text.
I wanted to at least jot down these quick notes for now. Hopefully I'll write up a more thorough essay at some point with detailed explanations and examples of good/bad markup language design. Or perhaps I'll leave the good/bad examples as an exercise for the reader.
Or to put it another way:
I'm happy to announce not one but two new releases from Technorati:
As announced just five days ago by CNN:
"BlogWatch" - CNN.com's up-to-the-moment review of numerous Web logs covering the convention marks a first for convention coverage using Technorati, the leading monitor of blogs.
And politics.technorati.com is Technorati's dedicated site for now providing a real time up to date view of what political bloggers are saying about Democratic National Convention.
Having now completed my first professional redesign, working with legacy content, scripts etc., let me first say that I have a lot more appreciation for what professional web developers go through every day in their efforts to produce semantically clean markup and simple but pleasing style sheets, while still meeting deadlines, and demands from marketing etc.
The great folks at Adaptive Path (AP) had already provided us with a handful of very nice visual design components (before CNN called) — in fact a whole new site design, which unfortunately we didn't have the time to implement. Being fairly familiar with the current Technorati site, I was able to reassemble the visual components in such a way as to minimally impact the navigational structure, make usability improvements, clean up the overall look, and making a number of key bug fixes (profile images are no longer squished!) — all to the structure of the current site.
By rewriting the vast majority of the markup (both from the old Technorati site, and the mockups from AP), I was able to simultaneously reduce the size of the HTML, while significantly increasing its semantic fidelity.
The result: I cut the size of Technorati's home page in half, made Valid XHTML, with style sheet that is Valid CSS. (Nevermind that the W3C CSS Validator is buggy in that it incorrectly labels the page as invalid due to the validator's failure to parse the perfectly valid media attribute value screen,projection).
Side note: In the process of fixing the styles to work across various modern browsers, I encountered many bugs I had to workaround: several in IE6/Windows (lots of off by a pixel or two bugs), a few in IE5/Mac and Safari, and none in MSN/Mac nor Firefox/Mozilla.
The style sheet is still not as small nor as optimal as I'd like it to be, and still contains too many inline hacks — ideally such hacks should be isolated into separate files. And similarly, you might find that some of the pages on the site with generated content won't validate (or could still use some markup improvements, an inevitability when hard deadlines must be met). Feel free to point out such problems or suggested improvements, and I'll see how fast I can turn them around in order to make the pages as fully compliant with web standards as possible.
P.S. Since it is built with semantic XHTML, Technorati.com does not block any browsers — try it with Lynx or a Hiptop for example. However, the style sheets are withheld from v4 and under desktop browsers, and I'm considering withholding them from IE5.x/Windows browsers as well if those browsers end up mangling the styles too much.
For now however, I'm just incredibly thrilled with what I helped design, build, and deploy in my first two weeks at Technorati.
Anne, you miss the point. Backwards compatibility is not the point. Browser compatibility is the point. Which means newer browsers have just as much weight (if not more) than old abandoned browsers. Every day there are fewer and fewer users using Netscape 4 which only supports a subset of HTML 3.2, and every day there are more and more users using cell phones, TV set top boxes, handhelds etc. with browsers that only directly support some version of XHTML and don't support tag soup (thus depending on a slow and not necessarily reliable proxy (if they have one at all) to translate soup to valid markup).
And secondly that whole "NET" feature in HTML4 thing from Ian Hickson is a trivial red herring, and he knows it because I told him so when he brought it up over a year ago.
Eric Meyer recently wrote some tips for using the (X)HTML 'class' attribute.
When I read it I added a comment, and later realized that I should really just post what I wrote:
A good rule of thumb to help remember how and why to avoid classes that are:
useless and simply bloating the page weight
is:
Context before class
Another good rule of thumb (which I need to add to a pending update to “A Touch of Class“) is:
Class for meaning, not for show
I’ve seen far too many class attributes recently (from folks who should know better) like:
class='black',class='grey',class='clear'with respective rules like:
.black { color:#000; }
.grey { color: #999; }
.clear { clear:both; }Such presentational class names are not much (if at all) better than presentational attributes like:
color='black',color='grey',clear='all'It may require a bit more analysis, but it is always better to think of class names that represent the meaning/function of the specific element(s) rather than what happens to be their current presentation. That way when their presentation changes (as it inevitably does), or alternative presentations are designed for additional media types or devices, you avoid such confusing style rules like:
.black { color:navy; }
I have been a happy Feedster user for quite some time now. I've been impressed by the speed of their searches, not to mention their site stability.
However, Feedster was updated recently, and as a part of their update, they apparently decided to be inaccessible to IE/Mac users, and therefore they've lost at least one user.
I don't mean that their website breaks in IE5/Mac, I mean they literally send IE/Mac users a rejection page (Feedster in IE5/Mac screenshot 20040715):
Hi,
We hate to do this to you but if you want to use Feedster, you're going to need to update your browser to Safari, FireFox or another more modern browser. Internet Explorer on the Macintosh hasn't been updated now in years and we want to deliver you the best possible experience. We know updating a browser is just plain annoying but we also know that the newer browsers just plain work better and you'll probably be much happier.
I was going to say something about all the features in IE5/Mac (Web Scrapbook etc.) that no other browser has yet copied, but I decided to save that for another post.
Of course if you're running OS9 (say, for example, if you're using a Mac that just either won't run OSX or doesn't have enough memory of CPU power to make OSX usable), IE5/Mac is still your best choice — those other choices either don't exist or exist only in abandoned versions far shy of IE5/Mac's capabilities.
But nevermind that.
I can understand if a company or service wants to focus their creative visual energies in such a way as to only work in a browser or two.
But if said company actually authors their pages properly, they separate their semantic markup from their presentational styles, at which point, they can choose to filter out style sheets from browsers that are unable to handle them.
However, it is never right to just reject one or more particular browsers and send an insincere apology.
If you write proper semantic markup, you should be able to send it to any browser and have it work. It might not look the prettiest, but at least it will work, and will likely even be accessible.
Disclosures: I used to work on IE/Mac, and now (for four days even) I work at Technorati.
Related:
Update: less than a day after I posted this, Feedster has stopped rejecting IE5/Mac. Yay for Feedster!
Matt, from the contents of your recent post, either you didn't read my entire post, or misinterpreted it to the point of misparaphrasing what I said. Re-read my post. Key points:
Much of this reasoning was originally put forth by the Web Standards Project's Browser Upgrade Campaign, which was unfortunately seen by some as a justification to redirect certain browsers (another form of rejection), rather than properly serving a simple semantic (X)HTML page.
Join norcal DJ and Music Production Academy students with instructor DJ Amber in a special in-club student showcase, featuring short sets from graduating students.
Sublounge (628 20th Street @ 3rd st. in SF), from 8pm - 10pm. 21+, no cover.
Today was my first day at Technorati. All setup with mail, wiki etc. Several engaging discussions. Darn OSX and printer drivers. The Ramp for lunch (thanks David!). Farleys for coffee. Did I mention the incredible team? Lots to learn and even more to do. After all, Technorati is tracking over 3 million blogs with no end in sight.
Molly Holzschlag expands the discussion with several rhetorical questions, and numerous people chimed in on the comments. There is at least one expression in the comments that I think requires a closer examination and critique:
why the CSS Gurus Club often seem like a (White) Boys' Club
.
In my humble opinion, that phrase, and others nearby contain several flaws:
Doug Bowman eloquently summarizes current threads and offers some heartfelt insight on a sensitive topic that seems to keep coming back. I can't say I found anything with Doug's post to disagree with.
In an attempt to add another angle or axis to the discussion, I'll ask the question: There is a site called Flash Goddess (flashgoddess.com), and there is also a site called Scriptygoddess (scriptygoddess.com) (thanks to Matt for reminding me), so why is there no similar/parallel site "CSS Design Goddess" (Looks like both cssgoddess.com and cssdesigngoddess.com are available domains)? And I specifically say design because that seems an integral part of this conversation. For example I consider myself a web standards expert, but certainly not a web design expert. There are people who are both, the obvious are of course the aforementioned Bowman, and Jeffrey Zeldman, but just teaching yourself CSS does not automatically make you an expert at visual design, and that's the kind of combined skillset that my question is referring to.
Well let's see if my question helps the discussion or just causes a bunch of heat, but then again, sometimes a little heat can have good secondary effects.
There are have been many many attempts at contact managers or services to distribute updates of contact information. Most of them seem to just annoyingly spam all your contacts, thus acting somewhat in an anti-viral fashion: they make you upset at the company/brand/service and the person using them/it <cough>Plaxo</cough>.
That's not what I'm looking for.
I'm specifically looking for a way (perhaps start with a protocol) for notifying one's contacts that a piece of information that they have about you, that used to be valid, is no longer valid.
I know the canned answer. Just send them the "updated" version of that information. E.g. if your work phone changes, then send them your new work phone number.
This implied obsolescence by updating doesn't work for several reasons:
This feels like a problem that should have already been solved, so I call upon folks to point out current solutions.
The requirements are pretty simple:
I'd prefer peer to peer (either directly or through a store and forward mechanism like email), but server based might be ok as well.
User A should be able to broadcast to a set of other users, the fact that a certain piece of information (such as a phone number or email address) should no longer be associated with user A, and that they (the other users) should delete that information from their address books / cell phones etc.
An address book application that supported such a protocol should not only allow automatic broadcast of such deletions to one's contacts (or a subset thereof, perhaps filtered via XFN relationships), it should also allow automatic updates from one's contacts (or a subset thereof, again perhaps using XFN relationships as a filter). Depending on preferences, such deletion/obsolescence updates could result in one of the following:
This last option would be my default setting. Why might you want this? Easy example 1: what if you want to reference an old (like last month's) phone bill and look up a number and see who it belonged to at the time of the call? Easy example 2: email archives — what if you want to check to see who an email address belonged to when an email from the address was sent rather than when you happen to be reading it sometime later?
Right now I'm doing this (logging obsolete contact information) by hand in my current address book application in a "history" field, but I could easily see adding both some user interface, and some protocol listening to do it (semi-)automatically.
I realized another assumption that the protocol must deal with. Contact asymmetry. I.e. not everyone in my address book has me in their address book and vice versa. I've given out business cards during my previous job to hundreds (probably more like thousands) of people, and I have no idea who that exact set of people are.
Thus in addition to a protocol, there needs to be an open data format to publish said obsolete contact information (the anti-vCard format?) in a public place that has some sort of datetime stamp (say, like a blog) in such a way that anyone searching for a person's contact information (or perhaps even attempting to verify it) could discover that it was now obsolete.
Spiders (e.g. search engines) could even index such obsoleted information for quick perusal. Even better would be a notification based indexing service that you could ping with a URL to a blog entry with the obsoleted information and have the service parse said abovementioned open data format and present it in a more intelligent and useful manner.
Hmmm....
Well, until such formats/protocols are proposed, here is a rough attempt at a starting point. Simply use a <del> element with class="obsolete" that contains a <dl> with the obsolete information (and yes, for simplicity (and authority), the "user" is implied by the current URL,
just like it is with XFN ). View source to see the example code.
Matt has finally (like I'm one to talk) posted his photos from his last day in SF during his recent visit.
The number 1 650 693 3910 and the address tantekc@microsoft.com are no longer in service, please remove them from your records.
beeeeeeeep
Today was my last day at Microsoft. In many ways it was more difficult than I anticipated. At my going away lunch I was reminded of how many great people I've had the chance to work with during my 7+ years at Microsoft. I know I'm doing the right thing, and yet I couldn't help but feel a sense of sadness.
In addition to being my last day as a Microsoft employee, it was also my last day as an owner of a TRON standup video arcade game machine. This afternoon I donated my TRON machine to the BOLT folks, who came by and picked it up in a rented moving van. I've owned that TRON machine for 15 years. During that time I've had it in two dorm rooms, several different office buildings, and a few storage closets and garages. But now it has a found a home with enthusiasts who will take care of it, keep it in good shape, and hopefully exhibit it to the public once in a while so everyone can appreciate a piece of technology that was.
Finally, it is only appropriate for me to share in the introduction of another CSS example: the IE5/Mac band pass filter.
/*\*//*/@import "ie5macbandpass.css";/**/
I created this filter at the request of Doug Bowman, who has written both a good explanation of the filter, and a blog post introducing it.
thedjlist.com holds a monthly poll on favorite DJs. Let's see if we can get Amber into their list of top 50 DJs. It only takes a few seconds to join (I have yet to receive any annoying email from these folks). And then go vote for Amber. Thank you for your support.
Amber and I tried to have breakfast at the Canvas around 2pm today (I really wanted one of their oversized Belgian waffles), but were disappointed when they told us they stop making breakfast at 1:30pm. Of course this isn't written anywhere on their menus or anywhere else I can see. So we settled for a shared muffin, slice of toffee coffeecake, and bowl of corn chowder.
Doug, Dunstan and I just had a long conversation on blog markup and lists and headings etc. I've been thinking of changing my blog markup for a while now. I decided to eliminate one more level of list markup in my blog, since it made less and less sense to me for a day to contain all the blog posts for that day, and that it was better to simply have a flat list of blog entries, ordered by when they were posted, and to indicate the date similarly to the time, as a heading inside the specific blog post.
The only controversial detail to my blog markup change is that I'm only including the h2 for the date in the most recent blog post on that date. Typically I seem to only post one blog entry per day, and thus each blog post will have the h2 for the date and the h3 for the time. I'll see how it looks and feels if/when I next post multiple entries in a day.
For now, view source to see what I'm talking about, and compare the markup to previous version.
We figured it would be an appropriate day to see a matinee of Fahrenheit 9/11, and apparently so did a lot of other people, because the theater was sold out by the time we got there.
Instead we explored the surrounding West Portal neighborhood by foot which was quite nice.
Drove down to Palo Alto to pick up dessert for the BBQ later that afternoon. Parked at one end of the University Ave. shopping strip and walked to the other. Bought a couple of pies (blueberry and raspberry+peach) from the Peninsula Fountain & Creamery and drove to Aytek & Steve's place.
The BBQ was delicious. Orange roughy fish with salad and zeytinyalı fasulye on the side. Even the steak and chicken that other folks were having looked good. Then we brought out dessert. Those were the best store bought pies I've ever tasted. My mom said that pies bake better in glass dishes (which is what Peninsula Creamery used) than in the usual aluminum tins that come with purchased pies.
Amber and I left for SF a little after 8pm and 101 was a mess so we switched to 280 and found ourselves still on the freeway when the fireworks shows started at 9pm. Apparently we didn't miss much because most of the city was fogged in. After catching a "summary" of the fireworks on TV (like the first time I've watched actual TV in several months at least), we decided to watch another movie that was appropriate for the day: The People vs. Larry Flynt.
Very late notice, but if you're in SF and want an excuse to go out tonight, stop by 1015 Folsom (both the name of the club and its address) between 10 and 11pm where Amber will be spinning in the front room.
© 1996-2004, Tantek Çelik, All Rights Reserved.
Comments