How to use Google Web Designer for HTML5 design on Linux

Google Web Designer is a GUI tool created by Google for designing advanced HTML5 content using an integrated visual editor interface. It can create an interactive HTML5 web page as well as animated graphic ads that can run on any device. This tool is finally available for Linux, while it is still in beta stage. The minimum requirement for running Google Web Designer tool is as follows.

  • OS: Ubuntu 12.04+, Debian 7.0+, Opensuse 12.2+, Fedora 17+.
  • Memory: Minimum 2 GB, but 4 GB is recommended.
  • Screen resolution: 1280 x 1024 or higher.
  • Size of application window: 1024 x 768.

To get this tool installed into your computer, use the commands below.

Go to http://www.google.com/webdesigner, and click on "Download Google Web Designer Beta" button. It will bring a new window. Choose and download your package based on your Linux architecture (32/64bit) and distribution. Then install the downloaded package on your system as follows.

On Ubuntu or Debian:

$ sudo dpkg -i google-webdesigner_current_XXXX.deb

On Fedora or openSUSE:

$ sudo yum install google-webdesigner_current_XXXX.rpm

On Arch Linux, you can install Google Web Designer from AUR.

To launch Google Web Designer, simply run this command in the terminal.

$ google-webdesigner

Here is what Google Web Designer's IDE interface looks like.

To start a new design, choose "New file" menu.

The best way to learn how to use Google Web Design is to start with some sample design. Google provides sample video ads which you can download and load on Google Web Designer. The sample ads will give you an idea on how to define elements and add functionality in your HTML5 design.

Google Web Designer provides multiple view options: designer view, code view and browser preview. GUI-based designer view is a default view.

To switch to code view option, simply click on "Code view" tab.

To preview your design in a web browser, click on "Preview" tab, and choose a web browser (e.g., Chrome or Firefox).

Once design is done, you can publish the completed design to a local folder.

Subscribe to Xmodulo

Do you want to receive Linux FAQs, detailed tutorials and tips published at Xmodulo? Enter your email address below, and we will deliver our Linux posts straight to your email box, for free. Delivery powered by Google Feedburner.

The following two tabs change content below.
Kristophorus Hadiono is a Linux enthusiast and a teacher in private higher educations in Indonesia. He uses Linux for his daily computing, also when he teaches his students. He is currently continuing his education with government scholarship at a private university in Bangkok, Thailand.
Your name can also be listed here. Write for us as a freelancer.

8 thoughts on “How to use Google Web Designer for HTML5 design on Linux

  1. Awesome thanks! I've been using adobe dreamweaver in a win7 x64 virtual machine to do web design work. I'm going to give this a try!! WooT! THANKS!

    • Guys I found it, that last TypeError was the problem.
      It seems you have a locale (i.e. language setting) that is not supported by Google Web Designer (yet). To fix, open terminal and type exactly:

      rm -r .local/share/google-web-designer

      Then, to run GWD:

      LANGUAGE=en_US google-webdesigner

      It will be started in english, you can now start it as normal.

  2. Tried to open an existing html file and it could not because it was not created in Google Web Designer?????? You just lost me. How can you make a web designer that will not open existing HTML files or at least import them. Dreamweaver still works for me.

    • I think there is a workaround. Try adding this in your HTML:

      <meta name="generator" content="Google Web Designer 1.0.5.0416">
      

      It's not guaranteed everything will work as expected with this workaround. I am sure they will open it up to HTML later. That's why they call it a "beta".

  3. Hi, my problem is that i did a work on gwd. Then i press preview button, and choose chrome. the index.html is open but nothing and only white. i don't know why. please help!

Leave a comment

Your email address will not be published. Required fields are marked *

Current ye@r *