Archive: May 24th, 2011

Lightweight Computing – Stuntbox

The class of device formerly known as mobile.

The Story of the HTML5 Shiv « Paul Irish

This dovetails nicely with my recent post about the spirit of distributed collaboration. Here’s a great little bit of near-history spelunking from Paul, all about styling new HTML5 elements in pesky older versions of Internet Explorer.

Topically hot

I’m heading up to London for the next few days to soak up all the knowledge being distributed at this year’s Web Directions @media. I wish it weren’t a double-track conference—no-one should have to choose between Lea Verou and Douglas Crockford—but I’ll be doing my best to maximise my knowledge acquisition while fending off feelings of FOMO.

As well as attending, I’m also going to be facilitating. So I’m not just going there as an fomo-ing attendee; I’m also going to be a mofo-ing facilitator.

Yes, it’s that grand ol’ @media institution: The Hot Topics Panel (sszzz!):

A popular @media tradition, hosted by Jeremy Keith, the final session for day one will feature a selection of speakers discussing questions posed by conference attendees. A lively conversation and some passionate debate will occur, so bring along your questions and enjoy the robust discussion.

Last year’s panel was a blast. Now I am rubbing my hands in gleeful anticipation. I get to play Wogan again. I have no idea who I’ll pulling up on stage but I’ve quite a stellar list to choose from.

I also have no idea what we’ll be discussing/debating/arguing/quibbling about but I hope that by the time the panel actually starts I will have amassed some suggestions. Conference attendees can provide burning questions on the day, through whatever medium they choose; a tweet, a scrap of paper, a sandwich board.

I’d like to get a head-start on gauging the relative mean temperature of various topics. After all, the nature of the topics should probably influence my decision about who to coerce into getting up on stage with me.

That’s where you come in. What burning web design and development topics are keeping you awake? Is there something that really grinds your gears? Vent for me. Vent into my comment form.

(Yes, comments are open. No, you shouldn’t just write “First!”)

The good new days

I’m continually struck by a sense of web design deja vu these days. After many years of pretty dull stagnation, things are moving at a fast clip once again. It reminds of the web standards years at the beginning of the century—and not just because HTML5 Doctor has revived Dan’s excellent Simplequiz format.

Back then, there was a great spirit of experimentation with CSS. Inevitably the experimentation started on personal sites—blogs and portfolios—but before long that spirit found its way into the mainstream with big relaunches like ESPN, Wired, Fast Company and so on. Now I’m seeing the same transition happening with responsive web design and, funnily enough, I’m seeing lots of the same questions popping up:

  • How do we convince the client?
  • How do we deal with ad providers?
  • How will the CMS cope with this new approach?

Those are tricky questions but I’m confident that they can be answered. The reason I feel so confident is that there are such smart people working on this new frontier.

Just as we once gratefully received techniques like Dave’s CSS sprites and Doug’s sliding doors, now we have new problems to solve in fiendishly clever ways. The difference is that we now have Github.

Here’s a case in point: responsive images. Scaling images is all well and good but beyond a certain point it becomes overkill. How do we ensure that we’re serving up appropriately-sized images to various screen widths?

Scott kicked things off with his original code, a clever mixture of JavaScript, cookies, .htaccess rules and the -data HTML5 attribute prefix. Crucially, this technique is using progressive enhancement: the smaller image is the default; the larger image only gets swapped in when the screen width is wide enough. Update: and Scott has just updated the code to remove the -data-fullsrc usage.

Mark was able to take Scott’s code and fork it to come up with his own variation which uses less JavaScript.

Andy added his own twist on the technique by coming up with a slightly different solution: instead of looking at the width of the screen, take a look a look at the width of the element that contains the image. Basically, if you’re using percentages to scale your images anyway, you can compare the offsetWidth of the image to the declared width of the image and if it’s larger, swap in a larger image. He has written up this technique and you can see it in action on the holding page for this September’s Brighton Digital Festival.

I particularly like Andy’s Content First approach. The result is that sometimes a large screen width might mean you actually want smaller images (because the images will appear within grid columns) whereas a smaller screen, like maybe a tablet, might get the larger images (if the content is linearised, for example). So it isn’t the width of the viewport that matters; it’s the context within which the image is appearing.

All three approaches are equally valuable. The technique you choose will depend on your own content and the specific kind of problem you are trying to solve.

The Mobile Safari orientation and scale bug is another good example of a crunchy problem that smart people like Shi Chuan and Mathias Bynens can tackle using the interplay of blogs, Github and to a lesser extent, Twitter. I just love seeing the interplay of ideas that cross-pollinate between these clever-clogged geeks.