Tags: aneventapart



Styling the Patterns Day site

Once I had a design direction for the Patterns Day site, I started combining my marked-up content with some CSS. Ironically for an event that’s all about maintainability and reusability, I wrote the styles for this one-page site with no mind for future use. I treated the page as a one-shot document. I even used ID selectors—gasp! (the IDs were in the HTML anyway as fragment identifiers).

The truth is I didn’t have much of a plan. I just started hacking away in a style element in the head of the document, playing around with colour, typography, and layout.

I started with the small-screen styles. That wasn’t a conscious decision so much as just the way I do things automatically now. When it came time to add some layout for wider viewports, I used a sprinkling of old-fashioned display: inline-block so that things looked so-so. I knew I wanted to play around with Grid layout so the inline-block styles were there as fallback for non-supporting browsers. Once things looked good enough, the fun really started.

I was building the site while I was in Seattle for An Event Apart. CSS Grid layout was definitely a hot topic there. Best of all, I was surrounded by experts: Jen, Rachel, and Eric. It was the perfect environment for me to dip my toes into the waters of grid.

Jen was very patient in talking me through the concepts, syntax, and tools for using CSS grids. Top tip: open Firefox’s inspector, select the element with the display:grid declaration, and click the “waffle” icon—instant grid overlay!

For the header of the Patterns Day site, I started by using named areas. That’s the ASCII-art approach. I got my head around it and it worked okay, but it didn’t give me quite the precision I wanted. I switched over to using explicit grid-row and grid-column declarations.

It’s definitely a new way of thinking about layout: first you define the grid, then you place the items on it (rather than previous CSS layout systems where each element interacted with the elements before and after). It was fun to move things around and not have to worry about the source order of the elements …as long as they were direct children of the element with display:grid applied.

Without any support for sub-grids, I ended up having to nest two separate grids within one another. The logo is a grid parent, which is inside the header, also a grid parent. I managed to get things to line up okay, but I think this might be a good use case for sub-grids.

The logo grid threw up some interesting challenges. I wanted each letter of the words “Patterns Day” to be styleable, but CSS doesn’t give us any way to target individual letters other than :first-letter. I wrapped each letter in a b element, made sure that they were all wrapped in an element with an aria-hidden attribute (so that the letters wouldn’t be spelled out), and then wrapped that in an element with an aria-label of “Patterns Day.” Now I could target those b elements.

For a while, I also had a br element (between “Patterns” and “Day”). That created some interesting side effects. If a br element becomes a grid item, it starts to behave very oddly: you can apply certain styles but not others. Jen and Eric then started to test other interesting elements, like hr. There was much funkiness and gnashing of specs.

It was a total nerdfest, and I loved every minute of it. This is definitely the most excitement I’ve felt around CSS for a while. It feels like a renaissance of zen gardens and layout reservoirs (kids, ask your parents).

After a couple of days playing around with grid, I had the Patterns Day site looking decent enough to launch. I dabbled with some other fun CSS stuff in there too, like gratuitous clip paths and filters when hovering over the speaker images, and applying shape-outside with an image mask.

Go ahead and view source on the Patterns Day page if you want—I ended up keeping all the CSS in the head of the document. That turned out to be pretty good for performance …for first-time visits anyway. But after launching the site, I couldn’t resist applying some more performance tweaks.

Getting griddy with it

I had the great pleasure of attending An Event Apart Seattle last week. It was, as always, excellent.

It’s always interesting to see themes emerge during an event, especially when those thematic overlaps haven’t been planned in advance. Jen noticed this one:

I remember that being a theme at An Event Apart San Francisco too, when it seemed like every speaker had words to say about ill-judged use of Bootstrap. That theme was certainly in my presentation when I talked about “the fallacy of assumed competency”:

  1. large company X uses technology Y,
  2. company X must know what they are doing because they are large,
  3. therefore technology Y must be good.

Perhaps “the fallacy of assumed suitability” would be a better term. Heydon calls it “the ‘made at Facebook’ fallacy.” But I also made sure to contrast it with the opposite extreme: “Not Invented Here syndrome”.

As well as over-arching themes, it was also interesting to see which technologies were hot topics at An Event Apart. There was one clear winner here—CSS Grid Layout.

Microsoft—a sponsor of the event—used An Event Apart as the place to announce that Grid is officially moving into development for Edge. Jen talked about Grid (of course). Rachel talked about Grid (of course). And while Eric and Una didn’t talk about it on stage, they’ve both been writing about the fun they’ve been having having with Grid. Una wrote about 3 CSS Grid Features That Make My Heart Flutter. Eric is documenting the overall of his site with Grid. So when we were all gathered together, that’s what we were nerding out about.

The CSS Squad.

There are some great resources out there for levelling up in Grid-fu:

With Jen’s help, I’ve been playing with CSS Grid on a little site that I’m planning to launch tomorrow (he said, foreshadowingly). I took me a while to get my head around it, but once it clicked I started to have a lot of fun. “Fun” seems to be the overall feeling around this technology. There’s something infectious about the excitement and enthusiasm that’s returning to the world of layout on the web. And now that the browser support is great pretty much across the board, we can start putting that fun into production.

Research on evaluating technology

I’ve spent the past few months preparing a new talk for An Event Apart San Francisco (and hopefully some more AEAs after that). As always happens, I spent the whole time vacillating between thinking “this is good!” and thinking “this is awful!” I’m still bouncing between those poles. I won’t really know whether the talk is up to snuff until I actually give it to a live audience.

Over the past few years, my presentations have built upon one another. Two years ago, my talk was called Enhance! and it set the groundwork for using a layered approach to web design and development. My 2016 talk, Resilience, follows on with a process and examples for that approach (I also set myself the challenge of delivering a talk about progressive enhancement without ever using the phrase “progressive enhancement”).

My new talk goes a bit meta, but in my mind, it’s very much building on the previous talks. The talk is all about evaluating technology. I haven’t settled on a final title, but I was thinking about something obtuse, like …Evaluating Technology.

Here’s my hastily scribbled description:

We work with technology every day. And every day it seems like there’s more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that? This talk will help you evaluate tools and technologies in a way that best benefits the people who use the websites that we are designing and developing. Let’s take a look at some of the hottest new web technologies like service workers and web components. Together we will dig beneath the hype to find out whether they will really change life on the web for the better.

As ever, I’ll begin and end with a long-zoom pretentious arc of history, but I’ll dive into practical stuff in the middle. That’s become a bit of a cliché for my presentations, but the formula works as a sort of microcosm of a good conference—a mixture of the inspirational and the practical, trying to keep a good balance of both.

For this new talk, the practical focus will be on some web technologies that are riding high on the hype cycle right now: service workers, web components, progressive web apps. I’ll use them as a lens for applying broader questions about how we make decisions about the technologies we embrace, and the technologies we reject.

Technology. Now there’s a big subject. It’s literally the entirety of human history. I had to be careful not to go down too many rabbit holes. I’m still not sure if I’ve succeeded, but I’ve already had to ruthlessly cull some darlings.

One of the nice things that the An Event Apart crew started doing was to provide link lists for each talk to attendees. That gives me an opportunity to touch briefly on a topic in the talk itself, but allow any interested attendees to dive deeper at their leisure.

For this talk on evaluating technology, I’ve put together this list of hyperlinks for further reading, watching, listening, and researching…





Links from a talk

I’m coming to a rest after a busy period of travelling and speaking. In the last five or six weeks I’ve been to Copenhagen, Freiburg, Prague, Portland, Seattle, and Austin.

The trip to Austin was lovely. It was so nice to be there when it wasn’t South by Southwest (the infrastructure of the whole town creaks under the sheer weight of the event). I wasn’t just there to eat tacos and drink beer in the sunshine. I was there to talk at An Event Apart.

Like I said months before the event:

