Archive: September, 2010

Hot on the heels of the work for St. Paul’s School, I’ve been tweaking the media queries for the Salter Cane website. I was switching the site over to using HTML5 structural elements anyway, so I figured I’d meddle with the CSS while I was at it.

Once again, the fact that the site was already using percentages made the process very straightforward. Depending on the viewport width, the layout changes from three columns to two columns to one column.

And once again, I didn’t remove any content for small screen devices. The natural language navigation at the top of the page—now correctly ensconced in a nav element—really comes into its own in the linearised layout, allowing for quick access to different sections of the document.

The timing of all this optimisation is fortuitous. The second Salter Cane album has just been released: it’s called Sorrow.

It already has some fans. Shaun said:

The Truth Is Nothing sounds like Leonard Cohen, Johnny Cash and Arcade Fire had a musical transporter accident. can’t stop listening to it.

Lachlan is equally enthusiastic. If you like what you hear, you can buy the physical album from CD Baby or buy the digital album from iTunes. It will be available on Spotify and Amazon soon.

All the songs are licensed under a Creative Commons attribution license which means that they are podsafe. I’m looking forward to seeing where they end up.

You can listen to the whole album on the Salter Cane site using a Flash MP3 player. The documentation for Audio Player reads:

To insert a player on the page, place an HTML element and give it a unique ID. This element will be replaced with a player. If the browser doesn’t support Audio Player, the element will not be replaced so use it to show alternative content (maybe a message telling the user to download Flash).

The example code looks like this:

<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "file.mp3"});
</script>

But rather than using a P element, I used the HTML5 audio element:

<audio id="audioplayer_1" src="file.mp3" controls="controls" preload="none">
</audio>  
<script>  
AudioPlayer.embed("audioplayer_1", {soundFile: "file.mp3"});  
</script>

That way, browsers with Flash installed get the plugin while other devices—like, say, the iPhone, iPod and iPad—get the native audio player.

Whatever device you’re using, enjoy listening to Sorrow by Salter Cane.

I’m standing in an art gallery, looking at a painting. There’s a lump in my throat and a slight moistness to my eyes.

I’m at a concert, listening to a song. There’s a lump in my throat and a slight moistness to my eyes.

Looking at the painting reminded me of the song.

I was in Washington DC for An Event Apart. The art gallery in question was the Smithsonian American Art Museum. I went along to the Normal Rockwell exhibition that’s currently on show there.

The pictures are from the private collections of George Lucas and Steven Spielberg. They are fitting custodians of Rockwell’s legacy. As filmmakers, they excel at creating works that are somewhat schlocky, manipulative and commercial, all while being undeniably effective. That sums up the work of Norman Rockwell.

Don’t take that as a criticism. I enjoy the transparently manipulative paintings of Rockwell as much as I enjoy the transparently manipulative films of Spielberg.

The collection on display in DC is exceptional. You would need a heart of stone not to smile at some point whilst perusing the paintings.

I’m standing in an art gallery, looking at a painting.

The painting is called Good Boy (Little Orphan at the Train). Every face in the picture tells its own story. A nun stands on a train platform, a little boy in her hands. Also on the platform, a well-to-do woman waits with some trepidation to take the boy. From the windows of the train’s carriage, more young children look on expectantly.

It’s a scene from a social experiment: the orphan trains:

The orphan trains ran between 1854 and 1929, relocating an estimated 200,000 orphaned, abandoned, or homeless children. At the time the orphan train movement began, it was estimated that 30,000 vagrant children were living on the streets of New York City.

They would typically arrive in a town where local community leaders had assembled interested townspeople. The townspeople would inspect the children and after brief interviews with the ones they wanted, take them home. After a trial period, some children became indentured servants to their host families, while most were adopted, formally or informally, as family members.

I’m at a concert, listening to a song.

I hadn’t heard of the orphan trains until I went to see Jim Roll playing a concert upstairs in The Prince Albert pub in Brighton. He spoke about his own grandfather, who was one of the orphans who travelled on a train from New York. Although he found a home with foster parents, his place in the family was never assured.

The song is called Eddie Rode The Orphan Train and it was later covered by Jason Ringenberg of Jason And The Scorchers fame.

Eddie rode the orphan train from Soho down to Arkansas and every stop along the way they promised him a rubber ball.

