Design Archives

Marked Up & Styled

Posted at 12:25 PM

We held the third gathering of the Markup & Style Society last night (a local Boston-area meetup for web geeks that Ethan Marcotte and I started a while back). This one was different and contained more awesomeness, for a variety of reasons.

The kind folks at Filament Group hosted the event at their downtown Boston studio. The incredibly generous Freshview donated 18 pizzas, beer and wine for all 50 attendees. Freshview are makers of Campaign Monitor, the popular email newsletter campaign app, as well as creators of useful tools and resources for newsletter designers. Thank you thank you, Freshview.

Adobe donated two copies of CS3 Web Premium that we raffled off along with a few books at the end of the night. So we knew at least two people would go home happy no matter what happened.

While previous meetups have all been about beer and socializing, we may have surprised people with four short talks. A free, mini conference if you will. Ethan gave a brilliant presentation on some tricks he’s enabled in his freakishly bulletproof, fluid layout (Ethan’s write-up). I rambled on about “Gridlasticness”: taking an em-based approach to a strict grid. Josh Porter talked about craftsmanship as it relates to the web — a topic near and dear to my heart. It was sprinkled with “right on” moments and quotes like this, regarding the Shaker design philosophy:

Don’t make something unless it is both necessary and useful, but if it is both necessary and useful, don’t hesitate to make it beautiful.

Scott Jehl closed the show with an excellent talk on how progressive enhancement plays a big role in the projects he tackles at Filament Group. Read more about Filament’s process over at their newly launched lab (Filament’s Maggie Costello Wachs’ write-up).

All in all, ‘twas a great night, and it made up for seeing just one single panel at SXSW just days earlier. We’ll have to do it again soon. Blatently tooting our own horn here, Patrick Haney dug it, evidenced by his tweet:

Really felt like I got more out of the four short talks tonight at M&SS than I did at a week of SXSW

Thanks to the speakers, sponsors and especially Filament for the venue. We’ve also been planning on adding more formal workshops or full day conference-style events to the mix in the future. New England needs more of this, methinks. Stay tuned.

Update: Jenny Bergman has posted some wonderful photos of the event. Thanks, Jenny!

33 Comments

80 Percenter

Posted at 10:11 AM

Last week, I gave my More “Wow”, Please talk at Web Design World Boston. During the talk I mentioned a fantastic book: Let My People Go Surfing by Yvon Chouinard. Yvon founded the expensive-but-awesome clothing company, Patagonia. I’ve long been a fan of Patagonia’s stuff, and their dedication as a company to environmental causes (they co-founded One Percent For The Planet, of which SimpleBits is a member) , and so when Josh Porter recommended the book a while back, I ordered immediately.

The book covers the history of the company, Yvon’s philosophy on design, and being a reluctant business owner. It’s a great read, with a lot of insightful head-nodding.

One part stood out in particular, when Chouinard talks about how he sees himself as an “80 percenter”:

I’ve always thought of myself as an 80 percenter. I like to throw myself passionately into a sport or activity until I reach 80 percent proficiency level. To go beyond that requires an obsession and degree of specialization that doesn’t appeal to me.

I didn’t know it before reading that quote, but I think I’m an 80 percenter as well. For people that love to create things, whether it be a website or a t-shirt or even a beer coaster (ahem) — the web seems to tie all these things together quite nicely. And it’s reaching 80% proficiency (but not 100%) that I think makes it possible to handle all of that at one time.

Ever try talking to (or working with) someone who is 100% obsessed with a single task? The danger is that they’ll get bogged down in details. Every detail. Whereas an 80 percenter might eventually learn to know which details to focus on. And determining which details are important can be just as useful as knowing them all.

At least that’s my interpretation. Regardless, I recommend the book highly.

24 Comments

Introducing Foamee

Posted at 10:00 AM

I think I’ve just created something that will change the web as we know it. But I’ll write about that another day. Instead, I’m going to talk about a fun new thing I launched last night. Actually, it’s a couple of things.

I owe you a beer.

I say this quite a bit. For friends, family, people that deserve a pat on the back. I also often forget to make good on the promise. Wouldn’t it be cool if there was a way to keep track? And then also keep track of who owed you?

So, I decided to build Foamee (hey, there were plenty of abandoned ‘e’s lying around). It’ll keep track of who you owe beers to and vice versa. But don’t worry, this is NASN (not another socical network). Like you, I’m tired of creating another login, another set of friends/contacts, another avatar and more tears. So instead, Foamee piggy-backs on an existing one. As I was tossing ideas around, I realized a lot of the functionality: short messages directed at another person, web/IM/mobile messaging, etc. already existed elsewhere — so why not make things simpler and utilize the indispensable Twitter as a primary interface for the app?

Using Twitter’s API, Foamee will harvest replies and direct messages to create a barnacle-esque utility (props to Josh Porter for coining that) on the already-popular messaging service. If you’re already on Twitter, using Fomee is as easy as following ioubeer, then using specific syntax to announce an I.O.U. Beer to the world. We’ll repost these virtual pats-on-the-back, and also create a people page for anyone that sends a beer. Your people page will show who you owe, and who owes you. The sender or receiver also has the option of “redeeming” an I.O.U. via a direct message to Foamee, completing the deal.

I realize this is a silly (but potentially useful) service. And I’m excited to see where it leads, if anywhere. What it does now is incredibly simple (and there’s a reason for that, partially explained below). It’s also a shameless brand vehicle. How so, you ask?

Foamee Goods

Right out of the gate, there are two cool things to buy at the Foamee Store (because two weeks from now, when you’ve long forgotten about this little site, it’d be too late). T-shirts (of course) and I.O.U. Beer Coasters: a pack of six pulpboard coasters shipped in a drawstring cotton bag with a Foamee-branded Mini Sharpie. The coasters have a spot to write your name, perfect for handing out tactile I.O.U.s in person to deserving recipients. They work great in the mail as well. And they are awesome.

Special technical geek notes

Building this little app became a personal challenge. Could I handle the backend as well as the design? Could someone who primarily spends their time worrying about interface solutions roll up their sleeves and create a fully-functional product? And so the process of investigating APIs, databases and frameworks began. It reminded me of the old days, learning HTML (and later CSS) for the first time. Late night experimentation, utter frustration and then those “little victories” that make it all worth it.

