Creating Responsive Content Using Google Web Designer

I am not a graphic designer and do not want to be a graphic designer. In my case, I just wanted a single responsive banner ad with simple design. I probably only used about 5% of functionality of Google Web Designer. These are my very terse notes for accomplishing that goal.

Save your project to its own folder. The app writes all sorts of files. If you put it in a folder that has other stuff, you might have difficulty figuring out which files are part of the project.

There are some posts and videos of how to use this app. I found them to be pretty useless. Too much time is devoted to things that seem obvious. And the things that caused me trouble were either not addressed or deeply embedded in all the other fluff. These notes are so that 2 years from now, when I have to use this app, I can get things done quickly.

Don’t Be Afraid to Guess

A lot of that app is pretty standard, so your guesses of how to do things will often be correct. But, there are some tricky things.

My general approach to stuff like this is to load a working example and hack that. In this case there are lots of templates. Starting a project from a template is as you would expect. But there is a tricky part.

When Things Seem to Be Locked

When I did this, somehow I ended up with one of the sizes showing. When I tried to delete the template image and upload my own, it would not let me do that, even though all sorts of indicators showed the image as unlocked. Next I tried to change some text in one of the existing text boxes. Could not do that either.

The magic is you need to select “Edit default rules” to change components:

Once you understand this, the role of the “Sizes” panel become more clear. Click on a “Size”, don’t worry about the check boxes. This will give you a viewport of that size and the option to move around the components and resize them for that size. Whatever you do for a specific size, will not effect the other sizes.

Clipping

Another important thing to know is that the app clips the content for each size. For example, on one of the templates they have a rotated green rectangle as a visual element. Only part of the rectangle is inside the viewpoint. When the content is generated, the clipped rectangle makes an abstract geometric shape.

The “Outliner” panel is a great way to select items when the view is cluttered. You can use it to select, lock or hide items.

The “Properties” panel works as expected. It is often useful to set Position and size to percent. There is a button to do that. The button is not a toggle button. In other words, if you click it once, everything will convert to percentages. If you click it again, everything will still be percentages. Use the drop down in each field to change to something other than percentages.

The up/down arrow keys work well with set Position and size. Holding the shift key is x10.

Actions/Buttons

There are two ways to make buttons. One is to create an image in another program and import that image. This is thing to do if you want a graphically complicated button. But what if you just want a simple button? In that case, create a div with a border and/or a fill. Make a text tag and put it over the div. If you select them both, you can use the centering buttons at the top of the view.

To make that button do something, then go to Components and drag and drop a “Tap Area” into the view. Right click on it and select “Add Event”. If you want the action to go to a URL, that is done when you get to the “action” step via Google ad -> Exit Ad. After you complete that process, it should be obvious why a simple html <a> is not rich enough.

When using a “Tap Area” make sure the item is on top of the <div> that creates the button. If it is underneath, then it will not receive clicks. On the top bar, use these buttons to move and item up or down in the stack:

The “Tap Area” work in the preview. This is useful for testing.

Testing Responsive Behavior

There probably is a better way, but this works.

• Highlight the size you want to test in the Responsive tab
• Click Edit Default Rules – this should give you handles to resize the viewpoint

Other Options

When I started, I got so frustrated that I almost went with Bannersnack. I thought since they are a for-profit organization they might have a better UI. They have a free tier and I only need to do a few designs, so I thought that might work for me. The problem was the free-tier does not provide for multiple size responsive design. And they require you to sign up for monthly billing. In hindsight I am glad I did not go with them.

That’s it for now. If you get stuck on something and figure out how to solve it, post it in the comments and I will add it to this post!