Everyone in the line up is one of my heroes.

It was, as always, a great event. A personal highlight for me was getting to meet Lara Hogan for the first time. She was kind enough to sign my copy of her fantastic book. She gave an equally fantastic talk at the conference, featuring some of the most deftly-handled Q&A I’ve ever seen.

I spoke at the end of the conference (no pressure!), giving a brand new talk called Resilience—I gave a shortened version at Coldfront and Smashing Conference but this was my first chance to go all out with an hour long talk. It was my chance to go full James Burke.

I assembled some related links for the attendees. Here they are…




Related posts on adactio.com

Here’s a readlist of those links.

Further reading

Here’s a readlist of those links.

See also: other links tagged with “progressive enhancement” on adactio.com

100 words 011

The time had come for Jeremy to leave Brighton. He was being called away to the far shores of the Pacific Northwest. What would have once been a sea voyage and overland trek lasting for weeks and months took him just nine hours in the belly of a flying machine. Having made landfall in Seattle he then had to stand in front of a room full of his peers at An Event Apart and speak to them about progressive enhancement. Jeremy tries to remain humble but as he stepped off that stage, two words went through his mind: “Nailed. It!”

100 words 009

Last year at An Event Apart in Seattle I was giving a talk about long-term thinking on the web, using The Session as a case study. As a cheap gimmick, I played a tune on my mandolin during the talk.

Chris Coyier was also speaking. He plays mandolin too. Barry—one of the conference attendees—also plays mandolin. So we sat outside, passing my mandolin around.

Barry is back this year and he brought his mandolin with him. I showed him an Irish jig. He showed me a bluegrass tune. Together we played a reel that crossed the Atlantic ocean.

Talking and travelling

I’m in America. This is a three-week trip and in those three weeks, I’m speaking at four conferences.

That might sound like a fairly hectic schedule but it’s really not that bad at all. In each place I’m travelling to, travel takes up a day, the conference portion takes up a couple of days, but I still get a day or two to just hang out and be a tourist, which is jolly nice.

This sojourn began in Boston where I was speaking at An Event Apart. It was—as ever—an excellent event and even though I was just speaking at An Event Apart in Seattle just a few weeks ago, there were still plenty of fresh talks for me to enjoy in Boston: Paul talking about performance, Lea talking about colour in CSS, Dan talking about process, and a barnstorming talk from Bruce on everything that makes the web great (although I respectfully disagree with his stance on DRM/EME).

My own talk was called The Long Web and An Event Apart Boston was its final outing. I first gave it at An Event Apart DC back in August—it’s had a good nine-month run.

My next appearance at An Event Apart will be at the end of this American trip in San Diego. I’ll be presenting a new talk there. Whereas my previous talk was a rambling affair about progressive enhancement, responsive design, and long-term thinking, my new talk will be a rambling affair about progressive enhancement, responsive design, and long-term thinking.

Sooner or later people are going to realise that I keep hammering home the same message in all my talks and this whole speaking-at-conferences gig will dry up. Until then, I’ll keep hammering home that same old message.

I have two opportunities to road-test this new talk before An Event Apart San Diego (for which, by the way, tickets still remain: use the code AEAKEITH when you’re booking to get $100 off).

I’ll be speaking at Bmoresponsive in Baltimore at the end of this week. Before that, I have the great pleasure (and pressure) of opening the show tomorrow at the Artifact conference here in good ol’ Austin, Texas (and believe it or not, you can still get a ticket: this time use the code ADACTIO100 when you’re booking to get $100 off).

Until then, I have some time to wander around and be a tourist. It is so nice to be here in Austin when it’s not South by Southwest. I should probably fretting over this talk but instead I’m spending my time sampling tacos and beers in the sunshine.


I’ve just come back from a multi-hop trip to the States, spanning three cities in just over two weeks.

It started with an all-too-brief trip to San Francisco for Science Hack Day, which—as I’ve already described—was excellent. It was a shame that it was such a flying visit and I didn’t get to see many people. But then again, I’ll be back in December for An Event Apart San Francisco.

It was An Event Apart that took me to my second destination: Austin, Texas. The conference was great, as always. But was really nice was having some time afterwards to explore the town. Being in Austin when it’s not South by Southwest is an enjoyable experience that I can heartily recommend.

Christopher and Ari took me out to Lockhart to experience Smitty’s barbecue—a place with a convoluted family drama and really, really excellent smoked meat. I never really “got” Texas BBQ until now. I always thought I liked the sauced-based variety, but now I understand: if the BBQ is good enough, you don’t need the sauce.

For the rest of my stay, Sam was an excellent host, showing me around her town until it was time for me to take off for New York city.

To start with, I was in Manhattan. I was going to be speaking at Future Of Web Design right downtown on 42nd street, and I showed up a few days early to rendezvous with Jessica and do some touristing.

We perfected the cheapskate’s guide to Manhattan, exploring the New York Public Library, having Tiff show us around the New York Times, and wrangling a tour of the MoMA from Ben Fino-Radin, who’s doing some fascinating work with the digital collection.

I gave my FOWD talk, which went fine once the technical glitches were sorted out (I went through three microphones in five minutes). The conference was in a cinema, which meant my slides were giganormous. That was nice, but the event had an odd kind of vibe. Maybe it was the venue, or maybe it was the two-track format …I really don’t like two-track conferences; I constantly feel like I’m missing out on something.

I skipped out on the second day of the conference to make my way over the bridge to Brooklyn in time for my third trip to Brooklyn Beta.

This year, they tried something quite different. For the first two days, there was a regular Brooklyn Beta: 300 lovely people gathered together at the Invisible Dog, ostensibly to listen to talks but in reality to hang out and chat. It was joyous.

Then on the third and final day, those 300 people decamped to Brooklyn’s Navy Yard to join a further 1000 people. There we heard more talks and had more chats.

Alas, the acoustics in the hangar-like space battled against the speakers. That’s why I made sure to grab a seat near the front for the afternoon talks. I found myself with a front-row seat for a series of startup stories and app tales. Then, without warning, the tech talks were replaced with stand-up comics. The comedians were very, very good (Reggie Watts!) …but I found it hard to pay attention because I realised I was in a living nightmare: somehow I was in the front-row seat of a stand-up comedy show. I spent the entire time thinking “Please don’t pick on me, please don’t pick on me, please don’t…” I couldn’t sneak out either, because that would’ve only drawn attention to myself.

But apart from confronting me with my worst fears, Brooklyn Beta was great …I’m just not sure it scales well from 300 to 1300.

And with that, my American sojourn came to an end. I’m glad that the stars aligned in such a way that I was able to hit up four events in my 16 day trip:

August in America, day twenty-five

Today was the second day of An Event Apart Chicago and I kicked things off with my talk The Long Web. But this time I introduced a new variable into the mix—I played a bit of mandolin.

A Man and His Music: Jeremy Keith at An Event Apart Chicago 2013

It was relevant …honest. I was talking about the redesign and relaunch of The Session, which involved giving a bit of background on traditional Irish music, so it seemed appropriate to demonstrate with a hornpipe. I screwed it up a little bit, but people didn’t seem to mind.

Jeremy Keith at An Event Apart Chicago 2013

Once I was done with my talk, I was able to relax and enjoy an excellent presentation by Adrian on interface details; lots of great food for thought in there.

Once the day was done, myself, Jessica, Jason, Ethan, Brad, Kristina, and Karen made our way to The Purple Pig, where we proceeded to eat all the food. Excellent food and excellent company; a good way to spend my last night in Chicago …and indeed, the United States.

Tomorrow I begin the journey home.

August in America, day twenty-four

Today was the opening day of An Event Apart Chicago so I spent the whole day at the back of the room absorbing the knowledge bombs being dropped.

