At which point I discovered that all my WordPress plugins had been deactivated. I know I didn’t do that, so how they all got turned off remains a bit of a mystery to me. I’ve turned all the ones I need back on, and things appear to be back to normal.

So Akismet wasn’t being evaded by the spam: it was simply switched off. Good thing my non-plugin defenses caught everything that poured in during the outage. Which, come to think of it, must all have been direct-submit spam, since there wouldn’t have been a comment form available on the entire site. So what they were really avoiding was my direct-submission defensive plugin, not Akismet.

Well, either way, other defensive measures protected the site, so all’s well there. I’m certainly not thrilled about the site having been largely offlined for a short period, and again, my apologies to anyone who got blocked from information they wanted.

This episode has actually given me cause to reconsider my usual preference to put site navigation at the end of the document source. When the PHP failed, the navigation was never served up. Had I put it at the top of the page, it would’ve been present even though the blog posts were failing. Getting to the static areas of the site would have been possible. Due to my structural choices, a script failure dramatically affected the usability of the site as a whole.

Something worth thinking about as I slowly work on improving the organization of meyerweb.

I was asked in a comment:

What’s your feeling on slashdot being HTML 4.01 (and slightly failing validation) VS XHTML 1.0?

My feeling is good. Why? Let’s take the second part first.

When it comes to HTML versus XHTML, I just do not care. Sure, sure, people will tell you that XHTML is XML so it’s more transformable or something. That’s a very good argument when the XHTML is well-formed and valid. It’s also a very good argument for using HTML when it’s well-formed and valid. Conversely, neither HTML nor XHTML is easily transformed when ill-formed and invalid. This is an experiential point of view, too: I’ve written XSLT (which is itself so tortuous and ugly that it almost by definition cannot be called well-formed) to transform both HTML and XHTML, and the effort is pretty much the same each way—assuming well-formed, valid markup.

So as far as I’m concerned, there’s really no major practical difference between HTML and XHTML. There are plenty of minor practical differences, like having to throw trailing slashes on all your empty elements in XHTML and needing some namespace information. Some people will tell you the whole MIME-type thing is a major practical concern, but I’m just not that much of a purist. Take that for whatever it’s worth.

I mean, imagine a world where Slashdot had used XHTML instead of HTML, and was failing validation. How would that be any better or worse than things are now?

Okay, so that’s the second part. The first part, the failure to validate, is not something I can get too terribly upset about. Slashdot, as a site that accepts ads, is going to get horrible markup shoved into its pages. That’s just the way it is. If you want major sites to be perfectly valid, then in all honesty advertisers are the place to start. So they’re already operating with a major handicap there.

Even if we were to ride our high horses along a very hard line and say that ads are just no excuse, I’d be hard-pressed to fault the job they’ve done. For example, I ran a check on the Slashdot home page. Out of 1,262 lines of code, there were exactly four validation errors, and that’s using HTML 4.01 Strict—you’ll note they bypassed Transitional, which only increases my respect. Three of the errors revolved around an image in a noscript element, and the last was due to the presence of a language attribute on a script element—something they can fix in fifteen seconds, once it gets to the top of the to-do list.

You know what? I’d be ecstatic to have that low a failure rate when launching the markover of an incredibly complex site like Slashdot. Think about all the content they have to manage, stitch together, and offer up. Four errors out of all that dynamically assembled markup? I say somebody should organize them a parade for doing such a good job, and showing that any site can make use of and benefit from standards.

I’m also really looking forward to the restyling of Slashdot through user-created style sheets, and the Greasemonkey enhancements built on top of this new structure. If there’s a site whose readers are inherently primed to script the holy bejeezus out of it, that would be the one.

Would I be happier if they’d managed to achieve total validation? Of course. In the meantime, though, I’m going to be very nearly as happy for what they’ve accomplished, and also for the simple fact of it being another major site that’s taken a big step forward. Progress is always a cause for celebration in my world.

From Comp To Code: Pulling A List Apart Together

You’re handed a graphic comp file and told to make it into a living, breathing web page. Now what? How do you figure out what approach to take, which techniques to use, and what kinds of markup will go into the final page? Eric gives us a fast-paced tour of his decision-making process as he tackled the new design for A List Apart– how he analyzed the requirements, the questions he had to ask, the trade-offs he made, and the reasons behind his decisions.

If you’re interested, then please join us from 7:00pm – 9:00pm in E51-151 (Tang Center) on the MIT campus. According to the meeting organizer, arriving early is recommended.

If you do decide to drop by, I’m sorry to say that you won’t be the first to hear this presentation: that honor, if we can call it that, will go to the attendees of Web Essentials 05. On the other hand, you’ll be getting a more detailed version of the talk, since at WE05 I only have 45 minutes.

