Friday, June 7th, 2019
Friday, January 18th, 2019
This is an excellent case study!
The technical details are there if you want them, but far more important is consideration that went into every interaction. Every technical decision has a well thought out justification.
Friday, November 23rd, 2018
Chris Ferdinandi has a good rule of thumb:
Makes sense, given their differing error-handling models:
‘Sfunny; I remember when we got pseudo-classes, I wrote a somewhat tongue-in-cheek post called
:hover Considered Harmful:
Presentation and behaviour… the twain have met, the waters are muddied, the issues are confused.
Monday, September 24th, 2018
Monday, April 23rd, 2018
Prompted by his recent talk at Smashing Conference, Mark explains why he’s all about the pace layers when it comes to design systems. It’s good stuff, and ties in nicely with my recent (pace layers obsessed) talk at An Event Apart.
Structure for pace. Move at the appropriate speed.
Tuesday, April 10th, 2018
This is such a great write-up of the workshop I did in Hong Kong!
Jeremy, it was a pleasure to work with you and you are always welcome here in Hong Kong!
If you fancy having this one-day workshop at your company, get in touch.
Tuesday, April 3rd, 2018
Here are Luke’s notes from the talk I just gave at An Event Apart in Seattle.
Friday, March 9th, 2018
A workshop on building for resilience
The workshop is called The Progressive Web: Building for Resilience. Here’s an excerpt form the blurb:
This workshop will show you to to think in a progressive way that works with the grain of the web. Together we’ll peel back the layers of the web and build upwards, creating experiences that work for everyone while making the best of cutting-edge browser technologies. From URL design to Progressive Web Apps, this journey will cover each stage of technological advancement.
Basically, it’s the workshop version of Resilient Web Design. If that book is the theory, this workshop is the practice.
Tim recently posted his tips for running workshops and there’s a lot in there that resonates with me. Like Tim, I’ve become less and less reliant on slides. In fact, this workshop—like my workshop on evaluating technology—has no slides. Instead it’s all about the exercises and going with the flow.
After starting with a warm-up, I canvas the room to see if there any specific topics, tools or technologies that people are particularly interested in covering. I’ll note those (on post-its slapped on the wall) for reference throughout the day, to try to make sure that those particular things are touched on at some point. Then I start with a thought experiment…
First of all, I get everyone to call out websites, services and apps that they use almost every day: Twitter, Facebook, Gmail, Slack, Google Docs, and so on. Those all get documented on the wall. Then it’s time to ask of each product, “What is the core functionality?” The idea here is to get beneath the surface-level verbs like swiping, tapping and dragging to get to the real purpose of a service: buying, selling, sharing, reading, writing, collaborating, and so on.
At this point I inform the attendees that the year is 1995. And now we’re going to build these services using the technology of this time. This is a playful way of getting answers to the question “What’s the simplest technology to enable the core functionality?” It’s mostly forms, links, and lots of heavy lifting on the server.
Next, we apply this layered mindset to a new service. I split the attendees into groups, and each of them gets a procedurally-generated startup idea …generated by shuffling some cards. This is an exercise I first tried when I was teaching in Porto:
I made five cards with types of sites on them: news, social network, shopping, travel, and learning. Another five cards had subjects: books, music, food, pets, and cars. And another five cards had audiences: students, parents, the elderly, commuters, and teachers. Everyone was dealt a random card from each deck, resulting in briefs like “a travel site about food for the elderly” or “a social network about music for commuters.”
The first few exercises are good creative fun: come up with a name, then a logo, then a business model. Then it’s time to build. It starts with URL design. Then it’s content prioritisation (for a representative URL). Then it’s layout (sketching!). The enhancements have begun. “How might this URL benefit from Ajax?” “How might this URL benefit from geolocation?” “How might this URL benefit from offline storage?” “How might this URL benefit from a service worker?”
At this point, we’ve applied the layered, progressive approach at the scale of an entire service, and at the scale of an individual URL. Finally, we apply the same approach at the level of a component. It might be a navigation, or a carousel, or an interactive widget. In each case, the same process applies: “What’s the core functionality? What’s the simplest technology to enable that functionality? Enhance!”
Along the way, there are plenty of rabbit holes we can go down. Whether it’s accessibility, or progressive web apps, or pattern libraries, I go along with whatever people are curious about. But all of it ties back to the progressive, layered mindset I’m hoping to foster.
By the end of the day, I’m hoping that an attendee has one of two reactions:
- “What a waste of time! Everything in that workshop was blindingly obvious!” (in which case, excellent!—they’re already thinking in a progressive way), or
- “That workshop has completely changed the way I think about building on the web!” (I’m being hyperbolic here, but at the very least I’m hoping to impart a new perspective).
Having given the workshop a few times, I’m really pleased with how it went (and more important, I’m pleased that people enjoyed it). If this sounds like something that your company or team would enjoy, get in touch and we can take it from there.
Friday, February 2nd, 2018
There’s a running joke at just about any gathering at Clearleft where we measure TTPL—Time To Pace Layers—a measurement of how long we can discuss anything before making an inevitable reference to Stewart Brand’s framing.
It’s one of those concepts that, once your brain has been exposed, you start seeing everywhere. Like bad kerning or sexism.
Thursday, November 9th, 2017
A pace layer model for readers (and writers).
Friday, May 12th, 2017
Ben points to a new product aiming to ease the pain of connected devices bumping up against the harsh realities of shearing layers:
By exposing the ‘hardwiring’ of our electrical systems, Conduct emphasises how much we rely on existing systems to power our ‘new’ technology – the rate of change and advancement in our traditional technologies moves at a much slower pace than our mobile app-based world and there are physical limitations as a result of this hardwired legacy.
I am—unsurprisingly—in favour of exposing the seams like this.
Thursday, April 20th, 2017
Ethan’s been thinking about the trends he’s noticed in the work he’s doing:
- prototypes over mockups,
- preserving patterns at scale, and
- thinking about a design’s layers.
On that last point…
The web’s evolution has never been charted along a straight line: it’s simultaneously getting slower and faster, with devices new and old coming online every day.
Thursday, February 12th, 2015
The engineering benefits of building websites with a layered approach.
Why, yes, I am talking about progressive enhancement yet again! Why do you ask?