Our web design tools are holding us back ⚒ Nerd
A good ol’ rant by Vasilis on our design tools for the web.
A good ol’ rant by Vasilis on our design tools for the web.
Can you feel the energy?
When I wrote about democratising dev, I made brief mention of the growing “no code” movement:
Personally, I would love it if the process of making websites could be democratised more. I’ve often said that my nightmare scenario for the World Wide Web would be for its fate to lie in the hands of an elite priesthood of programmers with computer science degrees. So I’m all in favour of no-code tools …in theory.
But I didn’t describe what no-code is, as I understand it.
I’m taking the term at face value to mean a mechanism for creating a website—preferably on a domain you control—without having to write anything in HTML, CSS, JavaScript, or any back-end programming language.
By that definition, something like WordPress.com (as opposed to WordPress itself) is a no-code tool:
Create any kind of website. No code, no manuals, no limits.
I’d also put Squarespace in the same category:
Start with a flexible template, then customize to fit your style and professional needs with our website builder.
And its competitor, Wix:
Discover the platform that gives you the freedom to create, design, manage and develop your web presence exactly the way you want.
Webflow provides the same kind of service, but with a heavy emphasis on marketing websites:
Your website should be a marketing asset, not an engineering challenge.
Bubble is trying to cover a broader base:
Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, including all the features you need to build a site like Facebook or Airbnb.
Wheras Carrd opts for a minimalist one-page approach:
Simple, free, fully responsive one-page sites for pretty much anything.
All of those tools emphasise that don’t need to need to know how to code in order to have a professional-looking website. But there’s a parallel universe of more niche no-code tools where the emphasis is on creativity and self-expression instead of slickness and professionalism.
Create your own free website. Unlimited creativity, zero ads.
Make a website in 5 minutes. Messy encouraged.
unique tool for web publishing & internet samizdat
I’m kind of fascinated by these two different approaches: professional vs. expressionist.
I’ve seen people grapple with this question when they decide to have their own website. Should it be a showcase of your achievements, almost like a portfolio? Or should it be a glorious mess of imagery and poetry to reflect your creativity? Could it be both? (Is that even doable? Or desirable?)
Robin Sloan recently published his ideas—and specs—for a new internet protocol called Spring ’83:
Spring ‘83 is a protocol for the transmission and display of something I am calling a “board”, which is an HTML fragment, limited to 2217 bytes, unable to execute JavaScript or load external resources, but otherwise unrestricted. Boards invite publishers to use all the richness of modern HTML and CSS. Plain text and blue links are also enthusiastically supported.
It’s not a no-code tool (you need to publish in HTML), although someone could easily provide a no-code tool to sit on top of the protocol. Conceptually though, it feels like it’s an a similar space to the chaotic good of neocities.org, mmm.page, and hotglue.me with maybe a bit of tilde.town thrown in.
It feels like something might be in the air. With Spring ’83, the Block protocol, and other experiments, people are creating some interesting small pieces that could potentially be loosely joined. No code required.
I made the website for this year’s UX London by hand.
Well, that’s not entirely true. There’s exactly one build tool involved. I’m using Sergey to include global elements—the header and footer—something that’s still not possible in HTML.
So it’s minium viable static site generation rather than actual static files. It’s still very hands-on though and I enjoy that a lot; editing HTML and CSS directly without intermediary tools.
When I update the site, it’s usually to add a new speaker to the line-up (well, not any more now that the line up is complete). That involves marking up their bio and talk description. I also create a couple of different sized versions of their headshot to use with srcset
. And of course I write an alt
attribute to accompany that image.
By the way, Jake has an excellent article on writing alt
text that uses the specific example of a conference site. It raises some very thought-provoking questions.
I enjoy writing alt
text. I recently described how I updated my posting interface here on my own site to put a textarea
for alt
text front and centre for my notes with photos. Since then I’ve been enjoying the creative challenge of writing useful—but also evocative—alt
text.
Some recent examples:
A close-up of a microphone in a practice room. In the background, a guitar player tunes up and a bass player waits to start.
People sitting around in the dappled sunshine on the green grass in a park with the distinctive Indian-inspired architecture of the Brighton Pavilion in the background, all under a clear blue sky.
Looking down on the crispy browned duck leg contrasting with the white beans, all with pieces of green fried herbs scattered throughout.
But when I was writing the alt
text for the headshots on the UX London site, I started to feel a little disheartened. The more speakers were added to the line-up, the more I felt like I was repeating myself with the alt
text. After a while they all seemed to be some variation on “This person looking at the camera, smiling” with maybe some detail on their hair or clothing.
The beaming bearded face of Videha standing in front of the beautiful landscape of a riverbank.
Candi working on her laptop, looking at the camera with a smile.
Emma smiling against a yellow background. She’s wearing glasses and has long straight hair.
A monochrome portrait of John with a wry smile on his face, wearing a black turtleneck in the clichéd design tradition.
Laura smiling, wearing a chartreuse coloured top.
A profile shot of Adekunle wearing a jacket and baseball cap standing outside.
The more speakers were added to the line-up, the harder I found it not to repeat myself. I wondered if this was all going to sound very same-y to anyone hearing them read aloud.
But then I realised, “Wait …these are kind of same-y images.”
By the very nature of the images—headshots of speakers—there wasn’t ever going to be that much visual variation. The experience of a sighted person looking at a page full of speakers is that after a while the images kind of blend together. So if the alt
text also starts to sound a bit repetitive after a while, maybe that’s not such a bad thing. A screen reader user would be getting an equivalent experience.
That doesn’t mean it’s okay to have the same alt
text for each image—they are all still different. But after I had that realisation I stopped being too hard on myself if I couldn’t come up with a completely new and original way to write the alt
text.
And, I remind myself, writing alt
text is like any other kind of writing. The more you do it, the better you get.
An ode to an ode. Both of them beautiful.
There’s a difference between creativity and production. I knit things but it’s not a creative process for me, it’s a physical one. I’m not interested in doing ‘something new’ with knitting (I don’t even call myself a ‘knitter’ to be honest. I don’t really think I’ve earned it). I haven’t learned the methods of construction. I’ve never tried to make something new out of the stitches I’ve learned. It’s not why I knit. I knit to relax. There’s joy in following a pattern and knowing that a more accomplished, knowledgeable person has done the hard creative work for me, and if I just do what they say, thing’s will probably work out fine. And I love the things I make. I put care into the production process - I take care to get the stitches neat, if I can. But when people look at the things I make and say “you’re so creative” - it’s just not true. In that context I can only ever say “no, I followed a pattern - it’s a good pattern. Do you want the link?”
We are so excited by the idea of machines that can write, and create art, and compose music, with seemingly little regard for how many wells of creativity sit untapped because many of us spend the best hours of our days toiling away, and even more can barely fulfill basic needs for food, shelter, and water. I can’t help but wonder how rich our lives could be if we focused a little more on creating conditions that enable all humans to exercise their creativity as much as we would like robots to be able to.
This is a fun drag’n’drop way to make websites. And I like the philosophy:
Websites shouldn’t all look the same. We prefer campy, kitschy, messy, imperfect.
Tending this website keeps me sane. I think of it as a digital garden, a kind of sanctuary. … And if my site is a kind of garden, then I see myself as both gardener and architect, in so much as I make plans and prepare the ground, then sow things that grow in all directions. Some things die, but others thrive, and that’s how my garden grows. And I tend it for me; visitors are a bonus.
A thoughtful and impassioned plea from Colly for more personal publishing:
I know that social media deprived the personal site of oxygen, but you are not your Twitter profile, nor are you your LinkedIn profile. You are not your Medium page. You are not your tiny presence on the company’s About page. If you are, then you look just like everyone else, and that’s not you at all. Right?
My favorite aspect of websites is their duality: they’re both subject and object at once. In other words, a website creator becomes both author and architect simultaneously. There are endless possibilities as to what a website could be. What kind of room is a website? Or is a website more like a house? A boat? A cloud? A garden? A puddle? Whatever it is, there’s potential for a self-reflexive feedback loop: when you put energy into a website, in turn the website helps form your own identity.
By using static wireframes and static layouts, by separating design and development, we are often limiting our ability to have that creative dialogue with the Web and its materials. We are limiting our potential for playful exploration and for creating surprising and novel solutions. And, most importantly, we are limiting our ability to make conscious, well-informed decisions going forward. By adding more and more layers of abstraction, we are breaking the feedback loop of the creative process.
Friday was FF Conf day here in Brighton. This was the eleventh(!) time that Remy and Julie have put on the event. It was, as ever, excellent.
It’s a conference that ticks all the boxes for me. For starters, it’s a single-track event. The more I attend conferences, the more convinced I am that multi-track events are a terrible waste of time for attendees (and a financially bad model for organisers). I know that sounds like a sweeping broad generalisation, but ask me about it next time we meet and I’ll go into more detail. For now, I just want to talk about this mercifully single-track conference.
FF Conf has built up a rock-solid reputation over the years. I think that’s down to how Remy curates it. He thinks about what he wants to know and learn more about, and then thinks about who to invite to speak on those topics. So every year is like a snapshot of Remy’s brain. By happy coincidence, a snapshot of Remy’s brain right now looks a lot like my own.
You could tell that Remy had grouped the talks together in themes. There was a performance-themed chunk right after lunch. There was a people-themed chunk in the morning. There was a creative-coding chunk at the end of the day. Nice work, DJ.
I think it was quite telling what wasn’t on the line-up. There were no talks about specific libraries or frameworks. For me, that was a blessed relief. The only technology-specific talk was Alice’s excellent talk on Git—a tool that’s useful no matter what you’re coding.
One of the reasons why I enjoyed the framework-free nature of the day is that most talks—and conferences—that revolve around libraries and frameworks are invariably focused on the developer experience. Think about it: next time you’re watching a talk about a framework or library, ask yourself how it impacts user experience.
At FF Conf, the focus was firmly on people. In the case of Laura’s barnstorming presentation, those people are end users (I’m constantly impressed by how calm and measured Laura remains even when talking about blood-boilingly bad behaviour from the tech industry). In the case of Amina’s talk, the people are junior developers. And for Sharon’s presentation, the people are everyone.
One of the most useful talks of the day was from Anna who took us on a guided tour of dev tools to identify performance improvements. I found it inspiring in a very literal sense—if I had my laptop with me, I think I would’ve opened it up there and then and started tinkering with my websites.
Harry also talked about performance, but at Remy’s request, it was more business focused. Specifically, it was focused on Harry’s consultancy business. I think this would’ve been the perfect talk for more of an “industry” event, whereas FF Conf is very much a community event: Harry’s semi-serious jibes about keeping his performance secrets under wraps didn’t quite match the generous tone of the rest of the line-up.
The final two talks from Charlotte and Suz were a perfect double whammy.
When I saw Charlotte speak at Material in Iceland last year, I wrote this aside in my blog post summary:
(Oh, and Remy, when you start to put together the line-up for next year’s FF Conf, be sure to check out Charlotte Dann—her talk at Material was the perfect mix of code and creativity.)
I don’t think I can take credit for Charlotte being on the line-up, but I will take credit for saying she’d be the perfect fit.
And then Suz Hinton closed out the conference with this rallying cry that resonated perfectly with Laura’s talk:
Less mass-produced surveillance bullshit and more Harry Potter magic (please)!
I think that rallying cry could apply equally well to conferences, and I think FF Conf is a good example of that ethos in action.
There seems to be a tendency to repurpose existing solutions to other people’s problems. I propose that this is the main cause of the design sameness that we encounter on the web (and in apps) today. In our (un)conscious attempts to reduce the effort needed to do our work, we’ve become experts in choosing rather than in thinking.
A very thoughtful piece from Stephen.
When we use existing solutions or patterns, we use a different kind of thinking. Our focus is on finding which pattern will work for us. Too quickly, we turn our attention away from closely examining the problem.
There is one alternative to social media sites and publishing platforms that has been around since the early, innocent days of the web. It is an alternative that provides immense freedom and control: The personal website. It’s a place to write, create, and share whatever you like, without the need to ask for anyone’s permission.
A wonderful and inspiring call to arms for having your own website—a place to express yourself, and a playground, all rolled into one.
Building and maintaining your personal website is an investment that is challenging and can feel laborious at times. Be prepared for that. But what you will learn along the way does easily make up for all the effort and makes the journey more than worthwhile.
Cassie’s terrific talk from Bytes Conf, featuring some wild CSS experiments.
(Conference organisers—you want Cassie on your stage!)
Craig writes about reading and publishing, from the memex and the dynabook to the Kindle, the iPhone, and the iPad, all the way back around to plain ol’ email and good old-fashioned physical books.
We were looking for the Future Book in the wrong place. It’s not the form, necessarily, that needed to evolve—I think we can agree that, in an age of infinite distraction, one of the strongest assets of a “book” as a book is its singular, sustained, distraction-free, blissfully immutable voice. Instead, technology changed everything that enables a book, fomenting a quiet revolution. Funding, printing, fulfillment, community-building—everything leading up to and supporting a book has shifted meaningfully, even if the containers haven’t. Perhaps the form and interactivity of what we consider a “standard book” will change in the future, as screens become as cheap and durable as paper. But the books made today, held in our hands, digital or print, are Future Books, unfuturistic and inert may they seem.
Jigsaw puzzle companies tend to use the same cut patterns for multiple puzzles. This makes the pieces interchangeable, and I sometimes find that I can combine portions from two or more puzzles to make a surreal picture that the publisher never imagined. I take great pleasure in “discovering” such bizarre images lying latent, sometimes for decades, within the pieces of ordinary mass-produced puzzles.
I share many of Cole’s concerns. I think we’re in fairly similiar situations. We even share the same job title: Technical Director …whatever that even means.
I worry about our over-reliance and obsession with tools because for many these are a barrier to our discipline. I worry that they may never really make our work better, faster or easier and that our attention is increasingly focussed not on the drawing but on the pencils. But I mostly worry that our current preoccupation with the way we work (rather than necessarily what we work on) is sapping my enthusiasm for an industry I love and care about immensely.
“It’s almost too easy now, and too unsatisfying that you only can put your work in a community full of advertisements and full of tracking,” she said. “I think there will be this urge, on the one hand, to have a local internet of small communities, and, on the other hand, a decentralized internet again.”
“You can still make websites nowadays,” Heemskerk said. “People think it’s complex, but it isn’t —you just register your domain and make your website and that’s about it.”
The ideas and images that come to mind when you think of technology as an instrument are more useful than if you think of it as a tool. Instruments — I’m specifically talking about musical instruments — are a way to create culture.
You approach instruments with a set of expectations and associations that are more humane. It’s built into their very purpose. Instruments are meant to make something for other people, not making things. When you use an instrument, you have an expectation that it is going to take effort to use it well. Using an instrument takes practice. You form a relationship with that object. It becomes part of your identity that you make something with it. You tune it. You understand that there’s no such thing as a “best” guitar in the same way that there’s not necessarily a “best” phone.