“Pushbutton” design and “Web editor” sustainability


During the 20+ year history of the web, there have been several waves of “push-button” website generators online. Unlike graphic design, there has never been a definitive GUI editor for the web (no “Photoshop for the web” tool), and professional web work has stubbornly remained in the HTML/CSS/JavaScript namespace. Looking from Adobe Creative suite, legions of non-web designers have wondered why, and then sought a GUI editor that will provide a “code free” design environment that lets them quickly crank out a site.

Here is a good list of those sites feeding that hope:

Is the hope justified? We’ll consider this question in terms of web sustainability.

At first glance, a general-purpose GUI method of creating professional-quality web pages would be useful – it would help improve web sustainability by allowing more people to create web pages. Inclusion is a feature of all sustainability frameworks.

But in practice, at least for general-purpose professional design, there aren’t any tools that fully GUI the design process. The reason is due to the web’s nature as an interactive system. Web pages are not images. Web designers create an interactive process, not an image, which makes the web more like industrial design or architecture, and less like traditional graphic design.The visual layout of a website is subordinate to the designed interactive process, not the other way around.

While designers often “draw” web page comps, this is a small part of the professional web design process – each web page “image” has to be backed up by extensive work creating an interactive process. A meaningful web page comes from an earlier wireframe based on Information Design. The wireframe must be validated and justified by User Experience (Ux).

Another layer of complexity is the need to support multiple layouts. When one sets up a new document in Creative Suite, the first thing required is a specification of its width and height. All elements have their position relative to the document corners. But on the web, there is (by default) no width and height to documents. CSS lays out web pages by relative positioning between elements. This relative method enables strategies like “Responsive Design,” where several layouts seamlessly meld into each other, each adjusted to the size of the screen they display on.

While in theory a web editor could implement a visual equivalent of the Responsive Design strategy, at present they do not. Nearly all web pages pre-designed in Photoshop are designed only for the designer’s graphic workstation – with its relatively large screen.

In addition, professional web design must address accessibility, in particular for individuals with visual impairment. Accessibility guidelines for websites require that websites offer an alternate audio-only or text-only version of their information, and audio components must have equivalent captions. This means that web design has to break completely out of the visual, and consider multiple visual/non-visual ways of conveying the site’s information.

http://www.eweek.com/enterprise-apps/doj-may-apply-ada-accessibility-guidelines-to-websites/

A web editor could be created that provided support for accessibility, ARIA roles, and alternative text. However, it’s likely that the resulting GUI interface would have an even worse maze of panels and micro-icons than those that currently grace Creative Suite. And people treating web pages as images would simply ignore the non-visual aspect, and “draw” the page. Some things are not usefully reduced to pure “drag and drop” visual language.

We have precedent from Adobe Flash and its run-in with accessibility. In the early 2000s, Flash came under fire for its lack of access. “All Flash” websites locked out Even after text meta-data features were added to Flash, the typical Flash designer completely ignored the non-visual components. After all, Flash is movie-like, and you can’t sue a theater because blind people can’t see the movie! But movies, like most 20th century media are one-way, and don’t include the usability and accessibility features required for the web. The problem, among others, is a reason for the decline of Flash from its peak about 2006.

In short, building a website requires a lot of design work extending beyond drawing shapes or images relative to a fixed-sized document, even though web pages superficially resemble graphic images in other media. This is one of the reasons that professionals are still working with HTML and CSS. There is, as they say, no “easy” button.

What about those sites that allow you to create a website “by pushing a button?”  These sites specifically target “creatives” with the promise of an instant website. And they do work, but this is not web design. If this isn’t obvious, consider how most graphic designers feel about the following websites:

Wordle – http://www.wordle.net

PiktoChart – http://piktochart.com/

Visual.ly – http://create.visual.ly/

Infogr.am – http://infogr.am/ (interactive infographics, no less!)

Venngage – https://venngage.com/