As usual, the quality of the talks was excellent, and quite a few of them set me up nicely for my talk tomorrow. I’ll be reiterating a lot of what Ethan said about progressive enhancement—no surprise there.

I’m on first thing tomorrow. That’s the hangover slot (thanks for booze, Media Temple). I’m kind of nervous about the talk. Now that I’ve given it once already—at An Event Apart DC earlier this month—I shouldn’t be worried, but I’m going to attempt something a bit new tomorrow. If it doesn’t work, I’ll be left with egg on my face.

Wish me luck.

August in America, day four

Today was day two of An Event Apart DC and I opened up the show. I was very nervous because this was a brand new talk. I wasn’t sure whether I would come in way under time, or way over time, or whether anybody would be interested in the subject matter.

As it turned out, the timing was okay. I got through a lot of stuff faster than I was expecting, so that left me time for a good ol’ rant towards the end of the talk. I ranted about progressive enhancement. I ranted about digital preservation. I ranted about “the cloud”. I guess I shouldn’t be surprised that people think I’m an angry person (I’m really not; honest).

It seemed like people really enjoyed the talk. There were lots of positive tweets and lots of people came up to me to tell me how much they enjoyed the “big picture” nature of my talk. But I’m not going to be complacent about it: a few years ago at An Event Apart in Boston I gave a less technical talk than usual and it seemed like people really liked it (positive tweets, kind words, etc.) …but then when the feedback surveys were totted up, I ended up getting the lowest rank I had ever received. So time will tell what the audience really thought of my talk today.

In any case, I enjoyed it. As usual, I just got up on stage and geeked out for an hour to a captive audience about stuff that really excites me. How cool is that?

I was glad to have the talk done. Afterwards I could relax and enjoy all the other talks, and have a bit of a chat with some of the smart and friendly attendees.

Now that the conference is over, it’s time for me to depart Alexandria. Next stop: Philadelphia.

August in America, day three

It was a beautiful day today but I spent most of it indoors. Today was the first day of An Event Apart DC here in Alexandria. As usual, the standard of talks was ludicrously high.

An Event Apart often feels like getting a snapshot of the current state of web technologies and best practices. I really like it when themes emerge from multiple talks—those emergent themes are usually the hot topics of modern web design and development. Today I felt like there were two prominent themes:

  1. process and
  2. devices.

Both Samantha and Jason talked about process and workflow from different perspectives. I had seen Jason’s talk at New Adventures in Nottingham but he’s such a joy to listen to, I gladly soaked it up again. Listening to Samantha reinforced my opinion that she’s one of the smartest designers working today. I found myself nodding my head enthusiastically during both talks.

Luke and Grigs both showed us what an amazingly diverse set of devices we have to deal with these days. I know that some people find this situation depressing, but I find it quite energising. Let’s face it, the web was getting pretty boring there for a while a few years back. You certainly can’t say that about the current browser/device landscape.

Rounded out with Jeffrey and Karen’s content-focused calls-to-arms—one at the start of the day and the other at the end—it was a great day one.

I’m speaking first thing tomorrow. That’s right; I’ve got the hangover slot.

This is a brand new untested talk. I had planned to give a run-through to the guys at Clearleft but somehow that never happened, so tomorrow will literally be the very first time I’m giving this talk. That gives it a certain frisson and adds an air of excitement and tension. It also means I’m very, very nervous.

I think it’s a good talk …but I’m not sure how it’s going to go down with this crowd. While it will have some practical tips scattered throughout, it’s mostly going to be a fairly personal talk about a personal project that I’m using as a lens to look at long-term web design and development. That might put some people off, who would rightly argue that it isn’t directly applicable to their day-to-day work, but I’m just going to have to accept that. It’s going to be interesting to see what people make of it.

I’m excited and nervous. I probably won’t get much sleep tonight.

An Event Alarm

I’m at An Event Apart. Somewhere. It’s in a room in a hotel. The room is smaller than the usual ballroom-sized venue, but I know it’s An Event Apart because Luke Wroblewski is giving a talk. I think it’s a talk about how he led a group of people who were trapped in the desert to safety. Somehow he saved them with data.

I’m speaking next. But there’s a pressure on my bladder that I need to relieve. I’ve got another ten or fifteen minutes ‘till my talk so I reckon I have enough time. I go out into the corridor in search of a toilet. I find one and do what I need to do.

But when I go back out into the corridor, I can’t immediately find the room that the conference is in. That’s okay, I think. I’ve still got time. But as I wander the corridor more and more, I start to panic. I’m supposed to be on in five minutes! Now the hotel building seems to be cavernous, like one of those Las Vegas hotel-casino hybrids that contain a labyrinthine mini-city. I’m supposed to be on stage now! Up escalators, down stairs …I can’t find the room. I’m really panicking now. I was supposed to be on stage five ago …Jeffrey’s going to kill me. I grab someone who looks like a hotel employee and beg him to help me: I was supposed to be on stage ten minutes ago! But he can’t help me. I’m really freaking out.

Then I woke up. I don’t think if I’ve ever had the classic “final exam” dream, but I think this is the closest equivalent.

An Event Apart DC is ten days away. I’m giving a new talk. I thought I was prepared for it. My subconscious begs to differ.

Designing for Touch by Josh Clark

Josh the Touchmaster is here at An Event Apart Atlanta to tell us about Designing for Touch.

Science! Science and web design. As Scott said, a lot of what we’re doing now is checking the nuances of things we’ve been doing all along. We’re testing our assumptions.

We had web standards. Then we had responsive design. Now there’s a new revelation: there is no one true input for the web.

There are lots of new input mechanisms coming down the pipe, but right now the biggest new one is touch. This talk is about designing for touch.

As of last month, 31% of US adults have tablets. A few years ago, it was zero. The iPad is the fastest-growing consumer product in the history of consumer products. But touch isn’t just for mobile phones and tablets. Touch is on the desktop now too. All desktop web designs have to be touch-friendly now.

The ugly truth is that we’ve thought of web design as primarily a visual design medium. But when you add touch into the mix, it gets physical. It’s no longer just about how your pixels look; it’s about how they feel too. You are not “just” a visual designer now. There are portions of industrial design in what you do: honest-to-goodness ergonomics. In a sense, you’re designing a physical device, because it will be explored by hands. Phones and tablets are blank slates. We provide the interface. How will it feel in the user’s hands? More specifically, how will it feel in one hand?


Thumbs are fantastic. The thumb, along with celebrity gossip, is what separates us from the beasts. There’s a natural thumb-resting area on the iPhone (coming from the bottom left to the centre). That’s why positioning conventions have evolved they way have on iOS—very differently to the desktop: navigation at the bottom instead of the top.

There’s an age-old principle in industrial design: content at the top; controls at the bottom. Now we see that in iOS. But in Android there are assistive buttons at the bottom (just as the industrial design maxim suggests). But now if you put your controls at the bottom too, you’ve got too much going on. So on Android you should be putting your controls at the top. But the drawback is that this is no longer in the thumb-sweeping area.

That’s iOS and Android. What about the web?

There are problems with pinning navigation to either the top or bottom. First of all, position: fixed is really screwy on mobile browsers. Secondly, in landscape (or other limited-height environments), the controls take up far too much room compared to the content. The third problem is also related to space: browser chrome.

Instead, a better pattern is to have a menu control that reveals navigation. The simplest version is when this is simply an internal link to navigation at the bottom of the page. As Luke says, forget HTML5: this is HTML1. Best of all, this pattern leads with the content and follows it with the navigation.

So that’s where things stand with touch navigation on phones:

  • iOS: Controls at screen bottom.
  • Android: Controls at screen top.
  • Web: Controls at page bottom.


What about tablets? This is more likely to be a two-handed grip. Now having controls at the bottom would be really hostile to touch. The phone thumb-zone no longer applies, but thumbs still matter because they could be obscuring controls. Your thumbs are more likely to be on the sides, with easy reach to the top. So put controls in those regions where thumbs can come to rest: the side.

