Jeremy Keith's Blog, page 130

Hackfarming Politmus

In November 2011 we at Clearleft hired out a farmhouse in the countryside and left client work behind for a week and just hacked on something for fun. The result was Map Tales, which I’m very proud of.

We knew straight away that we’d want to repeat the experience in 2012. A few weeks ago we all disappeared into the countryside once again. This time the location was in Dorset and it was less of a farm and more of a manor house. We still decided to call the outing a Hack Farm …although Hack Manor has a nice ring to it.

Before we went away, we got together for a meta-discussion on how to approach the week. We didn’t want to decide what we were going to build before we got there (that’s part of the fun) but there was some talk about doing things slightly differently this time. For example, what if we weren’t setting out to actually launch something? What if the final deliverables were less tangible and more conceptual than that?

My initial reaction was to bristle at the thought of not launching something at the end of the week. After all, I thought, that’s the whole point of a hack day/farm/athon. But I came around to the idea. I think it’s because we succeeded in building and launching Map Tales in one week last year that I was able to accept the idea of doing something a bit different this time ‘round.

We brought some friends of Clearleft along: Mike, Brian, Emil, Andy, Kyle, and Jessica. It was a pleasure spending a week in the country with them.

In total there were eighteen of us there. That’s quite a lot of cats to herd when you’re trying to reach consensus on what to spend a week working on, but after some fun design games and exercises, we agreed on what we wanted to do. Surprisingly the area we all gravitated towards was in the not-so-sexy field of politics.

We designed a service called Politmus. The basic idea was to take the best of the “quantified self” movement and apply it to politics in the UK. The elevator pitch was:

The only personal political opinion tracker that gathers your stance on issues, for disenfranchised voters in the UK who want to feel more connected in a time when we have increased participation in everything but government.

Here’s how we imagined it working. Let’s say your MP is going to be voting on a question in parliament very soon. We’ll ping you with that question and ask how you would vote. Then we can see how well your answer matches that of your MP. Over time, we can start comparing trends: you and your MP; you and your constituency; you and the rest of the country.

There was a lot of research to begin with (not helped by the crappy internet connection), looking at how the UK parliamentary system works. It’s complicated. They Work For You was, unsurprisingly, a huge help in figuring this stuff out.

I got very interested in the potential input mechanisms for voting. A website with a form is the obvious choice, but what about some more old-fashioned media? A postcard? An email? A phone call? SMS?

I did some hacking on the Tropo API to come up with a telephone interface. You can try it on 020 3051 6587. I put together a little video sketch to demonstrate some of these interactions.

Meanwhile a whole lot of work was being done on the voting interface, displaying the patterns of voting over time, and all that good stuff.

One of the areas that yielded the most benefit (and was a real eye-opener for me) was designing an API for the service before any interface decisions had been made. This “API First” approach meant that lots of tricky problems were solved early on, without getting distracted by the implementation issues of which kind of screens (if any) would be displaying the data. It also meant that visual design and development could be done in parallel.

(By the way, the food at Hack Farm was superb. Jessica cooked amazing meals for eighteen people each night!)

By the end of the week, we had some pretty solid deliverables: design principles, some prototypes, an API, branding. But it’s a shame we didn’t actually get a working website. It would have been very hard work, but I like to think that we could have got a minimal viable product out the door.

But we do have something to show. We’ve put together a nice little website that documents the process:

Hack Farm

You can skip straight ahead to the product or can follow along with the day-by-day account.

I hope that the site conveys something of the flavour of this year’s Hack Farm. It was a lot of fun, mostly because of the excellent people gathered together in one place.

Tagged with
hackfarm
clearleft
hacking
politmus
dorset

More Responsive Day Out

Well, there’s been an overwhelming response to the Responsive Day Out. Tickets sold out in less than 24 hours! I guess that I’m not the only one who wants to spend a day listening to what these great designers and developers have to say about the challenges of responsive web design.

So I got in touch with the Corn Exchange to see if there was any way of fitting in some more seats. It turns out there is. So the capacity for the event has expanded a bit and some more tickets have gone on sale.

But if you want one, you’d better grab it fast.

Oh, and remember, if you work at a cool company that wants to have the undying gratitude of web designers and web developers, get in touch about sponsoring a pre- or post-event party.

Update: And that’s it. The extra tickets are now gone too.

Tagged with
responsiveconf
conference
tickets
event
brighton

The Session

When I was travelling back from Webstock in New Zealand at the start of this year, I had a brief stopover in Sydney. It coincided with one of John and Maxine’s What Do I Know? events so I did a little stint on five things I learned from the internet.