Foamee runs on PHP, using the CakePHP framework, which turned out quite well. Cake uses the same model/view/controller setup found in Rails and other frameworks, has a good community and is dead simple to install and move around. I owe Jonathan Snook a beer for blogging about Cake (surely where I heard about it first). My code is likely terrible and other smart folks could probably bang out the same functionality in an afternoon, blindfolded and behind-the-back. But it works, and my familiarity with PHP coupled with my experience with Rails while working with the imitable Dan Benjamin on Cork’d and other projects (I owe him several beers as well) made baking with Cake tolerable for a noob like me.

Foamee is hosted by the fine folks at Media Temple, and I owe them a beer (or twelve) for that.

The motivator here was fun. Fun to build, fun to create for, and (hopefully) fun to use. I’m hoping fun continues to motivate around here — for Foamee and for whatever else cures the constant desire to create. Special thanks to Biz Stone at Twitter for helping tap the keg last night.

DingBit

Posted at 10:50 AM

I’m pleased to announce a new product shipping today over at the IconShoppe. Chameleon16 is a new pixel font for Mac and Windows, hand-crafted using only the finest pixels available. It’s based on the Chameleon Original icons that we’ve been hocking over here to support our growing latte addiction.

Initially, I’d thought to just convert the GIF images to a bitmap font so that the customer could change the color and add effects at will. The minimalist nature of the icons begs of it, and having the 16×16 icons in font format would sure be handy. But while I was at it, why not create new alphanumeric characters to go along with it, and create a real font in the same style?

As the name suggests, Chameleon16 is designed to be used at 16px. And like its pixel font predecessors, it also works at multiples of that base (32px, 48px, 64px, etc.) for retro, extra blocky goodness.

Since each character is a 16×16 tile, it admittedly has limited use for setting large chunks of text. You’re not going to use this font to display client invoices or proposals. But interesting things can happen when you start playing with kerning and line height, and I’m excited to see some interesting applications where it could be used creatively.

The TrueType font includes standard alphanumeric characters as well as the entire Chameleon Original icon set as alternate characters and costs just $39 bucks. As a special promotion, the first three orders also get a free copy of Bulletproof Web Design, Second Edition that hit store shelves last month First three orders received!.

Special technical geek notes

The process of creating the font was a learning experience, and I would compare it (at times) to removing stubborn wallpaper. I first created the characters in Photoshop, then used a program called BitFonter to turn those into a bitmap font, assigning each character, adjusting metrics, etc.

Over the course of the last six months or so I began chipping away it, navigating the spotty documentation, and teaching myself the wonders of font metrics, character encoding and more. In the end, I needed to create additional outlines of the bitmap characters and export these into TypeTool which could then generate a proper TrueType file (after having problems letting BitFonter do this). If I knew what I was doing this wouldn’t have taken long.

I avoided using something like Fontographer (also by FontLab) because I was creating a bitmap font and BitFonter’s pixel editor seemed a natural choice — and for creating and editing pixel fonts, it’s great (or at least slightly more intuitive). It’s the output and documentation that was confusing, and my respect for real type designers has grown tenfold after this little project.

So, my advice for those looking to create their own pixel fonts: learn Fontographer, or remember that you’ll need TypeTool in order to generate a TrueType file from BitFonter’s outlines.

Bulletproof Web Design, Second Edition

Posted at 10:04 AM

On bookstore shelves today (I hope) is something I’ve been toiling over for the past few months. Bulletproof Web Design, Second Edition is a refresh of the book I wrote for New Riders in 2005. I’ve been humbled by the response of the first edition, and have enjoyed talking about the principles described in the book at conferences and workshops over the last few years. So it was only fitting to give this little blue book a tune-up under the hood.

This isn’t a giant update nor a new book entirely. Rather, it brings the examples in line with Internet Explorer 7 (which wasn’t released when the first ed. was published) and adds several more examples based on ems (which were sorely lacking from the original book). There are of course errata fixes and nips and tucks throughout as well, and about 30 additional pages were added in total. All in all, I’m happy to have the book be all the more solid and relevant.

On the surface, writing a second edition of a book seems like an easy little project. One that won’t be too much work, won’t take long, and can easily fit in between other activities. But it’s not like that. It’s like writing another book all over again (even though it’s not another book and a large portion of the text is the same).

I find the actual writing of a book the easiest of all stages. It’s the editing, the back-and-forth, the endless checking and double-checking of Word docs (Word!) and then PDF files. Reading comments, checking comments, adding your own comments. “Should this be bold or code font?”. All of this is necessary of course. But my goodness it’s just as time consuming as the first go-around.

But like anything that takes time and effort in life, you quickly forget the pain and maybe even someday agree to do it all over again.

While today is the official publication date, Amazon is still taking pre-orders only. I’ve yet to see an actual copy myself, so there could very well be a slight delay.

New Chunky Icons T-Shirt

Posted at 2:25 PM

Just in time for Spring, the all-new Chunky Icons Tee is available, selling fast, and shipping immediately! This is a limited-editon run that includes a numbered, signed letterpressed card and free stickers. The shirt is printed by the fabulous folks at Acme Prints on “Army” American Apparel (of course). You will love it.

On the front are five icons lined up in a row (from the Chameleon Chunky stock icon set over at our IconShoppe). Your task is to come up with what they mean. Best answer added as a comment here wins a free shirt (comment before April 7, 2007 to enter). On the back yoke is a small SimpleBits logo mark. Just because.

More detailed views of the shirt are available in this Flickr photo set.

41 Comments

An Event Apart Boston

Posted at 12:37 PM

Don’t wait for An Event Apart to come to your city — just make plans to catch the next one wherever it is (Seattle is next). AEA Boston was probably the first two-day, single-track conference where I felt like every session was extremely valuable. I came away from each presentation either inspired or educated (or both). The easy, 20 mile commute to Boston didn’t hurt either, and having Kerry and Jack see me speak for the first time was fantastic (at one point up on stage, I could hear “Dada!” from the back, and I’ll tell you … that calms the nerves).

I had fun talking about “Interface Design Juggling” — a potpourri of color, typography, favicons (yes, favicons!), microformats and bulletproofness. This was the first run through of this particular set of ideas, but I think it went pretty smoothly. I was relieved to hear several people thank me for devoting time to favicons — a fun topic that I think deserves more attention. And I’m looking forward to expanding that segment in the future.

The latest updated versions of the slide deck can be found here (in PDF form) for those that were in attendance. As usual, they might not make sense without the commentary — and more importantly some of the transitions are muddled into a single slide (Keynote kept crashing when I tried to export each transition into its own slide).

