Posted in Css

HotBot redesign launched

Ah, I can finally talk about it. It’s so far off everyone’s radar that hardly anyone has noticed yet. Let’s change that.

Another project I had a hand in design directing and pushing to XHTML/CSS (smack in the middle of the Wired News redesign) finally surfaces. Following Wired’s lead, HotBot redesigns and in the process, completely morphs as a new product. [Mostly] table-less CSS-based design that was cranked out in a one-week visit to Boston back in June. The backend took significantly longer, thus the delay. The CSS changed slightly from what I originally authored, creating a few rendering and alignment bugs in various browsers. But you get the basic idea. Aside from very minor visual changes, the design we came up with is still in tact, and represents the harnessed power and attitude HotBot has been known for. continued

Small talk in SF

Since MTM/SF in October, Tantek and I have been batting around the idea of holding an informal discussion about style, blogs, workarounds, etc. at a local cafe here in San Francisco. Preferably with free wifi. And space to flip our laptops around to show cool experiments we’re working on. Or projects by others that have provided inspiration. If you live in the City or the general Bay Area, or even happen to be in town visiting, you’re welcome to join us in the discussion or even just partake in a warm latte in a friendly neighborhood. continued

Sizing up web type

I’ve been thinking a lot about type on the Web lately. Not type that a designer sets in Photoshop and turns into an image. But type which can be selected, searched, indexed, and resized by the browser. Type marked up with tags like <p>, <h2>, or <cite>, etc. continued

One change, immediate results

Last week’s redesign of Wired News included significant visual changes to the interface. The push toward XHMTL and CSS is certainly a big deal. But as a designer, I also love delving into visual details, especially as they impact the user experience. In addition to the usability testing we conducted on WN prototypes a month or two ago, there’s another excellent mechanism for measuring and determining the experience our users have with the site. It’s called user feedback, and we get a ton of it for free via a multi-use Contact Form on the site. continued

Finally, we’re live

At long last, the Wired News redesign is visible to the world. We launched the site around 10pm PDT time last night. And what a relief it is. Despite numerous setbacks, delays, bugs, and technical difficulties, we pushed through to the other side and found success. Are all of the bugs and errors fixed? No. But the major problems which were keeping us from launching last night have been solved. And now it’s live for all to see. continued

Teaching CSS

I’ve been planning out the structure for a CSS workshop we’ll be offering to Lycos designers and developers sometime later this month. I’ll be collaborating with Steve Mulder, a colleague of mine in Boston, who wrote a book on style sheets when CSS was still brand spankin’ new. I used a simple outline that Steve sent over a few weeks ago as a base for a more detailed version of what we plan to cover. I’m planing on 5 sessions spread out over 3 days, with time in between each session for practical excercises or informal questions. The first session will be geared for a broader audience so that product managers and other employees can join designers and developers in learning why CSS is important.

In looking through the outline, I’m realizing this is a lot to cover in three days. We’ll be dealing with a mixed audience. Some of the designers have begun playing around with style sheets, or have tried using them for personal projects. Others haven’t even seen a declaration yet.

Any designer who originally came from the print world can pick up CSS very easily. The language used is mostly a carry-over of traditional desktop publishing vocabulary, with some alterations to cover technical limitations or more specific characteristic handling. Designers who didn’t get the pleasure of manually kerning “1”s in Illustrator, or collecting fonts and images for QuarkXPress output won’t be too disadvantaged, but at worst, may have to learn new lingo or ways of thinking about formatting.

Versioning CSS and images

We implemented a secondary version control technique for Wired News images and CSS files this week. Images and CSS files have been moved one level deeper than they were, into a folder named according to the current release date (ie: 20020917). Each major revision or addition we make can be grouped into a new version release, and each dated folder will include every image and CSS file, so that all files can be referenced relatively, without needing to reference anything outside the dated folder. For instance, all CSS files will temporarily live in /news/v/20020917/css/, and all images will live in /news/v/20020917/images/ until the next major version change. (The v folder stands for “version”, and exists purely to group all of the dated release folders together so they don’t clutter up the root of /news/.)

The Akamai URI strings provide one means of version control and make it possible to update cached image and CSS files. But we want to ensure we have direct control over how and when the files get updated. Chaning the timestamp in the Akamai string may lead to unpredictable results across all their servers. But we can know for sure the new files will be re-cached if we change the date version number of our file’s physical path.

Missing style sheets?

We moved some of our CSS and image files to a different central server today which we can all reference for design and development versions of the site. I almost immediately noticed that Mozilla and Netscape browsers weren’t rendering our pages using styles anymore. A search on Google turned up this article on Netscape’s DevEdge, which pointed out that some Apache and iPlanet web servers have an incorrect mime-type set for CSS files. An incorrect mime-type will cause Gecko-based browsers to ignore the entire CSS file when thrown into “strict mode” by the DTD. Changing the mime-type on our Apache server solved the problem.

Meeting Mr. Meyer

Eric Meyer came to the Bay Area this week to take care of business at Netscape’s headquarters in Mountain View. So while Eric was in town, he and I set up a time to meet each other and talk about the Wired News redesign. He came by our office this morning and we went over everything from high-level concerns of mine, to specific details of the markup and CSS. He even helped fix a couple of minor issues that happened to jump out at us while we were reviewing the site. We headed over to MoMo’s afterwards to grab lunch.

It was an honor (and a lot of fun) to spend just a few hours with Eric. He knows the CSS spec and browser rendering discrepancies better than I know the information on my own business card. He’s incredibly smart, very knowledgeable, and friendly to boot.

I now have three of the books he’s written about CSS, and I really like his writing style. The way he writes makes complex concepts easy to understand. He breaks ideas down into logical pieces, identifies and defines terms you should understand as you need them, and manages to do it all in a friendly, familiar tone that makes reading technical descriptions a pleasure. Whether you’re just a beginner and know very little about CSS, or you’ve been turning to CSS for a while now to make your life a lot easier, having a Meyer book nearby is a great reference and teaching tool for the details you can’t remember or understand.