Jeremy Keith's Blog, page 142

Impostor syndrome

I'm living inside Keynote these days. I've got a string of speaking engagements coming up and I'm freaking out about all of them.

The big one is the full-day dConstruct workshop I'll be leading called Responsive Enhancement. I've been working on it solidly for the last month and I hope that it's all going to come together this week. I'm quite excited about it. If anything, my concern is that there won't be enough time in one day to cover all the things I want to geek about.

Lest you think that is a blatant plug to entice you to book a place on the workshop, that ship has sailed, my friend: the workshop sold out a while back. But you can still book a place on Scott's jQuery Mobile workshop or Josh's Mobile Design workshop. And remember, a workshop ticket gets you complementary access to the dConstruct conference (which sold out in a day).

Maker Faire Brighton will take place the day after dConstruct but I'll probably be too busy making frantic last-minute preparations for Aral's Update conference at the Brighton Dome two days later. I've been invited to deliver an 18 minute rant and permission has been granted for me to be as controversial as I wish. I'll try not to disappoint. Tickets are still available if you want a piece of the action.

Later that week I'll be up in London for the Adobe Expressive Web Tour. In this case, I haven't explicitly asked permission to rant but I'm going to do so anyway. Hey, if you're going to ask me to give a talk called "The State of the Web" in the same month that you dump Adobe Muse on the world, you've gotta expect some flak, right?

Then I'll be flying out to Nashville for the Breaking Development conference which kicks off on September 12th. I'm feeling distinctly outclassed by the ludicrously smart line-up of talent that will be presenting there. And I'm supposed to open the show! gulp

Given that the title of my talk is There Is No Mobile Web, it may sound like I am once again courting controversy, but actually, I consider that to be a fairly uncontroversial viewpoint.

Much as I'm looking forward to the time in Tennessee, it's a shame that I'll have to duck out of town in the middle of the Brighton Digital Festival. I'll miss out on BarCamp Brighton and Flash On The Beach.

Fortunately I will still be in town for Brainy Hacks on September 6th. It looks like Clare is putting together a great event: an evening of brainstorming design solutions for a non-profit:

Calling all creatives, strategists and planners - we need you to donate your brain to charity. We have a great brief from a not-for-profit organisation and you have two hours to solve it competing in teams of up to five to have your idea judged the best by our mega judges.

But if the time is going to pass pleasantly—with some food and drink to stir the creative juices—then a sponsor needs to step up and claim the glory. If you know of an appropriate organisation, get in touch with Clare.

Now, if you'll excuse me, I need to get back to frantically putting slides together while I swirl deeper and deeper down into a pit of inadequacy-fuelled pseudocompetence.

Tagged with
speaking
conference
dconstruct
updateconf
brighton
bdconf
brainyhacks

A matter of protocol

The web is made of sugar, spice and all things nice. On closer inspection, this is what most URLs on the web are made of:

protocol://domain/path



The protocol—e.g. http—followed by a colon and two slashes (for which Sir Tim apologises).
The domain—e.g. adactio.com or huffduffer.com.
The path—e.g. /journal/tags/nerdiness or /js/global.js.