It was a fun evening and I had a chance to chat with many lovely Aussie web geeks. There was this one guy, Christian, that I was chatting with for quite a bit about all sorts of web-related stuff. But I could tell he wasn’t Australian. The Northern Ireland accent was a bit of a giveaway.

“You’re not from ‘round these parts, then?” I asked.

“Actually,” he said, “we’ve met before.”

I started racking my brains. Which geeky gathering could it have been?

“In Freiburg” he said.

Freiburg? But that was where I lived in the ’90s, before I was even making websites. I was drawing a complete blank. Then he said his name.

“Christian!” I cried, “Kerry and Christian!”

With a sudden shift of context, it all fit into place. We had met on the streets of Freiburg when I was a busker. Christian and his companion Kerry were travelling through Europe and they found themselves in Freiburg, also busking. Christian played guitar. Kerry played fiddle.

I listened to them playing some great Irish tunes and then got chatting with them. They didn’t have a place to stay so I offered to put them up. We had a good few days of hanging out and playing music together.

And now, all these years later, here was Christian …in Sydney, Australia …at a web event! Worlds were colliding. But it was a really great feeling to have that connection between my past and my present; between my life in Germany and my life now; between the world of Irish traditional music and the world of the web.

One of the other things that connects those two worlds is The Session. I’ve been running that website for about twelve or thirteen years now. It’s the thing I’m simultaneously most proud of and most ashamed of.

I’m proud of it because it has genuinely managed to contribute something back to the tradition: it’s handy resource for trad players around the world.

I’m ashamed of it because it has been languishing for so long. It has so much potential and I haven’t been devoting enough time or energy into meeting that potential.

At the end of 2009, I wrote:

I’m not going to make a new year’s resolution—that would just give me another deadline to stress out about—but I’m making a personal commitment to do whatever I can for The Session in 2010.

Well, it only took me another two years but I’ve finally done it.

I’ve spent a considerable portion of my spare time this year overhauling the site from the ground up, completely refactoring the code, putting together a new mobile-first design, adding much more location-based functionality and generally tilting at my own personal windmills. Trying to rewrite a site that’s been up and running for over a decade is considerably more challenging than creating a new site from scratch.

Luckily I had some help. Christian, for example, helped geocode all the sessions and events that had been added to the site over the years.

That’s one thing that the worlds of Irish music and the web have in common: people getting together to share and collaborate.

Tagged with
thesession
irish
music
code
development
collaboration
freiburg
sydney

Responsive Day Out

Any announcement that begins with “I’m really excited to announce…” usually doesn’t end well. It often means that some startup or product has been bought by Facebook, Twitter or Google. But with that in mind…

I’m really excited to announce… I’m putting on a new event.

It’s called Responsive Day Out and it will take place in the Corn Exchange in Brighton on Friday, March 1st, 2013.

It’s a kind of conference, I guess, but I think of it as more like a gathering of like-minded people getting together to share what they’ve learned, show some examples, swap techniques, and discuss problems. And all of it will be related to responsive web design.

A whole slew of really smart talented people will be speaking: Andy Clarke, Anna Debenham, Mark Boulton, Sarah Parmenter, Elliot Jay Stocks, Laura Kalbag, Bruce Lawson, and many more.

The format will be fun. There’ll be a block of three quickfire talks, just 15 to 20 minutes long, followed by a combined discussion hosted by yours truly, when I’ll be marshalling questions from the audience. We’ll have four of those blocks: two in the morning and two in the afternoon, with each block separated by a break.

I’m really looking forward to trying out this format. I think it’s going to be nice and zippy, with plenty of good solid practical lessons.

There are many different kinds of conferences. There are the big events like UX London with three days of talks and workshops. By the way, tickets for this year’s events went on sale this week—just check out that line-up of speakers! Grab yourself a ticket …or rather, convince your boss to grab you a ticket because, let’s face it, an intensive three-day event like UX London is the kind of thing that requires a training budget.

It’s a very different beast to dConstruct, which remains an affordable “big picture” event despite its stellar line-up of international speakers. I wish it could be cheaper, but there are certain unavoidable costs in any event: venue hire, speaker payment, travel and accommodation—it all adds up.

Then you’ve got the grassroots events like Barcamps and meetups, which ideally are free to attend, with costs covered by sponsorships.

I wish I could make Responsive Day Out a free event but putting it on in the Corn Exchange means there will be costs involving venue hire, lighting and projection. That said, I’ve done my best to keep the event as affordable as possible so…

Tickets are fifty quid plus VAT (a total of sixty quid).

