CSSquirrel A look at web development and web design by Kyle Weems

Yesterday I launched Robot Rum, an automatically-generated webcomic/humor experiment that involves robot pirates. At the moment it’s more like Mad Libs (holy crap those still exist?) going through a blender with some pretty pictures attached, but in theory at some point Pete-O-Tron (the anthropomorphic PHP script that runs the site) should be fine-tuned to the point where it starts making sense and sounding funny.

Regardless of whether Pete learns humor, the site was fun to build for a number of reasons, one being that it was my own project and not a client’s. So if it was going to be insane, at least it was my brand of insanity for a change. Another is it let me experiment with a lot of goofy ideas or concepts that I’ve been playing around with in my head for quite a while.

Since I can milk talking about the design/development choices that were involved with Robot Rum for blog content, I’m going to do a mini-series on the topic. First up:

Search Engine Friendly Comic

For some reason I keep coming back to working on webcomics. Before Robot Rum and CSSquirrel there was Nervillsaga, a now archived and offline comic following fantasy adventure stereotypes. Like CSSquirrel it had update frequency issues. It also was, as is typical for webcomics, a single image for all the frames, characters, text, and so forth.

For the most part, there’s nothing wrong with that, but one thing that I’ve recently thought is that it also meant that each day’s comic provided no real new content to search engines. It was just an image with an alt attribute of ‘comic’. So after about 600 strips, the search engines still didn’t have any real feel for what was going on other than the little blog-like text I’d follow each strip up with (this was before I knew what a blog was, and apparently still felt like harassing people with details of my life). Now, I could have inserted all the text of the comic into the alt attribute, but I always felt like stuffing attributes with a couple paragraphs sort of violates their purpose, and once again there’s no semantic context for any of the text. To the search engine it’s just one long string.

About a year ago I started experimenting with the idea of assembling a comic by layering transparent PNGs and floating the speech bubbles as actual text. At the time I was goofing around with sIFR as the possible candidate for making the text look appropriate (almost universally webcomics use fancy, cartoony fonts appropriate to the genre they’re in), but there were a number of bugs that cropped out and I became distracted by something shiny.