(I'm leaving out the whole messy business of port numbers—which can be appended to the domain with a colon—because just about everything on the web is served over the default port 80.)

Most URLs on the web are either written in full as absolute URLs:

a href="http://adactio.com/journal/tags/nerdi..."
script src="http://huffduffer.com/js/global.js"

Or else they're written out relative to the domain, like this:

a href="http://adactio.com/journal/tags/nerdi..."
script src="http://adactio.com/js/global.js"

It turns out that URLs can not only be written relative to the linking document's domain, but they can also be written relative to the linking document's protocol:

a href="http://adactio.com//adactio.com/journ..."
script src="http://adactio.com//huffduffer.com/js..."

If the linking document is being served over HTTP, then those URLs will point to http://adactio.com/journal/tags/nerdi... and http://huffduffer.com/js/global.js but if the linking document is being served over HTTP Secure, the URLs resolve to https://adactio.com/journal/tags/nerdiness and https://huffduffer.com/js/global.js.

Writing the src attribute relative to the linking document's protocol is something that Remy is already doing with his HTML5 shim:

If you have a site that is served over both HTTP and HTTPS, and you're linking to a CDN-hosted JavaScript library—something I highly recommend—then you should probably get in the habit of writing protocol-relative URLs:

This is something that HTML5 Boilerplate does by default. HTML5 Boilerplate really is a great collection of fantastically useful tips and tricks …all wrapped in a terrible, terrible name.

Tagged with
urls
nerdiness
linking
protocol

Re-tabulate

Right after I wrote about combining flexbox with responsive design—to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter. He pointed out a really elegant solution to the same use-case that makes use of display:table.

Let's take the same markup as before:

This is the main content.

This is the navigation.

foo
bar
baz

The source order reflects the order I want on small-screen devices (feature phones, smart phones, etc.). Once the viewport allows it, I'd like to put that navigation at the top. I can do this by wrapping some display declarations in a media query:

@media screen and (min-width: 30em) {
body {
display: table;
caption-side: top;
}
[role="navigation"] {
display: table-caption;
}
}

That's it. It works much like box-orient:vertical with box-direction:reverse but because this is good ol' CSS 2.1, it's very well supported.

We can solve the other issue too: making those list items display horizontally on larger screens:

[role="navigation"] ol {
display: table-row;
}
[role="navigation"] ol li {
display: table-cell;
}

Once again, I've put a gist up on Github (get me! I'm like a proper computer nerd).

Update: And Remy has put it on JSbin so you can see it in action (resize the live preview pane).

So there you go: we've at least two different mechanisms in CSS to re-order the display of content and navigation in response to screen real-estate. The default is content first, navigation second—a pattern that Luke talked about in this interview with Jared:

Yeah, one of the design principles that I'll be talking on the tour about, for mobile, is content first, navigation second; which is just really putting something up right away that somebody can engage with, and saving the pivoting and the navigating for later.

There's, basically, UI patterns that you can use to make that happen. I'm still surprised at how many, both mobile websites and applications, the first thing they give you is a menu of choices, instead of content.

Don't get me wrong, the menu's important, and you can get to it, but it's actually the content that the immediacy of mobile, and the fact that you're probably on a slower network, and in some cases you're even paying for your data transfers, right? Giving you a list of choices as your first time experience tends not to work so well.

Luke Wroblewski — Designing Mobile Web Experiences » UIE Brain Sparks on Huffduffer

Tagged with
responsive
design
layout
css
table
display
content
navigation

Re-flex

I was in Minnesota last week for An Event Apart Minneapolis. A great time was had by all. Not only were the locals living up to their reputation with Amy and Kasia demonstrating that Kristina isn't an outlier in the super-nice, super-smart Minnesotan data sample, but the conference itself was top-notch too. It even featured some impromptu on-stage acrobatics by Stan.

A recurring theme of the conference—right from Zeldman's opening talk—was Content First. In Luke's talk it was more than a rallying cry; it was a design pattern he recommends for mobile: content first, navigation second. It makes a lot of sense when you're screen real estate is at a premium. You can see this pattern in action on the Bagcheck mobile site (a button at the top of screen is simply a link that leads to the fragment identifier for the navigation at the bottom).

Later on, Eric was diving deep into the guts of the CSS3 flexible box layout module and I saw an opportunity to join some dots.

Let's say I've got a document like this with the content first and the navigation second:

This is the main content

This is the navigation

Using box-orient:vertical and box-direction:reverse on the body element, I can invert the display of those two children from the order they appear in the source:

body {
display: box;
box-orient: vertical;
box-direction: reverse;
}

If I wrap that in a media query, I can get the best of both worlds: content first, navigation second on small screens; navigation first, content second on larger viewports:

@media screen and (min-width: 30em) {
body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
}

Works a treat (once you include the necessary -webkit and -moz prefixes).