There are some cases where bottom navigation is okay: in an ebook where you’re showing a complicated control …or a map with a draggable interface below it. When you need a control to do browsing or preview for the content above it, the bottom is okay.


The unholy alliance: a laptop with a keyboard combined with a touch-enabled screen. There are lots of them coming down the line.

Mouse and trackpad usage drops off a lot on hybrid devices. There was always the fear of “gorilla arms” with hybrid devices but it turns out that people are gripping the sides of the screen (like a tablet) but when people are jabbing the screen, it’s more like a phone. If you overlay the thumb comfort zone of a hybrid laptop with the thumb comfort zone of a tablet, there’s one area that’s left out: the top …exactly where we put our navigation on laptop/desktop screens.

This is a headache for responsive design. We’ve been correlating small screens with touch. It turns out that screen size is a lousy way to detect a touchscreen. And it’s hard to detect support for touch. So, for now, we’re really just guessing.

But we have top men working on the problem. Top. Men. There’s a proposal in CSS4 for a pointer property. But even then, what will a hybrid device report if it supports trackpad, keyboard, mouse and touch?


All desktop designs have to be touch-friendly. This is going to require a big change in our thinking. For a start, it’s time to bid farewell to hover events, certainly for crucial content …maybe it can be used for enhancements.

Given the thumb zones on tablets and hybrids, we can start putting frequent controls down the side—controls that stay in view even when the content is scrolled. Just to be clear: don’t put your main navigation there—put the controls that people actually use. Sorry, but people don’t actually use your main navigation. People use main navigation only as a last resort.

Quartz uses a very thumb-friendly layout. But how big should the touch targets be? It turns out …seven millimeters; the tip of a finger. Use nine millimeters if you really need to be safe.

I don’t know about you, but I’m not using millimeter as a unit in my CSS. But standards can help here. A pixel is defined in CSS2.1 to have a set millimeter size. But that doesn’t factor in the reality of dynamic viewports: zooming, pinching, scaling. Devices still report they’re actual physical size; the hardware pixels, that have nothing to do with the calculated web pixels.

On the iPhone we arrive at this magical 44 pixel number, which is repeated over and over throughout the UI. As long as one dimension is 44 pixels, you can squeeze the other dimension down to 29 pixels: 44x29 or 29x44. On iOS, that unit is repeated for a rhythm that just feels right: 44, 88, etc. The interface is designed not just for the hand, but of the hand. Use that rhythm, even on desktop screens.

That’s lovely and elegant. Digital watches are not. Touch targets need to be a certain size.

Now these optimisations mean there’s inevitably some constraint. But that can be a good thing: you might have to reduce what’s on your screen, and that means that your interface will be more focused. Clarity trumps density.

But simplicity isn’t always a good thing. Complexity has become a dirty word, but sometimes it’s needed. People don’t want a dumbed-down interface that won’t let them do everything.

And when you don’t have space constraints, that doesn’t mean you should fill up the space with crap. Aim for clarity, no matter what the size of the screen. On a smaller screen, that can be a more conversational, back-and-forth interaction, requesting and revealing information; question, answer; ask, receive. This progressive disclosure requires more taps, but that’s okay. Extra taps and clicks aren’t evil. When done right, they can actually be better because they provide clarity and invite conversation. As long as every tap is a quality tap that provides information, and helps complete a task, they are not evil.

But the long scroll …that is evil. That’s how kittens get killed.

Luke has documented the off-canvas pattern as a way of pushing some information off-screen. It’s kind of like a carousel. So instead of everything being stacked vertically, there can be sections that are navigated horizontally. That’s what Josh and Ethan did on the site for People magazine on small screens.

So for desktop interfaces, these are the points to remember:

  • Hover is an enhancement
  • Bottom left for controls.
  • Big touch targets.
  • 44px rhythm.
  • Progressive disclosure.

But even though Josh has been talking all about the touch interface, it’s worth remembering that sometimes the best interface is no interface at all. And we need to stop thinking about input mechanisms as singular things: they can be combined. Think about speech + gesture: it’s literally like magic (think: Harry Potter casting a spell). Aral’s hackday project—where he throws content from the phone to the Kinect—gets a round of applause. Now we’ve got Leap Motion on its way. These things are getting more affordable and available. So we could be bypassing touch completely. We can move the interface off the screen entirely. How can we start replacing clumsy touch with the combination of all these sensors?

Digital is growing more physical. Physical is growing more digital. Our job is becoming less about pixels on screens and more about interacting with the world. We have to be willing to challenge established patterns. We have to think. We have to use our brains.

Responsive and Responsible by Scott Jehl

Scott is here at An Event Apart in Atlanta to talk to us about being responsibly responsive. Scott works with Filament Group on large-scale responsive designs like the Boston Globe. They’ve always focused on progressive enhancement and responsive design feels like a natural evolution of that.

But responsive design is just a small part of what goes into responsible design. Responsible design isn’t just about layout, it’s about making sure that adding advanced features doesn’t inconvenience anyone. Mostly, we need to care; we need to care about people in situations other than our own.

This became very clear to Scott when he was travelling in southeast Asia, working remotely with his colleagues back in Boston. Most of the time he was accessing the web through a USB dongle over a cellular network. That’s how most people get online there. So don’t make assumptions about screen size and bandwidth.

Browsing via this dongle was frustrating. It was frustrating for Scott because, as a developer, he knew that there was no reason for the web to be so difficult to use on this connection.

It’s our fault. The average web page is over a megabyte in size. A megabyte! That breaks down to a lot of images, plenty of JavaScript, some HTML, and “other” …which means cat pictures. Sending 800K of images is a lot for any kind of device. Same with JavaScript: 200K is a lot. The benefits that we as developers get from that JavaScript is burdening our users.

When you prototype interactions, are you thinking about your own clock …or the user’s?

The average load time for the top 200 websites is between 6 and 10 seconds on a good connection.

Good performance is good design. Scott shows a graph of “webpage loading time” on one axis against “swear words” on the other. The graph trends upwards.

Now those 1MB webpages were probably desktop-specific sites, not responsive sites. But 86% of responsive sites send the same assets to all devices.

We have to design for new sizes and new input methods, but at the same time, the old contexts aren’t going away.

We’re moving from normalisation to customisation. We used to try to make things look and work the same in every browser. It was always a silly goal, but now it seems totally ridiculous. But content parity does not require experience parity. In fact, if things look and act the same across all devices, that might mean that we’ve missed a lot of opportunities.

We should avoid presumptions. We might be able to get the dimensions of a screen, but that could be different to the dimensions of the viewport. Instead of using pixels for breakpoints, we can use ems so that the user’s font size determines the layout changes.

Before we look at some responsible techniques, let’s look at the anatomy of a page load.


We begin with typing a URL. That request goes to a DNS server. Then the request is sent to the right host. Then the host sends a response. But on a mobile device, there’s an extra step. You have to go through a tower first, before reaching the DNS server. That connection to the tower takes two seconds (for radio). That two-second delay only happens once, thankfully.

Once the connection is made, the HTML response sends more requests: CSS, JavaScript, pictures of cats. During this time, the browser holds off on rendering. This is the critical path.

After about eight seconds, the carrier drops the connection. That two-second connection needs to be made again. So we should try to get everything during that initial eight second period.


Network conditions can change. Every HTTP request is a gamble. Say you’ve embedded a third-party widget, like Twitter’s. If you’re in a country like China that blocks Twitter, the page will never load. Chrome will hang for thirty seconds.

We need to ensure that we’re delivering assets responsibly. Consider using conditional loading. On the Boston Globe, the home page has a lot of content. The headlines certainly belong there. But content from individual sections (that you can get to from the top navigation) is also being pulled into the homepage. We definitely want to provide the link to, for example, the sports section, but the latest content from the sports section could be conditionally loaded.

