So last week was an interesting one, memetically: a link from Instapundit to the Kerry Daisy, and an April Fools’ barrage of links to the March for Web Standards, spawned from A Whole Lotta Nothing, Boingboing, StopDesign, and WaSP — all this within a span of two days. Traffic jumped from an average of about 200 visits per day to almost 2000 visits on 3/31, to over 3000 on 4/01.

It pays to be ready for traffic spikes and sudden popularity. Though the bandwidth issue may be dead to some, not all of us are hosted on paid or owned servers, or perhaps we simply wish to stick with what’s cheap, and are willing to accept bandwidth limitations for affordability. But that is no reason your web presence should go down in error screens with the first MeFi or Slashdot FPP. Here are a few tips to keep you afloat through the bandwidth crests:

• Streamline that code. Maybe it’s turning into a cliché, but web standards work. Trim out the nested tables, unnecessary or redundant <div> class attributes, spacer GIFs (argh), and frames, and you can cut your page size — and loading time — to a fraction of what it was. There’s something to be said for minimalism.
• Have a smaller — or no — sidebar on deep pages. Inside pages probably don’t need your entire linkroll, sideblog, archive listing, WinAmp playlist, and whatever other sidebar paraphernalia you use on your front page. Fix up your templates so that a more basic sidebar (or no sidebar at all) is shown. Main navigation, breadcrumbs, and search form may be all you need while indoors.
• If you run a weblog, use individual archives. Single entry pages really help permalinking, and you don’t get hundreds of people loading up a whole month or week of entries just to get to that one anchored post. Of course, many of you still use services without individual entry archiving, in which case you should probably try and get the smallest increments you can. (Blogger goes down to Daily, I believe.)
• Compress your graphics. One reason M4WeSt used that single-tone B/W image was that the GIF compresses nicely, having only two colors to deal with: #000000 and #FFFFFF. It’s a good idea to use clean line art or solid expanses of clear, non-dithered, non-gradiated color. The former will compress well in GIF or PNG, the latter will work for JPGs as well.

Another cliché to remember: every byte counts. Here’s hoping your website stays up through those fifteen minutes of fame. Comments are open to any useful additional input.

Valerie was asking for some good starting points on CSS-based layout and design, so here are some of the links I sent her way:

• Start with the W3Schools guide to learn some syntax.
• Pick up some tips from Zeldman’s Journey at AListApart.
• Acquaint yourself with the code via MaxDesign tutorials.
• Steal a CSS template or two from Glish, or just just google for them.
• And when you want to go hardcore, browse the Zen Garden.
• One thing I forgot to email to her was the Position Is Everything one stop CSS-bug-and-fix shop.

The comments are open to additional CSS links which I may have missed or forgotten.

CSS “@import” notation should precede all other CSS declarations. I’ve been doing CSS-based layout for three years now, and this is the first time I’ve come across this rule, discovered while struggling with styles not showing on a project at work. Learn something new everyday, I guess.

Travelocity has redesigned, and is now laid out in CSS. Navigation appears to be some variation of the suckerfish, and the dropdowns break rather badly in Opera 7, dissolving into a mess of unfloated, overlapping list items which loop in and out of a :hover state repeatedly whenever the mouse is over them. In Safari, only the first item in each nav list drops down; the rest are hidden away from the user’s eyes, denying Travelocity the views and profits of Mac OS X users everywhere. This effort to move towards cleaner, more usable, standards-friendly design is admirable, but till Travelocity’s cross-platform deficiencies can be fixed, I’ll be sticking with my preferred travel site for now, thank you.

Sippey has written/drawn up some visual analysis of Travelocity and other travel sites. I’m not sold on Expedia’s “front-and-center” treatment of the flight search box as the best scheme. Remember the “visual Z”: On first viewing, readers and users tend to scan newspaper, magazine, and website layouts in a quick “Z” above the fold, starting at the top left of the page and ending at the bottom right. It’s most important to put the focal points of pivotal elements — such as primary navigation or reservation forms — right where the Z starts. Center-of-the-page positioning is not terribly wrong, of course, as long as the form is designed to be prominent enough to catch the viewer’s attention, but on a subliminal level, the user only sees the reservation form when beginning the diagonal leg of the “Z-scan,” thus lessening its perceived importance for precious seconds before more detailed reading comes in.

It might be argued that Travelocity and Orbitz get the “Z” wrong, placing the reservations form below primary navigation and branding, but it must be remembered that we’re talking about scanning here, not reading. The user’s vision takes in a wide swath of detail, making instinctive connections between borders, headers, and boxes. In Travelocity’s case, we first see the logo, the navigation bar, the reservations form, and the special promo graphic — all important elements. In Expedia’s case, we see a logo, a white space, a banner/textad, and a bunch of tabs in the moments before we even start to notice the reservations form.

These are all unconscious thought processes that occur in the first few seconds that a page is viewed, and those seconds count. As I constantly told my graphic design staffers back in my Guidon days, the designer’s job is mostly subliminal. A good layout is barely noticed, introducing the reader to the content and keeping them with it to the end. Or, as usability guru Steve Krug puts it, “Don’t Make Me Think.”