Thank you to Jeffrey and Eric for inviting me to speak — it was quite an honor to share the bill with such an amazing group.

IconShoppe Grand Opening

Posted at 3:32 PM

Without fail, I get more done when the work is piled on. When stress is at a max and there are a million to-do items. But this was long overdue, and something I’ve been meaning to set up for a while for reasons I’ll go into in a minute. So, before I pack for Austin, I’m happy to have finished this off enough to flip the switch.

Today, IconShoppe opens it’s doors. I’ve finally spun off the stock web icons I’ve been selling here at SimpleBits into their own, proper digs. It’ll motivate me (hopefully) to put more time into more icon sets and some other ideas I’ve had brewing for a while. This “setting up shoppe” was the first necessary step.

That said, they’re the same simple little web icons I’ve been selling here for the last few years. But they now have a better framework in which to grow and a more easily maintainable system behind them (Wordpress, customized).

Stay tuned for more, and grab the RSS feed to be alerted of new stuff happening over at the ‘Shoppe. I can’t say it’ll be updated often, but this is just a start, my friends.

35 Comments

AIGA Redesign

Posted at 11:09 AM

This morning, AIGA (the professional association for design) relaunched with a shiny new design by Happy Cog. I had the pleasure of taking Jason Santa Maria’s brilliant designs and turning them into semantic XHTML and CSS templates that could be plugged into a custom CMS built by Thirdwave (AIGA’s technical partner). Magic and fun ensued.

Every project is a learning experience. But working with Jeffrey and Jason for a client like AIGA, well that’s a whole new level of awesomeness. One could (and should) study Jason’s molecule-level of detail in typography (using just two web fonts and a splash of Interstate via the venerable sIFR). It was a fun challenge getting things right using CSS. I hope I’ve come close.

Congrats to AIGA for renewing their digs with a smart, readable, beautiful design — and a big thank you to Jeffrey, Jason and Happy Cog for allowing me to pitch in and help with this.

Read more about the redesign:

• Jeffrey Zeldman: Happy Cog redesigns AIGA
• Jason Santa Maria: AIGA Redesign
• Happy Cog: AIGA Website Redesign

And a special geek note: events listed on AIGA’s homepage are marked up with hCalendar.

New Icons: Chameleon Chunky and SuperPack

Posted at 2:20 PM

While I was putting together an hCard example for next week’s Web Directions North presentation a while back, I whipped up a few icons that were Chameleon in spirit — but doubly thick. And so, Chameleon Chunky was born: the newest addition to the color-changing family of stock icon sets.

The extra-thickness of this style was a bit more challenging for some shapes, but the ability to add single pixel details makes for good contrast when using just one color. Like all the Chameleon sets, these are royalty-free stock icons that are customizable to fit your site’s color pallette. Just punch in a hex color, hit a button and we’ll magically generate a custom-colored set for you immediately. Ah, the wonders of technology, and all for $25 USD.

If you’re feeling lazy or indecisive, a Ready-Made Pack is also avaible that includes 6 pre-selected colors for $35 USD.

Chameleon SuperPack

In addition to the new Chunky style, I’ve also put together a SuperPack of all four Ready-Made Packs in one convenient (and low-priced) bundle. For just $85 USD, you’ll get all four styles in 6 different colors — 1,680 icons in all. That’s a lot of pixels folks.

Hope you dig ‘em!

Pressed

Posted at 3:33 PM

With a new logo, comes new business cards. I’d used Dependable Letterpress for a previous run of cards and was really pleased with the quality, service, etc. Today, the new cards arrived, and I’m just as happy with the results. Highly recommend them, but be warned that it’s not a quick and cheap option.

Nothing beats seeing the art and type stamped into thick card stock, with visible embossing from the weight of the plates (more evidence of letterpressing awesomeness here). It’s also reassuring to see the flexibility of the new vector-based logo in action. Smooooove.

39 Comments

Microformats for Designers

Posted at 10:57 PM

In a little less than two months, I’ll be heading to Vancouver to speak about “microformats for designers” at Web Directions North. It’ll be a fun topic, and I’m starting to put together the material. I’m looking forward to talking about microformats from a designer’s perspective, including a little bit about the logo development, the implementations over at Cork’d (and the unexpected cool things that came out of that), as well as applying CSS to microformats.

But I’m also looking for help. What are some interesting things happening with microformats and design? Know of any great examples, visual experiments, etc.? Here are a few to get started:

• Hightlight Microformats with CSS
• Microformats Icons
• Styling hCards with CSS

I know there’s a lot happening out there, so let’s hear about it. And thanks!

16 Comments

Re-Brand New

Posted at 8:41 PM

For the first time ever, SimpleBits has a logo! Roughly six years ago, I took a stab at creating an isometric set of three boxes (cardboard, to be specific). It was really an icon — and one that sat in the header alongside my personal site at the time, the now-defunct cederholm.org. Over the years, it’s always been there, and I’ve probably overdone it in terms of branding: I put the boxes everywhere. It became the brand. But it was always awkward, and highly inflexible. It worked terrible in print, where at small sizes, the pixelated blocks looked more like botched clip art.

Several months ago, I finally started on a new logo design — something I’d been meaning to do for years. It went rather quickly, playing with four curly brackets set in Avenir that created a frame around a hand-drawn cube (vector this time!). I finally had something I didn’t hate the next day. I’m excited to have a mark that’ll be flexible going forward, and it was crucial for me to create one that could be any size, or color (even looking intact using a single color).

I owe Greg Storey thanks for suggesting Whitney for the logo’s type, after I realized that the previously-utilized Triplex just wasn’t working.

It was the logo refresh that forced me to rework the site design as well. I’m not one to change things for the sake of changing things, but the new logo was a good excuse to update the templates as well. And what you see now is the result of several weeks of tinkering.

Much of the structure and layout of the site remain the same. Nothing earth-shattering here. This time around, I’m trying out an elastic em-based layout. If you’re unfamiliar, try resizing the text in your browser to see what happens. For this particular site, I think it works well. If I had the need/desire/requirement for an additional column, then I would’ve explored other fluid or variable fixed-width options. But for this simple, two-column set-up, I thought it’d be interesting to try something with ems.

I’m hoping the revised logo will help swing the rest of the company forward. I have a lot of ideas and things in mind for the future, and this is merely step #1. Here goes nothing. But first, new business cards need ordering.