Telling Stories: Norman Rockwell from the Collections of George Lucas and Steven Spielberg runs from June 2nd until January 2nd at the American Art Museum.

The album Inhabiting The Ball by Jim Roll is available from Amazon.

There’s a lump in my throat and a slight moistness to my eyes.

Ethan is a brilliant person. Responsive web design is a brilliant technique. These two facts are related.

As Ethan recently clarified:

A responsive design is composed of three distinct parts:

1. A flexible grid.
2. Flexible images. Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
3. Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and that spot-fix bugs that occur at different resolution ranges.

There has been a lot of discussion on that third part—including a superb presentation by Bryan Rieger—but there has been less emphasis on those first two parts. Anyone hoping to take an existing fixed-width rigid design and adapt it for smaller screen widths using media queries is going to be disappointed and frustrated.

I recently had to adapt an existing layout for varying screen widths. Clearleft did some design and development work for St. Paul’s School, where the thoroughly lovely David Smith is a teacher. I didn’t have much to do with that initial work. Cennydd worked on the information architecture, JayBay created the beautiful visual design and Natalie produced the HTML, CSS and JavaScript. But when they asked for some small-screen optimisation, the task fell to me.

It was a breeze. Because Natalie’s markup and CSS was rock-solid, I was able to whip up some alternate layouts in no time. The fact that the site was already using a fluid grid and fluid images was crucial.

The site now goes from a three-column layout (on browsers wider than 800 pixels) to a two-column layout (on browsers between 800 and 640 pixels) to a single column layout (on browsers less than 640 pixels). I spent some time finessing the details but the lion’s share of the work was done in the first hour.

Notice that I don’t refer to this as mobile optimisation. This is about user-agents with narrow screens. Now, some of those user-agents will be running on handheld devices (whatever that means, these days) and the site certainly looks good on some mobile devices, such as the iPhone, the iPod Touch, the iPad and Android phones. But it works equally well on desktop or laptop-bound user-agents with narrow screen widths.

Some people have misinterpreted the power of responsive web design as being a claim to the title of silver bullet for the mobile context. That’s never been the case. If your content would benefit from a completely different approach when viewed on the go, and you’ve got the time and budget to create a separate mobile site, then go for it (though you may end up going down the rabbit hole of figuring out which devices qualify as mobile and which of those you can support).

But if you’re building your sites the right way anyway, with fluidity and flexibility baked in from the start, then it’s certainly worth spending a few minutes to bash out a couple of quick media queries to optimise for small-screen devices.

The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.

That said, in many situations the content you want to serve up will be the same regardless of context. Take Huffduffer, for example. There’s nothing I want to strip out of the pages when they’re served up to mobile devices.

This harks back to what Luke has been saying with his Mobile First talk at An Event Apart. Instead of beginning with a big ol’ desktop site and asking What can I take away for mobile?, ask instead why all that stuff is clogging up your desktop site to begin with. Just because you’ve given yourself 960 pixels to play with—or whatever arbitrary number is the current fave of fixed-width designs—doesn’t mean that every piece of screen real estate needs to be filled up.

Another complaint levelled at media queries is when they are used to over-ride background-image declarations or to apply display: none to images: Those images are still downloaded by the mobile user! It’s a fair point but I would turn it on its head: why the sudden concern about bandwidth when dealing with the mobile context? Performance should be a priority for all your users, regardless of screen size or user-agent. If a large image can be hidden from mobile users, why is it being served up to other users?

That’s the thing about responsive web design: you can’t just think of it as a sprinkle of pixie dust that can be applied to any site. It requires the right mindset. It requires that sites be built on solid foundations of best practice. If those foundations are in place—a flexible layout, flexible images, optimised performance—then responsive web design can work its magic.

In the case of St. Paul’s School and its sister-site Colet Court, the foundations couldn’t have been better.

Twitter have been rolling out a new redesign. Thanks to Dustin, I got to try it out when the switch was flipped.

As with any redesign, the initial reaction tends to be It’s different! I fear change! Therefore I dislike this. See also: redesigns of The Guardian, Last.fm, Flickr, BBC…

With Twitter, that initial knee-jerk fades pretty quickly because the new site is undeniably beautiful. The visual design is top-notch.

