To start things off, let me state my position. This house proposes that because HTML and CSS are the language of the web, it is mandatory for anyone who wishes to design for the web to understand the relationship between HTML and CSS, and the browsers which render them.
There have been many opinion pieces written about whether designers need to learn to code or whether developers need to know design. Using the word “many” is probably understating the sheer volume of articles that have been published. Just google “Designers learn code”. Go on, I’ll wait. Check the timestamps on some of those results, you’ll see that this debate has raged on for years and there seems to be no end in sight.
Artisans and their media
Instead of jumping right into that controversial topic, let’s talk about medium. For artists, medium is the material they use to create works of art. But medium is not only relevant for artists. Carpenters, bakers, chefs, architects too have specific media they work with.
Think of all the different categories of designers out there, industrial designers, fashion designers, graphic designers, interior designers and so on. In order to do great work in their respective fields, all these professionals must have a deep and comprehensive understanding of the media they work with.
Industrial designers need to have a key understanding of materials and manufacturing processes. Fashion designers have an innate understanding of the characteristics of different fabrics and how they behave in various contexts. Artists learn pretty early on that although its theoretically possible to use any paint on any surface, there are preferred combinations of media simply because of their nature, and this will affect their choice of painting technique as well.
It’s a pretty logical expectation to have, right? For the artisan in question to have extensive and thorough knowledge of their respective media. I think this can be said for most of the aforementioned professions.
So what is the medium that web designers work with? That’s simple, the browser! But what I find curious is, that for web design, it seems that some of us can get away with being unfamiliar with browser technologies. And to me, this is unacceptable, and quite unbecoming, to be honest.
To be fair, the browser is a relatively young medium. Compared to all the other media out there, the browser is practically just a toddler. The very first web browser (called WorldWideWeb) was invented in 1990 by Sir Tim Berners-Lee. So as of time of writing, that’s only 26 years. I’ve lived longer than that. ¯\_(ツ)_/¯
Browser is to web designer as canvas is to painter
A web designer’s work lives in the browser. And the browser is a piece of software that requests web resources from servers connected to the internet, and displays them in the browser window.
The World Wide Web is built on Hypertext Markup Language (HTML). Sure there are all kinds of media available online, but there is no web without HTML. Browsers render HTML according to the HTML and CSS specifications, which are maintained by the World Wide Web Consortium (W3C).
The web introduced us to a canvas we’ve never seen before. Browser windows and electronic screens are twenty-first century inventions. All other categories of design have had at least more than hundreds of years of history and established norms.
What do we do when we encounter something new? We try to make sense of it by connecting it to something we are familiar with. The fact that we use the term “web pages”, naturally led people to associate web design with print design.
And therein lies the issue. Firstly, there’s the fact that we cannot directly manipulate digital media. Whatever we input has to be first processed by a computer. And the web is distinct from any other media on the planet because we have very limited control over how users consume the work we produce on the web.
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” - John Allsopp
John Allsopp wrote his seminal article A Dao of Web Design back in 2000 imploring web designers to move away from the rigidity of a printed page and embrace the flexibility of the browser as a medium. It’s been 16 years since, but we’re still working on that.
I truly believe that web designers must understand browser technologies in order to design well. If you don’t understand how your the browser renders stuff onto the screen, how can you design for it? It is so common to hear developers complaining about designers handing them “impossible designs”.
Look, you can’t carve a sculpture if your media are paint and canvas.
But designers don’t want to code
This is the part where everyone has an opinion. Some people argue HTML and CSS are not programming languages, some say they are. Some people think designers learning to code is a waste of time because left brain right brain. Some people think developers ought to learn design. Sure, why not?
Now I want to point out that my position did not state that web designers must know how to code. But I do think it’s an extremely useful tool to have in your toolbox. And I’m not even talking about being able to handle all the different aspects of getting a website up and running. Just HTML and CSS.
Equally (or maybe more) important is understanding how browsers work. Do you know why the design doesn’t look the same when viewed on different browsers or operating systems? Why do certain portions of the site appear broken on a particular browser (*cough* Safari) yet not others? If Blink, WebKit, Gecko and Edge sound like names of exotic dancers to you, then you definitely don’t pass muster. 🙅
But front-end code (just HTML and CSS; let’s forget Javascript for now) is intrinsically linked to the design process. It’s a design tool just as much as Photoshop. - Elliot Jay Stocks
I find this quote by Elliot Jay Stocks, former Creative Director of Adobe Typekit and co-founder of Lagom, really hits the point home. If the browser is your canvas, then HTML and CSS are your paints and brushes.
Rather than asking if designers should learn to code, we should be asking if designers know whether their designs can be built, and whether their designs are usable.
Web design is more than good looks
The web is not a static medium, it’s an interactive one. Hence, web design encompasses so much more than just visuals. Usability is not the sole responsibility of user experience practitioners. If you ask me, user experience is the responsibility of every single person on the team, but that’s another argument for another day.
A thorough understanding of the web includes knowing what needs to be implemented and designed from an accessibility standpoint. Because the web is consumed so dynamically, from the infinite range of screens, to screen readers and other assistive technologies.
Designing for a dynamic canvas, from screens that fit in your palm, to 27-inch 5K iMac displays and beyond, requires a significantly different approach from designing for a static-sized canvas. Responsive design, anybody? This affects how we use images, how we scale typography as different viewport widths, laying out of critical content and so on.
Speaking of content, the web is also an informational medium. Content is king. It’s safe to say we don’t design websites, we design content. I’m not saying visual design isn’t important. It is. But its purpose is to enhance the users’ consumption of the content.
Just because a designer can wield digital tools like a surgeon wields a scalpel doesn’t mean he/she is a good web designer. Not to say that static mock-ups are worthless, on the contrary, static mock-ups are great as guidance for the look and feel, but they should not be used as blueprints for a web design.
In spite of the wide range of tools available to help designers design responsive websites, there is no better tool than actual HTML and CSS. A web designer who isn’t fluent in HTML is like a colour-blind painter.
Building a great web experience takes teamwork
If you firmly believe that designers should stick to designing and developers should stick to coding, that’s fine too. But then communication between the two groups becomes even more critical. Both designers and developers have to be collaborating closely right from the start for the end-result to be a success.
And if designers and developers work so closely together, it’s impossible that the designer won’t pick up HTML and CSS along the way. Conversely, the designers’ design sense will inevitably rub off on the developers as well. Does that mean you can switch roles? Of course not! There’s a reason you each chose your respective careers. But a better understanding of each other’s work goes a long way.
Again, it’s not about the writing of code, it’s about the understanding of the medium, how it behaves and how it’s consumed. Of course, if the web designer can write his/her own code, more power to them.
Wrapping up
Web design is a domain of its own. Yes, we borrow ideas and concepts from all other disciplines, but the web is unique, and requires its own set of processes and a different set of skills. And to be fair, all of us working on the web are still trying to work out the best way to do things. To me, it’s a beautiful marriage of technology and creativity. We just have to keep learning and growing. So, web designers, can you speak web?
Related resources
- CSS specifications
- HTML Living Standard (Link updated on 9 May 2016 after Kai Hendry pointed out this is the canonical reference. Read W3C vs. WHATWG HTML5 Specs – The Differences if interested.)
- Mozilla Developer Network
- How Browsers Work: Behind the scenes of modern web browsers by Tali Garsiel (The best primer on how browsers work)
- How browsers work internally by Tali Garsiel (Conference talk at Front Trends 2012)
- A Dao of Web Design by John Allsopp
- Responsive Web Design by Ethan Marcotte
- Web designers who can’t code by Elliot Jay Stocks
Fun reads
- The Human Computer and the Birth of the Information Age by David Alan Grier Try to get your hands on the original paper 🤓
- When Computers were Human by David Alan Grier (The story of computation before the invention of the computer)
- Weaving the Web by Tim Berners-Lee (The origins of the web as told by the creator himself)
- Design for Real Life by Sara Wachter-Boettcher and Eric Meyer (Principles for inclusive design)
Credits: OG:image from Midphase Blog