Workshopp'd (and a break)

Posted at 8:21 PM

I’ll start off by mentioning that the Carsons (Gillian and Ryan) are two of the nicest people you’ll meet in the business. I’m grateful to them for setting up Thursday’s workshop at Boston’s Museum of Science.

I think it went well, and I’ve received some good, positive feedback. As with anything, I’ll now be focusing on the parts that I thought could’ve been presented better — but all-in-all I had a great time, managed to still have a voice after talking for eight hours, and those that attended (suprisingly many from outside of New England) brought along great questions. It’s clear that the majority of people attending conferences and workshops are gaining more and more knowledge about CSS, standards, semantic markup, etc. So much so, that I wonder what the heck I should speak about in the future. Hrm.

So thanks to all who came out to the workshop, and again to the Carsons (they have this stuff down to a science). It capped off the busiest few months I’ve had in years, and in two days we’ll board a plane for Florida to visit family for a week. A much needed unplugging.

While I’m away, Rael Dornfest and company will be presenting Stikkit on the Launch Pad at the Web 2.0 conference. Stikkits are “little yellow notes that think”, and I’ve been helping with the design. Keep an eye out for it!

New Chameleon Icon Sets

Posted at 4:32 PM

It’s been almost exactly one year since releasing Chameleon, a customizable stock icon set for the web. It’s been really successful, and later spawned additional ideas for color changing goods. Then life happened, and most of those ideas fell by the wayside.

I’m happy to announce today, at least a small portion of those grand ideas in the form of two new Chameleon icon pack styles:

Chameleon Graphite

A reversed version of the original, the graphite style has a shiny silver container for the tiny shapes that change color inside.

Chameleon Mini

Just the tiny shapes without the container. I’d been meaning to get this set finished since releasing the original and just never got around to it. These miniature icons are especially great for embellishing links inline.

Just like the original style, each of these new sets is available in a “Ready-Made” pack of six pre-selected colors ($35 USD), or as a single set using the hex color of your choosing ($25 USD). Hope you dig ‘em.

Educated

Posted at 10:43 AM

There’s a myth that colleges and universities are teaching antiquated web design skills: table-and -spacer-gif-ness, FrontPage 98, etc. Actually, I don’t think it’s a myth — it’s actually happening out there. So after touring Boston University’s Center for Digital Imaging Arts yesterday, I was completely surprised. CDIA offers an interactive design program with an emphasis on CSS, web standards and hand-coding — and it’s right in my own backyard.

Jeremy Osborn, the program’s Director, mentioned that, while BU offers the resources and infastructure of a large university, CDIA is largely independent and run much like a startup — adapting and changing the curriculum as the techniques and methods out in the real world do. I found this approach pretty fascinating, and it’ll be interesting to see how their program evolves along with the web itself.

I’m hopeful there are other programs out there in other states and countries that are offering modern skills for budding designers of the web. Leave a comment if you know of any.

Also, if you’re in (or planning to be in) the Boston area, have an interest in teaching web design, and have the skills to guide the next generation of standardistas, contact jeremy [at] cdiabu dot com. They’re expanding fast.

52 Comments

New SimpleBits Tees

Posted at 10:50 AM

A fresh batch of t-shirts has just arrived from the printer. This time around, the design has been tweaked and screen-printed on “Asphalt” American Apparel shirts (the most comfortable, fitted shirt available) by the fine folks at Acme Prints. We’ve been using Acme for the Cork’d t-shirts, and they do such a fine job that I decided to make the switch here at SimpleBits. Acme has low prices, free shipping and no set-up charges — and their customer service is excellent.

The Official SimpleBits T-Shirt is just $16 USD plus shipping. We believe you will enjoy it immensely.

One Hundred

Posted at 10:03 AM

Maybe it was the antique car show we drove by this past weekend, but something got me thinking: what would I be working on 100 years ago? In other words, today I design web sites and other related web things for a living. In 1906, I doubt I’d be doing the same (and if I was I’d be insane).

One hundred years ago, radio was in it’s infancy, so there’s an obvious parallel there: a new, exciting technology that increases communication. But really what we’re doing is creating stuff, and I’m not sure I’d be building radios or telegraph equipment. I’m not smart enough for that.

Typesetting? That could be closer than radio, but typesetting was far from being something new in 1906. So maybe it’d be something less obvious, like a “Wheelwright” or a “Confectioner” or even a “Newsagent” — actual professional titles for the early 20th century. And don’t they sound cool?

Regardless, it’s interesting to look back and draw similarities, especially if you do the same looking forward. Will anyone be designing web sites in another 100 years? Will I be doing this in 10 or 20? Who knows.

56 Comments

Stuck

Posted at 2:38 PM

I’m looking to the collective knowledge of my esteemed readers for some advice. Where might one go for high-quality, reasonably-priced, screen-printed stickers? You know, if say, one wanted to promote a web site or two out in the non-virtual world. Any tips would be much appreciated.

32 Comments

London(e)

Posted at 9:47 PM

About an hour into the flight to London from Boston, I spilled a full glass of cranberry juice in my lap. There are several reasons why this was unpleasant, and they all include the words “embarrassed”, “sticky” and “no, I didn’t just pee my pants”.

I’ve now returned from @media on Father’s Day. It was a great trip despite the soggy flight out, and it’s really good to be back home with the family.

Many thanks to Patrick for inviting me to speak. I think it went just fine, and I especially enjoyed the questions at the end of the talk. We watched England win the World Cup match the previous night, so I knew there’d at least be smiling faces in the audience. For those that attended the session, I’ve posted the presentation slides (20MB PDF). Warning: they won’t be of much use without the commentary.

It’s always fun meeting new faces for the first time at these conferences, and @media was no exception. It’s the genuine friendliness of the people in this community that never seems to wear out. Fun times are a given. Wish I had the time/energy to list them all here, but it’s late. I also wish I had taken more photos, but what I did take are now up on Flickr.

Update: I forgot to mention, I successfully spent the torn note at a hotel pub after the @media party. Either my taping job was superb, or it was dark enough to go unnoticeable. Whew.

Pairing Wine and Microformats

Posted at 3:34 PM

While working on Cork’d, I realized this was a perfectly fine excuse to implement some microformats. What goes great with a nice 2003 Pinot Noir? Meaningful markup, naturally.

We’re currently using three microformats on Cork’d:

