 The Sketch Handbook

PREV NEXT
⏮ ⏭
Chapter 7: Design The Article Page Chapter 9: The Final Breakpoint: Desktop Widescreen
 

CHAPTER 8

Going Responsive
A modern website doesn’t consist of a single width alone. With responsive web design in mind, you need to create multiple breakpoints at which the layout can adapt to different screen widths. While it’s not feasible to set up a separate
artboard for each responsive breakpoint in Sketch, you might still want to see how the adaptations will look like at a few different sizes. To understand this workflow, we will create two more artboards: one for a width of 1024 pixels, one
for 1920 pixels.

Designing With Constraints

Let’s start with the first one. Duplicate the current artboard, resize it to a width of “1024” in the inspector, and rename it to something like “Article Medium.” We also need to update the layout grid (View → Layout Settings… in the menu
bar) to reflect this new size. Like before, it should take up 94% of the available width, be centered with no gutter on the outside, and have 12 columns; also, the gutters should be about one third of the columns. This gives us a Total
Width of 962px (“1024 × 0.94” rounded down), a Gutter Width of “21px” (962 / 12 ≈ 80. 80 / 4 = 20) and columns with a size of “61px” (≈ 80 − 20). Also, click on Center at the end.

Now we can use this new layout grid to adapt all of the elements of the design to the expanded room with the “Group Resizing” settings. Not too long ago, you needed a plugin for this functionality, but as of late Sketch allows you to de‐
fine how elements react when you resize their parent group (or symbol). It’s not perfect but can still be a huge time-saver.

If you select a layer or group, you’ll notice the Resizing drop-down in the inspector. Basically, it can be broken down to how the dimensions (width and height) and the placement (X and Y position) adapt to changes: whether they are flu‐
id, in that they change proportionally to the parent group or symbol, or fixed, which means that the original values are retained.

There are four values you can set at Resizing (the respective shortcut is mentioned in parentheses):

1. Stretch, the default option, means that the element changes its width or height proportionally to the size of the group it is located in. This includes spacing. Both the dimensions and placement are fluid (Ctrl + 1).

2. Pin to corner fixes the layer at the current position — the closest corner, to be precise. It is not resized, nor is its spacing adapted. Both the dimensions and placement are fixed. This option can be used to keep an element
centered if it has the same distance from both sides (Ctrl + 2).

3. Resize object is similar to Stretch in that it resizes the element proportionally, but the exact spacing is retained. The dimensions are fluid, and the placement is fixed. Please note that the behavior changes if the element
touches three sides of the parent: In this case, the size is maintained on the axis where one side touches (but only if it is less than half the size of the parent); on the other axis, it takes on the size of the parent. (Ctrl + 3).

4. Float in place is the total opposite, in that the measurements of the element are maintained, but the spacing changes relative to its container. The dimensions are fixed, and the placement is fluid. It can also be used to center
an element (Ctrl + 4).

Fig. 8.1: The different Resizing options. 1: Stretch. 2: Pin to corner. 3: Resize object. 4: Float in place.

As a bonus, Sketch is smart enough to memorize the “corner” where the element was before. So, if it was at the right edge of the parent, and you resize this parent container from the right, the element will stick to this side. This also
goes for centered elements and is applied on the vertical axis alike. Unfortunately, there are some limitations: You can neither change the origin of this pinning nor set a different behavior for each axis.

A Responsive Grid
Possibly the biggest restriction with layout grids is that they don’t react to the size of the artboard; you have to set one up for each width individually. However, there’s a trick to creating a responsive version: Instead of using Sketch’s
built-in layout grid, add your own grid overlay. To make it easier to set it up, select all groups in the main hierarchy of the layers list, and hide them temporarily.

Start with the left margin of the responsive grid. Create a rectangle atop all of the other content, representing the left area outside of the grid. For the width, orient yourself in the normal layout grid. Make it 100% high, give it a bright color
(green, for example), name it “Left margin,” and create a new “Grid” group with it. Now on to the first column. Add another full-height rectangle, with a width of one column. Duplicate it for the gutter, put it next to the column and shrink
its size to the width of the gutter. Assign a similar color for both, like a dark and a light red, and add them to a “Column” group, which you should put in the “Grid” in turn.