I thought I'd take it a bit further. Suppose the navigation has a list of links:

This is the navigation.

foo
bar
baz

I could use flexbox to lay those items out horizontally instead of vertically once the viewport is large enough:

@media screen and (min-width: 30em) {
[role="navigation"] ol {
display: box;
box-orient: horizontal;
}
[role="navigation"] li {
box-flex: 1;
}
}

Here's the weird thing: in Webkit—Safari and Chrome—the list items reverse their direction: "baz, bar, foo" instead of "foo, bar, baz." It seems that the box-direction value of reverse is being inherited from the body element, which I'm pretty sure isn't the right behaviour. But it can be easily counteracted by explicitly declaring box-direction: normal on the navigation.

What's a little trickier to figure out is why Firefox is refusing to space the list items equally. I've put a gist on Github if you want to take a look for yourself and see if you can figure out what's going on.

The new CSS3 layout modules and responsive design could potentially be a match made in heaven …something that Stephen has been going on about for a while now. Check out his talk at Mobilism earlier this year.

You'll notice that he's using a different syntax in his presentation; that's because the spec has changed. In my example, I'm using the syntax that's currently supported in Webkit, Gecko and Internet Explorer. And, as Eric pointed out in his talk, even when the newer syntax is supported, the older vendor-prefixed syntax won't be going anywhere.

Tagged with
responsive
design
css3
flexbox
aneventapart
aea
minneapolis
conference
layout
standards

Days of science and hacking

I've got some tasty science announcements. Of course anything I have to say is going to be upstaged by today's revelation about Mars. Those NASA showboaters.

Anyway, here's Ariel's keynote from OSCON in Portland last week.

Science Hack Day took centre-stage. Ariel has put together instructions for creating a Science Hack Day in your city. The front page of the wiki now contains a list of places where people are hoping to coordinate an event.

If you want to help make a Science Hack Day happen in Portland, get in touch with rocketeer Nathan Bergey—the science hacker behind the brilliant ISS Notify lamp.

Live in Cape Town? Want a Science Hack Day? Get in touch with ex-pat Dutch astronomer Carolina Ödman.

If you want to help make a Science Hack Day happen in San Diego, get in touch with biologist Jun Yin—the science hacker behind wearable DNA.

It looks like there's quite a lot of interest in organising a Science Hack Day in Dublin to coincide with the Dublin City Of Science event in 2012. Get in touch with Ellen Byrne if you want to be involved.

Those are just a few. There are many more.

One event that's definitely going ahead is another Science Hack Day San Francisco on November 12th and 13th. If last year's event at the Institute For The Future is anything to go by, this will be unmissable.

And you can go.

No, really. In a Steve Jobsian style "just one more thing" addendum to her OSCON keynote, Ariel announced that the Alfred P. Sloan Foundation is providing a grant to fund the Science Hack Day Ambassador Program:

Thanks to this generous support, 10 people interested in organizing a Science Hack Day from around the world will be selected to win a scholarship for a trip to Science Hack Day San Francisco, occurring November 12-13, 2011, where they'll experience first-hand how Science Hack Day works and connect with a global community of organizers. This Science Hack Day Ambassador Program will award individuals who are motivated and planning to organize a Science Hack Day in their city.

To apply, start organising a Science Hack Day in your city and then fill in the application form. The scholarship will cover airfare, four nights in a hotel and $300 for expenses. Ten lucky ambassadors will be winging their way to the bay area this November.

It's time to get excited and make things with science in your corner of this pale blue dot.

Tagged with
science
hackday
scihack

Hot topics, transcribed

As ever, I had a lot of fun moderating the hot topics panel at this year's Web Directions @media in London. Thanks to all of you who left questions on my blog post.

I had a great line-up of panelists:

Relly,
Brian,
Bruce and
Doug.

We discussed publishing, mobile, browsers, clients and much much more. The audio is available for your huffduffing pleasure and I've had it transcribed. I've published the transcription over in the articles section of this site, so if you prefer reading to listening, I direct your attention to:

