Jeremy Keith's Blog, page 126

dConstruct 2013

Last year’s dConstruct was amazing. I know I’m biased, but you don’t have to believe me: everyone agreed it was an amazing conference.

Personally, I had the time of my life. Literally. The one-two punch of Brighton SF and dConstruct was one of the best couple of days I’ve ever had in my life.

But the day after dConstruct 2012 I remember waking up and thinking “ah, shit …how am I ever going to top that?”

Well, clearly, I can’t. But I can still do my damnest to put together a fantastic line-up for dConstruct 2013 …so that’s what I’ve done:

The funny and geeky Adam Buxton,
The cyborg anthropologist Amber Case,
Hacker and tinkerer Dan Williams,
Security cyberpunk Keren Elazari,
The future-friendly Luke Wroblewski,
My favourite writer on the web, Maciej Cegłowski,
The queen of CSS, Nicole Sullivan, and
Friend to the robots, Sarah Angliss.

I think you’ll agree that’s not your typical conference line up. It’s going to be great! And it’s going to be a lot of fun. Trust me.

Trust is something I feel I’ve earned after last year’s tour-de-force. Last year’s line-up was pretty unusual too, but it worked superbly. Now I’ve got to make sure that I don’t squander the trust I earned.

So if you came to dConstruct last year, I don’t need to tell you why you should come back this year.

If you didn’t make it to last year’s dConstruct, you can make up for it this year. You don’t want to miss out two years in a row now, do you?

Tickets will go on sale in a few weeks time. I’ll announce the exact date soon. I’ll also be updating the information about the workshops we’ll be running this year.

And if you’re planning to come to Brighton for dConstruct, make sure to stick around for the weekend. The Brighton Digital Festival is happening again this September. That means a Maker Faire, meetups, hack events, and art shows all around town.

See you on the first Friday of September!

Tagged with
dconstruct
conference
brighton
dconstruct2013

Anniversary

A funny thing happened when I was in Berlin two weekends ago. I was walking down the street that my AirBnB apartment was on when I heard someone say “Jeremy Keith?” It turned out it was Andre Jay Meissner, one of the founders of the excellent Open Device Lab website. We had emailed but never met before. Small world!

The Twitter account for the open device lab in Nuremburg pointed out that it’s been one year since I wrote a blog post about the open device lab I set up:

Exactly one year ago @adactio started the #ODL movement with his blog adactio.com/journal/5433/ – wow, what a huge impact! Thanks for that! (y)

— Open Device Lab NBG (@ODLNuremberg) April 30, 2013

Much as I’d love to take credit for the idea of an open device lab, it simply isn’t true. Jason and Lyza had been working on setting up the open device lab in Portland for quite a while when I flung open the doors of the Clearleft test lab. But I will take credit for the “Ah, fuck it!” attitude that I introduced to the idea of sharing test devices with the community. Partly because I had seen how long it was taking the Portland device lab to get off the ground while they did everything by the book, I decided to just wait for the worst to happen instead of planning for it:

There are potential pitfalls to opening up a testing suite like this. What about the insurance? What about theft? What about breakage? But the thing about potential pitfalls is that they’re just that: potential. I’m treating all of them as YAGNI issues. I’ll address any problems if and when they occur rather than planning for worst-case scenarios.

It proved to be a great policy. So far, nothing has gone wrong. And it also served as an example to other people thinking about opening up device labs at their companies: “don’t sweat it; I didn’t!”

But as far as anniversaries go, the one-year birthday of the Clearleft device lab is not the most significant event of April 30th. Today is the twentieth anniversary of the publication of one of the most important documents in technological history: the document that officially put the World Wide Web into the public domain.

Open device labs are a small, small part of working on the web but I like to think that they represent the same kind of spirit of openness and sharing that Tim Berners-Lee and his colleagues demonstrated at CERN:

I really, really like the way that communal device labs have taken off. It’s like a physical manifestation of the sharing and openness that has imbued the practice of web design and development right from the start. View source, mailing lists, blog posts, Stack Overflow, and Github are made of bits; device labs are made of atoms. But they are all open for you to use and contribute to.

At UX London I had dinner with a Swiss entrepreneur who was showing off his proprietary native app on his phone and proudly declaring that he had been granted a patent. He seemed like a nice chap, but his attitude kind of made my skin crawl. It seemed so antithetical to the spirit of sharing and openness that I’m used to from the web.

James Gleick once described the web as the patent that never was:

Tim Berners-Lee invented the Web and the Web browser — that is, the world as we now know it — pretty much single-handedly, starting in about 1989, when he was working as a software engineer at CERN, the particle-physics laboratory in Geneva. He didn’t patent it, or any part of it. On the contrary, he has labored tirelessly to keep cyberspace open and nonproprietary.

We are all reaping the benefits of Sir Tim’s kindness and generosity.

It’s not so much that Tim Berners Lee invented WWW, it’s that he gave it to the world as a gift. Supreme kindness as well as innovation.

— Chris T-T (@christt) July 27, 2012

Tagged with
web
history
www
cern
devices
testing
opendevicelab
testlab
sharing
patents

A dao revisited

Pretty much every time I give a talk—be it on progressive enhancement, responsive design, or web development in general—I almost always make reference to John’s A Dao Of Web Design. Invariably, I ask for a show of hands: “Who’s read this article?” I ask. I try not to get too dispirited when only a few hands go up. Instead I encourage everyone—in the strongest possible terms—to seek it out and read it.

It’s not just that I consider A Dao Of Web Design to be part of the canon of great writing and thinking for web designers and developers. I’m also continually amazed by its longevity. Thirteen years is a very, very long time on the web, and yet just last week Richard referenced John’s article when he was describing how best to approach designing for the web today.

The only other article I can think that matches its importance is Ethan’s unveiling of Responsive Web Design three years ago, also on A List Apart. It’s no coincidence that Ethan’s article references John’s article from a decade before. Both pieces are essentially making the same rallying cry: stop fighting the flexible nature of the web. Embrace it.

I think that finally, finally we’re beginning to do just that.

Tagged with
dao
web
design
development
responsive
writing

Responsive workshopping

I spent most of last week up in Greenwich for this year’s UX London. ‘Twas a most excellent event. The move to the new venue gave the whole event a much more fun vibe and the format of a morning of talks followed by an afternoon of workshops was perfect.

Andy did a great job curating the line-up. It had a bit of a dConstruct-y feel, and not just because we had old friends like Marty, Peter, and Hannah back: Genevieve Bell, Simone Rebaudengo and Richard Seymour all broke our brains in different wonderful ways.

Hats off to Kate who worked her ass off to make sure that everything ran smoothly. Seriously, you wouldn’t believe the amount of work she did. The change of venue and format for this year resulted in at least twice as much work as usual.

In the middle of UX London’s three days, I ran a workshop called Responsive UX. As I told the audience that morning when I was pitching the workshop, I got the title by taking the term “responsive design” and doing a find-and-replace on the word “design” with the phrase “UX”. After all, what’s the difference? Right, Peter?

Seriously though, this workshop was a little different in that I wasn’t covering any HTML or CSS or JavaScript. It was much more about planning for the unknown and good ol’-fashioned content priority and hierarchy.

I wasn’t entirely pleased with how it went. It was a workshop of two halves. The first half had far too much of me talking (and ranting), probably preaching to the choir. But I felt I had to lay the groundwork first. The second half—when everybody got hands on with paper-based exercises—was much better.

I learned my lesson: show, don’t tell. I’ll be doing a full day responsive workshop at Ampersand in June. I plan to make sure that there’s less of me talking and more making and collaborating. Also, because it’s a full day, I’ll be able to get down to the nitty-gritty of markup and style sheets.

And don’t forget; if you want me to come to your company sometime and do a workshop there, no problemo.

Some people at the workshop asked about me publishing my slides. The slides by themselves really don’t contain much information but I’ve published them on Speakerdeck anyway. But what’s more valuable are the URLs to articles and resources I mentioned along the way. So here’s the structure of the workshop together with links to examples and further reading…

Introduction


Long Live the Web by Tim Berners-Lee
A Dao of Web Design by John Allsopp
Responsive Web Design by Ethan Marcotte
A Richer Canvas by Mark Boulton
Fit to Scale by Trent Walton


Myths


St. Paul’s School
Huffduffer
Map Tales
The Mobile Context by Mark Kirby
There is no Mobile Web by Stephen Hay
Noise-to-Noise Ratio by Merlin Mann


Progressive Enhancement


Responsive By Default by Andy Hume
Do websites need to look exactly the same in every browser? by Dan Cederholm


Planning


Mobile First by Luke Wroblewski
Content First
APIs First
The DRY Principle
URL Design by Kyle Kneath


Conditional Loading


dConstruct 2012
Conditional Loading for Responsive Designs


Visual Design


Time to stop showing clients static design visuals by Andy Clarke
Style Tiles by Samantha Warren
Element Collages by Dan Mall
Matter
Pattern Primer example
Pattern Primer source