• hCard (for member profiles)
• hReview (for wine reviews or “tasting notes”)
• rel-tag (for indicating tag links)

Our implementations aren’t perfect, but it’s a start. The rest of this article will talk about how we implemented hReview for member-entered tasting notes (example) and specifically how I used CSS to style the markup.

Introducing Cork'd

Posted at 9:59 AM

I like wine. I’ve even touted it’s ability to act as a design enhancer. The problem with wine (for me, and for many) is knowing what’s good. There are infinite choices out there. It’s overwhelming. Oftentimes, I lean on the suggestions from friends — people that probably know more about wine than I do.

When I finally find a wine that I like, it’s always impossible to remember it for the next trip to the store. Some people keep a journal, writing down what they thought about the wine in a notebook. But wouldn’t it be great if you could do this online? And wouldn’t it be also great if we could share those lists with our friends through a simple, free interface? And while we’re at it, wouldn’t it be the bomb.com if this same interface allowed you to review the wine, tag it, and set up lists for wines that you want to buy or that you own in your cellar?

Introducing Cork’d. A brand-spanking new site devoted to reviewing and sharing wine created by Dan Benjamin and myself. We’ve been working on this for quite some time. Just the two of us. Call us the Bartles & Jaymes of the wine web world (wait, no, don’t do that).

What is Cork’d?

The basic gist of Cork’d is this: after painlessly creating a free account, you’re able to keep track of wines you’ve tried in your Wine Jounal. You can rate, review and tag wines (more on that below), and these “tasting notes” end up attatched as comments to each wine in our database. You can also build a Shopping List of wines you’d like to buy (think of this like you would a Netflix queue), and a Wine Cellar for wines that you own. Keeping track of what your friends are tasting is as easy as adding them as a Drinking Buddy. You can also recommend wines to your buddies after you’ve rated and reviewed a bottle.

We have a partnership set up through wine.com, where a selection of their bottles have seeded the Cork’d database with about 1200 wines (which will grow as members add their own bottles), each with a link to buy that wine right away. But we can also see other cross-promotional opportunities by getting involved in the meat-space wine community. There are endless ideas flowing about connecting with wineries and vineyards, other wine blogs and podcasts. We’re really looking forward to watching it all grow.

Tasting Tags

The idea of tagging a wine may sound absurd — but when we started to realize the benefits, it became a must-have. We call them tasting tags, and by applying keywords like “oak, pepper, vanilla, berry” to a wine, we’re then making it easy to find similar wines based on those flavors. If you like oaky wines, for instance, then it should be easy to find them.

Why and How

What’s funny about Cork’d when looking at it for the first time, is that it’s pulling in many of the current technologies that have been brewing out there, and applies them to… wine. And why not? This is something Dan B. and I built quite simply because we wanted to use it. We’d been trading favorite bottles, realizing there would be an incredible benefit to keep track of things through a web interface, building a community around it, and making it easy to subscribe to buddies and wine lists. It had to be.

It’ll also be interesting to continue to talk about what we learned by building a web application with a team of 2. Working with Dan B. is a natural fit, as our areas of expertise overlap only slightly (design/ui/development), and where they do overlap actually made things run all the smoother. I was continually amazed by the way Dan approached building the app in Ruby on Rails, the speed, the structure, the way he thinks about a problem for a while, then takes all of about 3 minutes to write the working code — he’s a developer who designs in code. And I’m sure he’ll have much to write about regarding the process, including his already-published thoughts on the launch over at Hivelogic (far more thorough than mine).

This was a giant learning experience for me in terms of dipping my toes in Rails, becoming more familiar with Subversion (more on this later), and in using these tools as a collaborative and iterative way of building a web application. It’s a gratifying way for a designer to work on a large project, chipping away at things in real time, using real data — it’s a bit like sculpting. An evolution.

Go Forth and Uncork

I’m excited to share much more about the site over the coming weeks and months, and we’ll be rolling out some additional features and tweaks. But until then, if you dig wine (or want to start digging wine), then head on over and, um … uncork — Cork’d.

Inside the Net Interview

Posted at 11:55 AM

Chatted with Amber Mac and Leo Laporte last evening, and the resulting conversation (roughly 40 minutes) is now up and ready for consumption in the form of Inside the Net Episode 19.

It was an honor to be on the show, where topics included SimpleBits, web standards, books, current stuff that’s happening, iterative app building and other hopefully interesting things.

Some Speaking Events

Posted at 11:06 AM

The speaking drought is ending this summer and I’ll be taking Bulletproof Web Design on the road to two conferences. Don’t worry though, I won’t be regurgitating the book, but rather using the concepts as a platform to talk about some recent (and future) projects along with the methods and thinking that’s gone into them.

@media 2006 · London · June 15-16

Kerry and I visited (Old) England back in 1998. Loved it of course (especially Oxford). Looking forward to going back, although we originally thought this might be a first big family trip, it’ll be hard to be travelling solo. If you’re attending the conference and see a misty-eyed, intentionally (for now) bald guy glued to his iPhoto-enabled iPod — now you’ll know why.

@media looks like it’ll be a fantastic conference though, with quite an amazing line-up of speakers. Really looking forward to it.

Webvisions 2006 · Portland, Oregon · July 20-21

I’ve never been to Oregon, but have always assumed I’d really dig it. Webvisions has quite a line-up as well, spread out over two days of workshops, panels and keynotes. Should be fun times.

Arkanoid Edition

Posted at 6:05 PM

Another year, another realignment. What started out as a long-term desire to take better advantage of the footer (putting content chunks that were previously in the sidebar down near the bottom) quickly turned into more of a CSS refresh. This version is dubbed “Arkanoid Edition” (coined by Ethan and will make sense to anyone that spent their afternoons at the arcade in the 80s).

There are too many dusty corners to clean up, and so there very well might be some areas that still need attention. But somehow this feels more comfortable right now. The colors are toned down a bit, columns feel a bit more readable, etc. Surely not everyone will be a fan, but such is the life of a web site. Change is good. But it can also be disorienting.

Boxy, but Nice

One of the struggles with the SimpleBits logo is that it’s not a logo at all. It’s an icon. And works terribly in print unless it’s enlarged properly. I’ve debated changing the logo, always settling on maintaining the brand, and instead embracing its pixellated charm. Hence the square, blocky treatments that will likely warm the hearts of 8-bit fans and yet turn away the warm-and-fuzzy brigade.

Fluidity