Web Directions @media 2011 Hot Topics Panel

Web Directions @media 2011: Jeremy Keith — Panel: Hot Topics on Huffduffer

Tagged with
wdx
webdirections
atmedia
conference
panel
transcription
audio

The Lost Lemonworld

When the always-excellent Radiolab podcast turned its attention to the subject of creativity and motivation in an episode called 'Help?', they spoke to Elizabeth Gilbert who reminisced about interviewing Tom Waits on this topic:

He was talking about how every song has a distinctive identity that it comes into the world with, and it needs to be taken in different ways. He said there are songs that you have to sneak up on like you're hunting for a rare bird, and there are songs that come fully intact like a dream taken through a straw. There are songs that you find little bits of like pieces of gum you find underneath the desk, and you scrape them off and you put them together and you make something out of it.

And there are songs, he said, that need to be bullied. He said he's been in the studio working on a song and the whole album is done and this one song won't give itself over and — everyone's gotten used to seeing him do things like this — he'll march up and down the studio talking to the song, saying "The rest of the family is in the car! We're all going on vacation! You coming along or not? You've got 10 minutes or else you're getting left behind!"

Last year the New York Times ran a profile of The National, written while they were still recording the wonderful High Violet—my favourite album of last year. The piece circles around the ongoing problems the band were having trying to tame the song Lemonworld:

Since January they'd done it bright, done it drowsy, done it with violin parts overnighted from Australia by Padma Newsome, done it so many ways Bryce despaired, "It's a riddle we can't solve."

This is exactly what we've been going through with Salter Cane. For about a year we had a song that had been defying us, stubbornly refusing to reach that breakthrough moment where it all seems to come together. We took a break from the song for a while and when we came back to it, we tried approaching it as a new piece. That seems to be working. It's finally coming together.

In the end we realised that we trying to make the song into something bigger than it needed to be. Sometimes it's okay for a song to be small and simple. That seems to be the case with Lemonworld:

Matt said afterward, "we tried so hard and it always seemed to fail as a rock song. It lost the charm of the ugly little demo. Now it's the ugliest, worst-mixed, least-polished song on the record, and it took the longest to get there."

I think that Lemonworld is a strong song. It even stands up to be being butchered by me on the bouzouki.

Lemonworld on Huffduffer

Tagged with
music
saltercane
thenational
song
creativity

OurSpace

It's hard to believe that it's been half a decade since The Show from Ze Frank graced our tubes with its daily updates. Five years ago to the day, he recorded the greatest three minutes of speech ever committed to video.

In the midst of his challenge to find the ugliest MySpace page ever, he received this comment:

Having an ugly Myspace contest is like having a contest to see who can eat the most cheeseburgers in 24 hours… You're mocking people who, for the most part, have no taste or artistic training.

Ze's response is a manifesto to the democratic transformative disruptive power of the web. It is magnificent.

In Myspace, millions of people have opted out of pre-made templates that "work" in exchange for ugly. Ugly when compared to pre-existing notions of taste is a bummer. But ugly as a representation of mass experimentation and learning is pretty damn cool.

Regardless of what you might think, the actions you take to make your Myspace page ugly are pretty sophisticated. Over time as consumer-created media engulfs the other kind, it's possible that completely new norms develop around the notions of talent and artistic ability.

Spot on.

That's one of the reasons why I dread the inevitable GeoCities-style shutdown of MySpace. Let's face it, it's only a matter of time. And when it does get shut down, we will forever lose a treasure trove of self-expression on a scale never seen before in the history of the planet. That's so much more important than whether it's ugly or not. As Phil wrote about the ugly and neglected fragments of Geocities:

GeoCities is an awful, ugly, decrepit mess. And this is why it will be sorely missed. It's not only a fine example of the amateur web vernacular but much of it is an increasingly rare example of a period web vernacular. GeoCities sites show what normal, non-designer, people will create if given the tools available around the turn of the millennium.

Substitute MySpace for GeoCities and you get an idea of the loss we are facing.

Let's not make the same mistake twice.

