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 160×600. 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 160×600 size So notice. If we switch the size to 300×250, 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, 300×250 looks good with just the base. Styles 160×600 looks good 250×250. Also already looks good without applying any custom. Styles 300×50 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 320×50 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 300×50 and apply them to the new size? So we first select 300×50 right click, select Copy overrides, and then we right click Paste overrides to 320×50, and now you can see on stage and in the preview drawer that the styles were copied over from 300×50 to 320×50. 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, 250×250 and 160×600 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 100×300.
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 600×600 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, 250×250, 100×300 and 100×600. 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, 300×50 and 320×50 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 300×50, and this one is 320×50. 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 600×150 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.
Https //reyna.design/web-design-trends/
Read More Web design Trends