There’s a nice little addition in the markup, too. The body element has a class name that you can hook into for user stylesheets. This is a very, very, very good thing. For example, my class name is .user-style-adactio so I can add some declarations to my user stylesheet.

The first rule simply hides the egregious Trending Topics and Who To Follow features (and I love that Who To Follow abbreviates to WTF):

.user-style-adactio .trends-inner,
.user-style-adactio .wtf-inner {
 display: none !important;
}

By the way, a user stylesheet is the only time it’s acceptable use important! in your CSS.

My other rules adjust the layout a bit when the viewport gets smaller. It’s just a quick little hack and it’s not great but it’s handy if, like me and Norm!, you don’t like a site dictating how wide your browser window should be. Thanks to user stylesheets, you can fix this:

@media screen and (max-width: 995px) {
 .user-style-adactio #page-container,
 .user-style-adactio #page-outer {
  min-width: 590px !important;
 }
 .user-style-adactio .dashboard {
  float: none !important;
  clear: both !important;
  max-width: 0 !important;
 }
}

Handy tip: if you use Dropbox, store your user stylesheet there. That way, you can point multiple machines to the same stylesheet. I’ve got my laptop at home and my iMac at work pointing to the same CSS file.

There’s one aspect of the new Twitter redesign that I really don’t like, and I can’t fix it with a user stylesheet: infinite scrolling. As I said (on Twitter, of course):

I’m allergic to infinite scrolling

Notice that I didn’t say that infinite scrolling is wrong, it’s just wrong for me. There’s nothing wrong with peanuts unless you have a nut allergy.

The reason that I don’t like infinite scrolling is that I actually use the scrollbar to scroll. That is, I move my cursor over the scrollbar, click and drag. Infinite scrolling makes this unworkable: the scrollbar under my cursor jumps around as new content is loaded.

I figured that in this day of mouse wheels and trackpads, I must be in the minority with my old-fashioned scrollbar usage. I asked for data on Twitter, and sure enough, most people who responded said they used the mouse wheel, the trackpad, the space bar or arrow keys. Though some people still found the scrollbar useful as a visual indicator of how long the page is …which is also negated by infinite scrolling.

Interestingly, while most of the people who responded to my query on Twitter said they hardly ever use the scrollbar, the Firefox heatmap shows that it’s one of the most used interface features. That was a much larger sampling: 117,000 users.

Still, I can understand why Twitter have decided to go with infinite scrolling. If I’m in the minority in thinking it’s horrible, that’s my problem. I can’t even claim that it’s an accessibility problem: it requires more manual dexterity to use the scrollbar than to use other methods of scrolling.

Twitter could add a user setting to switch off infinite scrolling—perhaps replacing it with the old style “more” button, which I liked—but that’s a cop-out. Whenever something gets shunted off into a preference, it’s generally a sign of indecision in the design. The Twitter redesign isn’t indecisive: it has a very clear and consistent visual and interactive design vocabulary. It just happens that one aspect of the UI vocabulary doesn’t mesh well with my own usage pattern.

So, in this case, the solution may well be for me to change the way I use the site. It still irks me, though. I’m generally against any interactions that happen without an explicit request from the user, such as revealing data and functionality on hover, for example. Twitter avoids that particular anti-pattern but with infinite scrolling, the act of moving down the page is interpreted as a request to load more data. I would much prefer to request that data explicitly with a button or link. Of course, that requires that the user do more, so it could be argued that infinite scrolling actually reduces the number of interactions that the user is required to do …assuming that the inferred interaction is in fact the desired interaction. That’s a big assumption.

On the face of it, it would seem that Twitter are being somewhat dismissive of the scrollbar as a UI element. But that’s not true. While they are reducing the usefulness of browser-native scrollbars by using infinite scrolling, they are, at the same time, replicating the functionality of scrollbars but non-natively. If you reveal a side panel—by clicking on someone’s Twitter username, for example—and if the content doesn’t fit within the viewport, then a non-native scrollbar is generated.

As I said, the new redesign is wonderful. I’m just nit-picking ..but it’s a big nit.

I’ve always thought that Brighton has a lot of steampunk appeal. Quite apart from the potential for criminal mastermind lairs within the the Victorian sewers, there are a whole slew of wonderful inventions from the mind of Magnus Volk.

