Yuma 4×4

Media and Communications

Responsive Layout: Overview – Google Web Designer

Responsive Layout: Overview – Google Web Designer

LUCAS: My name is Lucas, and
I’m an engineer for Google Web Designer. In this video, I’ll show how
to create responsive documents using media rules. Media rules allow you to
add additional styling to a document when its size
is within a defined range. To show how this works, I’ll
give you a simple example. First, I’ll create a new
file, and I’ll check this box to give it a responsive layout. Initially, all that means
is that the page’s width and height starts
at 100%, as we can see in the Property Inspector. We can get the same effect
by clicking this button. So if you forget to check
that check box in the New File dialog, it’s OK. My goal now is to
create a document that has a vertical layout when
the viewport is narrow and a horizontal layout
when the viewport is wider. I’m going to start by
creating some initial content. So I add an image
and a text box. I will center the text
within the text box. Make it be a bit larger. And then I will resize the text
box so it better fits the text. OK. Now, I’ve checked these two
check boxes in the Selection tool so that when
I apply a layout, it’s relative to the parent
container and so it’s fluid, which means that as the parent
container grows and shrinks, the layout will adapt. I want to have the
elements be evenly spaced from the top and
the bottom, so I’m going to add a couple of
small spacer elements to make this easier to do. There’s one, and
there’s another. Now I’m going to approximately
arrange these elements on the page. And, finally, I
select everything I center it horizontally, and
I evenly space it vertically. I can test this layout using
the new Viewport Resizing tool, which I’ll talk
more about later. And we can see that the layout
is preserved as I change the size of the viewport. But now when the
viewport is wider, I want to change
the layout so it’s horizontal instead of vertical. And to do this, I’m
going to use media rules. I first go to this new
responsive panel, which is used to manage media rules. And I’m going to add
a width breakpoint. When I add that breakpoint,
I’ve created two media rules, one for viewports that
are narrower, less wide, than the breakpoint and one
for viewports that are larger, or wider, than the breakpoint. And we can see that the width
intervals are displayed here in the responsive panel. There’s a color coding here
that matches color coding in the upper ruler,
which also shows you the width intervals that
are spanned by each media rule. We can see that the upper
media rule is active, so now I’m going
to make some edits, and they’ll be restricted to
that particular media rule. So I’m going to move things to
be more centered vertically. Then I’ll select
everything, and I’ll apply a vertically centered
layout and a layout that’s evenly spaced horizontally. And that’s it. Now as I resize
the viewport, I see that it’s a horizontal layout
when it’s sufficiently wide, and then it switches
to a vertical layout when it’s narrower. And I can even tune
the point at which this switch occurs by dragging
these markers in the ruler. Now I want to talk
about the media rule UI and what we’ve just done
in a bit more detail. First, let’s switch
to Code View. Here, we can see the media
rules that I’ve just added. I created two of them,
and they’re shown here. One of them is
empty, the lower one, and the upper one contains
changes to the top, left, and transform
styles necessary to apply a horizontal layout. Back in Design View, if I look
in the Property Inspector, then any property that is
overridden by the current media rule is highlighted. And if I click the
highlighted icon, I have the option of
removing the override. If I look at the
CSS panel, I can see the contents of the media rule. I can also see the rules
that are being overridden by it in a read only mode. I can change the size of the
viewport in a number of ways. At any point in
time, I can do so by just clicking on the ruler. In doing this, because
the viewport is now narrower and fits within
the lower media rule, that first interval
is highlighted. For more control over
the viewport size, I can use the Viewport
Resizing Tool. This provides
handles that can be used to freely change the width
and height of the viewport. As the viewport enters
new media rules, the appropriate
interval highlights. I can also directly set the
viewport size using these text inputs, and I can use a
menu containing common ad and device sizes. Finally, I can create
custom viewport sizes by setting a viewport and then
clicking this plus button, at which point the new viewport
size will appear in this custom size menu. When working with
media rules, there are two modes that
one operates in. In one mode, you’re
adding the master content of the document, which
is everything that is not inside of a media rule. This is what you see regardless
of the size of the document. The other mode is when
you’re editing media rules, and this is used to override
the default styling defined in the master content. You can switch between these
two modes using the responsive panel. So if I click Master Rules, I
see that my media rule override styling disappears. If I select Media Rules
again, it’s now restored. And I can also see that a
couple of tools are disabled. For example, the tag
tool is disabled. This is because when you’re
editing a media rule, every edit must ultimately
resolve to setting a style in a media rule. But if I used, for
example, the tag tool, I would be editing the
DOM, and because that’s not restricted to the media
rule, it’s disabled. There is, however,
a lot that you can do while adding
media rules, and that includes setting position, size,
color, opacity, visibility, and animation. That’s all I have to
say in this video. In subsequent
videos, I’ll show how to create richer documents that
have multiple breakpoints that include width, height, and
the document’s orientation, and I’ll also show how
to combine animation with media rules. Thank you for watching.

21 thoughts on “Responsive Layout: Overview – Google Web Designer

  1. I'm just wondering here, you showed us some CSS there, isn't that way too much CSS for what the page actually does?

  2. how does this work with uploading the creative in to DoubleClick….. do you just upload as one creative (defining it as the original size?) and assume that the creative will adapt to every impression it wins?


  4. Hello,
    when I create a project in responsive design ,
    the elements that are offstage appear in html, how do I solve this?

  5. Hello: New to GWD and DoubleClick — I'm curious if is this the software that would make those 10 seconds opening Snapchat teasers where one then scrolls to watch the media?
    Or would that be Adobe Animate that creates this Snapchat style of spot? Thx! much, – Mark in Vancouver, Canada

  6. Still seam too geeky to use… I need to work freely on the page, drag and drop, etc… Like PS!
    Lots of constrains for me… Still haven't found a site builder like WIX's HTML5 free form editing.

    Nice work google but I really need to deprogram my brain to use this… (Hate codes) Not very artistic which is my issue.

    There is nothing wrong with the program… (just to be sure that you all know I'm not bashing) Just that is not drawing me to it…

  7. I have a question: If I used to use images as marketing creatives an delivered these in pairs (x1 and x2). Can I make 1 responsive html5 ad that scales automatically in DFP and/or AdMob?

  8. Hello, When I use the viewport resize tool it does not preserve my layout when resizing. Breakpoints work but when i resize window my objects stay stationary until i reach a breakpoint . They should resize with the window. Has software been updated since this video? Do I have to select a checkbox somewhere?

  9. I think this tool is the best web dev tool I've ever seen. Not only it supports responsive design, it also provides tools which make it a breeze to do web design. Though there are features to be added that can make this a much superior tool. I think you should widen the horizon of this tool and make it a tool that can be used for any type of web design, like responsive websites. This is more targeted at Ad Designing, but i'd love to see it optimized for website designing.

  10. When uploading to Adwords, only one size is appearing, how do I see all of the multiple sizes that the responsive layout can be?

  11. I have an old static style web site. I need to redesign it. The index page delivers the viewer to lots of pages, on writing, history, music and some military history. A huge site with lots of stuff for the visitor. These designs offered by GWD don't seem to fufil my needs, unless I'm seeing only little animations and text boxes. Do I need some other type of software? Mike…taowriter5000.com

  12. Interesting video tutorial, unfortunately the teacher Lucas, speak so quick that for the stupid as me is almost impossible follow despite the video is subtitle in my language.

  13. Nice tutorial. But it can become a difficult task when you have a lot of animations and separately divs. I do myself all type of display responsive banner ads in my studio adsspirit and often need a good Inspiration

Leave comment

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