These sites also advertise themselves as letting anyone create “beautiful graphic designs” without a hiring a graphic designer. You don’t have to learn anything about Photoshop or Illustrator. Is this graphic design?

Does this mean we can live in a “graphic designer free” world soon?

Nope. And the same goes for web design.

But this argument makes sense only for professionally-built sites. What about sites for individuals?  What about a listing for plumbing service? We can ask whether is it more sustainable to create “amateur” pushbutton websites without code work.

After all, a plumber really doesn’t need general purpose design – they just need a site that is equivalent to a phone listing. If their site’s design is “cookie-cutter” and comes from a canned template, that’s not a big deal. The alternative – that we require everyone to work in code even for the simplest sites – is a less sustainable choice.

Historically there have been many attempts to create GUI-designed web pages. In the 1990s, it was GeoCities. In the early 2000s, MySpace accidentally made millions of teens into (lame) web designers. Today, we have a new suite of web editors with greater sophistication.

At the first level, we have sites like Behance, which allow illustrators to upload portfolios without making a separate website. More recently, Behance created an API to build a more customized portfolio page (requires some coding):

http://webdesign.tutsplus.com/tutorials/how-to-use-the-behance-api-to-build-a-custom-portfolio-web-page–cms-20884

Free-standing websites may be created with the likes of Wix, Weebly and others. In addition to visual design, these editing sites provide lots of templates which fit common website uses. This makes the resulting sites a bit less garish than earlier systems. Clearly, they’re appealing to the “push-button” mentality of the web – people want a great website, but they want it to happen automatically.

At the more sophisticated level, we have WordPress. Basic sites are pretty easy to put up, and there are lots of templates. WordPress has lots more support for customizing design, so much so that professionals can use it as a basis for their professional work. A WordPress guru can create pretty much any design they’re given. Recently, this has become true for SquareSpace, which has a developer layer in addition to their template-based design tool. A sophisticated designer can adapt a SquareSpace template to an arbitrary design. It looks, in fact, like SquareSpace is trying to become the new WordPress.

Now, I’ve created sites using several of these modern “Web Editors.” Basic sites are easy, and the canned templates are useful. If your client is someone who doesn’t care about original web design (e.g. a indie video company who wants some film shorts online) it works.

For this group of clients, using a web editor is more sustainable. The “embodied energy” of the site (which sums up time, materials and effort used in design) is less than one built from scratch.

However, for higher-end design for large clients, the editing system will get in the way. Like all frameworks, it will be necessary to learn the framework for the web editor. It doesn’t make things less complex – it just reformats it as a bunch of visual interfaces instead of text markup. In these cases, it is more efficient to “prototype in code.”

Another issue for web editor sites is the degree of their Web Performance Optimization (WPO). WordPress is notorious for supporting sites which have massive carbon footprints, with hundreds of HTTP request needed to create one web page. The WP design process, in trying to hide the code, ends up hiding whether the resulting design is efficient or not. A WP guru can solve the problem, but most WP sites are not built by WP gurus.

Finally, web editor sites seriously over-promise what they can deliver. This should be factored into sustainability thinking. Like Adobe Muse, Wix promises a “code free world” and implies that truly creative websites can be created by pushing a button. The content is creative, but the site is not – it is a generic template.

This becomes evident the moment the website owner wants to change the template. Altering the template requires professional work. There is no “pushbutton” route to refining the design.

Based on these considerations, I propose rules for Web Editors under the larger principles of Sustainable Web Design.

  1. Clients needing a listing on the web, and no more – Wix, Webly
  2. Graphic Designers who need a place to park their illustrations – Behance
  3. Graphic Designers who need a place to put their portfolio, and a blog – WordPress, SquareSpace
  4. Hybrid Graphic/Web designers – WordPress (using HTML/CSS back-end), SquareSpace (using the Developer interface)
  5. Web Designers, Agency/corporate sites – original HTML and CSS work from scratch

The take-home?  “Push-buttoning” original design often comes at the expense of sustainability.

 

 

1 Comment

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