On the third hand, could it be that both groups will be getting a sneak preview of just one of the topics to be discussed as part of An Event Apart Philadelphia?

Maybe.

Since only the most recent five redesigns are shown on the home page, you’ll have to dig into the archive if you want to see all the new stuff—from Everything Tori on forward—or you could just subscribe to the RSS 2.0 feed. You can find it and other meyerweb feeds on the Feeds page. (Go figure!)

If you dig under the hood of the new design, you’ll probably find things you’d have done differently. I’m not going to go into a detailed post-mortem here, but suffice to say that every choice was made within the project’s defined constraints. So when you see, for example, a bunch of b elements used to create the corners, that approach was the best choice for the project: it best satisfied the concerns and demands of the various people involved.

This is not to say that my choices were the best for other projects with similar design demands but different technical demands. They aren’t. At a certain level, there are no canonically right answers. There may be a whole spectrum of related solutions, where one variation is better for this project and another for that one. And people like me, despite all their experience and knowledge, don’t always hit the right answer on the first try. My initial approach to the corners is not what you see in the final markup.

That said, I am pleased with how I combined positioning and sprite-like styling to get the corners to work. I know each technique has been done before, but I’m not aware of previous combinations of the two. So that’s definitely a point of pride. I hope to find time to document the details of this particular corner solution, along with variant approaches.

I’d like to thank Derek and the rest of the Technorati team for letting me be a part of the redesign project, and for giving me a chance to flex my creative and technical muscles.

In part, this may be because the design isn’t a redesign so much as a tasteful makeover of the old design. By that, I mean that everything’s basically in the same place as before, just with a more serious look. However, it’s the addition of extra functionality that really appeals to me. For example, most section boxes now have the title followed by unobtrusive links to the main section page, video or other media, and then partner links. These links add a lot without upsetting the apple cart, as it were.

I also note with a good deal of interest that CNN’s video clips are now free; previously, you had to pay money to see their video. What forces led them to drop the subscription fee, I wonder? I can think of some likely candidates, but it would be interesting to hear from CNN why they did it.

Of course, they’re only free if you have the Windows Media Player 9 plugin installed. Otherwise, they’re simply unavailable. Gah!

There’s more to this than just a simple evolution, I admit. The first major change is the addition of navigation links across the top of each page. For some time now, a lot of the material that people come here to find was buried, difficult to find unless you knew where you were going, or else on what terms to search. By pointing directly to the topic areas I think will most interest visitors, I believe the site is now much easier to use.

The second major change is the layout of “metainformation” for each post (and comments on posts). In this area, I was heavily influenced by Khoi Vinh’s Subtraction 7.0, and I definitely owe him a debt of gratitude and inspiration. As will be evident from even a casual comparison of the two sites, I took a general design idea Khoi uses and adapted it to my particular situation. I think it works rather well.

The third notable change is a feature addition that I’ve been planning to add for a couple of months now. New to the site is a Syndication Feeds page which brings together (dare I say it aggregates?) all of meyerweb’s RSS feeds. The real step forward here is the debut of two new “Thoughts From Eric” feeds, including a feed of just technical posts and a feed of just personal posts. Now all of you who just come here for the technical stuff, and couldn’t care less about the person behind the site, can restrict your feed to screen out the worthless drivel. Similarly, those of you who know me personally but don’t understand the eye-glazing technical stuff can filter out the confusing nerdity.

Even better, each of the three “Thoughts From Eric” feeds (including the traditional “show me everything!” feed) comes in one of two flavors: summary or full content. At long last, I’ll find out if providing full-content feeds drives my bandwidth consumption up, or eases it down.

I’ve also established a new Redesign Watch feed, which is something I know will be of interest to many visitors.

I made other small refinements throughout, and odds are I’ll continue to tinker for a little while. Overall, though, I feel I met my goal of making meyerweb a more friendly site to visit, and a more feature-rich environment. Explore, and enjoy.

To make room, I took out the “Socialization” section because it seemed largely worthless; two of the services listed I hardly even look at any more, and the other one was mostly about me puffing up my ego in public, which nobody really needs to see. I’m also thinking about taking out the Platelets because I don’t get to update it often enough, even though I have really soft spot for it in my heart. We’ll see what happens.

Keen-eyed observers will notice that I backfilled a few entries from the past few days. I needed test data, you know?