Scott mentions my 24 Ways article on conditional loading for responsive designs. At Filament Group, they abstracted this “link/conditional load” into a pattern. It uses HTML5 data attributes to indicate what should be pulled in via Ajax and where it should go.


Let’s look at how we deliver CSS. The way that we load CSS today is going to catch up with us. According to the HTTP Archive, the transfer size of CSS has the highest correlation to render time.

As a start, we should be using mobile-first media queries. That means starting with the styles for absolutely every device. Then we start adding our media queries for wider and wider viewport widths. This gives you a broadly-usable default. Those initial styles should go to everyone, but Scott likes to qualify them with an only all media query for some enhanced small-screen layout declarations. That makes sure that really old browsers won’t mess it up.

Generally mobile-first media queries work pretty well. But there’s a problem. We’re sending all the CSS to all the devices, even if they’ll never use half of it.

Would it be better to use multiple link elements with different media types? Alas, no. Browsers will download all stylesheets (even if the media type is set to “nonsense”) just in case they’ll need ‘em later. And unfortunately those requests are blocking. Modern WebKit browsers do a bit better. It still downloads all the stylesheets but it will render once it has the small-screen CSS.

The best approach is, unfortunately, to send just one CSS file but minify, compress, gzip and cache the shit out of it. CSS compresses really well. Gzip works by spotting redundant data—as soon as it notices a repeating segment, you get a gain. And CSS is full of repeated properties and declarations.


Images are an interesting problem. Remember they were the worst offenders in page bloat. Fortunately they don’t block, but still—this problem will only get worse.

There are background images. They’re easy. Browsers have gotten very smart about only downloading the background images they need.

Foreground images aren’t so easy. There’s the compressive image technique that Luke mentioned. Make the JPEG bigger in size, but lower in quality. When it’s scaled down in the browser, it looks perfectly fine. A 1x image saved at 90% quality, it’s 95K. The same image at 2x with 0% quality is 44K.

But there’s a concern about the memory footprint of doing this on some devices. Filament Group are looking into this but it’s very hard to test.

With compressive images, you just have to point to them in one img element using the src attribute.

Responsive images are much trickier. There are two proposals.

The first is the picture element, which uses multiple source elements to specify different images for different breakpoints. There’s also a fallback image as a last resort for older browsers.

The second proposal is the srcset attribute. It’s particularly well-suited to different pixel densities. The advantage of this one is that the browser, rather than the author, gets the last say about which image should be displayed. There’s also talk about merging both proposals.

Neither proposal works today so Scott created Picturefill, a polyfill for the picture proposal, although it uses divs. The fallback image goes in a noscript element to prevent browsers from pre-fetching it.

Since picture and Picturefill work with media queries, perhaps you can default to standard definition but allow users to opt in to high definition versions.

Managing different images for different resolutions and pixel densities gets very tedious. Maybe we should abandon the pixel. Certainly for icons, SVG can be really useful. It’s well-supported today. It also compresses well, because it is text: it’s a markup language, like HTML. That means you can also edit the source of an SVG image in a text editor.

You can reference the SVG file directly in the src attribute of an img element. For older browsers, you could use onerror to replace it with a different image format.

You can also put SVG as a background image. And you use them as data-URLs and just write out the SVG in your stylesheet.

Building on that, there’s a tool called Grunticon that generates and regenerates CSS whenever you make changes to an image. It also generates a preview document for you.


Lastly, there’s JavaScript. The trick is to stay off the critical path. Load just as much as you need up front, so you can load more later on.

