Is this finally the era of wysiwyg web design?

Posted on 16 Feb 2012 at 15:35

Tom Arah investigates whether the dream of design-rich, code-free web authoring is finally coming true

You may have wondered why a web designer’s life has to be so hard and, in particular, why you can’t create pages in a simple wysiwyg environment, like those used for print or PDF documents.

This dream of “code-free” rich design is finally being realised – so is the future of the web going to be wysiwyg? Before I look at modern authoring tools, let’s remember why the problem arose in the first place.

The beauty of wysiwyg authoring was that you could concentrate on design without having to worry about coding

It was because HTML is a page mark-up language, as opposed to a page description language such as PostScript, which specifies every detail of a page’s appearance, from each line’s placement within multiple columns to the fonts to be used. HTML was devised to say nothing about presentation, but merely to divide a text into structural segments using semantic tags. Tim Berners-Lee’s HTML represented every page as a single column, and delegated typographical choices on how to render the text – typeface, size, alignment, leading and so on – to the viewer’s web browser.

However, from the moment Mosaic/Netscape’s popularity made the web graphical, both consumers and creators began to demand more design choice, and software developers met this demand with dedicated authoring tools: Adobe PageMill and PageMaker, Microsoft FrontPage and Publisher, GoLive CyberStudio, NetObjects Fusion, QuarkXPress and scores of others. All of which promised to make web design as simple as print design with visual, code-free, wysiwyg design modes.

First-generation wysiwyg

These wysiwyg packages let you add box containers for text and style them by choice of typeface and size, although most shied away from advanced capabilities such as multiple columns, adjustable leading and text runaround. However, some DTP packages went the whole hog, promising to output any print design for browser delivery, and soon even office productivity applications were promising to let users “print to the web”.

The beauty of wysiwyg authoring was that you could concentrate on design without having to worry about coding – you could leave all the HTML and graphics to be generated by the authoring tool, and all you needed to do was preview the results and check everything was how you wanted it before posting to your server.

The difference between this wysiwyg dream and harsh reality became apparent soon enough. You suddenly discovered that your beautifully crafted design looked a complete mess on Macs, or that the scrolling marquee tag was supported only in IE, or that your careful choice of fonts had been ignored. And most embarrassing of all, your entire page looked as expected only because it had been rasterised into a GIF of gigantic size!

The realisation dawned that web publishing isn’t the same as printing, nor even local previewing. There were good reasons why Tim Berners-Lee restricted HTML as he did: returning to a streamlined structural text mark-up was the only reliable way to deliver content to the multiple platforms and browsers used by a huge and diverse web audience, and to make content easy to find by search engines. HTML’s lack of design power wasn’t an easily rectifiable oversight, but reflected the nature of the medium. Web designers needed to work within the limitations of cross-platform browsers, to work with HTML rather than against it.

This return to the drawing board didn’t mean cutting out design completely, since you could still divide up your pages to create a simple layout using table tags and specify font tags – although the latter had to be used sparingly and specified as font families, falling back to generic “sans” or “serif” if an end user didn’t have your preferred font installed. Such HTML-only design was certainly rudimentary, but with judicious use of web-optimised bitmaps it was possible to give your pages character, branding and impact.

Former print designers began to appreciate the beauties of HTML and simple web design: keeping tight hands-on control over your own HTML meant you could be sure that the results would be streamlined, efficient and guaranteed to work across all browsers and platforms.

Armed with new understanding, it became apparent why automatically generated wysiwyg code had failed. Building complex layouts from multiple nested table elements, dozens of table cells held together by transparent GIF-based spacer img elements, and hundreds of font tags specifying typeface and size over and over again, created an unreadable and unmodifiable rat’s nest of code that was a travesty of Berners-Lee’s HTML vision. The fact that HTML wasn’t PostScript had never been more obvious, and this first attempt at wysiwyg web authoring was dead in the water.

1 2 3

