During the portion of his talk where he discussed image replacement and its impact on findability, he addressed the white elephant question that has likely occurred to most designers who have used image replacement over the past five years or so: what does Google think of CSS image replacement, anyway? But the part that surprised me is that he actually had an answer: Google's okay with it, you won't be penalized for using image replacement properly.

Though I've long believed this to be true, I had never heard a conclusive answer. One assumes Google is smart, and their algorithms ought to know the difference between keyword-stuffed text and plain English content written for real people. For example, I've often wondered if the potential to abuse image replacement and load invisible text with keywords was akin to, say, the potential to stuff keywords into the alt text of img elements, or even into meta tags. The net result seems similar in all three cases: otherwise-invisible text on a page that could unduly influence Google's ranking. Presumably whatever algorithms they use to detect keyword-stuffing on the other two elements would equally apply to text hidden with CSS.

Not to mention the more compelling evidence that numerous sites I've built using image replacement techniques fare well in Google's ranking. That fact alone indicates that Google won't ban a site for simply making use of image replacement techniques (though I'm sure they've banned numerous sites using the technique in a sneaky, black hat SEO manner).

But again, I've never heard of an official blessing from Google. So I did some searching, and asked him for some follow-up (thanks, Aaron!), and here are the relevant resources that came out of that conversation:

Hidden text and links

The second bullet ("including text behind an image") accurately describes a few image replacement techniques. It's mentioned in the context of being a potentially untrustworthy activity, followed by a warning of the consequences of using it incorrectly. However, further down the page, the focus changes to techniques used for the sake of accessibility and why you would want to describe something search engines or users with assistive technology may not be able to access. This is a fairly accurate description of the intent behind image replacement. The article also suggests a handy rule of thumb for judging these techniques on your own: show the Googlebot the same thing your visitors see. Properly-used image replacement passes that test.

Best Uses of Flash

See point #2 in regards to sIFR, an ideologically similar concept to CSS image replacement, which suffers from the same potential abuse vectors. As this is a Google blog, it appears sIFR has an official blessing. Also mentioned in this article is a similar guideline to the previous one: show users and the Googlebot the same content. Sensing a theme here?

Working with Flash, images, and other non-text files

More of the same. Provide text alternatives for non-crawlable content, sIFR's great, etc.

So it appears that, short of a set of stone tablets carried down from the hills of Mountain View, we do have a fairly clear answer. Using CSS image replacement in a responsible way, where the image truthfully represents the content it's replacing, is safe to use. The simple act of hiding text from users is not enough to get your site banned from Google's index.

The first step was to create a mobile style sheet. For this I duplicated the CSS file I've already built for large screens, and started stripping out the style that doesn't work so well on a smaller screen. The layout was simplified into a more linear single column, and some elements were re-done to provide a larger target area for a maximum Fitts factor, and background images were dropped wherever possible to cut down on bandwidth demands. I tried building something that would work well on more mobile devices than just the iPhone, but given that it's my testing device, it works best on that platform for now.

And while I was at it, I thought hey, why not do a TV style sheet too? I've got a Wii, it's got a great browser, and a low-res TV screen could benefit from the same kind of special attention given a mobile device. So I built one of those as well, doing things like increasing font size, increasing border widths, and stretching images to double their original size.

But here's the thing about media-specific style sheets: the browser in question has to support them. Mobile Safari grabs all screen media style sheets, and ignores the handheld media type entirely. So despite good intentions, my efforts were wasted on it. And that's what led me down the road of user agent sniffing...

