Advanced Preview Configuration – Google Web Designer

Advanced Preview Configuration – Google Web Designer


NATALIE: Hi, this is Natalie. I’m an engineer on the Google Web Designer team and in this video I’d like to show you the new and improved in-browser preview feature Like before you can launch preview by clicking the preview button in the top right corner and the preview page will
launch in the browser that you’ve selected You’ll see there’s a control
bar at the top which gives you various settings for customizing preview including choosing one of several preview modes And the mode we’re looking
at right now is the all sizes mode which is like a contact sheet view This mode
is available if your ad is responsive And in this mode you can see your document across many different sizes at once and you can customize the sizes which are shown by using the size selector menu The drop-down shows all the responsive
sizes which are supported by the ad environment When you launch preview in
Google Web Designer you can also select Standard instead of Advanced under the responsive viewport options to use a shorter list consisting of only the
environment’s most common sizes If your ad also has dynamic bindings and
sample data which this document also has you can also choose a single sample data
set to apply in this mode and we’ll take a look at some more dynamic preview features later in this video The reload button on each card lets you restart that particular ad preview you can also use the reload button in the top right to reload all displayed preview simultaneously Note that if you go back
to Google Web Designer and make more edits to your document your changes will
not be automatically picked up if you’ve already got a preview page open even if you reload it so if you make more changes you need to relaunch preview
anew to see them and then you can close the old preview page To test your ad’s responsive behavior with some more fine-grained controls you can switch to the single size mode using the preview mode selector in the left hand corner In this mode you can also
select custom from the size drop-down which will give you the ability to
freely resize the viewport to see how your ad behaves And the rulers will show
any media query breakpoints that you’ve got in your ad and you can click within
the rulers to quickly set the size within a range where a particular media
query is active If your ad has dynamic bindings you’ll also have access to the all sample data mode which is similar to the all sizes
mode but instead of previewing your ad across many different sizes here you can preview your ad across multiple sample data sets at once Now let’s take a look at an expandable ad Expandable ads, interstitial ads, as
well as plain HTML documents will all open in this mode which simulates a mobile device frame and in this mode you can interact with your ad to see how it behaves in the collapsed and expanded states and you can change the device
using the device selector or switch from portrait to landscape using the rotate orientation button And like in the single size view for banner ads that we saw earlier you can set a custom viewport size by selecting custom from the device selector And then you can freely resize your viewport There’s one other mode which is available for these document types which is the desktop mode And this mode simulates just a general large desktop size display You’ll see there’s no size controls for this preview viewport it just fills up the
available area but you can resize your browser window to change it Documents
with Parallax components can be previewed in a special preview mode which simulates a scrolling web page that’s got enough room for you to test
scrolling your ad completely in and out of the viewport and test the parallax
behavior otherwise this mode has all the same controls as the mobile mode And for
very simple fixed-size banner ads with no responsive or dynamic features the preview page will simply not show any controls And like before you can preview
templates directly from the template gallery by selecting the template and
clicking the Preview button That’s it for this tutorial and thanks
for watching


4 thoughts on “Advanced Preview Configuration – Google Web Designer

  1. Hi Natalie, great video. I wanted to find out if you could create one ad in google web designer, and it creates other sizes for you? like you have in your advanced preview?

Leave a Reply

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