It looks like it will be a great tool for prototyping. A tool to help developers that don’t have experience with CSS and layout to have a starting point. As someone who spent some time building smoke and mirrors prototypes for UX research, I welcome tools like this.
What concerns me is the assertion that this is production-grade code when it simply is not.
Friday, September 15th, 2023
Wednesday, August 9th, 2023
We do quite a bit of prototyping at Clearleft. There’s no better way to reduce risk than to get something in front of users as quickly as possible to test whether you’re on the right track or not.
It’s something to look at, something to prod. And ideally you’re trying to work out what works and what doesn’t.
Prototypical code isn’t production code. It’s quick and it’s often a little bit dirty and it’s not really fit for purpose in that final deliverable. But it’s also there to be inspiring and to gather a team and show that something is possible.
I can’t reiterate that enough: prototype code isn’t production code.
I’ve written about the two different mindsets before:
So these two kinds of work require very different attitudes. For production work, quality is key. For prototyping, making something quickly is what matters.
Addy recently wrote an excellent blog post on the topic of prototyping. The value of a prototype is in the insight it imparts, not the code.
It’s crucial to remember that in a prototype, the code serves merely as a medium—a way to facilitate understanding. It’s a means to an end, not the end itself. The code of a prototype is disposable and mutable. In contrast, the lessons learned from a prototype, the insights gained from user interaction and feedback, are far more durable and impactful.
It can be tempting to re-use code from a prototype. I get it. It seems like a waste to throw away code and build something from scratch. But trust me—and I speak from experience here—it will take more time to wrangle prototype code into something that’s production-ready.
The problem is that quality is often invisible. Think about semantics, performance, security, privacy, and accessibility. Those matter—for production code—but they’re under the surface. For someone who doesn’t understand the importance of those hidden qualities a prototype that looks like it works seems ready to ship. It’s understandable that they’d balk at the idea of just throwing that code away and writing new code. Sometimes the suspension of disbelief that a prototype is aiming for works too well.
As is so often the case, this isn’t a technical problem. It’s a communication issue.
Friday, July 7th, 2023
Wednesday, June 28th, 2023
A good looking artifact too early in the process gains buy-in too quickly and kills discovery.
Monday, June 19th, 2023
I’ve been banging the drum for a
button type="share" for a while now.
The Fullscreen API has the same restriction. You can’t make the browser go fullscreen unless you’re responding to user gesture, like a click. So why not have button type=”fullscreen” in HTML to encapsulate that? And again, the fallback in non-supporting browsers is predictable—it behaves like a regular button—so this is trivial to polyfill.
There’s another “smell” that points to some potential button types: what functionality do browsers provide in their interfaces?
Some browsers provide a print button. So how about
button type="print"? The functionality is currently doable with
button onclick="window.print()" so this would be a nicer, more declarative way of doing something that’s already possible.
It’s the same with back buttons, forward buttons, and refresh buttons. The functionality is available through a browser interface, and it’s also scriptable, so why not have a declarative equivalent?
How about bookmarking?
And remember, the browser interface isn’t always visible: progressive web apps that launch with minimal browser UI need to provide this functionality.
Šime Vidas was wondering about
button type="copy” for copying to clipboard. Again, it’s something that’s currently scriptable and requires a user gesture. It’s a little more complex than the other actions because there needs to be some way of providing the text to be copied, but it’s definitely a valid use case.
Monday, June 12th, 2023
Chat is rarely a suitable interface for most tasks. Here, Maggie Appleton explores and prototypes some alternatives.
Tuesday, April 25th, 2023
A short list of opinions on typography. I don’t necessarily agree with all of it, but it’s all fairly sensible advice.
Sunday, March 19th, 2023
Thursday, March 16th, 2023
This is handy—a collection of font stacks using system fonts. You can see which ones are currently installed on your machine too.
The most performant web font is no web font.
Thursday, March 9th, 2023
This is a terrific walkthrough from Andy showing how smart fundamentals in your CSS can give you a beautiful readable document without much work.
Saturday, January 28th, 2023
I feel like we need a name for this era, when CSS started getting real good.
I think this is what I’ve been calling declarative design.
Sunday, January 22nd, 2023
Tuesday, December 27th, 2022
For 24 days this month, Matthias featured a different independent type foundry, writing about each one and selecting some lovely examplars of their typefaces.
Tuesday, December 13th, 2022
Two new lovely open source variable fonts from Github.
Monday, November 28th, 2022
Designing a Utopian layout grid: Working with fluid responsive values in a static design tool. | Utopia
James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:
In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.
Friday, November 25th, 2022
Tweaking navigation sizing
Top tasks are what matter most to your customers.
Seems pretty obvious, right? But it’s actually pretty rare to see top tasks presented any differently than other options.
Look at the global navigation on most websites. Typically all the options are given equal prominence. Even the semantics under the hood often reflect this egalitarian ideal, with each list in an unordered list. All the navigation options are equal, but I bet that the reality for most websites is that some navigation options are more equal than others.
I’ve been guilty of this on The Session. The site-wide navigation shows a number of options: tunes, events, discussions, etc. Each one is given equal prominence, but I can tell you without even looking at my server logs that 90% of the traffic goes to the tunes section—that’s the beating heart of The Session. That’s why the home page has a search form that defaults to searching for tunes.
I wanted the navigation to reflect the reality of what people are coming to the site for. I decided to make the link to the tunes section more prominent by bumping up the font size a bit.
I was worried about how weird this might look; we’re so used to seeing all navigation items presented equally. But I think it worked out okay (though it might take a bit of getting used to if you’re accustomed to the previous styling). It helps that “tunes” is a nice short word, so bumping up the font size on that word doesn’t jostle everything else around.
I think this adjustment is working well for this situation where there’s one very clear tippy-top task. I wouldn’t want to apply it across the board, making every item in the navigation proportionally bigger or smaller depending on how often it’s used. That would end up looking like a ransom note.
But giving one single item prominence like this tweaks the visual hierarchy just enough to favour the option that’s most likely to be what a visitor wants.
That last bit is crucial. The visual adjustment reflects what visitors want, not what I want. You could adjust the size of a navigation option that you want to drive traffic to, but in the long run, all you’re going to do is train people to trust your design less.
You don’t get to decide what your top task is. The visitors to your website do. Trying to foist an arbitrary option on them would be the tail wagging the dog.
Anway, I’m feeling a lot better about the site-wide navigation on The Session now that it reflects reality a little bit more. Heck, I may even bump that font size up a little more.
Thursday, October 20th, 2022
Thursday, October 13th, 2022
Tuesday, October 11th, 2022
A drop-in replacement for Google Fonts without the tracking …but really, you should be self-hosting your font files.
Tuesday, July 19th, 2022