When I came back to the idea of doing this, with Robot Rum, I decided to jump into the deep end. The comic acts like a stage, with each ‘actor’ absolutely positioned in his appropriate area as PNGs, complete with a little expanding speech bubble that holds their text. When the styles are off, you’ll see that the markup reads like a small script, with the day’s title at the top, the date, then the dialog (in order) complete with who is speaking. In future revisions of the site there’ll be a description field that paints the setting, and any ‘props’ on the stage (such as the crow’s nest) will be better fit into the script (rather than it’s current existence as an arbitrary ‘crow’s nest’ piece of text below the dialog.

What this means is that with each new comic, regardless of whether there’s user feedback on that day, search engines will have more text in a slightly more useful semantic fashion to associate the site with. And as Pete (hopefully) streamlines into a more humorous author, the jokes and gags of the strip are readable in order.

I suppose as a side effect this means the comic will be more accessible to a screen reader, which could actually read the text of the dialog. This wasn’t deliberate, though, and there’s plenty of other aspects to the site which would need to be fixed prior to me making any claims about accessibility.

I doubt that Robot Rum is the friendliest such site for a search engine, as I don’t have any expertise in optimizing other than adhering to standards as much as possible. I haven’t really played around with keyword, but at least its content should be more concrete for robots as well as humans, and if Pete had feelings and thoughts I’m sure he’d want that.

I love web people conferences. I’ve only attended one so far, but the joys of web-related careers is that web people have a tendency to blog about pretty much any aspect of their existence (in Mindflykateer Karina’s case, her typical topic of bowels might be a bit too much disclosure for most, but she’ll be damned if she’ll let that stop her). Conferences tend to be on that list of typographical diarrhe.

The reason for my commentary is An Event Apart: San Francisco. Did I attend? Alas, no, although I need to get around to visiting that city without my ex-girlfriend, since my only post-childhood visit to that metropolis was ruined by her refusal to check out the Chinatown lunar festival that was going on mere feet from our hotel in favor of a swing dance event (note, I can’t dance. At all. She was going to dance for her).

However, thanks to awesome attendees, I can get a lot of the guts of the event via awesome summaries such as this one by Jeremy Keith, discussing Day One of the event. His post on the subject manages to capture the digestible, ethereal essence of the conference while shedding the malign, useless husk of buzzwords and coffee cups that pile up in such events.

This is excellent. It makes me feel like I’m learning useful things despite this week’s obsession with drawing robots with vector graphics. Hooray!

It’s time for the 2008 “Survey for People Who Make Websites“, by A List Apart. The good people at ALA did the same thing last year, and the results they provided gave an informative, intriguing snapshot into the industry that I had at the time just recently had the joy to be making money in (instead of doing for kicks).

I’d like to point out how I enjoy ALA’s use of the phrase “People Who Make Websites”. It delightfully sidesteps the industry’s identity problem for multi-discipline people who wonder “am I a developer, a designer? An engineer?”

Regardless of what your business card says, if you make websites, go forth and be surveyed.

Now.

As I’ve mentioned a couple times by now, I’m a strong believer in the fact that you never stop learning in this industy (the web [insert noun here] industry). Well, at least if you want to stay relevant and keep finding work. This is why I’m always excited by the various web design/development conferences out there, and especially love the endless deep pool of tutorials that exist online for any Joe or Sally to read.

As much as I’ve teased Opera in this site’s comics, I really have to hand it to them. Recently Opera revealed a website that’s devoted to the very concept of web education: the Opera Web Standards Curriculum. It’s got about twenty articles devoted to web design and development, and there’s the promise of more on the way. These aren’t quickly written tutorial blog posts, but polished well written articles that are meant to give a good foundation for anyone interested in web standards and development.

The majority of the articles contained there thus far are mostly about history of the web, the concepts of web standards, basic web design theory, and HTML. Which I think is brilliant, since this is the area that most online tutorial sites skip right past, and thus there’s the most immediate need for. Discussions of things like CSS I’m sure are in the near future, and I’m excited to see their take on it.

A new Hulk movie is coming out soon. By all accounts, this one isn’t a monstrosity featuring squid DNA, and much more closely resembles the comic franchise it was built upon. Like the movie’s signature character Bruce Banner, I’m generally considered to be a fairly mellow fellow guy. (Unlike him I have neither a doctorate or a gamma radiation tan). Yet, like Dr. Banner, I also can sometimes feel a powerful rage coming over me.

Sadly, I don’t gain a few hundred pounds of muscle and turn green. I just make growly noises and squint my eyes.

I’m reliably informed that it’s not that intimidating.

What is the source of this pathetic geek rage? Web designs that are one page proofs of a pretty homepage, accompanied by a summary by clients to the effect of “Make the rest of the site look like the homepage.”

Why does this drive me insane? Because this rarely (in fact, never) works, and I find myself going back and altering (and re-altering) the carefully crafted markup and CSS that was made for the aforementioned homepage so that the core functionality of their website actually fits inside the design. Usually the “design”, as a result, turns out to resemble the homepage less and less with each pass, until what is left is typically some sort of chimeric mismatched beast.

I’m sure there’s plenty of smart methodologies to prevent this sort of thing from happening, but it occurs to me just often enough that I feel the need to rant about it here.

Look, as Jeffrey Zeldman said in one of those insightful tweets that I’m always hoping to witness (instead of the less insightful tweets about the contents of a man’s lunch): “Content precedes design. Design in the absence of content is not design, it’s decoration.”

I think that’s one of the most useful/relevant things I’ve seen written about web design in months. Based on the responses at his blog, I don’t think I’m alone.

I’m going to add an addendum to this. Barring some exceptions in the “wrapping paper” category, a pretty homepage is not a website. Nor should the homepage be the focus of the design. Creating a design by starting with the homepage, handing it to the developers to cut, and then later heavily modifying said design to actually accomodate the core features of the site wastes time, money, and patience.

Let’s think about it for a moment. Are your customers coming to your website to check out a nifty banner? Are they there to look at a really wicked paragraph of “about me” text? Are they there to see an embedded flash movie of the ocean?

In case you’re not following along, the answer is no. (Except maybe for the ocean movie, depending on the purpose of your site.) They are there to shop at your store, read your blog, play your game, read the news, share their life story, or fulfill whatever function it is that your website serves in their life.

Now, granted, some pages (like blogs about adorable critters) combine the homepage and the core function of the site. In the case of the linked blog, it’s all about displaying cute animals, and they’re doing that from page one. But even in that case, the homepage is following the function of the site, rather than the design following an arbitrarily pretty (and potentially pointless) homepage.

Look, take a page from Daniel Burka, who at the WDN 2008 conference talked about taking the inspiration for the design of a site from the core function the site serves. He’s done it with a little site you may have heard about (Digg, do I even need to link this page?), and I dare say it’s worked well for them.

Seriously, next time you have a pretty proof of your website’s homepage all decked out with bells and flowers, do me a favor and use it to wrap your daughter’s next birthday present. Then, after you’re done affixing the bow, go back to the drawing board, figure out where the tasty flavor of your site lives, and design that first. I think you’ll find that the site (and your budget) will do better as a result.