Scott uses a handful of variables to determine what needs to be loaded or not:

  1. Broad qualification. Does the browser support “only all”? Scott uses YepNope to test and if the test comes back positive, he loads in his global JavaScript.
  2. Browser features. Are touch events supported? Again, Scott uses YepNope to test before loading JavaScript that uses touch.
  3. Environmental conditions. Media queries, basically.
  4. Template type. Define in your markup what kind of page this is (using a meta element e.g. “shoppingcart”. Then test whether we need shoppingcart.js.

You can even load CSS with YepNope but be careful. You could use it for fonts, for example, after you’ve tested that @font-face is supported.

Dealing with third-party content is tricky—it’s blocking. The Twitter embed code for tweets now includes an async attribute. It’s pretty well supported in modern browsers.

On the Boston Globe, they had to deal with ads. Nightmare! They used iframes.

But the main idea here is: defend the critical path. Develop responsively and responsibly. Today we have the tools to build rich experiences without excluding anyone.

It’s a Write/Read Mobile Web by Luke Wroblewski

Luke is at An Event Apart in Atlanta to give his presentation: It’s a Write/Read Mobile Web. He begins by showing us where he lives in Los Gatos in Silicon Valley. Facebook is up the road in Palo Alto. Yahoo is down the road in Sunnyvale, next to a landfill. In between, there’s a little company called AOL. Then there’s Google and YouTube just off Highway One.

So you have a bunch of internet companies in close physical proximity. They are also the top sites in the US when it comes to time spent on the web, by a very wide margin. You would think that the similarities would end there, because they all provide very different services: social networking, email, messaging, search, and video. But they have something in common. They are all write/read experience. They don’t work unless people contribute content to them. You post updates, you send emails, you type in searches, you upload videos.

Tim Berners-Lee said that his original vision for the web was a place where we could all meet and read and write.

This isn’t just a US-centric thing. Looking at the worldwide list of most popular sites, you’ve got the ones mentioned already but also Twitter and Wikipedia, where all the content is contributed by their users. Even Amazon is powered by reviews. This is what makes the web so awesome. It’s not a broadcast medium. It’s a two-way street. It’s interactive.

So what’s the biggest factor that’s changing for all of these sites? Mobile. 67% of Facebook users and 60% of Twitter users are on mobile. If you look at the stats for Facebook, you can see that their growth is coming from mobile. Desktop usage is pretty flat: mobile usage is soaring. Facebook also has a growing segment of mobile-only users. Zuck has defined Facebook now as a mobile company.

When people hear about the growth in mobile, they assume it’s all about content consumption: reading status updates, watching videos, and so on. There’s a myth that small devices are not good for content creation. But if that were true, then wouldn’t that be a huge problem, given the statistics for growth? Facebook and Twitter would have almost no content. But it’s simply not true. Three hours worth of video are uploaded to YouTube every second from mobile devices.

People think that mobile devices are for games, social networking, and entertainment. And it’s true that those are popular activities. But that kind of usage is actually going down. Where is that time going? The fastest growing category is utilities: finding and buying things, financial management, health services, travel planning, etc. Basically, mobile is anything. So if mobile hasn’t effected you yet, it will.

How do we think about this write/read experience? We imagine that 100% of people are consumers: reading, browsing, etc. Then 10% are curators: liking, faving, etc. Finally there’s the 1% that actually create stuff. 1.8% of users provide almost all of Wikipedia’s content. So we naturally focus on the content consumption in our designs, because that’s the biggest number. But Luke thinks it makes sense to flip that on its head. That 1% are your most important users.

Facebook redesigned their content creation flow multiple times, trying to make that “write” experience as good as possible. Same with YouTube’s uploading interface. They both focused relentlessly on the content creation.

So as we shift our attention to mobile, we should be asking: how do we design for mobile creation?

1. One-handed use

Like Luke’s old adage about “one thumb, one eyeball”, this is literally about testing content creation with one thumb. For his startup, Polar, Luke tested the interface with one thumb and timed how long it took. It was tested and designed for a thumb.

“But Luke”, you cry, “Not everyone just uses their thumb on their mobile device screens!” Well, observing 1,333 people using mobiles on the street showed that they pretty much do.

Dan Formosa says we should design for extremes. In Objectified he talked about designing garden shears for someone with arthritis. If it works for that user, it will work well for everyone.

“But Luke”, you cry, “Aren’t you falling prey to the myth of the ‘mobile context’ where the user is in a hurry, using just one hand?” Well, it is true that lots of people use their devices in the home. But even when you’re not out on the street, you’re still using your thumb: using your phone while watching TV.

Focusing on this use case means you can rethink a lot of interactions. As a general principle, Luke advises “don’t let the keyboard come up.” That is, only provide a virtual keyboard as a last resort. Use smart defaults. Let people tap on links or checkboxes instead of typing. If the user needs to enter a location, they could do so by tapping on a map instead of typing in a place name. Provide a date-picker instead of making people type out dates. Let people use sliders for setting values.

When you design for one-handed use, you’re designing for an extreme case. It also forces you to challenge your assumptions.

2. Visually engaging

When you aim to avoid the keyboard, you often come up with more visual solutions, which can be a great opportunity.

Take Snapchat. People express themselves through photos. The Line app is chat, but with a huge amount of emoticons. Chat becomes visual.

The lesson here is not that society is collapsing into sexting, but that images are very powerful on mobile.

Hotel Tonight’s mobile experience is based around big beautiful images.

“But Luke”, you cry “Why are you advocating big images? Isn’t performance the most important thing on mobile?” Well, yes. But instead of just abandoning images, let’s get really creative about how we serve up images. Take, for example, the experimentation around increasing image dimensions while reducing quality, which results in much smaller files with no noticable loss of fidelity.

3. Focused flows

Dwelling on one-handed use and visually engaging imagery are techniques you can use, but you should really focus on simplifying the processes you put people through. Foursquare have drastically simplified their check-in process.

Creativity is all about focusing on something until you find the simplest way to do it.

The Boingo wireless service used to require 23 inputs. They got rid of 11 of them and increased conversion by 34%. That’s great, but they didn’t go far enough. You can always simplify even more.

Hotel Tonight got their flow down to three taps and a swipe. The CEO says that’s a competitive advantage. Just compare how long it takes to book a hotel with their competitors.

It takes big changes to go small.

When taking about forms and input, this might seem like standard design advice: focus and simplify. But keep focusing and simplifying even more.

4. Just-in-time actions

So we’ve seen three different ways to make things simpler, faster, and more focused. But isn’t that really hard on a small screen, with so little real estate?

Instead of providing intro tours (which are more like intro tests), why not provide introductory information only when it’s needed? Apply the same approach to actions. On Polar, there’s an option to hide the keyboard, but that action is only visible when the keyboard appears.

On long pages on Polar, people wanted a way to get back to the top. If you start scrolling upwards, the navbar from the top is overlaid. It detects that you might be trying to get back to the top, and provides the actions you want.

5. Cross-device usage

Everything Luke has talked about so far has been specifically focused on one kind of device: mobile. But we need to keep our eyes on the multi-device write/read web that is emerging. Creation is happening across devices …sequentially and simultaneously.

The simplest example is access. If you’re on a desktop browsing Luke’s site on Chrome, and then you move to Chrome on the iPhone, there’s Luke’s site.

The next cross-device pattern is flow. We want our processes to work across devices. So if I’m on my laptop and I do a search, then I pick up my phone, I want that last input to carry over. On Ebay, you can save a draft listing on the desktop and pick it up later on mobile. On Google Drive, editing is synced simultaneously between all your devices.

Control is another pattern: using one device to tell another device what to do.

Luke hates log-in forms; that’s no secret. Five years ago, he worked on Yahoo Projector which used a scanned barcode to take control of a TV screen with a phone. He wanted to use this to replace log in, but that never happened. But there’s a service called OneID which is tackling the same use case: you can control log-in across devices.

The last example of cross-device usage is push. Going back to that draft listing on Ebay: take a picture on your phone and have that picture show up on the desktop browser view.

People talk about mobile versus desktop, but these are all examples of these different devices working together.

This was just a taster. We’re just getting started with this stuff.

Billboards and Novels by Jon Tan

Jon is at An Event Apart in Atlanta to talk about Billboards and Novels. That means: impact vs. immersion.

Who in the audience has ever had to explain layout and design decisions? And who has struggled to do that? Jon has. That’s why he wants to talk about the differences between designing for impact—to grab attention—and immersion—to get out of the way and allow for absorbing involvement.

Jon examines the difference between interruption and disruption. You want to grab attention, but the tone has to be right. This is how good advertising works. So sometimes impact is a good thing, but not if you’re trying to read.

The web is reading.

Understanding how people read is a core skill for anyone designing and developing for the web. First, you must understand language. There’s a great book by Robert Bringhurst called What Is Reading For?, the summation of a symposium. Paraphrasing Eric Gill, he says that words are neither things, nor pictures of things; they are gestures.

Words as gestures …there are #vss (very short stories) on Twitter that manage to create entire backstories in your mind using the gestures of words.

A study has shown that aesthetics does not affect perceived usability, but it does have an effect on post-use perceived aesthetics. Even though a “designed” and “undesigned” thing might work equally well, our memory the the designed thing is more positive.

Good typography and poor typography appear to have no affect on reading comprehension. This was tested with a New Yorker article that was typeset well, and the same article typeset badly. The people who had the nicely typeset article underestimated how long it had taken them to read it. Objectively it had taken just as long as reading the poorly-typeset version, but because it was more pleasing, it put them in a good mood.

Good typography induces a good mood. And if you are in a good mood, you perform tasks better …and you will think that the tasks took less time. Time flies when you’re having fun.

What about type on screens?

  • David Berlow describes the web as “crude media.”
  • Jonathan Hoefler describes how he produces fonts differently for different media: the idea (behind the typeface) gives rise to a variety of forms.
  • Matthew Carter designed Bell Centennial to work at one size in one environment: the crappy paper of the telephone book. He left gaps in the letterforms for the ink to spread into.
  • The Siri typeface was redrawn anew as SiriCore specifically for the screen.

When Jon is evaluating typefaces, he is aware that some fonts are more optimised for the screen than others. He tests the smallest text first, in the most adverse environment: a really old HP machine running Windows XP. He also looks at language support, and features and variants like lining numerals: what are the mechanics of the font?

We take quiet delight in the smallest details of a typeface.

Legibility is so important. Kevin Larson analysed how we read. We take a snapshot of a bunch of letters, and our brains rearrange them into a word. We read by skipping along lines in “saccades” with pauses or “fixations” that allow us to understand a group of letters before reading on.

Jon tells the story of how Seb was fooled by a spoof Twitter account for the London Olympics. The account name was London20l2 (with a letter L), not London2012 (with the letter one). Depending on the typeface, that difference can be very hard to spot. Here’s a handy string:

agh! iIl1 o0

Stick that into Fontdeck and you’ll get a good idea of the mechanics of the font you’re looking at. You’re looking out for ambiguities that would interrupt the reader.

The same goes for typesetting: use the right quotes and apostrophes; not primes. Use ligatures when they help. But some ligatures are just showing off and they interrupt your reading. Typesetting should help reading, not interrupt or disrupt.

You can use text-rendering: optimizeLegibility but test it. You can use hyphens: auto but test it. You can add a non-breaking space before the last two words in a paragraph to prevent orphans. It will improve the mood.

A good example of interruption is the Ampersand 2012 website. There’s a span on the letter that should receive a flourish. But you can also use expert subsets. You can use Opentype features. There are common and discretionary ligatures. Implement them wisely. Use discretionary ligatures when you want to draw attention, like in a headline.

Scantastic readability. We wander around the page or screen in the same way as we read with saccades: our eyes jump around the place. Our scan path is a roughly Z-shaped pattern. You can design for this scan path: deliberately interrupt …but not disrupt. Jon uses the squint test when he is designing, to see what jumps out and interrupts.

Measure (line-length) is really important. Long lines tire us out. Bringhurst mentioned 45-75 character measures. But the measure is also bound to the prose: the content might be very short and snappy.

Contrast can give you careful, deliberate interruptions. Position, density, size …these are all tools we can use to interrupt without disrupting. The I Love Typography article on The Origins of ABC is a beautiful example of this. Compare it to the disruption of faddish parallax sites.

But there are no rules, just good decisions.

It’s all so emotional. Sometimes there are no words. Think of the masterful storytelling of the first twenty minutes of Wall-E.

We react incredibly quickly to faces. We can see and recognise a human face in 40 milliseconds, before we even consciously process that we’ve seen a face.

When we try to write about music, the result can be some really purple prose.

We have an emotional reaction to faces, colour, music …and type.

Jon demonstrates the effect on us that a friendly typeface has compared to a harsh typeface …even though the friendly typeface is used for the Malay word for “hate” and the harsh typeface is used for the Malay word for “love.” Our amygdala is reacting directly. It’s a physiological, visceral reaction we have before we even understand what we’re looking at.

Fonts are wayfinding apps for emotions. There’s a difference between designing places and designing postcards of places.

The Milwaukee Police News website is very impactful …but there’s no immersion. It doesn’t communicate beyond the initial reaction.

Places are defined by type and form: New York, London, Paris. A website for Barcelona or Brooklyn should reflect the flavour of those places.

All these things combine: impact, immersion, contrast, colour, type. We can affect people’s experiences. We can put them in a better mood.

Type shapes our experience. It paints pictures that echo in our memory long after we’ve left.

Eric Spiekermann said:

Details in typefaces are not to be seen, but felt.

Those details have to work in the greater context (of colour, contrast, layout).

Bruce Lee said:

Don’t think; feel.

Strong Layout Systems by Eric Meyer

Eric is at An Event Apart in Atlanta talking about Strong Layout Systems. Following on from Brother Jeffrey’s presentation, he begins with a reading…

In the beginning Sir Tim created the server and the browser. And the web was without form. And the face of Tim moved over the web. Tim said “Let there be markup.” And there was markup. And he saw that it was good. And he divided structure from appearance.

That decision is quite striking. Think about other mediums. The structure of a book is bound to its appearance.

Here’s a screenshot, courtesy of Grant Hutchinson, of the preferences in the original Mosaic browser. You could define the appearance of any HTML element …as a user. As an author, you couldn’t do that. HTML didn’t support that: it created structure.

As with all creations, there was a fall. As usual, a reptile was involved. In this case it was Mozilla, known by its ancient name of Netscape. They added presentational elements like prompt and presentational attributes e.g. on the hr element. And then there was the table element. Inevitably, it was used for layout. David Siegel wrote the book on this, Creating Killer Websites. It was tables all the way down: tables inside of tables inside of tables, all to create visual appearance.

The backlash came from the Web Standards Project. It got dogmatic there for a while. But we got past that, and we started using CSS. The promise of CSS was visual presentation, for authors and users. We talk about “controlling” presentation with CSS, but remember that theoretically that can be over-ridden by user styles.

But CSS was an appearance system; not a layout system. It wasn’t that complex. You could print out all of CSS1. The only thing in it in any way suited for layout was floats …and that’s not what they were created for: it was basically the CSS equivalent of the align attribute that Netscape had introduced to HTML. So we used floats because that’s all we had. It wasn’t a layout system but we made it one anyway. There were a lot of bugs, but we dealt them in clever—sometimes deranged—ways.

For CSS2, they realised that designers really liked to lay things out (who knew?) so they introduced positioning. But you have to be careful with positioning. It was great …sort of. You can indeed position an element wherever you want …and overlap them.

The first major site to launch with CSS for positioning was Doug’s redesign of Wired.com (it didn’t use floats). The limitations of positioning forced us into certain design patterns. Note the footer on the old Wired site: it sits at the bottom of the central column, not the whole page. That was to avoid overlap. But Eric remembers talking to Doug and it turns out they actually wanted a full-width footer, but they had to work with the tools they had. Positioning lacked the equivalent of clear that you get with floats.

These were hacks. Hacks aren’t a bad thing; they’re often very clever. But hacks limit us. Neither floats nor positioning had the concept of equal height (but tables did).

We’re now getting to the point where can start to revisit our assumptions about what is and isn’t possible with CSS.

We’ve got viewport units: vh and vw—viewport height and viewport width (in percentages relative to the viewport, not the parent element). This is really useful for handheld devices. There’s also the vmin unit that you can use on font sizes so that text scales in relation to viewport size.

Flexible boxes is more commonly called flexbox. Take a horizontal navigation (in an unordered list) and declare it as a flexible box. Then declare that the elements within should “flex” to each use an equal amount of space. There’s a variant justify-content: space-around which will share out the space between the elements equally.

Flexbox comes out of XUL, Gecko’s layout language for browser chrome. This is real layout. It’s not a hack. As an author, you’re declaring how you want things to be laid out, and the browser does it. It’s a good feeling.

You can also use flexbox to make sure that elements within a shared parent have the same height. In fact, that’s the default behaviour. You can also get your flexible boxes to reflow instead of being trapped on the same line. The new “line” will also share out space for the elements equally.

You can set your flexible boxes with whatever units you want, and mix and match them: percentages and ems, for example. You can have flexible and fixed elements together.

Remember The Holy Grail of Layout on A List Apart? It followed soon after the One True Layout. Now you could do it with just a few quick flexbox declarations.


main { display: flex; }
nav { width: 13em; flex: none; }
article { width: auto; flex: none; }
aside { width: 20%; flex: none; }

You can also rearrange the visual ordering (using order). You could make the article appear as the third column within main even though it appears second in the markup. The structure is truly separated from the layout.

Flexbox alignments are really interesting, especially baseline, which will vertically align columns according to the first baseline in each column — very handy.

You aren’t restricted to horizontal layout: you can arrange things vertically. We finally get vertical centring.

Beyond flexbox, we have grids. They’re not quite as stable right now, but the basic idea is that you can set up grid lines to “control” page elements and the space between them: grid-definition-columns: (4em) gives you a repeating grid with a grid unit of four ems.

You can have flexbox inside grids and visa-versa: within a grid unit, you can still display: flex. Within a flexible box, you can define grid lines.

But please don’t go and read the grids specification right now. It’s an amalgamation of three different authors’ texts, one of whom has never written a spec before, and one of the examples is completely misleading about how grids work.

There’s a fraction unit—fr—that you can use to define widths, but you can also use it in combination with min-content which is based on the longest piece of content in a unit. This is complicated stuff and even Eric doesn’t quite get it completely. Maybe min-content is better for non-text content.

And remember you can mix and match these modules. Same with CSS regions. Regions aren’t here yet, but they will completely up-end the way we think about document structure: you put all of your content in one element, and you have some empty elements as well. Then you use CSS regions to define how the content from the first element flows into the others. Effectively your document has a structural portion and a skeleton layout portion.

These layout modules are truly new. You might think that we’re familiar with using CSS for layout, but that was always hacking: using tools for a purpose other than that for which they were created. This new modules were created specifically to allow us to create layouts. That really is new. And Eric can’t wait to see what we do with these new tools.

10 Commandments of Web Design by Jeffrey Zeldman

I’m at An Event Apart in Atlanta, the first show of the year.

Jeffrey is opening the show with a talk called 10 Commandments of Web Design. He jokes that the W3C asked him to change it to 10 Recommendations of Web Design.

1. Thou Shalt Entertain

Have fun. We spend a lot of time thinking about accessibility, usability, performance, all that good stuff …but we sometimes forget about making it delightful and entertaining—the kind of thing that TV people have to think of all the time.

Take Panic Software, for example. Their logos—designed by Icon Factory—look beautiful, unlike your typical logo. Think about every website you’ve ever visited with a corporate philosophy or mission statement that nobody reads or is interested in …well, Panic’s personality is embodied in their design, their typeface choices, and their icons.

A List Apart uses Kevin Cornell’s illustrations to make technical-sounding articles into something more fun. It’s a lesson learned from the advertising world: the headline and the visual play together (and don’t forget: James Thurber wasn’t a good illustrator, but his work became immensely popular and is often emulated).

Jeffrey shows an example of a 404 page from Rdio, which doesn’t entertain. It just states the facts: page not found. Not very fun. Style-architects, on the other hand, refer to their missing page as a wardrobe malfunction. You don’t have to be Louis C.K., but try to be a bit witty. A Canadian political party’s 404 page states: “Ottawa’s broken. And so is this link. We’re working to fix both.” Nice. The New York Daily News website has a great illustration for its 404 page.

Gnu bars are fibre bars …that help you go to the bathroom. This could have been the worst website assignment ever, but they worked hard to get the joy of going to the bathroom in there. They have a Gnusletter (groan). On their serious medical pages, however, the tone isn’t so playful.

Flickr has its greeting in different languages. There’s no real point to this feature apart from providing some delight. A little touch, a little detail that didn’t need to be there, but it’s fun. But you probably wouldn’t want to do it on a military site about how to launch atomic weapons.

2. Test Everything (including assumptions)

“Who here has a test suite of devices?”, asks Jeffrey. You need one. Brad Frost has written a great post to get you started. There’s also technology like Remote Preview. Ryan Irelan wrote an article about putting together the Happy Cog device lab by getting a bunch of used equipment.

But let’s also test our assumptions. On the redesign of An Event Apart, there were some decisions that went against the accepted best practices. So they wrote about why they made those decisions, such as deciding to have empty alt text on photos in author bios because the author’s name (which would have been the alt text) is already in the headline. There were lots of comments, and many of them were really angry.

To get meta, Cennydd wrote a post about challenging the assumption that we should challenge our assumptions. Inception! Sort of. It was challenging the accepted wisdom that user-centred design is always the superior approach (compared to, for example, genius design). So, if Luke Wroblewski is putting a form together, given his years of experience, maybe he doesn’t need to test every little thing this time. Pushing user-centred design was important in the wild-west days of the web, but now we’re in a position to question it.

3. Thou Shalt Iterate

The website for A List Apart looks quite different from the original design ideas. Milton Glaser once said that the way he designs is by “moving stuff around on the page until it looks right.”

A List Apart used to have sharing links at the bottom of its articles. Logical, right? Who would want to share before reading the article? In the new design, those links are at the top of the page, and they got rid of the pretty buttons. You’d think they’d get less usage. In fact, they get much more usage: the Twitter link is just a simple link with pre-filled text. It turns out that users share and retweet before reading—they want to be the first to share. Jeffrey jokes that, as an experiment, he’d like to put something awful half-way through an article just to see if everyone would still share it (and I’m sitting next to Rey Bango who says, “That’s my fear!” “You share before reading?”, I ask him. He nods).

Amazon is constantly iterating, but in very small, subtle ways. And they test those changes.

4. Thou Shalt Ship

Good is the enemy of great …but great is the enemy of shipping. Sometimes we get so hung up on making something great, it gets in the way of shipping.

Jeffrey used to work at a company that had a perfectionist as a president, which is good in some ways, but they never shipped their product. Then the competition shipped. The company went out of business. They were so concerned about being great, they forgot to ship.

A friend of Jeffrey’s raises his rates when his clients don’t ship. The client questions, “Why does this now cost this much?” “Because you were supposed to have launched by now — and that’s preventing me from moving on to the next project.”

5. Engage Thy Community

Instagram did a poor job of relating their change of terms of service. This was actually pretty good for Flickr, who had just launched their great iPhone app.

Big companies buy small companies to get the cachet that the small companies have. “Isn’t that right?”, Jeffrey asks Rey. “Yes.”

Fonts.com are beginning to get more playful and engage with the type community. It’ll never be as cool as something like Dribbble (because fonts.com is a big company) but they can still push things forward.

The Happy Cog website has comments via Twitter (because, hey, who comments on blogs anymore?). A List Apart has embeddable comments: you can take a comment with you and embed it on your own website.

6. Love Thy User As Thyself

The first five commandments are really about this: knowing your user, and making sure they have a good experience, regardless of browser or device. Be responsive — not just in the technical definition of responsive web design, but in your mindset. Don’t make dumb assumptions just because someone is using a phone.

7. Remember The Content

Jeffrey brings up my blog post about Content First. And, of course, Mark has been writing about A Richer Canvas. Jeffrey took our words and wrote about them thusly: put the content first always. Instead of asking “Where should we put the sidebar?”, ask “Do we need a sidebar?”

Karen McGrane talks about content strategy for mobile and how it is literally becoming the law of the land: governments are mandating that content must be accessible on mobile. You don’t want to be the test case in a law suit.

8. Ignore Workflow At Thy Peril

Instagram nailed the workflow of sharing images. It starts uploading the picture in the background, even while you’re still futzing around with titles and descriptions. There are other things they don’t do particularly well, and it was more of a walled garden for a long time, but they prioritised the workflow of uploading images. Which leads us nicely to…

9. Thou Shalt Prioritize

Github allows you to label bugs and to-dos according to how important they are. That helps you nail the most important stuff without stopping you from shipping.

Kevin Hoffman wrote a great article about meetings, of all things. It’s all about coming to agreement on priorities.

10. To Thine Own Self Be True

Ah, the old Hay.net site: have hay, need hay. The site has since changed, but it’s still about hay. It didn’t “pivot.”

Smart talented people get promoted to being directors, but they might not be as good or as happy at that.

11. Think For Yourself

A bonus eleventh commandment. Don’t be a lemming.

From Chicago to Brighton

I was in the States last week for An Event Apart Chicago. I had a most excellent time. Partly, that’s because An Event Apart is always excellent, and partly because Chicago is such a great city.

I took pictures.

I did the Architecture Foundation’s river cruise (again), which I would highly recommend to anyone with the vaguest interest in either architecture or just cruising down rivers in boats.

Canyons of stone and glass Jessica

I also went to my the second bases-ball game of my life. The first one was at Fenway Park, so going to Wrigley Field feels like the logical next step—maybe I should work my way through all the bases-ball field diamond pitches in chronological order.

Chicago dog in Wrigley Field On the bleachers

To balance out such sportsness, I made sure to spend plenty of time in the Art Institute Of Chicago, taking full advantage of the Lichtenstein exhibition that’s currently running there.

Lichtenlips Lichtendog

I had the opportunity to meet some of the hard-working web geeks of Chicago. I had a look around the Obama campaign HQ, thanks to Daniel Ryan. I also got a tour of the whacky Tribune Tower, thanks to Chris Courtney, and I got to see first-hand how the web team at The Chicago Tribune are doing some very cool stuff with data.

On the Tribune roof Journalism is serious business

Now I’m back in Brighton, which is turning into geek central with the Brighton Digital Festival. It kicked off last night with Seb’s fantastic PixelPyros digital fireworks.

PixelPyros PixelPyros are go!

Reasons To Be Creative starts today. I’ll be popping in out to hear some of the talks, but things are getting pretty busy here at Clearleft Towers, what with this being dConstruct week.

Unsurprisingly, I’ve started having dConstruct dreams this week. I have to remind myself to actually enjoy myself and not spend the whole time stressing out. I think it should be fairly easy to enjoy myself, what with that kick-ass lineup.

That’ll be on Friday. Before that, there’s Brighton SF on Thursday. That’s going to be a lot of fun too, and a total geekfest with Jeff Noon, Lauren Beukes, and Brian Aldiss.

Grab a ticket if you haven’t already. See you there.