Skip to: Navigation | Content | Sidebar | Footer


Full Archives

Mediatyping

March 18

Just prior to jetting off to Austin last week, I started playing around with a mobile version of this site. While a personal blog is hardly a site that really needs one (unlike, say, an app with a proven mobile user-base like Twitter), I wanted to see what would be involved in re-factoring this design into something more fitting for a mobile environment.

Mezzoblue Mobile

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.

Permalink › | 44 comments

Producing

March 4

So here's a not-so-hypothetical question I'd like to put out there: as a designer what are the saleable products one might go about creating?

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!

Chalkwork sticker sheet preview

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.

Permalink › | 75 comments