Google creates a great HTML5 design tool -- with one gaping flaw

An error icon in Chrome. Credit: screenshot

Google’s Web Designer, which launched last week, fills a hole in the world of HTML 5 development tools. With Adobe moving Dreamweaver into its Creative Cloud (and keeping its Edge HTML 5 tooling for subscribers), and Microsoft folding its Expression and Blend web design tools into Visual Studio, there aren’t many low cost professional grade tools available. With more and more enterprise applications using web APIs and HTML 5 user interfaces, that’s a big gap that needs filling.

Unfortunately, Google also seems to be using the tool as a way to promote Chrome, rather than fully embracing cross-browser development standards. That makes it hard to recommend.

WYSIWYG Chrome Design

The most important thing about Google Web Designer is its design surface, which is, well, Chrome. That means you can test your code without leaving a page, and you can flip between code and design views to see just what works. This approach simplifies development and debugging, and while you can quickly launch any of your currently installed browsers to see pages, it’s good to be able to see what you’ll be getting as you write code and lay out HTML.

Laying out pages is much like using a desktop publishing tool. You place layout areas on the page, using alignment tools to get everything in place. Properties sheets let you add extra detail, and you can quickly build in-line CSS formatting for each <div> and <canvas> element you place on a page. There are also options to work with events, and to manage page sizes.

Credit: Simon Bisson
Creating an HTML 5 animation in Google Web Designer is much like working with Flash - timeline and all!

Google Web Designer isn’t just about designing your own web apps and pages -- it’s also intended to be used to create HTML 5 advertising for Google’s own services. That’s a smart move, as it makes it easier for ad designers to bring in assets from Adobe’s Edge tool set and package them as Google ads. You can drag and drop advertising components onto a standard size advert, but you can’t use them in your web pages.

Even so, there’s plenty of scope for designing HTML 5 interactions, including a Flash-like timeline view for developing HTML 5 animations. All you need to do is choose the animation path you want to use, define a few key frames, and then let Web Designer do the rest. You can choose to start in a Quick animation view, or choose the option of building more complex animations in an Advanced authoring tool.

Google has given Web Designer plenty of animation tooling that’ll be familiar to Flash developers and designers. There are path designers, 3D translation and rotation tools, and access to a library of web fonts that can be used to deliver more complex text effects. It’s worth dropping into the code editor if you want to tweak pre-generated elements. The code editing tools aren’t just for HTML; there are options to use them to create CSS, JavaScript, or XML.

Credit: Simon Bisson
Web Designer's built-in code editor works for CSS, XML, HTML and JavaScript.

Online help is limited, but remember that this is beta code. It would have been nice to see more focus on using Web Designer with web APIs -- especially those in Google’s own AppEngine Platform as a Service offering, or from its Maps and Docs offerings. With more HTML 5 being used as a user interface to cloud applications and services, leaving building applications to a basic code editor seems more than a little short sighted, especially with the availability of open source HTML 5-based JavaScript development environments that would have worked well in Google Web Designer alongside its visual page design tools.

Why WebKit?

We do have one major reservation about Google Web Designer: much of the code it generates uses WebKit prefixes, which means results won’t display well in Firefox or Internet Explorer. While Chrome is popular, it’s still only a fraction of the overall browser ecosystem -- and most enterprise desktops still use Internet Explorer. A full-time web developer will know how to add cross-browser code, but most casual users won’t have those skills.

That means it’s far too easy to use Google Web Designer to produce pages that lock users into Chrome-specific features. Some elements do generate prefixes for Firefox and IE, and while you can turn them off, you can’t turn off WebKit prefixes at all. 

With the various technologies that comprise HTML 5 close to standardization, it’s really not necessary to use browser prefixes for technologies that are in most modern browsers. A proud proponent of the open web, Google is making a large mistake introducing browser-specific code into a visual design tool that’s intended for a wide range of users -- and for everyday sites, not just for experiments.

Forcing users into working with one browser, and one browser only was a mistake that Microsoft made back in the 1990s, and the results ended up affecting the web for decades. This first beta of Google Web Designer is a well-intentioned start, but if it’s to become the tool of choice for all classes of web developer, then Google needs to step outside its WebKit bubble (especially as it’s now forked WebKit and is developing its own variant, Blink) and deliver a tool that works not just with Chrome, but with Safari, Firefox, and Internet Explorer all the time. Until it opens up to other dialects of HTML 5, you’re going to get plenty of flashbacks to using FrontPage to develop for IE 6; about the only thing it doesn’t do is slap a “Best in Chrome” logo on your page.

That apart, Google is clearly filling a gaping hole in the web development world. The result is a credible first attempt at a modern HTML 5 development tool, with tools for working with some of the modern web’s more complex animation and design features Just be prepared to do more work than you might at first expect.

From CIO: 8 Free Online Courses to Grow Your Tech Skills
Join the discussion
Be the first to comment on this article. Our Commenting Policies