Okay, let's get this out of the way up front: user agent sniffing sucks. Devices like the Wii and the iPhone have incredibly capable browsers that can render these sites the same as any desktop browser, so it's reasonable to assume users will want to do so from time to time. (And I suspect that's why Mobile Safari uses screen in the first place.) Forcing a specific version sucks... if done improperly. But when used well, and not mandatory for the user, I think it's not entirely evil. And it leads to other potential improvements beyond what CSS can provide, like selective content serving.

The way to sensibly handle sniffing seemed to lie in providing an out: the mobile and TV versions of the site both have a special header on every page that provides a "regular site" toggle link. Any time someone wants to switch back to the regular site, the link is right there in front of them. And all versions now have toggle links in the footer to switch between different media types; given that I've seen this on multiple mobile sites, it feels like the site's footer is resolving into a standard place for where these type of switches ultimately belong.

To make all this work, I had to bust out the PHP. I'll preface this by saying I'm hardly a proficient coder, so there are bound to be ways to optimize what I'm showing below. I started with a pair of arrays: a list of mobile browser user agent strings, and a second list of TV browsers. The latter is a bit light at the moment, due to my lack of knowledge of what sort of browsers are available for use on TVs. (And that underscores why having a media toggle is useful: if the browser in question isn't flagged by the sniff, the user can manually invoke the TV version.)

// ==========================
// media check

// array of mobile devices
$userAgentsMobile = array (
  "Blackberry",
  "Blazer",
  "Handspring",
  "iPhone",
  "iPod",
  "Kyocera",
  "LG",
  "Motorola",
  "Nokia",
  "Palm",
  "PlayStation Portable",
  "Samsung",
  "Smartphone",
  "SonyEricsson",
  "Symbian",
  "WAP",
  "Windows CE",
);

// array of tv devices
$userAgentsTv = array (
  "Nintendo Wii",
  "Playstation 3",
  "WebTV"
);

Arrays in place, the next step was building a few functions to do things like comparing these arrays with the user's actual user agent string, and setting cookies to make these media types persist. More on the latter in a second.

// this function takes two arguments: an array of user 
// agents, and a specific user agent.
// it will then try to see if the specific user agent exists 
// within the array. If so, it will return true, otherwise 
// it returns false.
function checkMediaType($uaList, $uaKnown) {
	// check user agent string against array
	// return true if found, or false if not found
	if(in_array($uaKnown, $uaList)) {
		return true;
	} else {
		return false;
	}
}
// this function takes one argument: a string value that 
// specifies a media profile. It will then set a cookie in 
// the user's browser. It returns the media profile value, 
// to be used as a variable later in the page
function selectMedia($media) {
  setcookie ('media', $media, time()+31536000, '/');
  return $media;
}

With those functions in place, the code below ended up being the core of my script. In the first major if statement, I'm checking to see whether a cookie is set; the cookie exists to avoid parsing the user agent arrays every single time the site is loaded. I doubt I'm saving that much time if any, given my currently very simple arrays. But I can see them growing over time, so it seems to make sense that this value should persist on the user's end once the user agent has been determined.

But if no cookie is found, then I'm doing the actual sniffing. I check the user agent string against both the mobile and TV arrays, and then act on them if they match one or the other. If neither matches, I default to the screen version of the site.

// show standard screen version by default
$mediaVersion = "screen";

// toggle media version if cookie is set
if (isset($_COOKIE["media"])) {
  if ($_COOKIE["media"] == "mobile") {
    $mediaVersion = selectMedia("mobile");
  } elseif ($_COOKIE["media"] == "tv") {
    $mediaVersion = selectMedia("tv");
  } elseif ($_COOKIE["media"] == "screen") {
    $mediaVersion = selectMedia("screen");
  }
} else {
  // if no cookie found, sniff media type then set cookie
  $knownUserAgent = false;
	
  // compare the device arrays against the 
  // client's user agent
  $mediaTypeMobile = 
    checkMediaType($userAgentsMobile, $_SERVER['HTTP_USER_AGENT']);
  $mediaTypeTV = 
    checkMediaType($userAgentsTv, $_SERVER['HTTP_USER_AGENT']);

  // if media version is found, set a media type cookie
  // otherwise flag this browser as screen to save 
  // time on future loads
  if ($mediaTypeMobile) {
    $mediaVersion = selectMedia("mobile");
  } elseif ($mediaTypeTV) {
    $mediaVersion = selectMedia("tv");
  } else {
    $mediaVersion = selectMedia("screen");
  }
}

