Hi, I'm Joey
and today I'll be showing how to create a responsive document
in Google Web Designer
To start we can either specify that we
want a responsive document
in the New file dialog by checking the
Responsive layout checkbox
or any document can be made responsive
at any time
by going into the Responsive panel
and checking the Responsive layout checkbox
For this example let's start by putting
together a simple creative
We'll add an image of a shoe
and some text
Let's center the text and the elements
and we will use this as our base document
Now we can start customizing the document for different sizes
We'll go over to the Responsive panel
and start with 160x600
We click the size in the panel
and notice that the document updates to
match its dimensions on stage
Now we can apply custom styles for the
size
and all the changes made while we have this row selected
will only be applied for the 160x600 size
So notice if we switch the size to 300x250
none of the changes just made apply
Next why don't we go down the line
and make sure that our document looks good
for a few more of the most popular sizes
300x250 looks good with just the base styles
160x600 looks good
250x250 also already looks good
without applying any custom styles
300x50 definitely requires a change
of layout
Notice that when I make these changes
an icon will appear in the Responsive panel
to indicate the custom styles are
applied for this size
So let's make changes for the size
and we now have a document which looks good
at the four most popular sizes
for DV360 ads
As we configure various sizes for this
ad
we should be checking the first checkbox in each row
This indicates that the size is a serving size
which informs publishing
platforms
that we want the size to be shown to users
The second checkbox indicates that
we want the sizes to be previewed
so when we click this button here to open the responsive preview drawer
we can see live previews of the four sizes
for which we've checked the boxes
These previews update in real time as we edit our document
And previously you saw that we can switch between sizes
by clicking on
different rows in the Responsive panel
and we can similarly switch between
different sizes
by clicking them in the preview drawer as well
So far I've shown how to go through
individual sizes to apply custom styles
but there are other ways to apply shared styles across sizes
For instance say we want 320x50 to be
one of our serving sizes as well
Let's select it for serving and previewing
and as we can see on stage and in the preview drawer
the elements need some rearranging
but rather than rearranging them by hand
why don't we instead choose to just copy the styles from 300x50
and apply them to the new size
So we first select 300x50
right click
select Copy overrides
and then we right click Paste overrides to 320x50
and now you can see on stage and in the preview drawer
that the styles were copied over
from 300x50 to 320x50
Now that I've shown you how to apply
styles to specific sizes
I'd also like to show you how to apply
custom styles to ranges of sizes
For this example I'd like to add a new
element to the document
but you'll notice
that the tag Element tool is disabled
and similarly it's not letting me add new text elements
to make changes to the base
document
such as adding or removing elements
we do first need to switch back
to Edit default rules in the Responses
panel
And let's add a tag which says SALE in
the top left corner
For this example I'd like to rotate this
tag
for all portrait screen sizes
which is the set of screen sizes
for which the height is at least as great as the width
This can be achieved with range rules
To add a range rule
we need to either scroll down to the bottom of the Responses panel
to get to the Range media rule section
or we can collapse the size rules
section
or we can filter the sizes to only show
those which are currently configured for serving
I'll do that
and now we can see the Range media rule section of the panel
Let's click Add size range and define a new range rule
which will cover
all portrait sizes up to 600 pixels
in width or height
and for the size, the custom style we'd like to apply
is rotation of the SALE tag
You can see as I do this
that the range rules style is being applied to two different sizes
250x250 and 160x600
To further demonstrate how this new
style
is being applied to a range of rules
let's add a new custom size
which wasn't present on the provided default size list
So we click Add custom size
and create a
rule which is 100x300
It's a serving and preview size
and we see this size needs custom style for the image and text
and notice that the SALE tag is rotated
because the size falls within the range
that we just defined
You can see as we click through the
different size rules
for the ones which fall within the portrait range rule we just defined
the range rule will automatically
highlight
when an affected size rule is selected
To help with configuring and visualizing range rules
we have added a special
dialog
that you can access by clicking this
icon here
And what you see here is a graph of the
range rules
In the case of this document this one
triangular range is the only range rule
This represents the set of screen sizes
up to 600x600 with portrait orientation
And each of these points corresponds to a size
which we have configured for
serving
As you can see there are three sizes
covered by this range rule
250x250
100x300
and 100x600
These are the same three sizes which have the rotated SALE tag
There's one last style change I'd like
to make
for this document and that is to correct
how for sizes 300x50
and 320x50
the SALE tag is too large
I could just go through and edit
these sizes individually
but for the sake of demonstration
I'd like to show
how to address this with a range rule
We could manually input the boundaries
of a range rule
to cover these two sizes here in the Responsive panel
as we did before for the portrait rule
but we can also define the new rule visually
using the Range rules dialog
so let's open the dialog
and you can see that these two sizes here
correspond to the two sizes with height 50
This one corresponds to 300x50
and this one is 320x50
we can draw a new range rule covering
these two sizes
any rectangular area covering these
would work
but I'll define the range to cleanly cover
all landscape sizes up to 600x150
Note that range rules are not allowed to
overlap
and each size cannot be covered by more than one range rule
the rules in this example are permitted
because the landscape and portrait
orientation constraints
prevent them from overlapping
save the dialog
and our new range rule is added and selected in the Responses panel
and we can also see that if we click through
and select the sizes with height
of 50
which are supposed to be covered by this new range rule
the new rule highlights below in the panel
So to make style changes for this range rule
we first select it
and we can shrink the SALE tag on stage
and we see immediately that both of the
sizes affected
by this range rule have the shrunken SALE tag
and look good
Finally let's add some animation to our
responsive document
we go back to Edit default rules to edit
the base document
and let's add a very simple animation of
the shoe kicking into frame
we add a couple keyframes
one with the shoe centered
the other off screen with a little
rotation
and we can see immediately how this
animation looks
across all sizes in the Responsive preview
panel
Both of the sizes which have no style
overrides look good
but every other size needs a little
adjustment
so let's go through the sizes
correct the keyframes
test the animation
and the animations all look good
And just like that we have a responsive
animated document
Thank you for using Google Web Designer
and thanks for checking out this tutorial!
Have a good day!
