Archive: August, 2011

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.

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

1. The protocol—e.g. http—followed by a colon and two slashes (for which Sir Tim apologises).
2. The domain—e.g. adactio.com or huffduffer.com.
3. 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/nerdiness"
script src="https://huffduffer.com/js/global.js"

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

a href="/journal/tags/nerdiness"
script src="/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="//adactio.com/journal/tags/nerdiness"
script src="//huffduffer.com/js/global.js"

If the linking document is being served over HTTP, then those URLs will point to http://adactio.com/journal/tags/nerdiness and https://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 lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>

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.

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:

<body>
<div role="main">
<p>This is the main content.</p>
</div>
<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>
</body>

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.

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 your 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:

<body>
<div role="main">
<p>This is the main content</p>
</div>
<nav role="navigation">
<p>This is the navigation</p>
</nav>
</body>

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:

<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>

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.

Update: You can see it in action on JSbin (resize the view panel).

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.

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.