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
