SiteGrinder is (sorta) hurting the Earth as well


As the complexity of building websites rise, and certain areas of print (read newspaper) decline, we’ve been taken by another wave of delusion concerning the web. Ever since its founding, those looking from the outside have mistaken it for “their” media, and made prophecy of its coming fusion with their own profession. In the 1990s, it was common to say “someday the web will be just like TV”. In our current era, a smaller group is hoping for a “code free world”.

Why is this relevant to sustainability? Computers run on code. You can build interfaces to allow that code to be created, but you can’t replace the code. Inefficient code leads to less sustainable computing. And the inefficiency is not just a matter of low-level engineering – it is what you decide to build in code. There are many ways to build an e-commerce website, but some will be more efficient than others.

It’s key to understand that computers aren’t really able to write their own code when considering code. A computer can, of course, generate a string of code and “eval” it. A long time ago (1960s) people imagined that software self-writing its own code would “bootstrap” itself to superhuman power. Obviously this hasn’t happened – we still send people to school for years to use computers.

The big problem with a computer writing code at a high level is its lack of experience with the world in which goals are set for software. Take a program translating a Photoshop page comp into HTML and CSS. To a point, this is practical, as shown by programs like Media Lab’s SiteGrinder program. This program takes a complex .PSD file and translates it to a web page – in effect, doing something like “printing” the page to the web. It is similar to Adobe Muse (now Edge) in spirit – we can hide the code layer – but instead of using an Adobe InDesign page visual Ui, it takes layered Photoshop documents. In many ways,  this makes sense – there are plenty of web designers that can make page comps that they would have trouble coding directly. SiteGrinder does a super-powered version of the old “image slicing” programs to pull assets out of Pshop layers into HTML and CSS. And, if you are willing to learn the complex method for setting up your page comps, it does the job reasonably well.

What the problem with SiteGrinder? Like Edge, it is being used in a nasty marketing strategy to convince people that their current media is all there is to the web, and that web design will soon disappear into their profession. It also implies that the key features of the web – interactivity, and dynamic updates – are inferior issues relative to art direction. Years ago, I sat through talks in Hollywood which assumed that the web would become more and more like TV until – surprise! the TV people would take over web design and development. That didn’t work out, and companies that tried to fold the web into a television model are out of business.

In the case of these “code-free” tools, graphic designers are being told that web pages are nothing more than electric pictures, like print but on a screen. This is against the true nature of the web as an interactive medium. True, the target audience often needs websites that are just electric photo galleries, and for this purpose it’s hard to deny the potential for these tools. But if we try to make the web more useful than an electric page, they fail any test of sustainability. Obviously, a skilled interactive designer might use these tools – but then they would be interactive designers, whether or not the label on their office door said “graphic designer”. The examples listed by SiteGrinder look more like interactive design than those shown for Adobe Edge. But both look pretty derivative.

In an earlier post, I noted that LCA analysis of both e-books and online newspapers indicates that with extended use, the virtual product causes greater environmental damage than the real. E-books, if read slowly and carefully like traditional textbooks, have a bigger environmental footprint than paper, despite all the problems with creating, distributing, and disposing of paper.

So, any tool that encourages print designers to view the web as a printed page will lead to site designs that cause greater environmental damage than if the same designs were just printed.

That’s huge. Muse and SiteGrinder both show off sites that look like electric paper. This isn’t an accident, since their market is Nervous People who want the web to be a minor sub-branch of print design.

In both cases – Muse and SiteGrinder – the marketers has posted testimonials describing how hard is for “creative” personality artists to work with those smelly coders, and how wonderful it is to cut them out of the loop once and for all. They also imply that what current web designers do on the web is trivial, and can easily be replaced with software – their software (InDesign or Photoshop) in fact. What could be more comforting to a Nervous Person who is worried about clients wanting a website  to hear that there is no “web design” profession – and that a new tool allows them to take over and assert themselves against all those hacks and codebeasts?

It’s a seductive song, to be sure. But it ensures that the ultimate design will be optimized for non-web media. The web is not those media, so the design will be inferior. The websites will tend to be elaborate pictures (SiteGrinder), or electric brochures (Adobe Edge). The underlying code, while not impossibly bad, is pretty bad.

But even if we fix the code, these sites will still suck more energy than regular websites. Why? They are designed against the medium. They will do things that are unnecessary, and leave out the essential.

