Online Accelerators and Web Sustainability

Continuing the discussion from the last post, let’s look at the growing horde of online software tools or “accelerators” that are being used in web design.

While no GUI web editors produce complete web design (meaning that they effectively support things like “Mobile First,” “Progressive Enhancement,” usability and accessibility) exists, there are plenty of smaller apps which remove the need to type in code.

From a sustainable web design perspective, this is a plus, since it potentially makes web design available to a larger audience. While basic HTML markup is pretty easy to understand, the details of other programming languages can be daunting. And many of the new features available to designers on the web involve advanced visual manipulation. This seems to point

However, online accelerators are narrowly targeted. There are few that create markup (though the releated generation of wireframes is something I’ll touch on below) and none that build significant amounts of JavaScript interactivity. Is this a glitch on the way to a code-free GUI world? Or are there aspects of web design and development that can’t sustainably be reduced to a visual image?

First, the gallery:

CSS Generators (general)

CSS Images, Patterns, Backgrounds

CSS Transitions and Animation

CSS Buttons and Shapes

Some additional tools

In the world of CSS, there isn’t much difference anymore between what a web page can render and a Creative Suite style tool can generate. The tools above often replicate a typical CS panel, so much so that some might be raising hackles over at Adobe. This leads to some interesting trends. On one hand, existing GUI tools could mimic these online tools and generate CSS. On the other hand, the online tools are free, instead of costing hundreds or thousands of dollars to license.

But we don’t see anything similar for HTML and JavaScript. Tools like DreamWeaver can generate HTML in the so-called “Design” view, but outside of community college classes, nobody is seriously using this feature. The reason is that HTML, unlike visual design is not about something visual. It is information design that is only secondarily visual after being “presented” via CSS. If I need a gradient in my visual design, doing that visually is a natural and intuitive way to do so. In contrast, HTML is about parts to whole relations of information or (ick) “content.” A visual metaphor for the abstract process of information design doesn’t work as well as setting up the markup, which, as noted above, really isn’t that hard to do.

There are gui tools that create markup, or the equivalent information design, collectively referred to as wireframe generators. I’ve listed a few of these below:

A naive visual designer might wonder why these tools don’t include CSS accelerators. After all, it is easy to create a visual interface for CSS3 features. Why not add them to a wireframe tool, and get a complete GUI design editor? The answer is information design. Long experience in the design process has shown that creating the basic layout and organization of content on a web page is hindered, rather than helped by, “drawing” with full color palettes, typefaces, and the like. So, the wireframe tools create a visual metaphor – but one that is as sparse as possible to minimize the belief that you are actually drawing the web page the way you would draw an Illustrator graphic.

A different problem with similar consequences shows up with JavaScript. There have been lots of attempts to automate JavaScript interactivity, the Spry library being one of the most infamous. Despite the effort spent in developing these tools, they are not in common use. Instead, we have very design-centric tools like JQuery which still require learning an object-oriented programming language.

Like information design, web interactivity can’t really be reduced to a visual metaphor. One could, I suppose, create a bunch of panels with lots of fields and buttons for creating the kind of “hero’s journey” favored in interaction design, but in practice it is better to start with paper prototypes, and jump to prototyping in code. It just doesn’t help to drag around interaction symbols with your mouse onscreen.

So, looking at the mismatch of online tools for HTML vs CSS and JavaScript, one hits on the route to web sustainability, which is expanding the process beyond purely visual design:

  • Information design/User Experience – HTML or wireframe
  • Interaction Design – JavaScript, like Porsche, there is no substitute
  • Presentation (layout) – Direct CSS coding
  • Presentation (styles, typefaces, effects) – CSS accelerators (online is free, and therefore more inclusive)

What will the long-term hold? It seems likely that there will be some consolidation of online tools into packages that inter-operate. It seems less likely that they will be replaced by a commercial GUI visual design tool. After all, one is free and one is not.

A bigger issue is the efficiency of lots of little online editors, vs monolithic systems like Creative Suite. Wil the Internet’s decentralized model prove efficient in the long run? Or will “virtual economy of scale” drive these micro-visual editors into a larger suite?

Leave a Reply

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

You are commenting using your 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