The Volk’s Electric Railway is still in use today. The Daddy Long-Legs, alas, is not. And while the Jubilee clock tower still stands in the centre of town, its moving parts have been disabled (due to noise complaints and damage to the structural integrity):

The hydraulically operated copper sphere moved up and down a 16-foot (4.9 m) metal mast every hour, based on electrical signals transmitted from the Royal Observatory, Greenwich.

But even with all this steampunk history, I was still surprised to read the story of Alpha the robot on Paleo-Future:

During the autumn of 1932 a group of curious onlookers assembled in Brighton, England to see inventor Harry May’s latest invention, Alpha the robot. The mechanical man was controlled by verbal commands and sat in a chair silently while May carefully placed a gun in Alpha’s hand.

It all goes horribly awry according to contemporary reports, doubtless exaggerated. I, for one, welcome our new metal overlords.

Cyberneticzoo.com has more details on Alpha, including Time magazine’s account of its 1934 tour of America:

When commanded, the robot lowered its arm, raised the other, lowered it, turned its head from side to side, opened and closed its prognathous jaw, sat down. Then Impresario May asked Alpha a question:

“How old are you?”

From the robot’s interior a cavernous Cockney voice responded:

“Fourteen years.”

May: What do you weigh?

Alpha: One ton.

A dozen other questions and answers followed, some elaborately facetious. When May inquired what the automaton liked to eat, it responded with a minute-long discourse on the virtues of toast made with Macy’s automatic electric toaster.

David Buckley has more details including a spread from Practical Mechanics explaining Alpha’s inner workings.

It’s been a fun post-dConstruct week. Tantek has been staying in Brighton being, as always, the perfect guest. On his last night in the country, we went along to Async, the local JavaScript twice-monthly meet-up, host to a show’n’tell this time ‘round.

Tantek demoed his Cassis project. It’s nuts. He’s creating polyglot scripts that are simultaneously JavaScript and PHP, as well as having the ability to report which context they are running in. I feel partly responsible for this madness: he got the idea the last time he was in Brighton after reading Bulletproof Ajax and deciding that he didn’t want to write the same logic twice in two different programming languages. The really crazy thing is that he’s got it working.

Prem, who organised the event, showed his Sandie code: a security mechanism that allows external scripts to be loaded and arbitrary JavaScript to be executed without affecting the global scope. It’s smart stuff that could be incredibly useful for his sqwidget work.

Mark demoed one of the coolest bookmarklets I’ve seen in a while: Snoopy:

It’s intended for use on mobile browsers where you can’t view-source to poke around under the hood of sites to see how they’re built.

If the lack of “view source” on the iPad and iPhone has been bothering you, Snoopy is your friend.

Alas, we had to leave the Async awesomeness early to rendez-vous with the Mozilla HTML5 meet-up in The Eagle so I didn’t even get to see Jim demo the disco snake that he made at Music Hack Day last weekend.

The OAuthcalypse is upon us. Since August 31st, all third-party Twitter services must use OAuth to authenticate. This is a good thing; a very good thing. Before that date, services were allowed to use the password anti-pattern to log you in.

Twitter has put its foot down and declared that the password anti-pattern will no longer be tolerated. Hurrah!

What a shame then, that Twitter is being utterly hypocritical. On their Find Friends page, they encourage you to:

Scan your email address book or contacts to discover which of your friends are already using Twitter.

They do this using the password anti-pattern. You are asked for your Gmail password even though the Google Contacts API would allow Twitter to connect to Gmail using proper authentication …exactly what Twitter is insisting third-parties use when they want to access Twitter’s data.

Twitter asks for your Yahoo Mail password even though the Yahoo Contacts API would allow them access to your address book using OAuth.

Twitter asks for AOL passwords (now there’s an audience that we shouldn’t be teaching to give their passwords away) but even AOL has an API with proper authentication.

Twitter does connect to LinkedIn correctly. That’s one out of four.

There are two solutions to this state of affairs. Either Twitter decides to do the right thing and switch over to using APIs and authentication for Gmail, Yahoo and AOL …or else Gmail, Yahoo and AOL follow Twitter’s example and disallow the password anti-pattern for scraping address books.

Twitter should not be encouraging Gmail users, Yahoo users and AOL users to divulge their passwords but at the same time, Gmail, Yahoo and AOL should be taking steps to ensure that such profligate behaviour is not rewarded.

