Responsive Layout: Advanced Techniques – Google Web Designer

Responsive Layout: Advanced Techniques – Google Web Designer

August 21, 2019 13 By Bernardo Ryan


My name is Lucas. And I’m an engineer on
Google Web Designer. This video extends
the previous video on creating responsive
documents using media rules. In this video, I’ll show
how to create documents that contain
multiple breakpoints and then use breakpoints
on width, height, and the viewport orientation. I’ll start with the
previous example, which is a simple document
where it has a vertical layout for
narrower viewports and a horizontal layout
for wider viewports. I’m now going to
extend this layout so that when the
viewport is even wider, we have a second image. To do that, I first switch
back to the master content so I can edit the DOM. And then I add an image. And to make sure that it
initially can’t be seen, I set its visibility to hidden. Now I go back to
editing media rules. And this time, I add an
additional horizontal breakpoint. I can either do that
inside the responsive panel or I can do it by
right-clicking on the ruler and using the context menu. So now I’ve added the
additional breakpoint. We can see there are
three media rules. Within the upper
media rule, which is the currently
active one, I’m going to make that image be visible. And I’m going to drag
it on to the page. And now I’m going to
reapply the layout. I’m going to center it
vertically and evenly space it horizontally. And that’s it. Now when the viewport is as wide
as possible, I have two images. And as I shrink it, I
go down to one image, and then finally, to
a vertical layout. So far, we’ve only used
breakpoints on width. But we can also add
breakpoints on height. For example, let’s say that
when I have a horizontal layout and the viewport is sufficiently
tall, I want to add a footer. To do that, I once again go
back to the master rules. And this time I
add a footer image, which I will make a
little bit smaller. And I set its visibility
to initially be hidden. Then I go back to
editing media rules. And this time, I’m going to
create a height breakpoint. When I do this,
the vertical ruler updates to color-code
the intervals that have a greater height
than the breakpoint and a smaller height
than the breakpoint. When you combine the
width and the height breakpoints together, I have
a total of six media rules that are arranged onto a grid. The width and height intervals
for the current viewport are always highlighted,
so you can always see where you are on the grid. Now I’m going to make the edit. So inside the largest
range of viewports, I’m going to make the
footer image be visible. I’m going to align it to
the bottom of the page and center it horizontally. For the range of viewports that
has the middle range of width intervals but is still
as tall as possible, I’m going to make
the same change. Take that image,
make it visible, align it to the bottom,
and center it horizontally. And now I’m done. And the viewport has a
horizontal layout and is tall. I see that footer image. When it’s shorter,
that image disappears. And finally, when
it’s narrow, all I have is this vertical layout. Sometimes it’s convenient
to apply different styling to a document when it’s in
portrait versus landscape mode– that is, when
it’s wider than it is tall or taller than it is wide. And Web Designer supports this. To do this, if we
press this button inside the entry for media
rules in the responsive panel, we split that grid
of media rules into one for landscape and
one for portrait viewports. Each entry here is its own
grid of media rules defined with width and
height breakpoints. Initially, these grids are just
copies of the initial grid. But now they can be
edited independently. To make this concrete, let’s
say that for landscape viewports I want to make no changes. But for portrait viewports,
I want to always have a vertical layout. And I want to show
either one or two images, depending upon how
tall the viewport is. To do this, I first switch
to the portrait grid. And for simplicity,
I’m just going to delete its
additional media rules. Now I’m going to pick a
size for the viewport. Let’s say around here. And within the
portrait grid, I’m going to add a
height breakpoint. Within the upper
range of heights, I’m now going to put the
second image on the page. I’m going to make it be visible. And I’m going to
select everything center it horizontally and
evenly space it vertically. So now when I’m within
a portrait viewport, I have either two
images or one image, depending upon how
tall that it is. When I have a separation between
the landscape and portrait grids, if I use the
viewport resizing tool, it never switches for me
between portrait and landscape. So I’m always looking at
a consistent set of rules. But if I want to
switch, I can either use the responsive
panel like such, or I can use this button in the
viewport resizing tool shelf. As promised, nothing has
changed for landscape grids. And it has the same
behavior that we saw before. That’s all I wanted to say
about adding breakpoints. In the next video, I’ll show
how to combine animations with media rules. Thank you for watching.