The PHP problems I was having in the archives should be all fixed up now. Sorry about that—I had some HTML that was somehow interfering with the PHP calls, although I’m not entirely sure how. In the course of conducting training this morning, I also discovered that I’d neglected to add alt attributes for the two RSS-feed buttons. That’s fixed now too. Apparently this was my day to find broken bits on the site, but at least they were bits I could fix.

Nick Finck, in citing his inspirations, had this to say about me:

One of the first presentations I ever heard Eric do was “CSS For Anarchists” and it really got me to think about CSS on a whole new level. Since then Eric has been a constant source of inspiration for me when it comes to CSS. As crazy as some of Eric’s ideas may seem, there is really some logical reasoning behind all of it.

Hey, whaddya mean crazy?!? All my ideas are totally sane and rational. It’s the rest of the world that’s nuts. Now excuse me while I go adjust the geometry of my tin foil hat.

The “CSS For Anarchists” presentation was interesting for me too, as I was giving it at the same time President Clinton was giving a speech one floor directly above me. I still wonder how many background checks were run on me, and whether they turned up anything good. Because if they did, I’d like to know what.

Here’s what happened. I added the “Redesign Watch” and “Platelets” lists to the sidebar, which is actually marked with an id of extra in the source because it’s what I regard as extra material; it comes after the page’s content in the source. I wanted the two lists to be side by side, and here’s how I originally did it:

#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {margin-left: 9.5em;}

Simple enough, or so you’d think. Instead, this caused IE6 to push the sidebar about half an em to the left, which is what led to the overlap. The (previous) link at the bottom of the Platelets column was also way out of joint. If I removed the two lists, then everything went back to normal. So clearly IE/Win was having trouble with the floats, or perhaps with floats inside a positioned element. At any rate, it was the new material that was triggering a bug.

I seriously considered doing this:

#extra>#redesigns {float: left; width: 9.5em;}
#extra>#platewatch {margin-left: 9.5em;}

By using the child-selection combinator (>), which IE/Win doesn’t understand, I could have entirely hidden both rules from IE/Win. That would have meant the Redesign Watch and Platelets lists would simply follow one another, as Destinations does Navigation, because none of the floating or margin-modification would have been allowed to confuse Trident (IE/Win’s layout engine). This solution, while practical, didn’t really satify me, so I decided to try another approach. Perhaps floating both elements will be sufficient, I thought. So:

#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {float: right; width: 5.5em;}

It worked: the two lists ended up side by side as I wished, and the sidebar was no longer pushing its way into the main content column.

This should not have been a real surprise to me, as I’d been aware that IE/Win has trouble with floats overlapping the margins of normal-flow elements that follow them in the document source. I just forgot, which I seem to do pretty regularly—it’s the one IE/Win bug I can’t seem to permanently store in long-term memory. I have some hopes that writing it up will help affix it in my brain, in addition to helping out anyone who’s had similar problems with their layouts.

Thanks to The Ferrett for pointing out the layout problem, so I could track down and fix it. I hadn’t sworn at IE enough this week anyway.

I also rediscovered Explorer’s lack of support for the keyword inherit. So the “previous” link in the Platelets column will use a monospace font in IE. Other browsers will properly see it in the site’s default font (Arial, as of this writing). I could write a rule or two to make the display more visually consistent, but I decided against it. In this case, I’ll accept the visual evidence of limitations in IE over needlessly complicating my CSS.

Oh, by the way… did you notice that I added HTML+CSS redesign and license-plate information to the sidebar? My personal page also has a new sidebar feature, one which will be of particular interest to anyone who wants to know what I’m reading in my few spare moments. These are all the result of my working on creating “blogmark”-type data structures and pushing them live via XSLT (<shudder />). I haven’t bothered to set up individual RSS feeds for them, but it wouldn’t be difficult. I may extend this to a real “blogmark” area where I point at stuff that I find interesting, but don’t want to spend time writing about. Most of the things I’d be likely to link I’d be getting from other people’s blogmarks anyway, and somehow the process of taking someone else’s blogmark and turning it into a local blogmark just seems silly.

You may also have noticed that the posts previous to today have disappeared from meyerweb’s home page, and from the RSS feeds. This happened because I rewrote some of the XSLT and changed the base XML structure of the archives, and trying to merge the old structure and transformations with the new ones was just too annoying for words. So I’ve basically hit the reset button on the posts, although the old posts are still available from the archives, just as they always were. It’s a temporary situation at best, since both the home page and RSS feeds will fill up as I write more entries.