I’ve had to cut a lot of corners to keep the price cheap:

There will be no lanyards. You’ll just get a sticker or a stamp on your hand or something similarly lo-tech.
There is no branding to speak of. The website is a simple one-page affair that Paul and I whipped up in a day or two. There will be no banners on stage or in the foyer. There isn’t even a logo.
There are no speakers from overseas. This makes quite a big differences to the travel expenses—this is one of the reasons why dConstruct and Ampersand necessarily cost more.
Perhaps most importantly, the speakers are very generously donating their time and considerable knowledge to this event.
Unless some generous company wants to step up with sponsorship, there will be no after-party or pre-party. If you know of a generous company who would enjoy the undying gratitude of 300 web designers and developers by putting on either a pre- or after-party, please, please get in touch.

So please keep your expectations in check. This will not be a polished event like Build or dConstruct and it might feel a little provincial with its entirely UK-based speaker line-up but hey, fifty quid! Not bad, right?

With that in mind, if you have any interest at all in the design and development challenges involved in building responsive websites, you should grab a ticket and come along to the Responsive Day Out.

I’m really excited!

Tagged with
responsive
design
development
conference
responsiveconf
event
speaking
organising

Six impossible questions

What is the difference between right and wrong?

What is the difference between a cupcake and a muffin?

What is the difference between a website and a web app?

What is the difference between a startup and any other business?

What is The Cloud?

What is brunch?

Tagged with
questions
impossible
definition

Building Matter

When I was preparing my Responsive Enhancement workshop for last year’s dConstruct, I thought I should create an example site to demonstrate the various techniques I would be talking about to demonstrate how responsive design could be combined with progressive enhancement to make something works great on any device.

Round about that time, while I was scratching my head trying to figure out what the fake example site should be, I got an email from Bobbie asking if I wanted to meet up for a coffee and a chat. We met up and he told me about a project he wanted to do with his colleague Jim Giles. They wanted to create a place for really good long-form journalism on science and technology.

“The thing is,” said Bobbie, “we want to make sure it’s readable on phones, on tablets, on Kindles, everything really. But we don’t know the best approach to take for that.”

“Well, Bobbie, it’s funny you should mention that,” I said. “I’m currently putting together a workshop all about responsive design, which sounds perfect for what you want to do. And I need to create an example site to showcase the ideas.”

It was a perfect match. Bobbie gave me his design principles, personas, and—most importantly—content. In return, he would get a prototype that would demonstrate how that content could be readable on any device; perfect for drumming up interest and investment.

The workshop went really well, and some great ideas came out of the brainstorming the attendees were doing.

A few months later, Bobbie and Jim put the project—now called Matter—up on Kickstarter. They met their target, and then some. Clearly there was a lot of interest in well-written original journalism on the web. Now they had to build it.

They got hold of Phil to do the backend so that was sorted but Bobbie asked me if I knew any kick-ass designers and front-end developers.

“Well, I would love to work on it,” I said. “So how about working with Clearleft?”

“I didn’t think you guys would be available,” he said. “I’d love to work with you!”

And so we began a very fun collaboration. Paul moved his desk next to mine and we started playing around with the visual design and front-end development. Phil and Bobbie came by and we hammered out design principles, user journeys, and all that fun stuff.

It was really nice to work on a project where readability took centre stage. “Privilege the reading experience” was our motto.

Paul did some fantastic work, not just on creating a typographic system, but also creating a brand identity including what I think is a really great logo.

I started putting together a system of markup and CSS patterns, using the device lab to test them. Phil started implementing those patterns using Django. It all went very smoothly indeed.

Today is launch day. Matter is live. If you backed the project on Kickstarter, you’ve got mail. If not, you can buy the first issue for a mere 99 cents.

The first piece is a doozy. It’s called Do No Harm:

Why do some people want to amputate a perfectly healthy limb? And why would any doctor help them?

If this is indicative of the kind of work that Matter will be publishing, it will definitely live up to its ambitious promise:

MATTER commissions, crafts and publishes unmissable journalism about science, technology and the ideas shaping our future.

Tagged with
matter
clearleft
readmatter
reading
publishing
writing
journalism
process
responsive
design
development

Full fathom frontal

It’s been a busy time in Brighton. Last Wednesday’s Skillswap was an excellent affair, with terrific talks about making physical things from Chris Thorpe, Dan Williams, and the lovely young chaps from Mint Digital’s Foundry who were showing their lovely dough globe.

Two days later, it was time for this year’s Full Frontal conference, a highlight of the web-dev calendar. It was really, really good. The general consensus at the after-party was that this was the best year yet. That’s quite something when you consider that in 2009 I said:

it’ll be hard to match the standard set by this year’s conference.

I love it when there are events on in Brighton—dConstruct, Reasons To Be Creative, UX Brighton. It’s great to have geeks come to visit. I always feel like an ambassador and I want the town to be on its best behaviour.

The line-up for Full Frontal was really well curated by Remy. It started with a one-two punch of big-picture thinking, dived into the practicalities of working on the cutting-edge of today’s technologies and then wrapped up with a long-zoom trip down memory lane with Chris.

The one-two punch came from James and John. Like an Oxford debate, they were arguing from opposite ends of a spectrum of opinion. James argued that was perfectly reasonable, even desirable, to make a web app entirely in JavaScript with no HTML in the body element whatsoever. John cautioned against throwing the markup baby out with the web app bathwater, pointing to the robustness of the web stack’s architecture.

The whole point of this opening to the conference was to spark debate and discussion, which it certainly did. Witness this post by Mike Davies in response to James’s arguments.

I’ve seen James present before and, while I certainly don’t agree with what he’s saying, he is a very good presenter. He used a particularly sneaky technique this time. This technical term for this technique is “being reasonable.” Half way through his talk he pointed out that he was taking a deliberately extremist approach and that the truth is that every website sits somewhere on a continuum between document and app (and that websites have had app-like capabilities since the dawn of the submit button). Talking with Mark in the break, we decided we should just get T-shirts with “It Depends” emblazoned on them.

Side note: I’m afraid I must deduct one or two points from James for employing a rhetorical device that really annoys me. At one point (and admittedly just one point) he referred to the “other side” as being dogmatic. Whenever someone labels those they disagree with as “dogmatic” or “purist”, it’s a lazy meaningless barb (like calling someone a hipster). “I’m passionate; you’re dogmatic. I sweat the details; you’re a purist.” Even when I agree completely with the argument being made—as was the case with Andy’s superb talk at South by Southwest this year—I cringe to hear the “dogma” attack employed: especially when the argument is strong enough to stand up on its own without resorting to Croftian epithets.

Anyway, the debate between James and John was a great start to a great day of talks. In some ways, Anna’s excellent talk on the diversity of web browsers on gaming devices was the ultimate rebuttal to James’s argument. “I don’t care about browsers that can’t run this JavaScript,” said James. “This browser basically can’t handle JavaScript,” said Anna. “And here’s the number of young people in the UK accessing the web on this device…”

The Ubelly blog post described Anna’s talk as “One of the best talks of the conference and one of the best talks I have seen this year.”

All in all, a great day which was followed by a whole day of hacking on drones. Clearleft sponsored the event, which means we now have our own flying robot. This could be dangerous.

We’ll be sure to take the drone with us when we head into deepest darkest Dorset next week for this year’s hack farm. But before that I’m in Belfast for the week of Build “don’t-call-it-a-conference” Conf. And you know what I really like? I’m seeing some of the same faces that I saw in Brighton at Full Frontal. Now that’s what I call a balanced conference diet.

Tagged with
brighton
conference
fullfrontalconf
fullfrontal
event
frontend
development
javascript

Iconic imagery

There’s been some fantastic collaborative work done recently on the tricky issue of responsive images. Witness the community group and its attendant website, complete with logo.

Meanwhile, there’s been some great research into dealing with high-DPI displays (which the world and its dog have decided to label “retina”). There’s the in-depth analysis by Daan Jobsis which looks at what you can get away with when it comes to compression and quality for “retina” displays: quite a lot, as it turns out.

In fact, you may well be able to double the dimensions of an image while simultaneously bringing down its quality and end up with an image that is smaller in file size than the original, while still looking great on high-DP..—“retina” displays. The guys over at Filament group have labelled this Compressive Images. Nice.

I like that approach. No JavaScript polyfills. No lobbying of standards bodies.

I’m generally fan of solutions that look for ways of avoiding the problem in the first place. Hence my approach to image optimisation for all devices, widescreen or narrow.

Of course this whole issue of responsive (or compressive) images should really only apply to photographic imagery. If you’re dealing with “text as images” …don’t. Use web fonts. If you’re dealing with logos or icons, there are other options, like SVG.

Then there’s the combination of web fonts and iconography. Why not use a small web font containing just the icons you need?

I tried this recently, diligently following Josh’s excellent blog post detailing how to get icon shapes out of Fireworks, into a font editor, and then into an actual font. It works a treat, although I concur with Josh’s suggestion that the technique should really only be implemented using the ::before and ::after pseudo-elements in combination with base-64 encoding the font file. That means it won’t work in every single browser, but that’s the point: these icons should be an enhancement, not a requirement.

