{"id":18285,"date":"2013-10-04T18:01:18","date_gmt":"2013-10-04T10:01:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18285"},"modified":"2025-04-03T22:26:38","modified_gmt":"2025-04-03T14:26:38","slug":"google-web-designer","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/google-web-designer\/","title":{"rendered":"Create Interactive HTML5 Ads with Google Web Designer"},"content":{"rendered":"

If you follow Google\u2019s development close enough, you probably know about this but if you don\u2019t, the giant search engine company has recently launched a new tool call the Google Web Designer<\/a><\/strong>. In short \u2013 this is Google\u2019s version of Adobe Flash. Only that the output is in HTML5 and CSS3<\/a>, and it\u2019s currently limited to creating ad banners.<\/p>\n

As stated by Sean Kranzberg, Google Engineering Manager, in the announcement for the tool<\/a>:<\/p>\n

\"We think that Google Web Designer will be the key to making HTML5 accessible to people throughout the industry, getting us closer to the goal of \u201cbuild once, run anywhere\".<\/em><\/p>\n

Recommended Reading:<\/strong> HTML5 Website Showcase: 48 Potential Flash-Killing Demos<\/a><\/p>\n

Google Web Designer is available for Mac<\/a> and Windows. Let\u2019s see what this beta version of Google\u2019s latest product has to offer.<\/p>\n

Getting Started<\/h2>\n

We can create a new blank file for HTML, CSS, JavaScript, XML, and Google Ads, which provide a set of pre-defined ad size that is also the standard of the Google AdSense<\/a> ad format. New file creation requires us to specify the document title, the name, saved location.<\/p>\n

<\/p>\n

Animation Mode<\/h2>\n

This is something that we might not find in other web page creator applications \u2013 the Animation Mode<\/strong>.<\/p>\n

There are two options in Animation Mode: Quick<\/strong>, which gives us simplified toolbar for creating basic animation, and Advanced<\/strong>, which will give us the advanced toolbar for arranging more complex animation. We can also opt between these modes when the file has been created.<\/p>\n

Adding New Element<\/h2>\n

Google Web Designer provides a set of standard User Interface, which is easy to get accustomed to. The left toolbar lets you select tool sto add new element.s The default element generated would be the div element. But, you can have it changed.<\/p>\n

    \n
  1. Select the Tag Tool<\/strong>.<\/li>\n
  2. Go to the top toolbar, and select the Custom Element.<\/li>\n
  3. Specify the element you want to add.<\/li>\n<\/ol>\n

    <\/p>\n

    On the toolbar to the right, you can modify the element\u2019s property such as the padding, margin, dimension, border, as well as see all the CSS rules that are applied on the element.<\/p>\n

    <\/p>\n

    Furthermore, Google has created an overview of the UI in the following video. Watch it to get further insight.<\/p>\n