We spent a recent sleepless night discovering Christopher Lydon's weblog and fantastic collection of audio interviews, making aural connections to bloggers we've read for months. We especially enjoyed Christopher's conversations with David Sifry (creator of Technorati) and Doc Searls (Doc's post-interview comments), though we can't say any of the interviews were disappointing.
We don't want to do less reading on the Web, but we would like to do more listening and watching. Thanks, Christopher, for the fantastic project.
Simon Willison has created a prototype signed comments system. Simon's system is theoretically simpler than he admits, though we must reveal that we've been unable to make it work. (From the looks of it, we're not alone. Simon seems to be the only one able to create a signed comment.)
Here's hoping Simon resolves the current issues. His system appears quite useful.
Using Clean URLs
Nathan Ashby-Kuhlman points out that many sites still use complex URLs, despite long-standing, commonsense principles for effective URL design.
We're not exactly batting 1.000 when it comes to good URL design, but we do sport persistent, easy-to-type, short, semi-hackable archive URLs:
dionidium.com/2003/07/00089.html
We're working on making archive URLs look more like this:
dionidium.com/2003/07/outsidePseudoElement
There's really no excuse for ugly URLs.
The Web Standards Project's recent comments on BuyMusic.com's decision to require Internet Explorer for Windows are on the mark. We're not sure why any company would want to lock out potential customers. On the first medium to offer companies nearly unlimited access to nearly anyone, anywhere, some seem intent on imposing their own limitations.
Mailinator
Mailinator offers custom e-mail addresses for disposable correspondence, perfect for providing a throwaway address to the next Web site that forces us to provide an e-mail address.
CSS Play
We recently mentioned Seamus Leahy's fantastic CSS-2 menu. We're now enjoying the rest of Seamus's CSS Play.
Open Source Web Design
Open Source Web Design offers free layouts, searchable by, among other things, W3C standards conformity.
Rounded Corners
CSS-3 provides a border-radius property that will allow designers to create rounded corners, once browsers adopt the spec. Until then, Dave Shea points to several ways to make rounded corners work in today's browsers. Adam Kalsey's rounded corner example is as simple as we're gonna' get, for a while.
Tom Gilder's recent article on CSS3's ::outside pseudo-element makes us anxious for the day CSS3 features will be usable. We'd love to use ::outside to produce our site's border effect, currently only possible using an extraneous, purely presentational div.
Let's first look at the basic structure of this site:
<div id="wrapper">
<div id="main">
<h1>dionidium.com</h1>>
<div id="content"><p>Entries here...</p></div>
<div id="menu"></div>
</div>
</div>
The #wrapper div is structurally unnecessary, there only to create the presentational border in effect on this site. The following CSS creates the border effect:
#wrapper {
position: relative;
margin: 0 8%;
padding: 10px;
color: #000;
background-color: #eee;
border: 1px solid #ccc;
}
The #wrapper div could be entirely eliminated, its style rules transferred to an ::outside element on the #main div.
#main {
position: relative;
margin: 0 8%;
padding: 0 20px 0 0;
color: #000;
background-color: #fcfaed;
border: 1px solid #ccc;
}
#main::outside {
display: block;
border: 10px solid #eee;
}
#main::outside(2) {
display: block;
border: 1px solid #ccc;
}
Why is this better?
#wrapper div does not structurally enhance the document in any way. We should avoid using HTML elements for purely presentational purposes.divs. This is not a practical approach to what should be a simple problem. The ::outside pseudo-element can be used to create as many levels of borders desired, without affecting markup.Remember, this feature is not yet implemented in browsers. Do not attempt using it.
We've acted on our threat to remove the Browser Upgrade Campaign message as it previously existed on this site. Our changes were simple, but we think they make a big difference.
We changed the message to read: "You are viewing the low-tech version of dionidium.com. All site content is accessible to any device."
We feel this message gets right to the point without eliciting the type of negative response a "you-need-to-upgrade" message might.
The second point is the most important, especially for users of mobile devices with small screens. We feel that it's important to have an upgrade message, but not important enough to make it the first thing users see on every page. Note that this approach does little to explain why the user is viewing a low-tech edition, something users may want to know. We recommend linking to a separate document explaining the message, if you feel it's appropriate for your audience.
Unrelated:
Seamus Leahy's CSS2 menu is quite nice, even if it is entirely unusable because -- surprise! -- it doesn't work in IE. (via mezzoblue)
6News Lawrence (Lawrence, Kansas) has launched a simple, attractive weather site using only CSS for layout. Co-creator Adrian Holovaty's writeup is a must-read:
It's proof (we hope) that relatively complex layouts are possible using CSS techniques that are well-supported right now.
We found it particularly interesting that the creators chose not to include a browser-upgrade message for users of older browsers, citing Richard Rutter's analysis of upgrade messages. After re-reading Rutter's comments, we're second-guessing the browser-upgrade message in use at this site. We find it especially troubling that text-only and mobile browsers -- browsers that may support web standards, but choose not to render CSS for obvious reasons -- will still display our message at the top of every page on our site. This type of discussion, once academic in the United States, becomes increasingly important as new web-capable devices gain popularity.
Holovaty exclaims that "CSS techniques" are "well-supported right now." This may be reason enough to dump the browser-upgrade message that's been a part of our sites since almost as early as we first heard about standards. We haven't done it, yet. But our upgrade message's days are numbered.
Tom Gilder's CSS pseudo-element tests (first-line tests; first-letter tests) were created to "inspire browser developers to fully complete their support," but also serve as an excellent resource for designers. We've talked about moving forward with CSS before and hope to see more designers talking about it in the future.
Also of interest, Joe Clark's book "Building Accessible Websites" is now available free online. (via Accessify)
If someone wanted to invent a serendipity machine, it might look a lot like the web.
Recent visitors to this site may have noticed an unintended horizontal scrollbar in IE 6. Simon Willison noticed the same problem on his site earlier this year and traced the problem to italics in blockquotes. John Potter points out that any line ending in italicized text within a block that has either relative margins or a specified padding will surface the bug. Removing italics from text within blockquote and cite solved the problem for us. In testing, removing the padding on the parent block also solved the problem.
To sum up, lines ending in italicized text contained within blocks with relative margins or specified padding will expand the width of their parent block in IE 6. It may seem esoteric, but you'll be glad you read about it first if it ever happens to you.
The application-formerly-known-as the RSS Validator has updated to include support for the format-formerly-known-as Echo.
Now that there's an easy way to validate feeds, an even easier way to create your own -- Tristan Louis's RSS2Necho converter -- and (limited) support for the format -- Jeff Licquia's Echo patch for the Straw news aggregator -- Sam Ruby has every reason to believe we're getting closer to "rough consensus and running code."
We noticed some time ago (completely by accident) that browsers will display more or less of a block's CSS background-image depending on window size, never allowing an image to overflow its containing block. It's a subtle, yet extremely elegant effect, as evidenced by the v-2 Organisation's site. We've also created our own simple example of this technique.
Title Picture accomplishes the same effect (to predictably fine results) on other images (not backgrounds) using the overflow: hidden property. (via Zeldman)
Several webloggers have taken a stab at creating an Echo feed. Examples:
SitePoint's CSS Website Design Competition, inspired by the CSS Zen Garden.
Also:
Expressions is a hosted visual blogging system that makes it easy for anyone to create and maintain their very own photo or visual blog. It has been designed and developed by fellow photographers, artists and bloggers to meet your specific needs.
Mark Pilgrim has removed the link element from his RSS feeds, favoring guid to represent permalinks, the method advocated by Dave Winer. Though this method is technically appropriate it introduces a severe problem.
Many popular aggregators, including NetNewsWire (we've been told) and Syndirella, which are, incidentally, each recommended by Mark, will not display guid content. Mark makes this problem worse by including only excerpts in his feeds. In other words, Mark is sending feeds to users who, if they are using the aggregators he suggests, will receive only summaries of articles they are unable to access. For example, we see only the following in Syndirella for Mark's latest entry:
We've all been guilty of trying to remake RSS in our own image. (642 words).
No link. No real content. We've heard this casually called "less than ideal." Less than ideal? It's unacceptable. We're as interested in conforming to the spirit of standards (and formats) as anyone, but we can't understand why anyone would use a format designed to provide content in such a way that hides content from users.