Google Announces Web Designer for Building HTML5 Sites

3 minute read
Anthony Myers avatar

Google Announces Web Designer for Building HTML5 Sites
Google has debuted a free animation and website building tool called Web Designer for creating HTML5 content, the kind that is better suited to being used on various sized devices like smartphones and tablets.

Beta Version Available for Download

Building websites and advertising content can be done with many kinds of tools, and Google has created Web Designer a bit in the vein of Adobe's Dreamweaver or even Flash tools. It's not as powerful as those advanced tools, but there appears to be enough functionality there to at least give Web designers and marketers an inexpensive option if they need it. As HTML5 becomes more widely adopted, Web content and even advertisements will increasingly need to be built for that kind of environment, Sean Kranzberg, engineering manager for Google Web Designer said in an email.

"There are already more end-users in HTML5-compatible environments than there are in Flash-compatible environments, so we want to make it easy for everyone to develop engaging content for this new world that works across devices," Kranzberg said.

Web Designer can create HTML, CSS, Javascript and XML files using its visual and code interface, and created projects can then be uploaded to a chosen website that is more responsive no matter what kind of device it is being viewed on.

Once downloaded, Web Designer presents a layout that very much resembles Adobe's tools. There's a stage, panels on the right, tools on the left and an animation timeline at the bottom. Tools like selection, text, zoom, pen, 3D and fill can be selected, and the top of the page will change to new options depending on the tool. There are choices of color, properties, components, events and CSS panels for modifying a project, and they can be collapsed and rearranged. 

The color panel, for example, accesses color picking tools, and the component panel is for building interactions into ads. An events panel hooks up events to components in order to tell it what to do when something is clicked. At launch, the components and events panels are only available for building ads, however.

Below the main project area are tools for showing the underlying code generated with the visual editing tools, and a preview button to see what projects will look like in a particular browser. 

"Our goal is to help people "build once, run anywhere", and we're looking at more ways to help them easily run their creatives in more places," Kranzberg said.

Learning Opportunities

Thumbnail image for image-googlewebdesignercomponents-2013.png

The components panel can add functionality like swipeable images or video content.

Build Ads with Visual or Code Tools

For now, some of Web Designer's tools only work for advertisements, and it's clear the decline of Flash technology is now a bit of an open space where Google hopes to insert its own tools. As the image above shows, Web Designer includes the kinds of pre built components most ads might need, and both visual and code based versions of those elements are visible at the click of a button.

Ads can be built for DoubleClick and AdMob or any generic environment needed, Kranzberg said, and the tool is meant to be used by just about any kind of designer.

"We want to build tools that can be used by the most savvy creative professionals to students and people with no coding experience," he said.

Once a project is completed, it is saved to a zip file with all the assets to upload to their final destination. There are no plans yet to build a paid or pro version, but Google will continue to listen to feedback Kranzberg said.

About CMSWire

For nearly two decades CMSWire, produced by Simpler Media Group, has been the world's leading community of customer experience professionals.


Today the CMSWire community consists of over 5 million influential customer experience, digital experience and customer service leaders, the majority of whom are based in North America and employed by medium to large organizations. Our sister community, Reworked gathers the world's leading employee experience and digital workplace professionals.

Join the Community

Get the CMSWire Mobile App

Download App Store
Download google play