In web design, everything hard can be easy again
Frank Chimero recently published “Everything Easy is Hard Again” — describing his journey back into web design after a three-year break. He points out that web design veterans and beginners are pretty much in the same boat today:
“I had fifteen years of experience designing for web clients, she had one year, and yet some how [sic], we were in the same situation: we enjoyed the work, but were utterly confused and overwhelmed by the rapidly increasing complexity of it all. What the hell happened?”
The entire essay is well worth the read, but I’ll summarize some of the big themes that Frank mentioned:
- A lot of new development workflows, tools, and methods have emerged in the last several years
- Even simple things like loading images and fonts have complex toolchains and books written about them
- It’s no longer possible to “View Source” to learn about various techniques on many websites due to minification and obfuscation by various build tools
- Lots of things learned years ago become obsolete, and techniques once frowned upon years ago become best practices
As I was reading the essay, I was nodding in agreement so aggressively that I nearly developed a kink in my neck. “We’re a long way from the CSS Zen Garden” indeed.
It’s not just Frank — everyone is overwhelmed
Frank claims that his 3-year absence from the industry was the primary source of his confusion when he re-entered the industry, but frankly (ha!), I’m convinced this is only a small factor in a more complicated equation. I say this because Frank’s struggle is shared by many industry veterans, most of whom have not taken any extended breaks for following the latest-and-greatest.
For example, Jen Simmons, one of the pioneers and champions behind CSS Flexbox and CSS Grid, shared on episode 113 of The Web Ahead podcast that many people who invented our industry are feeling completely overwhelmed.
Even Lyza Danger Gardner — a 20-year veteran of the web, and an accomplished speaker and author — shared in an interview that CSS could be growing beyond her understanding.
And Brad Frost, yet another industry veteran who wrote the book on Atomic Design, wrote an insightful essay titled “i have no idea what the hell i am doing” — in which he echoes the challenges faced by Frank Chimero, despite not taking a long hiatus from the industry.
So if these industry leaders, and many others — the folks who have grown up with the web from before CSS even existed — are feeling overwhelmed, what hope is there for the rest of us mere mortals? And what about people starting in web design 5 years from now, when there will likely be 10 times as many developer tools as there are today?
First, let’s reflect back on how we got here…
The Web Platform has grown dramatically
We mere mortals have good reason to be afraid — the web has exploded with complexity, especially in the past 10 years. For evidence, look no further than the list of features that are now available in browsers! This increased capability has led to an explosion of developer tooling to try to make use of it all. It’s important, however, to consider why these dev tools have cropped up, and, more importantly, what they’re making possible.
For example, let’s rewind 20 years, to a time when we only had to learn one flavor of HTML — one with barely a handful of tags. Styling was inline and CSS stylesheets weren’t a thing yet. Now, back to the present. We have a vastly expanded HTML spec, hundreds of new CSS properties, and very heavy use of JavaScript to achieve complex requirements.
There are also tons of differences between various browser implementations of these technologies. Something as simple as prepending a prefix for CSS values, for example, requires pretty complicated build tools to save us a ton of manual typing.
So, what has all of this complexity produced? Well, as Brad Frost puts it, a common case of: “i have no idea what the hell i am doing,” among people who used to know a hell of a lot about what they were doing.
Developers are navigating this new, complex, and foreign landscape with new tools… which further add to the complexity. Feeling overwhelmed? Welcome to the club. I, for example, have had to learn to use the following tools (among others) just to do mostly standard web design projects over the last 15 years:
It’s probably going to get worse before it gets better
Unfortunately, there’s no indication that this tooling growth train is slowing down anytime soon. With hundreds of static site frameworks out there, new CSS/JS libraries dropping almost on a daily basis, the likelihood of a standardized way to build websites is looking … grim.
Furthermore, the likelihood that skills around building websites will become obsolete every few years, when new tools emerge, is high. Frank speaks to this trend in his own experience:
“Except with the websites. They separate themselves from the others, because I don’t feel much better at making them after 20 years. My knowledge and skills develop a bit, then things change, and half of what I know becomes dead weight. This hardly happens with any of the other work I do.”
☝️ That sucks. Spending many years mastering a craft and having it change under your nose doesn’t feel great at all. Creative skills, evergreen in nature, should not be rendered obsolete because of shifting, underlying technologies. So, how do we preserve them? Teach more people how to become programmers? Somehow standardize on a smaller number of code-based tools so that it’s easier for beginners to get started? Force designers to rely on developers to make a web design come to life?
First, we have to change how we think about web design
This challenge requires us to think outside the box. Frank summed it up very nicely towards the end of his essay:
“So much of how we build websites and software comes down to how we think. The churn of tools, methods, and abstractions also signify the replacement of ideology. A person must usually think in a way similar to the people who created the tools to successfully use them. It’s not as simple as putting down a screwdriver and picking up a wrench. A person needs to revise their whole frame of thinking; they must change their mind.
In one way, it is easier to be inexperienced: you don’t have to learn what is no longer relevant. Experience, on the other hand, creates two distinct struggles: the first is to identify and unlearn what is no longer necessary (that’s work, too). The second is to remain open-minded, patient, and willing to engage with what’s new, even if it resembles a new take on something you decided against a long time ago.”
So, how do you liberate designers from the tumultuous, and inevitable, tide of web development technology? Certainly not by harnessing them to it with a decades-old assumption that the main way to create bespoke, professional, responsive, performant websites is to write the code by hand.
This assumption asks humans, who want to get their creative ideas directly onto the medium, to master technical work that perhaps was never in their wheelhouse to begin with. We’re asking web designers to become web programmers — which is like asking Pablo Picasso to master the latest techniques in canvas, paint, or brush production. “Ain’t nobody got time for that.” — Picasso, probably.
So, let’s challenge this assumption!
WYSIWYGs are dead, long live WYSIWYGs!
Luckily, we’ve solved this problem many times before in other creative industries. How? Almost always with visual direct manipulation interfaces that solve complex problems. Non-linear video editing tools, 3D modeling and animation tools, graphic design tools, CAD — the list goes on.
For an example of the change that happened in one industry, watch the brief trailer for Graphic Means below — all the while considering the parallels of the desktop publishing revolution to today’s workflow between designers and web developers.
When talking about a similar shift in thinking — and tooling — in the web design industry, the objections are usually quick to stack up:
- “But tools like Dreamweaver produce crappy, bloated code!”
- “Responsive design is way too complicated for visual tools!”
- “There’s no way to get a high level of control without code!”
- “You can’t build complex design systems in visual tools!”
- “No real web designer would build without code!”
Even though I have a horse in the race (I work at Webflow, where we create visual web design tools), I’d wager that it’s inevitable that the web design industry will be transformed by powerful direct manipulation tools — just like every other creative industry has been in the past.
People no longer have to create vectors by hand, nor understand how Bezier math works to draw a curve, so why should web designers need to know exactly how to write specific HMTL/CSS/JavaScript by hand to create beautiful, functional, and professional work?
They shouldn’t. All web designers really need to know are the fundamental concepts that make them web designers in the first place — concepts like reflow, relative layout, typography, style inheritance, and so on. Mastery of the medium of the web, which is no small feat, can be mobilized by sophisticated tooling.
To prove my point, here are some examples from Webflow, where direct manipulation clearly provides a very granular level of control within the constraints of the medium of the web (box model, media queries, etc) — without the need for a text editor.
Here’s me tweaking a radial gradient, which despite my 15 years of coding experience, I still can’t remember the syntax for:
Flexbox becomes much easier to reason about, without having to keep a code cheatsheet (or even a cheatsheet for the cheatsheet) open next to your text editor. Using more familiar visual UI affordances allows for a rapid workflow, while still creating production-ready code.
With these types of tools, web design starts to become primarily about the design — not about spending hours and hours in a text editor or tweaking-and-copy-pasting-values from the web inspector. Each change is persisted in the background directly to the source stylesheet, and art direction of websites becomes more of a focus. Instead of futzing around with shape-outside syntax, I can quickly specify how an image might have text flow around it and see exactly how it will appear to viewers of the page.
☝️ Oh, and the image of the moon uploaded there was a much higher resolution than needed, and appears much smaller on mobile devices. But in the background, Webflow automatically resizes the canvas at 1px increments and comes up with the best possible srcset and sizes attribute combination for the image across all breakpoints — meaning that there’s no need for the designer to worry about compilation and delivery concerns. Yet, it still generates code that a developer would understand.
Responsive designs can also be created by directly manipulating the content across various breakpoints, with the same inheritance/cascade behavior that a coder would expect if they were writing media queries by hand:
And visual functionality can go well beyond static designs. Now we can pull in data from a well-structured database, or maybe a custom GraphQL endpoint, or a CSV file, or whatever — and then intuitively “bind” parts of the UI to that live data. Static designs can come alive in just minutes, and quickly turn into live dynamic applications.
This concept can go even further, and apply to sophisticated JavaScript-driven interactions. Here’s an example of visually creating a mouse event triggered animation, without needing to understand JavaScript events, jQuery event binding semantics, style attribute changes, and so on:
And all this stuff can be published in a single click, whether to staging or production environments — emulating the same process that developers would follow. Minification, gzip, responsive images, CDN optimization, HTTP/2 — pretty much everything you’d have to learn how to wire up manually is taken care of transparently.
With this approach, it’s also possible to see exactly how each site was built by opening the core source project — without the burden of trying to inspect compiled and minified HTML/CSS in the browser. This is similar to having access to a source Photoshop or Sketch file with all the layers/symbols/etc, instead of inspecting a JPG or SVG in its compiled form.
These are just a handful of examples, and there are hundreds of others. WYSIWYG tools will soon catch up to code-based workflows in terms of power and customization, and will quickly surpass them in terms of speed.
The future of web design is not code
The web has been around for 25 years, but we are still trailblazing. We’re still trying to figure out how we’ll build for this new medium. It’s a new frontier, and so far, only a relative few have gone out to start exploring it.
That exploration has primarily been limited to those that could learn how to write code, which is a paltry 0.25% of the world’s population — just 1 out of every 400 people! No wonder Frank Chimero, along with many others, have struggled with the complexity of it all.
What if we were able to liberate web design beyond the requirement to write code, while still keeping the amazing power available to designers at their fingertips? I firmly believe that visual tools are the most reasonable way to do that, because it’s pretty clear that the code-based approach is not scaling.
Imagine how different the world would be today if PCs lacked intuitive graphical interfaces, and were limited to only those who have mastered the command line. That would be a different world indeed. Why would we not want to democratize access to web design in a similar way? It could lead to a sea change of creative innovation on the web.
So let’s rethink our assumption that code is the only way, and let’s follow the example of other successful creative industries. Let’s make the hard things in web design easy again!
A huge thanks to Mariah Driver, Waldo Broodryk, and John Moore Williams for reading drafts of this post.