Navigation


Clearleft (navigation first)
The Session (content first, navigation second)
Fix My Street (display: table)
Hack Farm (progressive disclosure)
Wellcome Library (off-canvas)
Yaron Shoen (separate URL)

Tagged with
responsive
workshop
uxlondon

And be damned

Representing Clearleft, I wrote a little something for The Pastry Box. As Tantek pointed out, it’s somewhat ironic that it’s published on a third-party site, considering that I explicitly said “I really encourage you to publish on your own site.”

So here it is.

…

I had the great pleasure of organising the Responsive Day Out here in Brighton last month. It was a lovely gathering of front-end developers and designers getting together to swap stories and cry on one another’s shoulders about the challenges involved in responsive design.

There were some well-known names on the roster: people who speak at international conferences and whose work you’d be familiar with. But there were also some first-timers: people who had never spoken at a conference before.

So why would I, as a conference organiser, ask someone who has never spoken before to get up on stage and share their thoughts?

The answer is simple: their writing. Reading the intelligent and cogent blog posts and articles that they had published made me want to hear what they had to say …and I wanted to introduce their smarts to an audience. These people took the time to write down and publish their thoughts, and that led directly to their appearance at a web conference.

I really encourage you to publish on your own site. If you don’t have your own site, I think you should. In the meantime, there are plenty of other wonderful online publications: 24 Ways, Smashing Magazine, A List Apart. Why not get in touch with them if you’ve got an idea for an article?

To say that communication is a valuable skill when you’re working on the web would be quite an understatement. In a very real sense, the web was made to allow us all to share and communicate. Anybody can do it. That’s one of the great things about the web. You don’t need to ask anybody for permission. If you have an idea or a technique or a question that you want to share, all you need to do is publish it …as long as you take the time to write your thoughts down.

Write. Publish. Share. Speak.

Tagged with
writing
publishing
sharing
speaking

Promo

The lovely and talented Paul and Kelly from Maxine Denver were in the Clearleft office to do some video work last week. After finishing a piece I was in, I suggested they keep “rolling” (to use an anachronistic term) so I could do a little tongue-in-cheek piece about the Clearleft device lab, a la Winnebago Man.

Here’s the result.

It reminded me of something, but I couldn’t figure out what. Then I remembered.

Tagged with
clearleft
devicelab
devices
testing
video
promo
funny
humour
parody

Not tumbling, but spiralling

Tumblr is traditionally the home of fun and frivolous blogs: Moustair, Kim Jong-Ill Looking At Things, Missed High Fives, Selleck Waterfall Sandwich, and the weird but wonderful Consume Consume (warning: you may lose an entire day in there).

But there are also some more thoughtful collections on Tumblr:

Abondonedography documents the strangely hypnotic lure of abandoned man-made structures, as does Abandoned Playgrounds.
Adiphany shows some of the cleverer pieces from the world of advertising.
Histories Past is a collection of fascinating historical photographs.
Found is also a collection of photographs, all of them from the archives of National Geographic, many of them hitherto-unpublished.

It’s going to be real shame when Tumblr shuts down and deletes all that content.

Of course that will never happen. Just like that never would’ve happened to Posterous or Pownce or Vox or GeoCities — publishing platforms where millions of people published a panoply of posts from the frivolous to the sublime, all of them now destroyed, their URLs purged from the web.

That reminds me: there’s one other Tumblr-hosted blog I came across recently: Our Incredible Journey documents those vile and disgusting announcements that start-ups make when they get acquired by a larger company, right before they flush their user’s content (and trust) down the toilet.

Oh, and I’ve got a Tumblr blog too. I just use it for silly pictures, YouTube videos, and quotes. I don’t want it to hurt too much when it gets destroyed.

Tagged with
tumblr
digital
preservation
blogs
blogging

Placehold on tight

I’m a big fan of the placeholder attribute introduced in HTML5. In my book, I described the cowpath it was paving:

When a form field has no value, insert some placeholder text into it.
When the user focuses on that field, remove the placeholder text.
If the user leaves the field and the field still has no value, reinstate the placeholder text.

That’s the behaviour that browsers mimicked when they began implementing the native placeholder functionality. I think Opera was first. Now all the major browsers support it.

But in some browsers, the details of that behaviour have changed slightly. In Chrome and Safari, when the user focuses on the field, the placeholder text remains. It’s not until the user actually begins to type that the placeholder text is removed.

Now, personally speaking, I’m not keen on this variation. It seems that I’m not alone. In an email to the WHATWG, Markus Ernst describes the problems that he’s noticed in user-testing where users are trying (and, of course, failing) to select the placeholder text in order to delete it before they begin typing.