Twitter has done the right thing with third-party services wishing to access its data. Now let’s see if the third-party services currently being abused by Twitter will follow this example.

Update: There are some very encouraging responses from Twitter. Ryan Sarver says:

all good points and I think there are already plans to fix it

And Josh Elman concurs:

yes - great points and something we hope to migrate very soon

Well, what a week that was! The start of September is dConstruct time here in Brighton—one of the focal points of Clearleft’s calendar. Things get hectic in the office in the days and weeks beforehand. Then Brighton becomes the centre of web geekdom for a few days.

Things got rolling with a few workshops, one of which this year was my HTML5 For Web Designers workshop. I think it went pretty well.

A funny thing happened after the workshop…

I was walking from the workshop venue (Lighthouse) into town to meet up with Jessica—we were going to see Anthony Bourdain speak in his inimitable, somewhat gauche way. As I was strolling along, a young man approached me. He was carrying a small package. Excuse me, he asked. Are you Jeremy Keith?

I determined that he was an unlikely hitman and anyway, I had committed no crimes grievous enough to warrant a contract on my life, so I answered in the affirmative. It turned out that the package in his hands was a delivery from A Book Apart. He wanted to know if I would sign the contents of the package. I agreed on the condition that we document the unboxing right then and there in the street.

That doesn’t happen very often.

That was a pleasant start to an excellent few days. The geeks began to arrive in Brighton from far-flung destinations: Brian from Iceland, Tantek from California, Andy from Belfast. From Belgium, they came. From Portugal, from France. It was like a little mini South by Southwest …or South by Southwest as it used to be a few years back before it mushroomed in size.

The day itself was wonderful, really wonderful. I know I’m biased and I’m bound to say that, but really, I think this may have been the best dConstruct yet.

I had the honour of introducing the speakers. I thought I might be quite nervous about that but actually, I had a lot of fun. The quality of the speakers and their talks was astoundingly high so I simply spent the day wallowing in the excellence and occasionally exclaiming How cool was that? or words to that effect.

All of the talks have been recorded, thanks to Drew. You can subscribe to the podcast or listen to each talk individually on Huffduffer:

1. The Designful Company by Marty Neumeier
2. Boil, Simmer, Reduce by Brendan Dawes
3. Information Is Beautiful by David McCandless
4. The Power and Beauty of Typography by Samantha Warren
5. The Auteur Theory Of Design by John Gruber
6. Jam Session: What Improvisation Can Teach Us About Design by Hannah Donovan
7. The Value Of Ruins by James Bridle
8. Everything The Network Touches by Tom Coates
9. Kerning, Orgasms And Those Goddamned Japanese Toothpicks by Merlin Mann

Such a great line-up! It felt great to introduce John Gruber for the first time in the UK. Finally meeting Merlin Mann was a real pleasure—his affable, off-the-cuff talk sans-slides was hilarious. And I’m particularly happy that the audio from Hannah’s presentation is available. She started with a little bit of a musical number, playing her cello with myself on mandolin and Matt on piano. I think it sounds pretty good.

But the highlight for me was James Bridle. I don’t just mean it was the highlight of dConstruct; it was one of the finest presentations I’ve ever seen anywhere. Ever.

A few months ago, I wrote of James’s forthcoming dConstruct appearance:

…mark my words: when this year’s dConstruct is done, his talk will be the one that everyone will be talking about at the after-party.

He didn’t just fulfil those expectations, he surpassed them. His thoughts resonated with my own obsessions but he took things to a whole new level with a physical piece of data visualisation that he constructed. You can get the details of the artefact on his site, where he writes On Wikipedia, Cultural Patrimony, and Historiography.

dConstruct 2010 wrapped up with my mind well and truly blown.

Pictures are on Flickr. Audio is on Huffduffer. Elsewhere ‘round the web you can find:

• Robbie Manson’s round-up,
• Laura Kalbag’s notes,
• Eva-Lotta Lamm’s sketchnotes,
• Matthew Culnane’s overview,
• Sam Brown’s experience graph,
• Matt Edgar’s thoughts,
• Did you have a nice day? by Rattle: a gorgeous SVG visualisation of the team’s experience on the day. Source code included.