Google Web Designer: the Review

Google Web Designer seemingly appeared from nowhere. The company launched the free HTML5 development application at the start of October 2013 during an interesting time in the WYSIWYG tools market…

• Flash does not have a future. Despite this, many advertisers still rely on Flash banners which cannot be viewed on iOS devices.
• Microsoft has dropped their Expression Web suite.
• Adobe is promoting Creative Cloud which is charged monthly and can become expensive for casual users.

The majority of online reviews have been positive although a little lightweight on the technical details.

Before I Begin…

I code HTML, CSS and JavaScript by hand. I’ve tried many web creation tools over the years but found them lacking. My main issues: they place an abstraction layer between me and the code, have a steep learning curve, take longer to use and produce awful HTML vomit which rarely works in all browsers. Many WYSIWYG applications have denounced the era of professional web design but it hasn’t happened. That’s because creation is a process — not a tool. I can buy bricks and mortar, but that doesn’t give me the time, inclination or skills to build my own house. Of course, some people will use a tool such as Google Web Designer and never hire a professional again. However, someone who thinks they can do your job is unlikely to hire you anyway. They would almost certainly be a client who saps your time and motivation. While I’ve tried to keep an open mind, be wary that I’m biased. Note also that Web Designer is a beta product and is likely to evolve.

Installation

Strangely, Google Web Designer is an installable application for Windows 7+ or Mac OS X 10.7.x+. Given this is a web design tool from Google, you would have thought they’d create a browser-based application? I tested the Windows version and, like other Google programs, the installer is a few hundred Kb which downloads several megabytes of resources as it installs. Download it from www.google.com/webdesigner/

The Interface

The application takes a long time to start but, when it does, you’ll be presented with an attractive dark-themed interface: Do you get a feeling of déjà vu? It takes design cues from Expression and Creative Suite. I hear through the grapevine that it’s been developed by a team of ex-Adobe programmers so perhaps that’s not surprising. The interface is clear and attractive although little customization is possible. I also found the right-hand property panel had too many controls — even on a large monitor, you need to continually collapse and expand panes to reach the option you require.

It’s Not a Web Designer

Despite its name, this is not a typical web design application. Some marketing messages give that impression, but Google Web Designer is primarily a tool for creating CSS3 animations on HTML5-based adverts. While it would be possible to create web pages, it’s not the right tool for the job. It doesn’t have text content creation features and won’t open .html files unless they were originally created using the application. Google Web Designer is closer to an animation or video application. A more appropriate name would be Google Ad Designer.

Creating Animations

Animating an element is straight-forward. You create an object such as a title or graphic then define keyframes which determine how it’s transformed in two or three dimensions using an easing functions. Once complete, CSS3 animation code is automatically defined to tween between each state. Animation is reasonably intuitive. Anyone familiar with video editors will recognize the “Quick” animation mode with simple keyframes or the “Advanced” mode with a frame timeline. Unfortunately, it’s not possible to switch back from Advanced mode once it’s been activated. While simple animations are possible, you will find it necessary to add CSS properties or drop into code view for anything more sophisticated.

View the Source, Luke

Google makes the bold statement “One idea. Any Screen.” The DoubleCLick Advertiser Blog states “Build once, run anywhere”. Don’t believe them. The first warning sign is missing preview options for Firefox and Opera. The HTML source isn’t the worst I’ve seen — although it suffers from an overload on unnecessary divs, ids and classes — but it’s shocking to find that it only works on Webkit browsers. That’s right, 50% of your audience won’t be able to see your lovingly-crafted animations. Far more people could view Flash-based advertising. Hold your head in shame, Google. If this was a commercial application, you would be sued for misleading claims (perhaps someone will?) There’s little excuse given that Google has forked Webkit and it’s the only engine yet to remove prefixes from CSS animation properties.

A Flawed Concept?

Google Web Designer will undoubtedly improve. However, to make the most of the application, you need to understand CSS3 animation concepts and properties. But if you can code CSS3, why use an application which can be slower and more irritating than a text editor? Perhaps some will find it practical for quick and dirty mock-ups but I have my doubts. I’m amazed by the positive reviews Google has received. It may be free, but that doesn’t equate to zero cost. I’m sure some will love Web Designer but I would hope professionals see through the marketing hype. The pros:

• It’s free.
• A reasonable interface.
• Easy to create animations.
• It could be useful for quick prototyping.

The cons:

• It’s not a web design application but an animated advertising tool.
• Unable to open HTML files not created by Web Designer.
• Difficult to achieve exact results without delving into the source code.
• An utterly useless product until it supports all mainstream browsers.

In summary, Google Web Designer is too difficult for novices and too clunky for professionals. Avoid for now.

Frequently Asked Questions (FAQs) about Google Web Designer