And then the last step is checking to see whether any of the media toggle links have been selected. If a user is viewing the mobile site and wants to switch over to the regular site, I need to re-set the cookie so their new preference persists. This is all done through simple query strings; the HTTP GET variable being checked for (media) can be invoked simply by adding ?media=mobile to the end of a URL or link.

// override media version and set a new cookie 
// if they have selected a "show {media} site" link
if ($_GET["media"]) {
  if ($_GET["media"] == "mobile") {
    $mediaVersion = selectMedia("mobile");
  } elseif ($_GET["media"] == "tv") {
    $mediaVersion = selectMedia("tv");
  } elseif ($_GET["media"] == "screen") {
    $mediaVersion = selectMedia("screen");
  }
}

Now that the cookie exists and the $mediaVersion variable has a value, I'm all set. Anywhere in the rest of my site, I can use a simple if statement to filter out the specific media version I'm targetting, and selectively show or hide content for it. This is how I'm hiding my header photo from the mobile version, for example (simplified for clarity):

<?php
  // don't serve this up if we're talking mobile
  if ($mediaVersion == "screen" || $mediaVersion == "tv")  {
?>
  <div id="header-photo">
  <img src="/i/photos/<?php 
    echo $currentPhoto["largephoto"]?>"
    width="505" height="243" 
    alt="<?php echo $currentPhoto["description"]?>" />
  </div>
<?php
  }
?>

I put together the entire set of functions and a couple of small demonstrations of selective content into a file you can grab. (live demo)

And to finish, a couple of highlights from the alternate media versions of this site. The mobile version goes small by stripping out images where appropriate to save on download times; the header photo is gone, avatars on comment pages are gone, and most of the decorative PNGs have been removed or converted to CSS border properties. While the TV version goes big by doubling font size, increasing border widths, stretching the header image to fill the entire horizontal screen width, doubles avatar sizes, and using a higher-resolution version of the site's logo.

Quick caveat: I've only had the opportunity to test the alternate media styles on a limited range of devices, and likely won't any time soon. Device testing is too hard if you don't already have access to a wide range of devices. I tried stripping out some of the more complex CSS tricks like overflow clearing and absolute positioning, so even my Treo doesn't make a horrible mess out of the site, but no guarantees.

And the bonus question: why am I serving up the media versions with media profiles set to all? Simple reason: clicking through and viewing the TV-only version on a computer was seriously ugly, because it ignored the style sheet. As it should. But people will click through anyway, so that was problematic. Simple fix: media="all"

Updated to include iPod Touch.

Updated PHP for minor optimizations in response to comments.

I mean products in the sense of re-sellable items that appeal to a mass market, instead of services like individual design work sold to a single client. And at the moment I'm biased toward independently produced and sold products. I've been thinking about this question quite a bit lately, as might be evident by the icons I built last year.

It seems like everyone else is building a web application of some sort. While that's becoming a well-trodden path, you can't exactly slap together a few static Photoshop mockups and convince people to put up money. There's a heavy coding requirement that a lot of designers can't handle. Yeah, uber-genius designer + coder types like Shaun Inman can bang out one-man apps like Mint in their sleep. And sure, you can always team up with a talented coder and collaborate. But for the purposes of this post, let's put aside those possibilities and focus on strictly that which a visual designer is capable of producing on their own steam.

Here are the few ideas I've managed to scrounge up thus far:

T-Shirts

The big obvious one. With the success of Threadless there's clearly money in it. People will always need clothes. It's a safe bet. But it's also crowded; it seems like everyone and their dog is selling shirts these days, through CafePress or through their own sites.

Pros: services exist to help you get started, probably a safe choice. Cons: inventory and distribution management, finding an audience. Examples: Cottyn, SimpleBits (though it seems to be on hold at the moment).

Buttons

Also a possibility, but buttons seem like less of a product, and more like schwag. I might be under-estimating the draw of well-designed buttons, but my suspicion is that it's hard to retire off selling them.

Pros & Cons - same as t-Shirts, I'd expect. Examples: DS Buttons, El Boton

Icons

A lot of designers seem to be coming out with their own icon sets lately, and it's for good reason: icons may be the easiest product to get started with. There's no inventory overhead, and they're useful to designers in a way similar to stock photography or type, which both have proven markets. Of course producing good icons is awfully hard to do, so depending on where your talents lie, the barrier to entry might be higher than simply managing overhead.