Tagged with
preservation
history
culture
myspace
creativity
geocities

Digital Deathwatch

The Deatchwatch page on the Archive Team website makes for depressing reading, filled as it is with an ongoing list of sites that are going to be—or have already been—shut down. There are a number of corporations that are clearly repeat offenders: Yahoo!, AOL, Microsoft. As Aaron said last year when speaking of Museums and the Web:

Whether or not they asked to be, entire communities are now assuming that those companies will not only preserve and protect the works they've entrusted or the comments and other metadata they've contributed, but also foster their growth and provide tools for connecting the threads.

These are not mandates that most businesses take up willingly, but many now find themselves being forced to embrace them because to do otherwise would be to invite a betrayal of the trust of their users, from which they might never recover.

But occasionally there is a glimmer of hope buried in the constant avalanche of shit from these deletionist third-party custodians of our collective culture. Take Google Video, for example.

Earlier this year, Google sent out emails to Google Video users telling them the service was going to be shut down and their videos deleted as of April 29th. There was an outcry from people who rightly felt that Google were betraying their stated goal to organize the world's information and make it universally accessible and useful. Google backtracked:

Google Video users can rest assured that they won't be losing any of their content and we are eliminating the April 29 deadline. We will be working to automatically migrate your Google Videos to YouTube. In the meantime, your videos hosted on Google Video will remain accessible on the web and existing links to Google Videos will remain accessible.

This gives me hope. If the BBC wish to remain true to their mission to enrich people's lives with programmes and services that inform, educate and entertain, then they will have to abandon their plan to destroy 172 websites.

There has been a stony silence from the BBC on this issue for months now. Ian Hunter—who so proudly boasted of the planned destruction—hasn't posted to the BBC blog since writing a follow-up "clarification" that did nothing to reassure any of us.

It could be that they're just waiting for a nice quiet moment to carry out the demolition. Or maybe they've quietly decided to drop their plans. I sincerely hope that it's the second scenario. But, just in case, I've begun to create my own archive of just some of the sites that are on the BBC's death list.

By the way, if you're interested in hearing more about the story of Archive Team, I recommend checking out these interviews and talks from Jason Scott that I've huffduffed.

Tagged with
digital
preservation
archiveteam
google
bbc

Responsive dConstruction

Tickets for dConstruct 2011 went on sale last Tuesday. Tickets for dConstruct 2011 also sold out last Tuesday.

That's kinda crazy: a conference for almost 800 people selling out in one day! I think it's partly down to the great reputation that dConstruct has established for itself over the year's as the thinking geek's gathering. But I think it must mostly be down to the fantastic line-up of speakers: Don Norman, Frank Chimero, Kevin Slavin …it's going to be quite a day!

If you didn't manage to get a ticket, don't despair. Technically, there are still some tickets available. If you book a place on one of the workshops taking place in the run-up to the conference day itself, you'll get a complementary ticket to the main event. Also, if you book a workshop place before August 2nd, you can get the early-bird rate of £395+VAT rather than the full price of £445.

You might choose to attend Dan Lockton's workshop on influencing behaviour, Josh Clark's tapworthy mobile design or Scott Jehl's jQuery mobile workshop but I'm going to humbly suggest that you might also be interested in the day-long course I'm putting together on responsive enhancement.

As the title suggests, this is going to be all about the intersection of responsive design and progressive enhancement: a content first approach. Because of that, the workshop won't just be dealing in the technologies involved. It will also spend plenty of time tackling the planning and process. So while there are obvious benefits for front-end developers, it's also going to be a valuable day for UX designers, project managers and just about anybody involved in building websites today.

Oh, and the workshop will feature a special guest appearance by Scott who will give a peak behind the scenes of the forthcoming Boston Globe responsive site.

I'm going to be spending a lot of time preparing the materials for this workshop. In fact, it's going to be occupying most of my time between now and August 31st. If you want to be there for the final result, go ahead and book your place.

Tagged with
dconstruct
conference
workshop
event
responsive