menu

Slabmedia

Thoughts & Articles

Graphic Design and CSS: Where WYSIWYG went wrong.

slab
Jim Infantino
Graphic Design and CSS Where WYSIWYG went wrong

Way back in the 1980s, some very nerdy graphic designers began to write their designs in code. John Warnock, one of the founders of Adobe Systems had developed a computer-generated, vector-based programming language called PostScript that became the underlying code of much of the design and typographic tools we take for granted today. This very interface still relies heavily on it. Almost every letter in every word you read uses it. Before there was any such thing as Illustrator or PageMaker or InDesign or web pages, there were designers writing code to make a mark on a page. To draw an arc on a page, a PostScript designer would write in a text document: “300 600 20 270 arc stroke” and then adjust the numbers to get the right result in the compiled output. Crazy, right?

I remember reading about this and thinking,

“That is way too much effort. I could never think about my design in code. Give me a pen or a brush and some paper. That form of design is going nowhere.”

Then, along came the graphic user interface. Now everyone who designs writes about arcs and strokes and fills and vector positions on a virtual canvas, only we use a mouse and a computer screen and let the robots do the calculations for us.

So, what is wrong with that? Courses in Design are taught specifically in branded programs like Adobe Illustrator or Photoshop with little to no reference to the underlying code that enabled the process. These programs have enabled us to create increasingly complex designs quicker than we could possibly achieve by hand-coding positions and shapes, and that is, by-in-large a good thing.

Along came the web page, and some designers and non-designers began to code again. This time, the language was HTML. HTML was created by a group of programmers and thinkers lead by Tim Berners-Lee at CERN. Unlike PostScript, it was not a proprietary system, but open to all to use, free of charge or license. It was meant to deliver linked information through a new idea called a browser. The first browsers were run in a terminal, not a graphical user interface (GUI) as we know now, but a stream of text. Design was not a factor, the sharing of linked information was the primary goal. When GUI browsers arrived in the 1990s, designers looked at the gray pages of Times New Roman on their screens and imagined the possibilities of something more exciting and engaging. Programming Designers, like those who had worked in PostScript developed CSS and Javascript and Web Design was born.

CSS stands for Cascading Style Sheets, and was developed by Håkon Wium Lie in 1994. Lie was also working at CERN with Berners-Lee. His idea was to take the structure of the HTML page; the underlying elements like body, h1 (for a headline), p (for a paragraph), img (for image reference), and div (for block elements) and give them design specifications like background-color, width, height, padding, margins, font-family, and more. Early web designers began to code or “script” these modifications to their dull looking, gray pages and things on the web got interesting.

One year later, Brendan Eich at Netscape released the first version of Javascript, based on the same ideas as Lie’s CSS and things got even more interesting. Programming Designers like Jeffrey Zeldman began using it to animate the elements on the page to create dynamic content that changed on the screen due to variables, some of which could be set by the page visitor. At this point, the web page became a living thing, radically set apart from the printed page.

A very limited number of designers adopted these methods. The creative interface was still a plain text editor, usually a terminal program, to write the HTML code, and script the CSS and Javascript to make it look and feel pleasing to the viewer. Companies like Apple and Adobe saw the opportunity and created WYSIWYG programs so that graphic designers could automatically generate the web code without touching it. That was a good thing too, wasn’t it? Yes, of course, it was and no, it wasn’t.

The trouble with web design today, is that each choice or fork in the process has exponential consequences. Modern web design is often reliant on templates and programs that make it easy to get started and generate a design that is balanced and pleasing. Content editors have drag and drop interfaces that allow for placement of elements with a gesture of a hand. The trouble arrives when a designer begins to think outside the parameters of the pre-defined GUI interface and discovers that they are blocked from making creative decisions by the template or program underlying the layout on the page.

When faced with the limitations of the interface, a non-coding designer has a choice:

  1. Start again with another template or platform that seems to better align with their vision
  2. Give up and let the client know that what they want simply cannot be done with the tools at hand
  3. Team up with a programmer that can shoehorn the elements into place with modifications to the constraining template or platform, adding cost to the project and complexity to changes down the road

None of these are good options.

What is needed to do this right is a designer who thinks in code. What kind of designer thinks in code?

Prior to the term being co-opted by the startup community, a Unicorn used to refer to a designer who was also a programmer. The belief was and is today, that the ability to design precludes the ability to write code and those who did both are as impossible to find as a mythical beast with a horn growing out of its forehead. People who have these talents are now sometimes referred to as hybrid designers for disambiguation.

For too long, the design curriculum has ignored code as an essential interface for creating graphic layouts. The focus has been on the WYSIWYG interface, rather than what it generates. All GUI interfaces for design have limitations in application. A page created in photoshop is, by its nature non-responsive to screen size. It lacks any accessibility elements. It ignores user-input. A website built with templates will always be limited to the parameters of that template, no matter how flexible it claims to be. A designer who wants to rise to the challenges of how layouts are presented on the web must have some understanding of the underlying elements of HTML and how to modify their appearance and behavior to create durable, compelling work.

I can sometimes find examples of educational courses that teach design with code. I hope this is a trend. It is not, as has been asserted, the job of two very different brains to write code and create beauty. One brain will do, so long as we begin thinking of design from the perspective of rules and behavior, rather than fixed elements on a page. The interface is radically different from those based on the ancient modes of paint, brush, line, and type. The interface is the code itself.

Designers still need to understand color, form, and typography, but the tool to create their work is the script they write, not the compiled output of a program created to mimic the methods of the past.

Great web designs are built from the ground up without compromise. Web designers paint on an ever-changing canvas governed by an evolving set of rules. Without a deep understanding of these rules and materials, work created with easy to use but constraining tools will always come up short.

Are you a coding designer? Drop me a line.

– Jim