Pros: low management overhead. Cons: unlicensed digital files are impossible to control, requires illustration abilities. Examples: Icon Shoppe, IconBuffet, Chalkwork

Stock Photography

Not only does this take strong photography skills, which (while related) are quite different from design skills, it strikes me as being fairly hard to do independently.

Pros: low management overhead. Cons: requires expensive gear, unlicensed digital files are impossible to control, requires photography abilities. Examples: aside from the now Getty-owned iStockPhoto or Corbis-owned Veer, I can't really think of any significant independent stock photography providers. They must exist...

Typefaces

I'll mention this for the sake of completeness, but it's not easy to crack into designing typefaces (or at least designing good ones) without years of prior experience. The few times I've customized type outlines I've been fairly glad it's not my job to do this for a living.

Pros: proven market. Cons: unlicensed digital files are impossible to control, requires a lot of experience and talent. Examples: Hoefler & Frere-Jones, Mark Simonson

Re-sellable blog/web site templates

Given the quality free themes for blog software, I think it would be rather difficult to put together a premium template and license it. The market has decided what themes cost: nothing. Again listed for the sake of completeness, but someone please point me to a good theme that someone's selling for actual cash money, that's also doing well? I think crickets are chirping.

I've seen some other interesting ideas at places like T.26 and their chopsticks packages designed by Carlos Segura (hat tip: Zeldman), and moving a little further out, more traditional products at indie designer stores like Meomi and Gama-Go.

It seems a bit ironic that moving away from the web and into physical products is the most obvious path for web designers to pursue; I wonder if it's possible to do both? Web-based products? Or at the very least, staying on the digital side as much as possible. I've been enjoying watching Dan Cederholm experiment with both digital and web products on top of more traditional products and publications, it'll be interesting to see how these various ideas evolve over the next few years.

And as for myself, well I've already mentioned the icons. I'm not getting rich off those, but I've seen a few interesting things happen since launching that I think will encourage me to keep producing new sets for a while. The numbers aren't there yet, but they're promising.

One thing I have learned though is what everyone will always tell you about marketing: it's not enough to have a product, you have to tell people about it, and convince them they want it. So at SXSW this year I've got a whole pile of sheets of icon stickers that I'll be giving away; each sheet features a mixed variety of icon stickery goodness, collect the whole set!

Figure: Preview of Chalkwork icon sticker sheets.

Ironic, isn't it? Giving away a physical item to promote a digital product? Welcome to this strange new world the internet's creating.

Update: I removed the word "web" from the very first sentence of this post because I think it was tainting people's interpretation of what I'm really asking for here. Medium isn't necessarily a factor, so much as existing skillset. If I had to boil down this entire post to a single question, it's this:

Hey, I've got these visual design skills, what can I do with them that will result in a product I can sell to people?

I realize I also talk about the irony of web designers creating physical products above, but that was meant as more of an aside than the theme of the post. The context of the quoted examples above point to where I'm trying to go with this, and they're mostly design-oriented items, and not specifically web-related.

SXSW

I seriously considered not attending this year. It seems there's a growing feeling amongst those who have been going for years that this event is getting to be a bit too much to handle, especially with the plethora of other web conferences that have sprung up in the past few years in their more intimate settings.

But, I'll be there after all! Paul Hammond invited me to be the "independent contractor" or "designer" or "hardly qualified, but maybe we'll get a few good stories out of him anyway" voice on his panel about collaboration during web projects. Don't let the web app focus in the title fool you, I don't do nearly enough of those to be that specific about the type of projects I've collaborated with others on; I'll be drawing from the experience I've had plugging myself into established teams, and working with clients directly. With a line up of three super-smart Brits and a talented Aussie, plus the token Canadian, come and see the Commonwealth throw down on Tuesday afternoon.

(And this year I'll be feeling Jeremy's plight, as it's looking increasingly like that room at the Hampton is going to be single occupancy. Sadly, Lauren probably won't make it this year, so if I'm a little distracted during any hallway chatter, it's not you! I promise!)