These sites are also less sustainable in terms of updates. In the short run, updates are easy, especially for a person at a print shop charged with doing something about their web presence. They can stay in a comfortable tool and make changes. But in the long run, sustainability suffers. Unless they update their tool, it will continue to crank out old code from the era in which they bought it – and the web is changing very rapidly. 5 years from now, pages created by these tools won’t only be clumsy, but invalid, sending next-generation browsers into “quirksmode”.  Since they follow the old “image slice” model, even now they don’t employ the latest, highly efficient and cross-platform techniques (especially on mobile) like CSS3 and downloadable webfonts. Everything seems stuck in 1997 and cutting up static images.

Another feature of these tools is that they both ignore mobile, responsive design, and other strategies designed to maximize universal access to websites. By starting with a Photoshop or InDesign Lite interface, they fix the width and height of the web page – ignoring the fact that the same page may need to display on an iPhone or a 65 inch flatscreen TV. In traditional web design, “jelly” or “liquid” grid models ensure that designs adjust to different monitor sizes and resolutions. Not so with these tools, whose website output is essentially the equivalent of a building without a wheelchair ramp. In not serving the “browser-challenged”, these tools not only bring the developers nearer the risk of lawsuit over accessibility, but encourage the idea that in the future, we will all have giant screens like graphic designers.

The cynical idea of the marketers that I think is at work is that Edge and SiteGrinder sites are mostly viewed by the same visual designers as create them – they are designer to designer vanity plates. It’s the blind showing off to the blind. They don’t know how bad their sites look on a tablet.

But the biggest problem remains in letting designers stay in their comfort zone. But using tools designed for static images or static printed pages, the designer will tend to create lousy websites. At the level of interaction design, these tools offer nothing other than slideshows for shuffling photo galleries. This is not a bug, but a feature, since the tools sell to those who often don’t know that Interaction Design and User Experience (Ux) are a major part of creating websites. Better to ignore it and make it all about pictures.

This is OK just as long as the site is a “portfolio” – meaning that it is really like a design book. But the moment that interactivity enters the picture, the easy process of making a web page becomes incredibly hard. It is simple to automate the burn of a visual layout. But nobody has ever figured how to make clicking buttons and dragging sliders create an interactive path. It is just too hard. Even if you did it, the complexity of the GUI interface would easily exceed the work needed to create it in code.

Finally, these tool don’t go for the obvious niche – creating an early-generation HTML prototype during an iterative design process. While the code might not be easily used or streamlined, it would provide a quick estimate of the complexity of implementing the final design. But the tools are marketed as a replacement for all this – jump from your precious design all the way to a finished site in one step…iterative development strategies be dammed.

So, my prediction is that we are not on the verge of a code-free world, and these tools aren’t taking us there any more than Acrobat “replaced” web pages. The designs enabled by these tools are in many ways a backwater, “brochureware” harking back to the earliest days of the non-interactive web before we knew it has different than print. An e-brochure may be useful for a design shop that needs a basic web presence. But nobody is ever going to create the next Facebook or Angry Birds in these tools. In fact, it should be noted that we’ve never seen a hot new website of the likes of Foursquare or YouTube created by graphic designers. It just wouldn’t occur to them, since they break beyond the limits of a picture, however elaborate. All these web 2.0 or 3.0 sites have highly interactive interfaces – a third dimension beyond 2d visual layout.

My second prediction is that the ultimate rout of these one-stop tools – as opposed to many useful online tools that automate features of web design that are easily automated in a GUI – will be sustainability. A designer plus a coder will always create a more efficient website than one of these tools. More important, a hybrid designer/coder will create designs that by their very nature are more adapted to the web, and therefore more efficient, even before going to code.

The real danger to Worried People is that growing subset of programmers who are discovering that design, which hard and challenging, are not impossible for them to learn. Brainscans show that creativity of all types – from programming to sketching – are right-brain activities. Contrary to folk wisdom, being good at design is a good predictor for being good at programming, and vice versa.

Those who say “I just don’t have a mind for code” (seen in SiteGrinder marketing pap) are just kidding themselves. What they really mean is that “I don’t want to learn another system.” Fine and dandy, but that doesn’t mean that your system is about to take over the web. Its more likely that web designers are going to keep doing web design

Judging from the rise in design quality seen on many “coder” sites, it’s clear that many hardcore developers are acquiring design skills. Its not easier for a pure coder to learn design than a “pure” visual layout artist to learn code – but the former may have more motivation. If they do learn to be hybrids, they are unstoppable. It’s not a case of John Henry versus the steam hammer – it is a case of balsa wood planes being replaced by metal ones. A team of hybrids will run rings around siloed artists cranking out pictures into the great code wasteland.