Having gone through the tortuous steps required to get my Mac all set up with the software required to follow Josh’s tutorial, I then spotted the note at the end of his article that pointed to Icomoon. That turns out to be a fantastic service. You can pick and choose from the icons provided or you can upload your own vector shapes. Then you can assign the unicode slots you want to use for the icons and you can get the resulting font file base-64 encoded. Very, very cool!

There’s a whole slew of icon-font services like that out there now: Pictos, Web Symbols, and Symbolset with its ingenious use of ligatures to allow for an accessible fallback.

Jenn is currently casting a critical eye over each of these service over on the Nerdary: part one, part two, and part three are all deserving of your time and attention.

Tagged with
responsive
images
icons
fonts
design
development
webfonts
iconography
retina

Progress

I remember when Ajax started gaining traction on the web and in the minds of developers. One of the factors that web developers suddenly had to think about was giving feedback to the user when a request was made to the server.

Normally this is something that the browser takes care of (with its rotating letter “e” or its sweeping lighthouse fresnel lens or whatever method your chosen browser uses). But once you decide to use Ajax to make a request to the server, you’re effectively saying “Hey browser, it’s okay; I got this.”

And so web developers everywhere began to recreate loading indicators that were so popular on Flash sites. Some of them are very clever, created entirely in CSS.

This is a pattern that has been codified into HTML itself. We now have a progress element. This can be used to display fine-grained progress if you give it value and max attributes, or you can simply use it without any attributes to indicate that something is happening …perfect for those Ajax requests.

What I like about this element is that you can put fallback content in between the opening and closing tags. So let’s say you’re currently using an animated .gif to show that some content is being requested via Ajax:

[image error]

Now you can wrap that within a progress element:

[image error]

Modern browsers show the native progress indicator. Older browsers show the animated .gif.

Of course, right now your ability to style that native progress indicator is limited (the shadow DOM may change that) but, as I pointed out in my book, that may not be a bad thing:

Remember, the web isn’t about control. If a visitor to your site is familiar with using a browser’s native form doodad, you won’t be doing them any favors if you override the browser functionality with your own widget, even if you think your widget looks better.

Tagged with
html5
progress
markup
ajax
html
standards
ui
interface

A treat grows in Brooklyn

So then Ted Nelson says to Baratunde Thurston “What whiskey are we drinking?”

Sounds like the punchline to a joke, doesn’t it? But it’s a perfectly typical occurrence at Brooklyn Beta, the event I attended two weeks ago (my second time being there).

I hesitate to call it a conference. I guess it is a conference, but it’s a very different kind of conference. Yes, there are talks but the schedule is geared around getting people together to talk and hang out: the breaks are as long as the sessions. This year, there was also live music every day, including a performance from Ted Leo.

So it’s not really about the talks. But that said, there were some great talks.

Icon designer extraordinaire Aaron Draplin kicked things off with a rollercoaster ride of laughter and tears. Cory Booker, superhero mayor of Newark, made an appearance, as did Seth Godin. Rob—or should I say Windhammer—introduced us to the world of air guitar championships and snuck in some life lessons while he was at it. And, yes, Baratunde Thurston organised a Whiskey Friday for his hilarious presentation. The event closed with a theme song by Jonathan Mann and we all sang along.

Of course I was a complete fanboy with Ted Nelson. I could hardly believe it when I saw he was there; I made sure to shake his hand. But I was equally fanboyish with Kyle Kneath; I’ve admired his writing—particularly on URL design—for quite a while.

But I think the highlight for me was getting to hear Maciej Cegłowski give his talk. Idle Words is probably my favourite single collection of writings on the internet, and Maciej was equally brilliant in real life. Even though his talk (all about how Pinboard came to be) was in some ways the most cynical of all, I found it to be very inspiring; a refreshing antitode to the excesses of the cult of startup.

There was a thread running between Rob’s talk, Maciej’s story, and Chris’s lessons. That thread was about taking time. “Fail slowly,” said Maciej, in contrast to every other startup story you’ve ever heard. Rob made reference to the slow web by Jack Cheng (who was also there). And Chris told us, “It’s okay to miss out.”

I like that.

So if you missed out on this year’s Brooklyn Beta, don’t worry. It’s okay to miss out …but I’m glad I was able to make it.

Thanks, Chris and Cameron. I had a blast.

Tagged with
brooklyn
brooklynbeta
conference
newyork