I’m no longer straddling the fixed/fluid fence! Previous versions of this site featured a little toggle up in the top right corner enabling you to switch between a fixed or fluid width by means of a little Javasript and an alternate stylesheet. How diplomatic. With this new design, I thought I’d try a centered, fluid layout, using left and right padding on the body using a percentage value. That coupled with a conservative max-width set at 900px makes for a wider-but-not-too-wide solution. If only max-width (and min-width) worked in IE (aside from the Javascript fixes that exist).

Hiding from IE/Mac

I’ve also decided to intentionally hide all CSS from IE/Mac this time around. It’s not that it would be impossible (or even that difficult) to get this particular design working. It’s just that, for this site, it’s time to move on and have one less set of hacks to worry about.

What’s great, is that it’s dead simple to hide CSS from IE/Mac using the commented backslash hack just before importing your styles. Here’s my main stylesheet, screen.css, which imports the master styles as well patches for IE/Win.

/* import stylesheets and hide from ie/mac \*/
@import url("master.css");
@import url("ie.css");
/* end import/hide */

IE/Mac won’t get any of it because of that backslash at the end of the opening comment. And this is certainly OK for SimpleBits. Your site’s statistics may vary.

Posterity

Archived for posterity, and a comparison for those arriving here today for the first time, is a screenshot of the previous design.

A Tiny, Subtle Shift

Posted at 8:49 PM

As with anything that you do frequently, patterns emerge. Certain choices become comfortable, unrequired of a second thought. Such is the case for me when choosing colors for the web. There have been certain hex values that I’ll gravitate toward: #eee, #ddd, #ccc, #999, in the grey family, for example. I know what each of these will accomplish for me and how they play with each other before a stylesheet is created. I’m sure you have your favorites and old standbys as well. I fall into using and reusing these values because they work like a trusty wrench.

But it’s fun to cast those aside (at least temporarily), changing things by an extremely small measure. At times, it can mean all the difference in devising something fresh, new and different.

This happened while working on a recent project. Instead of combining my usual #eee, #ddd, and #ccc, I instead settled on combining #f5f5f5, #e5e5e5, and #d5d5d5. I know, this sounds completely trivial, doesn’t it? I mean, the difference is so damn subtle, it’s liable to go unnoticed by the average user, not to mention indistinguishable on varying screen types. And on top of that, they’re all far from being web-safe hues. But all that aside, for me at that moment, the slightest change made all the difference in making this particular project stand on its own. A temporary step outside the familiar — even if that step is purely the benefit of me, as the designer.

The main point here being: sometimes a tiny, subtle shift in the way you do things can be all it takes for things to seem new, exciting and right again (perhaps a micro-realignment?). This same philosophy can of course be applied to the non-web world. Just a few hours ago, Kerry and I were tossing around statements like, “we need a new house” or “we need to put on an addition”. Later, we started hypothetically shifting furniture around in our minds, and suddenly there was this renewed excitement in making something old, new again. A tiny adjustment that (for the time being anyway) quenches an urge for broad, sweeping changes.

Next week? I’ll be back to #eee. Maybe.

30 Comments

New Odeo Stuff

Posted at 4:20 PM

There’s some cool new stuff being rolled out over at Odeo. Firstly, a new audio page, with a streamlined Flash player, space for photo, etc. Also, in the spirit of casual content creation, you can share audio with only your Odeo or email contacts (existing users will want to listen carefully to the end of the aforementioned (or aforelinked?) message for info on other damn cool new features).

Film Critic

Posted at 5:00 PM

Here’s something I view as a serious design flaw. It involves food packaging, so buckle up. There’s a standard for containing goopy, spreadable foods and it usually takes the form of a short, round, plastic tub with a re-sealable lid. Hummus, salsa, and feta cheese are a few products that come to mind that share this type of packaging.

57 Comments

Chameleon: a new icon set that changes color

Posted at 3:00 PM

I’m excited to finally announce a little something I’ve been working on for quite awhile. Chameleon is a unique stock icon set for the web that features simple, friendly, universal shapes designed and hand-crafted by SimpleBits. The set contains 70 royalty-free icons, each weighing in at a standard 16x16 size (perfect for favicons) in GIF format. Chameleon is unique in its ability to change color, allowing you to custom match the set to your own site’s color pallette.

Embrace the Scroll

Posted at 4:17 PM

Derek Powazek on his newly redesigned site (which is quite nice, and spotted via Cameron):

Page bottoms are the most valuable screen real estate there is. You read that right. All that nonsense about people not reading and not scrolling is complete bullshit.

Right on. I tend to (unscientifically) agree that people don’t mind scrolling — and, like Derek goes on to say, the people that do scroll are the ones that are truly interested in what’s on the page. It’s interesting food for thought.

56 Comments

Photoshop Automation Inquiry

Posted at 4:55 PM

I’m working on a new icon set titled “Chameleon”. The style of each icon will enable the entire set to easily change color, based on the owner’s needs. For example, a single click of the paint bucket tool in Photoshop would color a background “tile” that is shared by the entire set of icons (which are really each in their own separate PS layer). I’m being a bit vague here, as I’m not quite ready to release ‘em.

32 Comments

Mighty Mouse Reflections

Posted at 4:11 PM

On Wednesday, I had to buy a new battery for my 1.5 year-old PowerBook. Apparently they don’t live that long, and I was getting a whopping 10 minutes out of a full charge. PowerBook batteries aren’t all that exciting, but I also brought home a Mighty Mouse, which is only slightly more interesting.

53 Comments

Been There, Done That

Posted at 11:19 AM

For whatever reason, I often struggle with visited link treatments, perhaps because (for me) it’s often an afterthought. A color palette is selected, the page is designed — now it’s time to figure out how best to show that a link has been visited. For most sites, it’s important to visually signify where the reader has been, and not everyone handles it in the same manner.

52 Comments

Odeo Opens its Doors

Posted at 10:55 AM

Discover, create, and subscribe to original audio content for your iPod or MP3 player. Earlier this month, Odeo opended its doors to the public, with a site design from SimpleBits.

New Book: Bulletproof Web Design

Posted at 10:11 AM

I’m happy to finally announce my new book, Bulletproof Web Design, to be published by New Riders this summer. It’s now completely written and heading to the printers this weekend. If all goes well, it should hit bookshelves in early August.

microformats.org Launched

Posted at 10:28 AM

Officially announced at Supernova2005 earlier this week, a new community-based site has been launched to be the official home for microformats — with a logo and simple site design from SimpleBits.

