Someday web design will be unshackled from graphic design

I've been a front-end developer for 15 years, and the most common day-to-day task for me is converting a designer's mockups into code. This is a process which started in the most primitive way possible. It has gotten better in my time in the industry, but it's still very much the same. Designer uses an Adobe or Adobe-knockoff type tool to create a static design, then a front-end developer transforms that into working code. The code contains layout, responsive behaviors, state changes from interaction, all kinds of things.

The struggle is designers always constrain themselves by working with a static design document. Nowadays, Figma is the primary tool for this, although it's been other things like Sketch and even Photoshop if we go way back. For the web's entire existence, designers who design web pages have been educated and trained on graphic design principles that emerged in the 20th century. These principles relate mostly to printed materials: posters, brochures, magazines, textbooks, etc.

But the web isn't a poster. The web doesn't have the concept of a "canvas." Shit, even the idea of "dots per inch" varies widely. If you've worked in web development before you already know what I'm going to say next. Responsive Web Design, coined by Ethan Marcotte, is the idea that you design responsively from the user's device. It's normal industry stuff that we're all familiar with. However, the issue is a whole lot of web designers haven't internalized this way of thinking, and are still stuck in their print design ways.

Here's some examples I run into all the time:

1. "This text shouldn't be longer than one line."
2. "The header should be exactly 90 pixels tall."
3. "The text in this table cell should be truncated with an ellipses."
4. "This button should have a width of 320 pixels."

And it goes on. In print, you create a layout and fit the copy into it. You don't think about copy, content, and text dictating the layout. This is exactly how the web works. Content decides how large elements should be. If you have a lot of text in a button, then guess what, that button might have two lines of text. Big deal! Who cares! That's what it needs. But in the examples I gave above, designers who were educated on graphic design see that as a failure or a violation. They make the constraints, and the content has to fit within them. It "breaks" the design when elements flow to size and layout they need to be. It's the desire to think outside in, instead of inside out. And the reason for that is simple: when you're designing a magazine, there is a very hard limit on how much space you have! There is physical sheet of paper that you design will be printed on. You're damn right we're making some layouts and figuring out how much space we have to use. And you're damn right we're going to be telling those writers they have to trim their copy down a bit.

You already know my next point: the web does not care for these physical limitations. So putting these constraints is meaningless. In addition, the canvas itself is an unknown before the design is even rendered. Your user can be using an iPhone, a laptop, a refrigerator, a car console, or even a Nintendo Switch console. There is no canvas. So to say that "we have to fit this text inside this button" is a nonsense statement. That's why webpage scrolls downwards, infinitely, as one long screen, able to accommodate any length of content you throw at it.

So we still have the backwards thinking that got us here. What I'm hopeful for is one day we'll have another generation of designers who grew up with the web get jobs and get into the industry, and no longer be burdened by these principles that do not apply to this platform. Hopefully, they'll understand it's a screen and not a piece of paper, that the canvas is imaginary, and that content needs to be whatever length it needs to be. And hopefully they'll be familiar with assistive technology, and know their designs must be parsable and understandable by users who can't read them.

And I'm also hopeful because there are lots of older designers who definitely get it. This is one of my absolute favorite talks by Dan Mall: Till Launch Do Us Part. In this, he details how dead drops are awful, Zeplin is a curse, and the real design happens in the browser. Brilliant stuff. The thing is, most designers today will see this and react with a whole lot of "Nope." Which is why I'm counting on the next batch of designers to really get it.

The three-point line was introduced into the ABA, but was only added to the NBA in 1979. It's been there for a while, but only in the last ten or so years has really become an essential part of scoring points. I think about this all the time, why did it take so long? It was there for a good 21 years in the 20th century, and yet only a handful of players really used it a high volume.

The reason is that it takes a while for the game to evolve. Players who grew up before the three ball was added aren't going to dramatically change their game to fit some new thing. What it took was some pioneers like Reggie Miller to have some success with it, and then younger guys seeing that and learning how to use it from the start. This is what I mean about a generation who "grows up with the web." For the three point line to truly be utilized to its fullest, you needed a couple of generations of players grow up with it as a constant in basketball, so they could really understand how to use it and what to do with it. In fact, it really took multiple generations, each taking another step forward to what we have today.

And so that's why we need someone who grew up learning and training on web design, specifically, and not some adjacent design school that is filling in because nothing exists yet. The web is here, now, and so it deserves it's own school. I hope now that it gets it's own distinction to designers everywhere.