Sustainability, sustainable websites, and the “next great sustainability app” will all come from hybrids. “Code free” development tools should be used with caution, as they impact sustainability and ignore the interactive nature of the web. If you’re not sure about this, try watching the Internet, because, according to all those failed 1990s dotcoms,  it is “just like TV”.

6 Comments

  1. Not all graphic designers are illiterate in coding. It could be said the some web designers stemmed from a graphic design background – like me.

    In one of my first jobs, at an interactive agency, we built sites from scratch in BBEdit. No DreamWeaver or the like. No offense to DreamWeaver. The point is, although I see your gripe about unsustainable virtual design birthed without code in mind, your article rubs me the wrong way for assuming graphic designers are dimwitted “make it pretty” types, who do not consider the medium in which they design in.

    First, graphic design is a means of visual communication, which the web communicates visually with its audience, amongst other senses. Next, like other forms of effective design, considering the medium is just as important as the content delivered.

    I’d like to see a more open way of approaching this topic by maybe acknowledging that the visual aspect of design is not less important as the medium it is delivered through. Just my gripe to yours.

    Suites, PMs, Programmers, Web Designers and Graphic Designers etc unite. Things work better when we work together, acknowledging our strengths and honoring our talents and contributions. Think of it like altruistic evolution without the martyrization thing.

    1. Thanks for the comment! Your point about design being most important is well-taken. My complaint is not so much about graphic designers as the way that Adobe is marketing as if they were “make it pretty” types with Muse. In other words, Adobe is trying to encourage this attitude.

      The typical graphic designer if they work on the web, is well-aware of information design, user experience, and interaction design. Their goal is visual communication, regardless of medium. But Adobe isn’t going after this group – they are trying to grab a subset of the market who don’t think this way, which ultimately results in a bigger carbon footprint.

      In my opinion, there are three groups that mess up sustainable design:

      a. web designers who assume that the web is somehow replacing print itself, rather than forming a distinct medium. There are lots of these smug, gadget-laden types around, and their sites are often a lousy version of Aftereffects. They often assume that print designers are dinosaurs, and they are doing things the “right way”. They are frequently ignorant of the last 400 years of print design, and what it can do for the web, yet mock visual designers for not being “the future”. They’re great at wrecking projects by focusing on “features” instead of design. This group is responsible for stuff like mobile apps that run down batteries keeping (unnecessary) datastreams going.

      b. graphic designers who only know print design, are unaware of user experience (UX) or interaction design. They often assume the web is a lame version of their own profession. You have to admit that this is a pretty common attitude among print-only designers. The Muse promotion is full of messages that these ‘real’ designers can finally work on the web. Muse is appealing to that subset of graphic designers want to design without having to consider the medium. My complaint is mostly about Adobe marketing to this small sub-group rather than a profession critique.

      c. developers who assume people who can’t program are dumb. In a word, codebeasts. IMHO developers should be required to learn design to work on design teams. They’re great at hiding behind their code like a secret language, which in fact it isn’t that hard, just baroque. With the rise of web apps, this group may soon be the biggest problems for sustainability on the web.

      ======================
      Sustainability bottlenecks appear when these silos collide:

      a. a graphic design doesn’t understand user experience or interaction design, and creates pages that don’t work on the web

      b. a web designer who ignores everything we know about visual communication and only applies limited insights gained from the last 20 years of web design

      c. a programmer who fights with both kind of designers, ignoring their design in favor of something they can implement more easily in code.

      We also need to remember that the web has to support non-visual modes:

      a. blind people

      b. people altering the visual display for readability

      c. search engines

      d. people on very old browsers (including much of africa) whose computers can’t render complex layouts

      So, IMHO information design comes before visual communication. Considering that CSS potentially could style voice tone and delivery in the new text API, it is clear that part of web design is non-visual. It may become less visual as we strap on smaller mobiles, sometimes without any display at all (e.g. monitoring bracelets).

      Finally, the other thing that may be going on is that the “design” view in Dreamweaver is so bad that it begs for alternatives.

      1. I appreciate your poignant response and am on the same page as you. Thank you for your beautifully articulated explanation.

  2. What’s happening to the web is identical to what happened to print: creation is becoming democratized. I’m a print dinosaur, who has pasted up waxed galleys of type to create a page for printing. It was a specialized, arcane world of closely held knowledge. Then came PageMaker, then QuarkXPress, then InDesign, then Publisher – ten thousand (fairly ugly) flowers bloomed.
    There will always be room for code worshipers; the web needs them. But they will become the minority as visually-oriented tools become dominant. Yes, there really are Nervous People. They write code and think it’s prophecy. I can smell the fear.
    BTW, have you seen the newest release of Muse?

    1. Thanks for the commentary. Your point about democracy of design is important, and needs to be addressed. But the problem with these tools is not that they, or the web, are not finished with their evolution, but that their use encourages bad design, which also turns out to have a higher carbon footprint.

      The problem with SiteGrinder and Muse is not their GUI per se – but the fact that they pretend that the web is print, and encourage non-web design. The higher carbon footprints generated are not due to the software engineering (SiteGrinder, in particular does the best job it can), they are at the design level. These tools are problem for web sustainability not because they automatically churn out carbon-hog sites (in which case there would be an engineering fix), but because they encourage designers to create carbon-hog websites which mimic print. This, in turn, is because they try to shoehorn print design into a web context.

      In reality, the most important features of web design are information design and User Experience. Visual layout serves Ux, not the other way around. On the web, people use a variety of computers with different features, making in necessary to deeply understand design theories like Progressive Enhancement. The huge number of different screen sizes requires mastering Responsive Design techniques. Ux is necessary because the range of “use context” is much higher for interactive systems. Applying all these principles at the design level results in a more sustainable website.

      There are definitely lots of web designers that don’t do much code who do design according to these principles. But they didn’t come from their background in visual layout tools.

      If the design element is visual, a visual GUI is natural. So, Illustrator doesn’t have a console window for typing in a shape, since dragging the shape is visual. A non-code, image-based interface matches what is being created, which is a visual object.

      So, a web designer making a CSS3 gradient would be silly to type in the commands – here, GUI generators are vastly superior.

      But GUI interfaces can’t do everything. Interactive design and User Experience have many elements that don’t translate easily into a visual metaphor but are easily developed at the HTML and CSS level. True, one could make a bunch of visual symbols that you had to drag and click to define interactivity and Ux…but in the end it would much harder to master than creating in the “3nd dimension” of interactivity.

      Imagine trying to create a site like Foursquare with a series of menus and buttons. It might be possible, but would be much harder to do than typing in some markup and JS. If HTML was actually hard, or expensive (like pre-desktop publishing print) there might be a point. But HTML is free (unlike CS) and in the public domain, and no hardeer to learn than Illustrator GUI. My own experience in teaching both layout tool and code classes is that 80% of graphic design students pick up HTML and CSS very quickly, and leverage their design skills (esp. typography) to create outstanding designs in just a few quarters. For them, it is just another technique. In contrast, the ones who try to stay in visual layout, or use a Wyx template, make inferior sites (though often packed with good things).

      Muse and similar tools imply that “someday the web will be just like print.” The designer, encouraged by the tool’s visual metaphor, is encouraged to design in a less sustainable way.

      Visual layout is a partner with Ux and Ui, rather than all important. In recent years we have have been web use moving away from big monitors (which can approximate a printed page) to smaller, mobile systems, which are a better fit to the web as a medium. For example new specification for CSS includes “aural” styles – ways to style the web page entirely in audio for blind web users. People have been sued for making websites that don’t address the needs of the blind, which is something that never happens in print. And think about tools like Siri, and you see that many parts of the web are non-visual, and that in the future, no monitor at all may be a common way of using the web.

      Big monitors are still around – they’re getting bigger, and more interactive, creating a new “immobile web” of interactive billboards and storefronts. These systems would be a waste all they could do was make the billboard electric. But they are interactive, and their interactive features are not addressed by tools approximating print design tools.

      So, I can see a limited use for tools like Muse for creating online design books, which might be a fast, low-res version of the real thing. If the web was only an electric book, that would be enough. But, it is really a tiny fraction of the web. Applying non-web principles to the web (and using tools that reinforce this) lowers web sustainability. At present, the non-layout features of the web are best addressed by learning HTML, which automatically forces you to think about information design and progressive enhancement.

      Now, InDesign in CS6 can burn out first-pass code for an iPad, which is great, and far superior to Muse. Instead of pretending that the web is print, it tries to adapt itself to the newer medium, and provides some tools for adding interactivity (otherwise, why bother). But it is just a stopgap.

      In the future, I would be astonished if Adobe didn’t create more web-specific editors, probably themselves just HTML5 pages situated in Creative Cloud. In order to replace current code, these tools won’t just do visual layout. They will have an Information Design stage, User Experience, Progressive Enhancement, etc. These early stages are abstract, and won’t have a visual metaphor.

      In other words, they will look like code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s