Subscribe to PC Pro magazine. We'll give you 3 issues for £1 plus a free gift - click here

From around the web

User comments

But is it accessible?

i.e. Can the HTML it produces be read legibly by a screen-reader, making it available to blind users? I'd be very impressed if it can, but from the description I'm sceptical.

By ChrisH on 17 Feb 2012

....single sided.

More an advert for Xara than dealing with the issue in the title of the article, Tom.

I actually bet a colleague that you'd only mention one CMS in the entire article. And there it is at the end, Wordpress. While I extol it's virtues, it's not the only kid on the block with Joomla and Drupal also providing huge chunks of the web.

By CraigieDD on 17 Feb 2012

Interesting read

I'm in no way any sort of web developer and heres the reason.

About 10 years ago I spent weeks making a site in Frontpage, I add in all those ie6 extensions, put in some great bits and spent ages on Photoshop making the graphics etc. To be honest, it looked great. I was staggered by my amazing work and began to think I could be some sort of web pro in the years to come.

Then I tried it on another computer, Oh dear. Then another, bugger. etc etc On mine it looked great, on a few others it looked great, but on 80% of PCs it looked a complete mess. At this point I gave up.

By JStairmand on 17 Feb 2012

Interesting...

I work for a Web-design company and although I don't do the coding, I get to 'enjoy' all the horrible compatibility issues inherent in the current state of things.

The problem of moving forward while trying to maintain backward compatibility is pretty thorny.

As for WYSIWYG I don't see it any time too soon for the reasons you put forward....

By wittgenfrog on 17 Feb 2012

Web 2.0?

What about the web 2.0 technologies like AJAX and jQuery? How would these fit into your WISIWIG dream?

By atomz on 17 Feb 2012

Help

what is "wysiwyg"?

By curiousclive on 19 Feb 2012

^what you see is what you get

Dreamweaver was great - split view wins. It would force me to hand code some bits but was invaluable in terms of efficiency. I haven't had a computer for 2 years now, so I'm a bit behind (last used css2), but I hope to remedy that when I buy my next solar panel (I'm off-grid).
I think the best we'll ever get is WYSIMWYG

By dubiou on 19 Feb 2012

CMSs

Another thing that killed off WYSIWYG was the rise of content management systems. I'd be surprised if any web design firm was putting out sites nowadays that weren't backed by a CMS. How would you get a design from Xara into a Joomla/Drupal/Wordpress theme if it's such a tag soup?

By markvr on 23 Feb 2012

But CMS is awful for design

Well roll on "web design 3.0".

If you take a step back, the problem is that there is no middle ground between design and content.

Xara is superb for designing a web site, or the pages within a site. However, it is awful for adding and managing content. Everything has to be done manually; to add a page, you can't simply upload content, you have to create the page.

CMS are awesome for managing content, as they generate the page. But, they are awful for web site design; one is stuck with the template. Sure, you can use Artisteer to change the font or the colours, but the layout is the same.

"Use CSS" is the usual response from the CMS community, who simply fail to understand that I dont want to learn CMS, I want to design a site.

"Print is not the same as the web" Actually, it is exactly the same from a design view; design is about form, not factor. if it doesn't look good, people wont like it. If a page looks cluttered, then is it visually unappealing. Look at the current trend in Joomla templates to produce sites with two text "columns", bordered on either side with vertical menu areas, with multiple main menus, a poll, RSS feeds, a horizontal menu, and a menu in one of the corners. How confusing?

"You dont have to use all the menus". True. But I can't repurpose the space and so end up with an unbalanced page.

"use CSS to.." hello... we are back to square 1, I dont want to DEVELOP a site.

"Use a WYSIWYG tool"... great, now I have to worry about content management and page creation again.

My frustration can be encapsulated like this: its madness that in 2012, in order to resize a text box in Concrete5/Joomla/Wordpress, I have to write code by hand, on a platform that uses a GUI, for an audience that will interact via a GUI...