It seems that a relevant number of users do not even try to start typing as long as the placeholder text remains visible.

But this isn’t so clear-cut. A quick straw poll at the Clearleft showed that opinions were divided on this. Some people prefer the newer behaviour …however it quickly became apparent that the situations they were thinking of were examples of where placeholder has been abused i.e. attempt to act as a label for the form field. In that situation, I agree, it would definitely be more useful for the labelling text to remain visible for as long as possible. But that’s not what placeholder is for. The placeholder attribute is intended to show a short hint (such as an example value)—it should be used in addition to a label; not instead of a label. I tend to use example content in my placeholder value and I nearly always begin with “e.g.”:

Your Name

(Don’t forget: generating placeholders from datalists can be a handy little pattern.)

So if you’re using placeholder incorrectly as a label, then the WebKit behaviour is probably what you want. But if you’re using placeholder as intended, then the behaviour in the other browsers is probably more desirable. If you want to get Safari and Chrome to mimic the behaviour of the other browsers, here’s a handy bit of CSS (from that same thread on the WHATWG mailing list):

[placeholder]:focus::-webkit-input-placeholder {
color: transparent;
}

You can see that in action on search forms at The Session for recordings, events, discussions, etc.

Now, if you do want your label—or input mask—to appear within your form field and remain even when the user focuses on the field, go ahead and do that. Use a label element with some CSS and JavaScript trickery to get the effect you want. But don’t use the placeholder attribute.

Tagged with
placeholder
forms
input
html5
markup
behaviour
browsers
standards

Off-canvas horizontal lists

There was a repeated rallying cry at the Responsive Day Out. It was the call for more sharing—more sharing of data, more sharing of case studies, more sharing of success stories, but also more sharing of failures.

In that spirit, I thought I’d share a pattern I’ve been working on. It didn’t work, but I’m not going to let that stop me putting it out there.

Here’s what I wanted to do…

Let’s say you’ve got a list of items; modular chunks of markup like an image and a caption, for example. By default these will display linearly on a small screen: a vertical list. I quite like the way that the Flickr iPhone app takes those lists and makes them horizontal—they go (to the right), with a little bit of the next item peaking out to give some affordance. It’s like an off-canvas carousel.

I’d quite like to use that interaction in responsive designs. But I don’t want to do it by throwing a lot of JavaScript at the problem. So I thought I’d attempt to achieve it with a little bit of CSS.

So, let’s say I’ve got a list of six items like this:

Please pay no mind to the qualities of the class names: this is just a quick proof of concept.

Here’s how that looks. At larger screen sizes, I display the list items in groups of two or three, side by side. At smaller sizes, the items simply linearise vertically.

Okay, now within a small-screen media query I’m going to constrain the width of the container:

.items {
width: 100%;
}

I’m going to make the list within that element stretch off-canvas for six screens wide (this depends on me knowing that there will be exactly six items in the list):

.items .item-list {
width: 600%;
}

Now I’ll make each item one sixth of that size, which should be one screen’s worth. Actually, I’m going to make it a bit less than exactly one sixth (which would be 16.6666%) so that a bit of the next item peaks out:

.item-list .item {
width: 15%;
}

My hope was that to make this crawlable/swipable, all I had to do was apply overflow: scroll to the containing element:

.items {
width: 100%;
overflow: scroll;
}

All of that is wrapped up in a small-viewport media query:

@media all and (max-width: 30em) {
.items {
width: 100%;
overflow: scroll;
}
.items .item-list {
width: 600%;
}
.items .item {
width: 15%;
}
}

It actually works …in some browsers. Alas, support for overflow: scroll doesn’t extend back as far as Android 2, still a very popular flavour of that operating system. That’s quite a showstopper.

There is a polyfill called Overthrow from those mad geniuses at Filament Group. But, as I said, I’d rather not throw more code at the problem. While I can imagine shovelling a polyfill at a desktop browser, I have a lot of qualms about trying to “support” an older mobile browser by giving it a chunk of JavaScript to chew on.

What I really need is a way to detect support for overflow: scroll. Alas, looking at the code for Overthrow, that isn’t so easy. Modernizr cannot help me here. We are in the realm of the undetectables.

My pattern is, alas, a failure.

Or, at least, it’s a failure for now. The @supports rule in CSS is tailor-made for this kind of situation. Basically, I don’t want any those small-screen rules to apply unless the browser supports overflow: scroll. Here’s how I will be able to do that:

@media all and (max-width: 30em) {
@supports (overflow: scroll) {
.items {
width: 100%;
overflow: scroll;
}
.items .item-list {
width: 600%;
}
.items .item {
width: 15%;
}
}
}

This is really, really useful. It means that I can start implementing this pattern now even though very few browsers currently understand @supports. That’s okay. Browsers that don’t understand it will simply ignore the whole block of CSS, leaving the list items to display vertically. But as @support gets more …um, support …then the pattern will kick in for those more capable browsers.

I can see myself adding this pre-emptive pattern for a few different use cases:

On the home page of Huffduffer, there’s the list of popular items and the list of new tunes.
On the tunes page of The Session, there’s the list of newest tune settings, newest comments, etc.
On the Clearleft blog, there’s the list of recent blog entries.

Feel free to poke at the example code. Perhaps you can find a way to succeed where I have failed.

Tagged with
interaction
pattern
markup
css
html
responsive
overflow
support

Slow glass

The day that Opera announced that it was changing its browser to use the WebKit rendering engine, I was contacted by .net magazine for my opinion on the move. My response was:

I have no opinion on this right now.

Frankly, I’m always quite amazed at how others can form opinions so quickly. Sometimes opinions are formed and set on technologies before they’re even out and about in the world: little printers, Apple watches, Google glasses…

The case against Google Glass seemed to be a done deal after Mark Hurst published The Google Glass feature no one is talking about:

The key experiential question of Google Glass isn’t what it’s like to wear them, it’s what it’s like to be around someone else who’s wearing them.

It’s a very persuasive piece of writing and it certainly gave me food for thought. Then Eric wrote Glasshouse:

Our youngest tends to wake up fairly early in the morning, at least as compared to his sisters, and since I need less sleep than Kat I’m usually the one who gets up with him. This morning, he put away a box he’d just emptied of toys and I told him, “Well done!” He turned to me, stuck his hand up in the air, and said with glee, “Hive!”

I gave him the requested high-five, of course, and then another for being proactive. It was the first time he’d ever asked for one. He could not have looked more pleased with himself.

And I suddenly realized that I wanted to be able to say to my glasses, “Okay, dump the last 30 seconds of livestream to permanent storage.”

Now I’ve got another interesting, persuasive perspective on the yet-to-be-released product.

Just as we can be very quick to label websites and social networks as dead (see Flickr), I worry if we’re often too quick to look for the worst aspects in any new technology.

Natalia has written a great piece called No, let’s not stop the cyborgs in reaction to the over-the-top Luddism of the Stop The Cyborgs movement:

Healthy criticism and skepticism towards technologies and their impact on society is necessary, but framing it in a way that discredits all people with body and sense enhancing technologies is othering.

Now we get in to the question of whether technology can be inherently “good” or “bad.” Kevin Kelly avoids such loaded terms, but he does ascribe some kind of biased trajectory to our tools in his book What Technology Wants.

Natalia writes:

It’s also important to remember that technologies themselves aren’t always ethically questionable. It’s what we do with them that can be positive or contribute to suffering and misery. Sometimes the same technology can be used to help people and to simultaneously ruin lives for profit.

A fair point, but one that is most commonly used by the pro-gun lobby—proponents of a technology that I personally find very hard to view as neutral.

But the point remains: we seem to have a natural impulse to immediately think of the worst that could happen with any new technology (though I’m just as impatient with techno-utopians as I am with techno-dystopians). I really enjoy watching Black Mirror but its central question grows wearisome after a while. That question is “What’s the worst that could happen?”

I am, once more, reminded of the danger of self-fulfilling prophesies when it comes to seeing the worst in technologies like Google Glass. As Matt Webb’s algorithm puts it:

It’s not the end of privacy because it’s all newly visible, it’s the end of privacy because it looks like it’s the end of privacy because it’s all newly visible.

I was chatting with fellow sci-fi fan Jon Tan about Kim Stanley Robinson, whose work I (shamefully) haven’t dived into yet. Jon told me that a good starting point would be the Three Californias trilogy. It consists of one utopia, one dystopia, and one apocalypse. I like the sound of that.

Those who take an anti-technology stance, or at least an overly-negative stance on technology, are often compared to the Amish. But as Stewart Brand is quick to point out, the Amish don’t reject technology—instead, they take their time in deciding whether a new technology will, on balance, be better or worse for their society in the long term:

The Amish seek to master technology rather than become its slave.

I think that techno-utopians and -dystopians alike can appreciate that.

Tagged with
technology
google
glass
sci-fi
sciencefiction
culture