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:

Google Web Designer

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.

Google Web Designer

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Alok Jain

    How this tool is technically different from Adobe edge animate? I think they both have same purpose, create HTML5 animations.

  • Anonymous

    Edge Animate works in all browsers and devices. This tool only works in Webkit browsers so it is not compatible wit h a very large percentage of users browsers. Edge Animate also works/integrates well with other development software. Not the case with this product. It still has a ways to go before catching up to Animate.

  • Anonymous

    Code by hand is and ever will be the best choice.

  • Nadav

    Great review. Not too biased :)

  • J Polk

    Thanks for the review, I was curious about this product. It should be noted, however, that Flash CC can effectively export great looking animation to HTML5/JavaScript using the included createJS toolkit. And as Alok mentioned, Adobe Edge Animate creates similar work, although it is not free. I think Google’s new tool here will be appealing to the non-professional who doesn’t want to pay for more useful tools.

  • Fredrik Delin
  • Mark

    Another con; Its a “beta” product from Google which means you had better not come to rely on it because they might withdraw it at any time.

  • EastCoast

    Google have also had ‘swiffy’ for a while, an add-on for adobe flash that outputs from that application to ‘html5′, and strangely the output is supported in most modern browsers: https://www.google.com/doubleclick/studio/swiffy/gettingstarted.html#support

  • satya prakash

    I just recently discovered it and plsnned to check it. Now, i wont. I do do creative creation. Thanks for saving time.

  • satya prakash

    Typing on tab is not easy. Many typos etc

  • Anonymous

    Seems you may have bought to much from the hype, step out of the box and see it as just another tool for the tool belt.

  • wyatt biker

    You are right about how google couldve easily made a web based designer. But if you really want to see a good example check wix.com.
    wix.com has the one of the best web based designer I have seen. But it is online paid only and you don’t get to see much HTML.

  • J Mchael Carrigan

    I’m learning Edge Animate now. I was happy with it – I think. I regularly use Dreamweaver CC and Notebook++. If I can put an An in a web design in Dw That would be good – I think.

  • Eric P

    Good article thanks for the review.

  • alex

    ill give you another con
    try downloading from country and / or pc that doesnt have english as a native language
    you ll get the localized version of the app without the possibility of the changing it or choosing from another version
    also an ‘official’ post on google groups forum state that is currently impossible to change the language and what you could try is change the language settings of your pc

    quote :
    GWD currently uses the operating system’s locale settings to determine which language version to use. For now, the only way to change to the English version is to update your operating system to an English region based setting.

    Thanks,
    Nivesh
    (Google Web Designer team)
    https://groups.google.com/forum/#!topic/gwdbeta/wMPUd_mz5Qs

    quote end.

    its like someone took the worst features from all the tools , editors and so on and created an uber lame piece of software

    :((
    alex

  • Anonymous

    “Flash does not have a future”…? Are you sure about that. I’d say HTML table based emails didn’t have a future and yet 10+ years later we still use them like it’s 1999. Also i’m not sure most people are going to really LOVE HTML 5 ads like they think, at least with Flash you could uninstall it. With HTML 5 it’s going to be very tempting for ad developers to have everything on the page an interactive ad melding with page content and just in your face like nobodies business.

    But I also think Adobe made a massive mistake with getting rid of Flash on mobile (as a plugin). If anything they should have just made it an animation platform with a simple feature set for iOS. It still has the best tools and silly easy to create with. Oh well. Just sad because it has another 5-10 years it could have run for and genuinely made the web better. Without the Flash plugin I feel like we’re back in 2004, and we sort of are. Look it’s a simple animation that’s standard complaint! Oh, like Flash did 10+ years ago, yeah, that’s amazing : ( Also makes it silly easy to create Apps.

    Anyways, before I knock HTML 5 anymore (i like it just as much as the next dev) anyone catch the hover.ie demo? Great use of HTML 5. Loved it!

    • Anonymous

      I have nothing against Flash and it continues to serve us well. However, HTML5 can now perform much of Flash’s functionality and it works on mobile. If you have a choice between learning HTML5 or learning Flash, I know which one I’d recommend…

  • Anonymous

    HTML5 Web Developer are still invaluable!

  • brad

    Great article and i think nothing is invaluable..! its uses in different criteria.
    http://www.dubaiwebdesignagency.com/abu-dhabi-web-design.php

  • Anders Bakfeldt

    exactly the ice cold cynical review I needed to be able to make up if this was something I needed to look into. thx!

  • Johan

    Thanks for the review Craig! Biased? Ha.. it may sound a bit cynical, but I think you did a great job.

  • Vlad Olaru

    Just one thing: check out macaw.co

  • Rory Picko

    If the only reason it only works in webkit browsers is because of the prefix-less css output, wouldn’t prefix free make it cross browser compatible
    http://leaverou.github.io/prefixfree/

    • Anonymous

      That’s not the case; it’s outputting CSS with -webkit prefixes even though those properties are supported without a prefix in other browsers. Prefix-adding tools won’t necessarily work because they add prefixes where they’re required. In this case, they’d need to remove prefixes.

  • Patrick Grey

    Good review thanks. I needed a flexible tool for my clients to build E-learning animations and interactions. I settled on adobe edge animate but I wish they used css animation rather than JavaScript based animation. This tool takes the right approach in that respect so it will be interesting to see if they develop it further to get over points you note where they have got it very wrong.

  • Sean

    That sounds about right. Thanks for giving an honest review.

  • Anonymous

    Hello guys how about Macaw, the Web design tool : http://macaw.co/ thanks

    • david

      I like the idea of Macaw from what I’ve seen… but I think it’s only coming to Mac (could be wrong though). Pretty much a no go for me.

  • jonniegrieve

    I don’t want to trump the opinion of the article in the sense they’re obviously experts of web design. I just wonder how much the authors have participated in the Google Web Designer Beta forum in which the very first Users of GWD are able to ask the engineers for feedback on the current release and what is to come in the future.

    They have answered questions that the article has asked. About why they named this application Google Web Designer. They have answered a million questions about future features and sub features that will be added in future release.

    Nothing in life is perfect and as they say, Rome wasn’t built in day. I personally I’m going to stick with this program and it’s primary focus which is HTML5 animations. All I want to say is don’t give up on GWD there is so much more potential to come.

  • Tim

    This app still needs to improve a lot before I’d use it… for anything. Tumult Hype is way better and way easier to use. Worth paying for if you do any sort of web animation. I’m sure Web Designer will improve, but more than likely Google will abandon it in the future like it has so many other projects it started (or bought).

  • Anonymous

    While I have always had issues with editors like this I do like the idea of a tool to create animations. But more importantly I like the idea of creating banners for use in AdWords that are animated but don’t use Flash.

  • Goldtree

    How about this? Most new technologies are not readily accepted by the world – so I am not shocked that the Google Web Designer project has not got the credence that its due yet. Time will tell. So lets all give this product a chance to grow before burying it. I said the same here http://bit.ly/1cpPd7L

  • Philip

    It’s actually getting entertaining watching the denial on the side of the “Flash is dead, and HTML5 is taking it’s job…” folks. Keep trying. Say it’s so, and your mental force will actually bend the laws of the universe. Everyone knows that.

    • Anonymous

      Philip2 while i’m glad you’re entertained but I don’t believe anyone has ever said Flash will be around forever and ever (even Macromedia and Adobe thought it had a shelf life). Who ever gave you that idea / perception? It like HTML 5 will be replaced at some point, HTML 6,7,8 (something else)? What Flash supporters don’t enjoy is the needless death of a platform that has legs still and where the development tools are worlds ahead of others. So no mental force is needed to keep Flash alive by anyone, just the fact that it’s an amazing tool even after it’s ‘death’ is enough to push it forward. That is until the tool set on the HTML 5 side gets to the same level of quality.

      And just for fun…
      Now let’s flip that argument and say HTML 5 was deemed a bad thing by Apple because it’s not as secure, its buggy and slower than just having Apps, nothing but Apps is the new way to go now. Basically the reasons given about why Flash had to go. They’d be right you know, do you take the side of Apple? I bet the answer is no, because HTML 5 is awesome, easy and flexible (and it is).

  • Rob

    I was just using it for a 4 days now doing banners…. I agree it needs a lot of improvements. And yeah, name Google Ad Designer fits more here. WYSIWYG apps are good for people that don’t know how to write code by hand…If something goes wrong you have to go to the code… And what then? :) I had that issue and I had problems finding the bugger responsible for the issue. Because the code was written by the software and not by me… I had to dive through strange classes and id’s. When you write code yourself you won’t have that problem… When I clicked “publish” and view it in Firefox I had a blank screen… The text was there but the images were not showing. I googled and I found this article saying that it is not working in Firefox (works on preview but not when published). Works in Chrome and Opera though… Safari also shows the animation but some of the animated objects (in my case text) that goes off the artboard are still visible. On all all mentioned by me browser a infinite loop animation speeds up after the 2 or 3rd loop making object starting to overlap each other. For animated-web-stuff I’ll suggest Adobe Edge. And people using flash can convert their .fla files using Adobe Wallaby (if still available).

  • Jonathan Duran

    FYI (re: vendor prefixes) – In code view you’ll only see the -webkit prefixes since this app is essentially a web-app running in a Chromium shell. If you Publish the content, you’ll get the option to include the different vendor prefixes (or not).

    • Anonymous

      Except that it still doesn’t work (Firefox fails for certain) and the tool adds another 40KB+ of compressed JavaScript. Also, why should you need to “Publish”?

  • Anonymous

    How about other tools that do kinda the same but much easier to use?
    For instance http://html5maker.com ? Is there any reason to use google’s web designer instead of it?

  • Philip La Vere

    adamlongaway – I think you misunderstood me. I am a great lover of Flash and don’t think it’s shelf life is over at all… I was referring to the mantra of “Flash is Dead’ which has to be constantly repeated by it’s detractors in the hopes that one day they will kill it,

    Just search for ‘Flash Android’ on youtube to see the thousands of videos devoted to showing people how to install Flash on their Android devices, and you realise that corporate manipulations designed only to safeguard mega App store profits still cannot undo people’s love for the platform… or their determination to keep it alive.

  • hamza

    acc u said right . google should change the name “google web designer ” to “google add designer”. …

  • Anonymous

    This is just a followup to the statement made here that “The first warning sign is missing preview options for Firefox and Opera.”

    So I recently downloaded and tried out the Beta and found that I did get a Preview option for Firefox but not for Opera. That got me wondering if the preview options shown were based on the browsers actually installed on that local device. Turns out that was the case — when I installed Opera on my Mac, I was then able to see the “Opera” option show up for Preview as well.

    I was curious to know if that was the case for you, or if this was just something that was corrected in the tool after this review. Regardless, thanks for the review. It was informative and made me curious enough to try the tool out.

    • Anonymous

      Hi Nitya. Perhaps they’ve updated it – they certainly needed to. The first version I tried didn’t have preview options for Firefox and Opera despite them being installed.

      • Errol

        The first preview version I installed didn’t have preview option for Chrome but it did give me preview options for Firefox and IE.