As for the masthead image you can see today, it’s the same one I used for the Eos theme in the previous design, thus giving some minor sense of continuity to the process. (Said image is the intellectual property of Tantek Çelik and used with his permission, by the way.) The masthead image won’t remain constant—I’m planning to change it every week or two, with future images coming from photographs I’ve taken. I already have thirteen ready to go, culled from the two thousand or so images in my iPhoto library. I imagine that eventually I’ll add the ability to pick a favorite theme, or to pick one at random, or something. I might even add the ability for you to supply the URI of an image you particularly like, although that seems a little obscure. You can already do it with a user stylesheet anyway, since the site’s CSS signature (www-meyerweb-com) remains fully in place. For those who feel the urge, the masthead images are 1280 by 128 pixels in size, and I’ve tried to keep them to 25KB or less.

Gradual changes will probably continue to happen for a while, in fact. The sidebar content will be developed over time, for example. I may also slowly enhance the design from its current sparse styling. I doubt it’ll change a whole lot, to be honest, but I may from time to time test out new techniques or visual effects.

Let’s see, what else… oh yes. If you’re using Mozilla or Safari (and maybe Opera), notice what happens when you mouse over the title of the post. That’s generated content, not a background image, which is why Explorer doesn’t get the same effect. This fails to bother me, since it’s more fun visual frosting than anything critical. What’s interesting to note is that it doesn’t work in Safari 1.1 unless the border is changed in some way. If the hover effect is removed, no generated content. I wonder if that’s been fixed in the current internal builds.

The sidebar is absolutely positioned, and the gray area around the page content is the background of the html element (which means the black borders around the content are set for the body element). The sidebar assembly was reworked so that it’s easy to add different content for different areas of the site. For example, the Destinations on Kat’s page are different from those in my area of the site. I haven’t done a lot with this capability yet, but probably will as time goes on.

That’s about it for now. I’ll get back to the usual ramblings tomorrow.

With the amount of time I’ve been spending in iPhoto these days, downloading new Carolyn pictures from our camera, there’s been a slowly strengthening impulse to publish my favorite pictures as a gallery of sorts. I was getting pretty close to doing it when, fortunately for us all, Derek Powazek launched ephemera.org. Five minutes looking through the site woke me up and completely disabused me of any notion that a gallery of the photographs I take would be in any way necessary. I want to order large prints of several of Derek’s photos and hang them in my office. The same’s true of many pictures that Heather has taken, and now that the two of them are engaged (for which I humbly offer my very belated congratulations!), I foresee the formation of a photographic powerhouse of previously unimagined proportions. How do they get their pictures to be so vivid, anyway? The colors are just so deep and perfect; they make me want to cry when I look at my own pictures.

You’ll still get to experience some small portions of my photography, though. I’m slowly working through the final steps of a meyerweb redesign, and you can see the wireframe if you’re at all interested. If you hit major layout errors, you can let me know, but four things to keep in mind:

• The font size is what it is, or at least will be what it will be. In other words, I’m going to size fonts as I think appropriate for my site, taking into account everything I know about browsers, users, CSS, and the pros and cons of various font-sizing approaches. Telling me that I’ve made the wrong choice will not change anything, because there are almost no objectively wrong choices in this area. There are only tradeoffs.
• If your browser window is too narrow in the IE/Win series, then the sidebar will likely start overlapping the content. This is due to the bugs in IE/Win’s handling of width, so try widening or maximizing your browser window to see if any observed overlaps are fixed. If not (and your resolution is higher than 640×480) then let me know.
• I know that some of the sidebar content repeats, is badly out of date, or points to non-existent resources. It’s mostly there as a placeholder so I can resolve layout issues without having to get all the data assembled first.
• The journal entries aren’t very well laid out yet. I’ll get there soon.

The new design will let you experience (some would say suffer through) bits of my photography because the masthead will contain slices of pictures I’ve taken. I apologize in advance.

Suddenly I have an idea for an update of the classic “Yar’s Revenge.” In this new version, you control a Web designer who runs around the screen avoiding validation errors, font-sizing bugs, table-layout fanatics, CSS-layout fanatics, wandering usability experts, and snarky bloggers while trying to collect as many design components, standards powerups, and “help points” as possible in pursuit of your ultimate goal: a new redesign that’s accessible, attractive, and uses very lightweight markup. Every level is a new redesign, each one requiring more standards and components than the last one. Anyone who makes it past five redesigns without giving up in frustration earns the title “Web design guru.” Once you attain that rank, you’ll have about ten times as many bloggers trying to tear you down in subsequent levels. Have fun!

For some reason, I’m strongly reminded of the writing I’ve been doing this weekend. I said a while back I had one chapter left to write in the second edition of Cascading Style Sheets: The Definitive Guide. I still do, although said chapter is (at the moment) about 80% done. It’s the chapter on table presentation, and let me tell you, it’s definitely my least favorite chapter. I think I did a decent job explaining things, but the subject matter itself is… well, I don’t like it. Both of my technical reviewers expressed their sympathies to me before I started writing it; that ought to tell you something.