After that, use the Make Grid… function from the Arrange menu to get the remaining 11 columns (rows: 1; columns: 12; margin: 0px). Put all of these “Column” groups into a new “Inner” group, but delete the gutter of the last column. You
will notice that these columns don’t match the layout grid exactly, but that doesn’t matter much at the moment. Finally, duplicate the layer of the left margin for its pendant on the right side, place it on the right edge of the last column,
and rename it to “Right margin.”

You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.
Fig. 8.2: The fluid grid: You can easily adjust it for different screen widths.

When you grab the “Grid” group now and change its width on the canvas, you will see how the columns and gutters respond to the new width, thanks to the default Stretch behavior of all layers. To use it to align other layers to it, set the
opacity to 30% and lock it. However, this approach has two disadvantages. First, elements of your design can’t snap so easily to it like with a normal layout grid. Secondly, you can’t switch it off with a keystroke, but rather need to hide
the “Grid” group in the layers list. In turn, you will get a fluid grid that you can easily adapt to the width of your artboard. Thanks to Anthony Collurafici (http://smashed.by/sketch-grid) 1 for his idea about this responsive approach.

The Header
No matter which grid type you choose in the end, you can start to adapt the elements to the artboard’s new width now, after you have shown all of the groups again. Begin with the back link and the logo in the header. They should be
pinned to their respective edges, but the spacing should still adapt to the layout grid’s new width, which is 94% of the artboard. For this to happen, we need to create a new group from these elements that can be left at the default
Stretch value in Resizing; name it “Inner.” The individual elements, the “Back” group and the logo, however, are set to Pinned to corner so that they stick to this relative width of the container.

If you try to resize the “Header” group to the full width with the handles on the canvas, you will see that this gives us the desired result, and both elements have been moved to the outer edges of the layout grid. But for now, go back to
the original width with Cmd + Z, because we still have to fix a few other elements.

Because we can’t set different behaviors for the X and Y axis, we will concentrate on the horizontal dimension for now, and take care of the vertical position of the elements later. First, the title and its width. Because it should be sized
proportionally to the artboard, the default value of Stretch is OK. In turn, the category icon should remain at the center, which also goes for the white mask in the back. Select both, the “Icon” group and the “Mask” layer, and set them to
Pin to corner. The line itself doesn’t need to be changed.

If you adapt the Width of the “Header” group in the inspector to “100%” again, you will see that all of the elements behave exactly as intended: The icon and the logo move to the outer edges of the layout grid, the title adopts the correct
position and width of the grid columns, and the category icon and the mask remain at the center. All of this mostly happens due to the fact that we calculated the layout grid and its columns relative to the artboard’s width. You will see
that this is an advantage not only in the design phase, but also in the development phase.

One thing we still have to fix is the vertical position of the elements. Go back to the original width of the header, with Shift + Cmd + Z, lock the ratio of its group in the inspector, and make it full width again. The result looks quite good,
but we still have to make a few modifications, mostly to the elements at the top of the header.

Because the “Inner” group, which contains the back link and the logo, is set to Stretch, its placement has changed relative to the height of the header. What we really want is a pinned behavior, so that the position remains constant. Un‐
fortunately, you can’t set a different Resizing behavior for each axis; therefore, we need to fix this by hand and bring the “Inner” group back to the old position, so that the logo is one grid row away from the top of the artboard, which is at
a Y position of “12.”

For the category, the Stretch value works perfectly, ensuring that it remains at the bottom of the background image. The same goes for the background image: It stretched correctly to the new dimensions of the header. Unfortunately, it
might look a bit blurred now, so you might want to optimize it in the same way as we did for the full-width image in the content: lock its ratio, double the width, insert the image fill again, and bring it back to the original width. This way,
we have also prepared it for the next screen width of 1920 pixels. But more on that later.

You
Fig. 8.3: The correct resizing settings for each element in the header. have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.
The last element in the header that needs a new vertical position is the title. But let’s delay this task until we have made a small but important change to the baseline grid.

Hide and Seek

The change of the header’s height has made it cover some of the content below, which is less than ideal. Instead of moving all of the elements in this area individually down now, combine them into a new “Container” group. It should in‐
clude the “Content,” the “Big image” and the “You might also like” groups.

This way, it’s easier to move everything at once, and we will also need this group to set the correct resizing behavior. Now, hold Shift (to constrain the movement to a straight line), and drag this group down until it’s fully visible again;
don’t worry about the row grid at the moment.

After that, we can finally embrace the additional space of the enlarged artboard and adapt the content to it. For example, for the header, enter “100%” for the width of the new “Container” group and watch the magic unfold. This will not
only adapt the spacing to the new layout grid automatically, but will make all of the children full width. However, it also makes one issue immediately apparent: With the increased width, the line length of the text gets way too long, which
would lower the reading experience. Let’s take another approach. Return to the original width (with Cmd + Z).

A New Base
The easiest way to bring the text back to an optimal width is to increase the font size. But instead of doing that for each layer individually, we will increase the base font size of the whole design, to which every text element will adapt.
With it, we will also increase the baseline grid so that the line height is brought back to an ideal value, too.

To do that, enter the Layout Settings from View in the toolbar again, with the artboard selected. Instead of the old base font size of 16 pixels, which was derived from the size of the body copy, we will choose 18 pixels now, giving us a
ratio of 18 ÷ 16 = 1.125. This is our “golden value” from now on and should be reflected not only in the baseline grid but in each text element of the design. If we take the old value of “12px” of the baseline grid from the Gutter Height and
multiply it by this new ratio, we get “13.5px” (12 × 1.125). Unfortunately, Sketch can’t handle decimals here, so this gets rounded to “14px,” which is also fine. The rest can be confirmed with OK.

It would be quite tedious to adapt all text layers to this new ratio manually. Instead, we will use a trick and use the Scale… dialog to adapt the whole “Container” group at once: Select it and press Cmd + K. Bring your attention to the
Scale field, which allows us to resize the group proportionally. If we apply our “golden value” from above, we get a value of “112.5%” (100 × 1.125). Unfortunately, Sketch doesn’t allow decimals here either (nor calculations), so let’s take
the next best value, “113%” (Fig. 8.4, 1). Furthermore, change the origin of the resizing from Center to the top-left corner (Fig. 8.4, 2). Pressing OK brings us a huge step closer to the correct size of the text elements.

Fig. 8.4: Instead of enlarging all elements individually, we resize the whole “Container” group with the “golden ratio” of 1.125 in mind, giving us a Scale value (1) of 113% (100% × 1.125 rounded). Be sure to set the origin of the resizing to top left (2).

SLOW AND STEADY

Before we dare to bring the content to full width again, we need to adapt two other elements from the screen slightly: the red button and the “You might also like” area at the bottom (in particular, its “Sights” group). Set both to Float in
place, so that they remain centered. That will suffice for now; we will tackle the rest later.

We will also take a chance and adapt all of the elements of the header to the new baseline grid now. First, the logo: The size is fine, but move it a bit down, so that its top is aligned to the bottom of the first baseline row. Next, the back
link. Instead of enlarging all of the elements separately, we’ll use the Scale function in the same fashion as before and resize it to “113%” (100 × 1.125, rounded) to respect the “golden value” from above. The origin should be Scale from
left (the middle point in the first column).

The title in the header needs not only a new font size but also a new position. (Remember we had postponed that?) If we embrace our “golden value” here and multiply the font size by “1.125,” we get “54px.” Secondly, change the line
spacing to “70” (14 × 5) to reflect the new baseline grid, and move it down so that there’s a gap of about four row units from the category icon. You could also use the Scale dialog again to adapt both the size and line height at the same
time.

Now for the big moment: Select the “Container” group and set its width to “100%” in the inspector. This almost gives us the desired result: Not only do we have an ideal line length again, but all of the content elements have adapted to
the boundaries of the new layout grid. Good thing we set its width relative to the artboard.

The Content Area

Now for the “fun” part: adapting all of the text layers in the content area to the new baseline grid. We could also be meticulous with the font sizes, because the value of “113%” from Scale was just an approximation. But most of the sizes
are so close to the correct size and just a few percent off that this extra work wouldn’t be worth the hassle. It should be enough to give the golden ratio to the developer and tell them that all measurements should adapt to it.

But the alignment to the baseline grid is still required. First, move the whole “Container” group until there is a gap of about four row units between the category indicator and the title, and it sits on the baseline grid. The position and line
spacing of the intro should already be almost good; you might just need to adapt both by a few pixels. From now on, align all text layers to the baseline grid, as we did with the initial artboard size of the article. Also, adapt the custom
guides at the outside of the layout grid to the new boundaries, so that there is no need for the grid to be visible all the time. The easiest way is to select the “Content” group and let the guides snap it as you move them.

That was a piece of cake. Luckily, we can continue in the same fashion with the body copy. Select all of the paragraphs in the content area and slightly increase the line spacing to “28” (14 × 2). Also, set up a new text style to keep every‐
thing in sync. Name it “Article paragraph Medium.” Be sure to create new text styles for the other types of text layers, to make future modifications easier.

THE DROP CAP

With the new font size, the upper part with the drop cap needs a small modification: Just move the nearby text a bit closer, so that the spacing of 10 pixels in between is retained. Align all of the paragraphs here to the baseline again, and
copy some content from the lower one to the upper one so that it is fully filled again. Lastly, make sure that there is a spacing of three rows from the introductory paragraph above.

FLOATED

One downside of the group-resizing feature is that images don’t retain their ratio when the parent group is resized, even when the ratio is locked. But let’s take this as an opportunity to give the image a totally new appearance. Instead of
just fixing the height to bring it back to the original 16:9 ratio, give it a totally new alignment to the layout grid so that it fills only the first six columns.

To achieve this, drag the right handle until this width is met at 470 pixels, unlock the ratio in case this setting was defined before, and enter “470/(16/9)” for the height. This brings back our beloved 16:9 ratio. Make sure it’s three rows
away from the preceding paragraph, as on the previous screen.

The rest of the workflow is similar to the initial creation of the drop cap: Copy a few lines from the following paragraph, then drag a text layer next to the image, with the size of the remaining columns and the same height. Fill it with the
copied text until the whole space is occupied, align it to the baseline grid, and apply the new “Article paragraph Medium” text style. Remove this portion from the initial text layer; it might take a couple of tries to get the right amount of
text. In case you don’t have enough text for this action, employ the Craft plugin. Finally, move the rest of the paragraph up until it also sits nicely on the grid below the image, and put everything in an “Image” group.

You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.
Fig. 8.5: Adapt the first image of the article so that it fills only six grid columns now and the text floats around it.

THE QUOTE

The modifications required for the quote are rather minimal, because the default Stretch value gives us an almost perfect result. We just need to handle two things: update the line spacing to “42” (14 × 3) and move the right quotation
mark to the end of the text again, with a spacing of 21 pixels (the gutter width). Lastly, grab the whole group so that you can align it to the baseline, with a spacing of three units from the text above.

THE REMAINING ELEMENTS

Modification of the remaining elements in the content area is just a matter of changing their position and alignment to the baseline grid. Use the mouse to drag them on the canvas for bigger distances, holding Shift (to constrain the
movement to one axis); for smaller increments, press the arrow keys on the keyboard to get more precision, also holding Shift (to go in 10-pixel increments).

The paragraph after the quote needs to be moved up and aligned to the baseline grid again until it has a spacing of three rows. In case you used the Paragraph field for the spacing in between, you need to match it to the line height of
“28” now. Continue with the subheading, moving it up until it is four rows from the preceding text, and the following paragraph, until it is two units away.

We still need to update the height of the big image to the correct ratio of 2.35:1 again. For this, select the image, including the adjustment layers, and enter “1024/2.35b” in the Height field, being sure to unlock its ratio first. The “b” suffix
is especially important, because it resizes the image from the bottom and retains the correct distance from the caption. However, you’ll still need to move the group three rows away from the preceding paragraph and align it back to the
baseline grid, together with the caption.

Fig. 8.6: The adjusted text layers between the two images.

The remaining text layers should be positioned as follows: three units between the caption and paragraph, followed by the second subheading with a spacing of four units, which itself should have a gap of two rows from the last para‐
graph in the article.

The last element in the content area, the button, needs a distance of four rows from the last paragraph. One’s instinct would be to use the Scale function again to resize the symbol to the “golden ratio” of “1.125”; unfortunately, this
doesn’t work with symbols yet. Resizing it on the canvas also wouldn’t yield the expected outcome, because neither the font size nor the border width of the arrow would adapt proportionally. Therefore, we need to detach the symbol
with a right-click in order to use this option: Press Cmd + K and enter a Scale of “113%” (100% × 1.125, rounded). For the origin, select Scale From Top (the middle dot in the top row).

Do You Also Like?

We have made some good progress with the responsive version of the article so far, but there is still one element to address to finish it up: The “You might also like” area. Our previous modifications have lightened the workload, but there
are still a few things to take care of. First, move this block up, so that it is four rows from the button; then, align the title to the baseline grid again, with a spacing of three rows before and after (Fig. 8.7).

Continue with the list of sights. Not only do we need to update the dimensions of the sights and the spacing in between to reflect the new layout grid’s dimensions, but we also want two rows with three columns each to take advantage
You
of the increased space of the artboard. Thanks to the use of haveand
symbols 4 days le in your
the group-resizing trial, Nicoladebenedetti.
capabilities Subscribe
of Sketch, the modifications today.
required are ratherSee pricing options.
minor.
 However, Craft can’t handle the resizing of the sights that happened in between very well, so we need to start afresh. Delete all of the “Sights” symbols except the first, and change its width to “306” in the inspector, the size of four col‐
umns. Ensure that the ratio is locked to get a proportional height. The text layers may be a bit off the baseline grid now, but we’ll gladly accept that because the rest of the element adapts perfectly. Also, remove the redundant “Duplicate
content” layer.

Now, enter the Duplicate panel of Craft again and create the rest of the elements with the following properties: In the vertical direction, use a Count of “2” and a Gutter of about “46”; horizontally, we need “3” elements now, but with a
spacing of “21” to respect the new gutters of the layout grid. With a click on Duplicate Content, you’ll get the remaining sights back. In case the second row doesn’t sit on the baseline, adapt the vertical spacing until you get perfect
alignment, with three rows in between. It may also have happened that some of the titles became double-spaced; in this case, enter the master symbol, select the title, hold Alt and drag the right handle until the text layer is full-width.
The only thing left is to move the “Sights” group to the left edge of the grid. You’ll see that all elements align perfectly to the grid columns now.

Fig. 8.7: The adapted “You might also like” area, with the new layout of three columns and two rows.

For a finishing touch, resize the dark background until there is gap of about three rows from the bottom of the second row of sights, and match the height of the artboard to this position. You might also want to change the categories of
the symbols in the drop-down in the inspector to have some variation for the category lines. With this last action, we have completed the second responsive breakpoint of the article. For the third and final one, we will look at how the arti‐
cle would look on a display that is 1920 pixels wide.

1. http://smashed.by/sketch-grid (http://smashed.by/sketch-grid)

Recommended / Playlists / History / Topics / Tutorials / Settings / Get the App / Sign Out
© 2018 Safari. Terms of Service / Privacy Policy
PREV NEXT
⏮ ⏭
Chapter 7: Design The Article Page Chapter 9: The Final Breakpoint: Desktop Widescreen

You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.