Recommended: Ben Sherman Sneakers

Posted at 2:42 PM

I often call myself “1/2 vegetarian”, as my wife is a full 100%. Meals at home are usually meat-free. But I can also claim that my feet are 100% vegan, thanks to a pair of Ben Sherman “Compton” sneakers from VeganEssentials.com (I’m not getting paid to mention this).

It’s like a pair of suede Adidas, minus one stripe, and in (breathable) canvas. This particular pair has been nestled in the dark reaches of my closet for the past eight months or so — emerging last week for the summer season. Here’s to meat-free shoes.

42 Comments

Exceptionally Negative

Posted at 10:39 AM

There are situations when using negative margins on an element can be the easiest way to “nudge” it out from the rest, treating the exception to the rule in order to simplifiy code.

34 Comments

Typography Resources?

Posted at 10:11 PM

Attention to typography can be as important as anything when it comes to design. And with the web’s limited typeface choices, it’s only natural to gain as much knowledge as possible on the subject — getting creative with the little we have to work with. In additon, it’s amazing how the visual quality of something can be drastically increased by choosing the right typeface as well as understanding creative ways to control and present it.

So I ask for your recommendations: what books or online resources provide the best, most helpful information regarding typography — identifying typefaces, how to best utilize type, etc.? I know there is most likely an endless amount of information out there, but knowing where to start is essential.

65 Comments

Potentially Useful Photoshop Tip #1

Posted at 11:27 AM

I rarely read manuals. I realize my productivity could be drastically improved if I studied the tips and tricks related to the things I use in my everyday work. But instead, I end up happily discovering time-savers as I go along. Sometimes years after using the same application over and over.

61 Comments

DPI for the Pixel Guy

Posted at 7:48 PM

If you’re ever in need of full-color business card or postcard printing, look no further than 4by6.com, an online service for printing great quality cards. Recommended to me by Ethan and Josh, the process couldn’t have been easier — with templates and instructions on how to create high-res EPS files to be uploaded directly to them.

Just download their templates, drop in your artwork, then a custom application uploads your completed files to 4by6. PDF proofs are posted online — once those are approved the cards are shipped out. The quality’s great, and it’s also very affordable. I recommend two things: order a free sample kit from them, and go with the satin finish (but not the satan finish).

As a web guy who always struggles when looking for print options, a find like this is gold.

Wine as a Work Enhancer

Posted at 4:23 PM

While sitting on an endless stack of work over the past few months, I’ve slowly discovered ways in which to make myself more productive. Or, if not more productive, then at least making the time tick by as pleasurable as possible.

One trick when working into the evening hours that’s been successful, is to work with a glass of red wine within arms reach. I’ve slowly been warming up to wine these days, and have found it to be somewhat of a work enhancer. Beer, on the other hand, seems to be more of a work detractor. Where beer fills me up, makes me sleepy and generally slow (sometimes the intended effect), wine does the opposite — waking me up in a sense. I can’t/don’t do this every night of course, and maybe that’s why I think it works so well, particularly in the design phase of a project.

Warning: drink too much wine, and your designs could end up looking like this.

I don’t mean to endorse the consumption of alcohol to improve workflow, yet I’m sharing this as a tip that’s works for me. I imagine everyone has a different work enhancer — or several to mix up throughout the week. Hopefully it’s a) something legal and b) not bad for your health. The wine could either be considered either bad or good (for lowering cholesterol!).

A scientific explanation for why wine helps, I don’t have. Most wine drinkers know that it has a tendency to make people a bit more chatty than usual. I suppose channeling this chatty energy is what assists the workflow, since there’s no one there to chat with. That, or it just tastes good.

If you’re not into wine, go see the excellent film Sideways. This will help. If you are into wine, what’s your favorite bottle? Mine of the moment: Trinitas Zinfindel (the red stuff, not the white, fake stuff).

124 Comments

Ode to the Breast Pocket

Posted at 12:27 AM

There are but a select few shirts in my wardrobe that sport them, but the ones that do are quickly becoming favorites. For I am here today, in the year 2004, to salute the single most groundbreaking development in garment history — the breast pocket.

My first shirt with a BP (people “in the know” will call it this) came at a young age, I’m sure. Perhaps the necessity of dressing up for a wedding called for a special shirt with a tiny, extra piece of the fabric sewn on three sides (sewing present on four sides is referred to as a “patch”).

Over the years the BP was always there, overlooked, its potential never fully realized. It was just forgotten decoration. Heck, most of the time there was a BP on the sport jacket itself. In which I’d also place nothing. It would never dawn on me to use this narrow, shallow receptacle for anything. Until recently.

The convenience of the BP is staggering. Take this scenario for instance: I needed to carry a beer, a bowl of popcorn and the TV remote to the couch. A quick examination of the items proved that the TV remote was the best candidate. I slid it in the BP, and made the journey in one trip. Brilliant. And just last week, after filling my car’s gas tank, I took the receipt from the pump and got back in car. Rather than the awkward motion of grabbing my wallet from my back pocket (a pain in the arse), I instead just slipped it into the BP and off I went. Now imagine plane tickets, toll-booth receipts, credit cards, business cards, Pop Tarts (?), hotel card keys and more.

After having realized the brillance of having a shirt with a BP, I now realize that I need more of them. During the warmer months, short-sleeved, collared shirts will work—albeit, they project a sometimes unwanted “dressy” appearance. I now need to invest in some “pocket tees”. A simple t-shirt, with a BP added.

For reasons I won’t go into, the BP has less of a popularity on women’s clothing.

So perhaps you too, may have overlooked the value of the breast pocket. If so, the next time you need to carry something small, flat, light and approximately 2 1/2 inches wide by no more than say, 6 inches tall—look no further than your own shirt. I have started to, and it’s paying off. Bigtime.

Next week’s fashion commentary: Does Anyone Really Use That Tiny Pocket Watch Pocket on a Pair of Five-Pocket Jeans?

99 Comments

Anatomy of an Icon

Posted at 10:34 AM

Since releasing some icons of my own, I’ve received quite a few messages asking “how do you create an icon?”. Well, I can’t tell you how to create an icon — but I can tell you the steps I take to create an icon. There may be easier ways. There may be better ways. Here’s a quick look at the methods and techniques I used to create an icon from the Overcast set.

Our goal is to create an icon in two standard sizes: 16x16 and 32x32 (pictured, right). I choose to create the smaller version first, then double the size and clean it up (more on that later).