An Event Apart

When Jeffrey and Eric asked me to come speak at an earlier event, it pained me that circumstances didn't work out. I have never been to An Event Apart, and I've really really been wanting to go for some time now.

Happily, the latter part of April was clear for me, and I'll be heading down to join what looks like is going to be a crazy-good New Orleans date. My talk, "Living, Breathing Design", will be a look at how web sites change and grow during and after the design process, and how we can choose to add growth into our work. As always, expect lots of design and code talk.

(psst... and if you haven't registered yet, the magic code is AEADSCSS. It's $50 in your pocket. Use it.)

While I'm at it, a few more things I've been meaning to mention in some capacity or another for a while now (funny how far off the wagon you fall when running a conference of your own):

Rosenfeld Media's First Book: Mental Models

This one is particularly close to my heart as I've been working with Lou for the past few years, and during that time witnessed his publishing company evolve from a concept to reality. We were very privileged to have Indi Young, the author of Mental Models, join us at WDN this year, and early reviews have pegged this one as a winner. If you grab a copy, make sure to use the code FOSHEA10 for a small discount.

The Lab with Leo

Back in November I went in and did an interview with Leo Laporte, which is now up on Google Video. It's just a basic overview of CSS, and like all rapid-fire on-the-spot TV interviews there wasn't much room for nuance and error-correction as we went, so pardon the stalling for time while trying to figure out how to explain things like the history of CSS... Still, I think it came off rather well, for an introduction of a style language to the more general audience who watch the show. (Ian Lloyd, you owe me a beer.)

Since I had to jailbreak my phone in order to get it working outside the four countries where it has been officially launched, it was hardly a stretch to start playing around with the software that's being developed anyway, SDK or no. This could very well end up being a preview of some of the first applications that will be officially available once the SDK is released.

My list below isn't comprehensive by any means; these are just some of the apps I think deserve mention due to their utility or polish. There's a lot of crap to wade through already, so I think it's worth calling out some of the gems. All these are available directly from Installer.app, provided you have also installed Community Sources.

Apollo FiveDice iAno iMatrix iSolitaire Labyrinth Photoboard Sketches

The images above link to larger screenshots. I just recently updated to firmware 1.1.3, and all of the existing iPhone Screenshot utilities don't seem to be working for me anymore. So pardon the grainy photos.

Apollo

There are a few native IM clients out at the moment, and obviously Meebo works just fine too. But I'm finding none of the native clients thus far are any good, or even good enough. Apollo is the one I've been using occasionally when I need IM on my phone, but it still needs a lot of work. Active development stopped back in October, with the developers stating they're focusing on an official version once the SDK is released, so this may turn out to be one of the first official IM clients for the iPhone. Hopefully it will have seen some massive updates in the interim.

Killer feature: IM over EDGE. It's not great for long chat sessions, but damn if it isn't useful to have the ability to ask an IM contact a quick question when out and about. (Terrible video of Apollo in action)

FiveDive

Just your average Yahtzee clone, but polished to a shiny finish. FiveDice is one of the few games worth having thus far, in my opinion.

iAno

Almost more of a proof of concept than a useful app at this point, iAno is still fun. It's a piano simulator that crams a full octave on screen at once, and can play any note between C3 on the low end and C7 on the high end. What makes iAno stand out is its use of Multi-touch; chords are possible, you can play three notes at the same time. Here's a video of iAno in action, and you've probably already seen it on the top phone in the iBand video going around recently. If they end up adding a sequencer to the app, I'd expect to start seeing rather a lot of iPhone-generated music in the future.

iMatrix

My screenshot above is mostly useless, as the entire point of iMatrix is what the iPhone's camera sees and I wasn't able to demo that. What it does is two-fold.

First, if you happen to run across a QR Code or other 2D code, you take a quick snapshot of it with the phone. Then iMatrix will process the data contained within, and automatically (with your permission) use the data to open a URL in Safari, add a contact to your address book, dial a phone number, or a few other actions.