Regardless, the chapter should be done by the end of the weekend. Then all I’ll have to do is write/create the last few appendixes (no big deal) and go through the author review stage, where I look over the copyeditor and technical review comments and make any necessary changes. And then it will be really and truly done. I’m no longer sure how long it will take to finish up those last few bits, but I still hope we’ll have the book on shelves before next summer. Keep your digits crossed…

Two days ago, I got an e-mail message that had me falling out of my chair, I was laughing so hard, and I simply can’t resist sharing it with you. I’ve edited the text a bit for clarity, and the name has been removed to protect—well, the guilty, really. In a legal sense, I mean.

I’ve spent some time reading and working with several CSS books…. and I have to tell you that Eric Meyer on CSS is the best…. if I want to know how to do something and refer to the pile of books near my left hand, it is the one that most easily produces the answer.

It has one other great advantage over all the others as well: it is by far the best book to roll a joint on. Shape, size, thickness, glossiness, flexibility, and color are all excellent and [far] ahead of the competition.

It’s amazing how a well designed book serves all purposes.

Well. Glad I could help out.

A day or two before that fascinating bit of e-mail arrived, I was standing in clothing store located in a brand-new shopping mall just recently built a couple of miles from our house, when the following lyrics came over the store speakers:

Don’t it always seem to go That you don’t know what you’ve got till it’s gone? They paved paradise and put up a parking lot.

…and I thought to myself, “Is someone trying to be ironic?”

So anyway… the new design is based around positioning, as opposed to the old one, which was based on floats. The underlying structure of the site has barely change, with one exception. The navigation/presentation portion of the pages is now found at the end of the document, instead of the beginning. This seems more accessible to me. If you want to see what the raw, unstyled page looks like, pick the theme “void(style);” from the menu.

Note that not every theme is guaranteed to work in your browser. I stuck to the CSS standards as much as possible, and I did do cross-browser testing. This uncovered some weird whitespace-sensitive bugs in some browsers. It also showed that not every technique works well in all browsers. I’m open to hearing about workarounds for broken displays in browsers, should you find them, so long as they’re based on standard CSS and don’t break the display in too many other browsers.

A few other notes:

• Unlike the old design, the new themes are intended to have notably distinct layout approaches. Almost all of them put the sidebar on the right, but that’s just because I prefer righthand navigation. With the old themes, each one was basically a different set of colors and backgrounds for the same layout. This time, I wanted to be a little more original. I’d credit the CSS Zen Garden with prompting this, but I’ve been slowly working at this change since last fall.
• The cookies that store the theme name and base text size (if you change it) changed their names to be a little more verbose. You can of course deny said cookies; the site will be completely navigable without them. The theme switcher won’t work, that’s all.
• Only one of the themes uses pixel-sized text: “Classic MW.” Since the theme is intended to reproduce the old design as closely as possible, I figured I’d leave its 11px baseline text. You can always override it with text-zoom features, or else on the advanced setup page, like before.
• Some themes use ems or percentages to set the body element’s text size to be smaller than the user’s default. I did this to prevent the sans-serif fonts employed in those themes from looking stupidly big in default browser installs. If you object to this approach, then pick a theme that doesn’t override text size—the default theme, “Eos,” is one of these—or set your preferred base text size on the advanced setup page. Or both.
• When switching from one theme to another, you may run afoul of bugs in various browsers that let styles leak from one theme to another. If you see a totally horked display, reload the page to see if that fixes it.
• Although I was tempted, I didn’t end up using any PNGs to create the translucency effects in various themes. I didn’t use background-attachment: fixed, either. It was a lot more challenging to figure out ways to let IE/Win users see the translucent effects with scrolling backgrounds and regular old JPEGs. I may write a tutorial on how I managed this, but anyone who can’t wait is free to tear into my CSS and figure it out for themselves. And to copy the technique, if they so desire.
• Despite it not being the default theme, I think my favorite is Aware. The name is not necessarily the English word meaning “having knowledge or cognizance,” but is instead a Japanese word meaning “the sense of poignant beauty arising from an ephemeral thing.” Since I think the latter is only possible with the former, I find this to be a wonderful intersection of cross-linguistic meaning. Thus you can take the title to mean whichever of the definitions appeals to you most. For me, it changes back and forth over time.

There may be adjustments to the themes in the future as I find techniques I like better, or as I fix up oddities in and add extra visual frosting to the more experimental themes (like “Matrix”). Meanwhile, please feel free to share and enjoy.