Bulletproof Slants

Posted at 10:27 AM

While working on the navigation for a project recently, I had the want/need to do something like this:

Nothing ground-breaking or cutting edge here (and certainly not meant to solicit ooohs and ahhhs from the gallery), yet when faced with a little challenge such as the design above, I do my best to make things as bulletproof as possible.

Humor me, while I elaborate.

ESPN Search

Posted at 11:18 AM

In a week filled with redesigns and launches, I have another small one to add today.

I’ve had the pleasure of working with ESPN.com recently, and the first results have found their way onto the site in the form of a from-the-ground-up redesign of ESPN Search.

A stronger, more cleanly organized design was the goal here, along with several added features, including a “Most Searched” pop-up window that launches from the home page that matches the look and feel of the new section.

Toggling between ESPN and Web results is now easily achieved by familiar tabs — utilizing the Sliding Doors concept (gee, that one must be a keeper, eh?) to allow for the number of results to appear in hypertext next to the tab’s label. Because of their square shape, I was able to simplify the CSS a bit, by only using one large image instead of two. A larger portion of the background image is revealed when more text is added or if the user bumps up the text size.

Using an unordered list also makes it easy to add more tabs in the future for other search filtering options.

Flexiblity was also key for building the player and team “modules” — where stats and other links related to a particular team or player could vary in number in length — yet still keep a rounded box shape and design. I’m quite happy in the way all text on the site is adjustable for low-vision users, with the design expanding along with it.

For reasons beyond anyone’s direct control, the new Search pages will not validate — but I would hope that (even without validation at this point) the improvements in accessibility, managability and file size aren’t diminished because of it. So, hats off to the ESPN.com team for continuing to make web standards a priority. It’s been great working with them so far.

Poor Parking Interface

Posted at 8:59 PM

Due to the fact that I’ve visited The Home Depot approximately 2,483 times this winter — I’ve noticed something. The parking interface for the store is unacceptable. I’m not talking about a web site here.

Figure 1

If you’d kindly take a look at Figure 1, this will all make sense.

Upon arriving at America’s home improvement super-store, I have two choices. I either park near the extreme left of the building, where I then have a pleasantly short walk to the store’s entrance. Or, I could park near the extreme right of the building, where following my purchase, I’ll have a short walk to my car upon exiting. It’s important to note that the store is gigantic

Ninety percent of the time, I choose to park as close as possible to the entrance. I think to myself, fantastic. Now I have a really quick walk to the front door. However, when I’m ready to leave the store — I only have one option, to leave through the exit located at the opposite side of the store, miles from where my car is parked. Barricades prevent me from going back to where the entrance is. I then have a brutally long walk, back to the car. I cannot win.

NOTE: The reason this is such a big deal is that it’s cold outside. Very cold. So this is merely a seasonal annoyance.

I believe the parking design at The Home Depot to be a wonderful example of bad user interface. Why must they force customers through entrances and exits that are so far apart, leaving no option of parking near both of them? Perhaps there is a good reason. But I just don’t see it.

Because I am insane, I of course attempt to relate this to a web site. It could be the equivalent of giving your users two navigation options, but with many, many clicks in between either of them. Or I may be lazy.

61 Comments

There Are Only Tradeoffs

Posted at 10:44 AM

I absolutely love this quote from Eric Meyer’s Epherma post today:

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.

While he’s talking specifically about his font-size choices for an upcoming redesign — I believe you could clearly apply this to any web design decision.

There are folks out there that loathe this about designing for the web — that at times there just isn’t one neat and tidy, concrete correct way to do a certain something. I’ve grown to love this — that it’s always in flux, there are new ways to accomplish goals being discovered everyday, and people relentlessly pushing the envelope.

Getting back to Eric’s quote though, remember that the state of web design in 2004 is all about tradeoffs: Liquid vs. fixed, pixel sizing vs. ems vs. keywords, FIR vs. LIR vs. no-IR, float vs. positioning in layouts, hackful vs. hackless CSS (hackful?), etc…

It’s all good though. Make a decision and stick to it. Heck, then change it the next time. Experiment with methods that you previously wrote off without a second thought. Have a beer (or soda) and remind yourself that it’s all about tradeoffs. I’m certainly going to try as well.

12 Comments

Better Than a Webcam

Posted at 3:21 PM

I was just browsing the 1976design blog and I’m amazed at what Dunstan has done with his realtime weather panorama images for the header of the site.

Redrawn from actual photos of the view from his location in England, an XML feed from weather.com triggers the correct image — detailing time of day and whatever weather condition is actually occurring at that moment. What a brilliant idea, and I’m amazed at the detail — moon phases?! Zodiac signs?!

More is explained on the Colophon, with original photos before they were redrawn as well as listings of every possible weather condition. And be sure to expand your browser window to reveal the entire scene. I’m impressed.

26 Comments

Curiosity Cured

Posted at 1:11 PM

Well, that was fun, wasn’t it? Thanks to all who commented on the watch question. I had no other motive for posing it, other than pure curiosity. For those interested, I’ve tallied up the results:

• Analog(ue): 66
• Digital: 23
• Both: 14
• Neither: 15

I was sitting through the 45 minutes of commercials and previews prior to viewing the excellent motion picture Elf, when I glanced at my watch (analog for those keeping score). I began wondering if others in the web world preferred digital or analog. Looks like analog is the winner here.

What does it mean? Absolutely nothing. Right?

24 Comments

Designing in Public

Posted at 2:58 PM

Hats off to Dave Shea for his redesign of Mozilla.org (publicly released beta). Nice, clean design and structured markup. It’s a great contribution to the project.

Also of interest are Dave’s notes on the response of the beta, and what’s left to tackle.

In general (and as Dave mentioned), thick skin is needed when designing a popular site (like Mozilla.org). Validation, accessibility, design choices, browser quirks — just a few of the hurdles to leap over when redesigning any site — but are then magnified ten fold when dealing with something larger than your average personal site or weblog.

The reality? Getting everything 100% “correct” is hard stuff.

Feedback is important and necessary, and trying to break a design — turn it on its head and shake out the bugs — can be invaluable. But what’s important is this: when all is said and done, any attempt in making gains in validation, accessibility, markup structure, etc. make the web site better than it was. And if you fancy yourself a web designer, your first gesture should be a tip of the (Red Sox) cap to anyone who dares.

6 Comments