Second, it's able to generate 2D codes on the screen of the phone that can be read with scanners. Some of the applications this opens up: virtual ticketing, coupons, identifaction, and other purposes where simple authentication or data exchange is useful.

The idea of 2D codes isn't unique to this application by any means, they've been around for over a decade. They're not common in North America yet, but given time and more devices that are able to process them, it seems like momentum's building. They may be as common as URLs in a few years. Here's a poorly-narrated video of iMatrix contact exchange in action.

iSolitaire

I don't really need to describe Solitaire, do I? This particular version just happens to look great, and makes fine use of the touch screen for dragging cards around. If it's not one of the first official solitaire apps, I'll be very surprised.

Labyrinth

You know the classic wooden labyrinth puzzles? Yeah, it's just like those. Using the accelerometer, Labyrinth has you tilt the entire phone to guide the ball into the hole. It makes for a great demo of what having accelerometers in these devices can get you. Unlike most of the other apps in this list, Labyrinth is a demo; there's a full version available for purchase. The iPhone software market has already begun.

Photoboard

Remember that wow feeling after watching Jeff Han's TED demo of a multi touch interface a few years back? Photoboard brings a bit of that to the iPhone/iPod Touch with its rotation and zoom ability. It's a fairly simple toy at this point, akin to a basic lightboard for photos. You pull in photos from your device's library and then use two fingers to rotate them, pinch zoom in and out, and layer them on the screen. It's cramped on the small screen, doesn't save your setup when exiting, and isn't really altogether useful yet, but it's a great tech demo and shows promise for what might be possible in the future. Here's a video of Photoboard in use.

Sketches

A basic note-taking and sketching app, Sketches has a few basic drawing tools that turn your finger into a pencil. You can import photos from your library or the iPhone's camera and use them as a canvas, save your creations, email them, etc. Given the limitations of using your finger as an imprecise stylus, this feels like the perfect mix of basic utility without going too far into more advanced and harder to use features. There may be apps in the future that allow more complex image editing on the iPhone, but right now this seems like the furthest you'd want to go.

Plus, to erase the image? You just shake the device. How cool is that? There's a reason the icon looks like an Etch-a-Sketch. Here's a video about using Sketches' tools.

Others

This is just scratching the surface; it seems like every week there are a handful of new ones worth keeping. A few more notable applications:

Categories

This is a recent discovery; it allows for folder/group creation on the iPhone/iPod's home screen. You choose an icon for the folder, then drag a few apps into it. To get at them later from the home screen, you tap the group, then a new menu pops up with those icons. Pretty much as you'd expect.

weDict

A reusable dictionary/lookup app. If I get it, and I'm not 100% sure I do, you plug in various installable dictionaries, and then use the application to search them. Right now I have French > English and English > French dictionaries, and if I look up "neige" it tells me that the French > English dictionary thinks that word means "snow".

Books

A basic eBook reader. It's ugly, but it works. I've seen some public domain titles available for install, and a few newer CC-licensed works, like Cory Doctorow's books.

Evolution RGB

This is a little toy/game thing that doesn't make any sense at all when it first loads. In a nutshell, you have pre-defined elements like fire, water, plant, clay etc. You draw them onto the screen, then watch water interact with fire, fire interact with plant, etc. It's generative like the old-school evolution game from decades past, and setting up some opposing elements and watching them interact can be vaguely hypnotic. This is the best video I could find that demonstrates how it works. It won't win any beauty contests, but it's really worth taking a look.

NES, gpSPhone, Frotz, ScummVM

Various emulators for games past, of varying and questionable legitimacy. In order: Nintendo Entertainment System, Game Boy Advance, Infocom text adventure games like Zork, and the LucasArts Scumm system that powered classics like Monkey Island and Day of the Tentacle. (I say "questionable legitimacy" because the practice of emulting ROMs is kind of a legal grey area.)

VNotes

A simple audio recorder that uses the iPhone's built-in mic. Something that ought to be officially available sooner or later, but isn't yet.

Update: And it figures that as soon as I hit publish, I discovered that firmware 1.1.4 came out today. Not sure yet what it changes, if anything.