Adjusting the Layout for Tablets & Mobile Phones

Topics covered in this Adobe XD tutorial:

Designing with Bootstrap’s grid, Adapting the design for tablets, Adapting the design for mobile phones

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to modify a desktop-sized design for smaller screens, such as tablets and mobile phones.

Comparing Bootstrap’s Grid Across Screen Sizes

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class > NYC and double–click on About Page - Ready for Tablet & Phone.xd to open it.

   NOTE: This file should look like the one you worked on in the previous exercise. We’re using this file just in case you played around with your design and did something different.

3. Comparing the Desktop and Tablet artboards, notice that the aqua content columns are narrower in the tablet size, but the gutters (space between columns) are the same width.

   NOTE: The Tablet artboard is designed for a screen size of 768px. The content container is 720px wide.

4. Compare the Tablet and Phone artboards. You can’t fit 12 columns on a small phone like this. Our template has 2 columns, but 3 or 4 columns could work for small items (such as icons, thumbnail images, etc.). Main text columns would typically stretch across the entire grid (leaving some space on the left and right so they don’t touch the edge of the screen).

   NOTE: Our Phone artboard is 320px wide, the width of an iPhone SE.

Adapting the Design for Tablets

1. In the Toolbar, choose the Select tool .

2. Let’s copy over the elements from the Desktop artboard. To make both artboards fill the screen:

   • In the Layers panel, click on Tablet.
   • In the Layers panel, Shift–click on Desktop.
   • Zoom to the selection by hitting Cmd–3 (Mac) or Ctrl–3 (Windows).
3. You should only see the two artboards. Click on a blank area of the canvas to deselect both artboards.
4. Click on the NEW YORK CITY text to select it.
5. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.
6. Select the Tablet artboard by clicking on its name at the top left of the artboard.
7. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste.
8. The text is a bit large for this layout. In the Property Inspector change the size to 70 (font size is in the Text section under the font name).

9. Drag the text so the left edge lines up with the leftmost solid aqua column and move it up until it snaps to the top of the artboard.

   NOTE: At any point during this exercise, feel free to zoom in or out as needed by holding Cmd (Mac) or Ctrl (Windows) and hitting Plus(+) or Minus(-).

10. As shown below, on the Desktop artboard drag a selection box over the sidebar text and background color by starting your drag outside the elements, and dragging until the selection box touches the background and text. Both elements will become selected:

    

11. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy the two elements.
12. Click anywhere on the Tablet artboard to switch to it. (You can verify which artboard you’re on by looking at the top of the Layers panel).
13. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste. It will be pasted in the center of the artboard.
14. Zoom to 100% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows).

15. Position the sidebar’s right side at the far right edge of Bootstrap’s container. As shown below, move the sidebar so its right edge aligns with the far right guide. The top position is up to you, but refer to the image as a guide.

    

16. Click on a blank area of the canvas to deselect.
17. In the Tablet artboard, click on the sidebar text to select it.

18. The sidebar text column needs to be narrower. Drag the text box’s left-middle handle in so it ends up being 5 columns wide (as shown below):

    

    NOTE: The sidebar spans 4 columns on the desktop, but that’s a bit small for the tablet layout. Grid systems don’t require elements to span the same amount of columns across screen sizes. So on the tablet we’ll make the sidebar span 5 columns.

19. The sidebar’s light blue background color is too short. Click on it to select it.

20. Drag the background color’s bottom-left handle until it’s tall enough to fit the text and it lines up with the gutter divider guide (as shown below):

    

21. If you can’t see the Desktop artboard, scroll to it by holding Spacebar and dragging.

    Mac Users: If you’re using a trackpad, you can use a 2-finger drag to scroll. You can also zoom using a 2-finger pinch.

22. On the Desktop artboard, drag a selection over the white background and its text (the main column) so both elements are selected.
23. Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy them.

24. To paste the items onto the Tablet artboard:

    • Scroll over to the Tablet artboard if needed.
    • Click anywhere on the Tablet artboard to switch to it.
    • Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste.

    Now you can really see how much smaller the Tablet artboard is.

25. As shown below, align the white box’s left edge with the far left guide (the edge of Bootstrap’s container). It should snap into place. Vertically align it with the sidebar (which it should also snap to even though you can’t see the top of it).

    

26. Click in an empty area of the canvas to deselect the elements.
27. Click on the main column’s white background to select it.
28. Pull the background’s right-middle handle inward until it snaps to the edge of the sidebar’s background.
29. Select the main column’s text box.

30. Drag the text box’s right-middle handle so it lines up with the aqua column as shown below:

    

31. Let’s resize the artboard so it’s tall enough to fit all the text. Click in the gray canvas outside the artboard.
32. In the Layers panel, click once on the Tablet artboard.
33. Drag the artboard’s bottom-middle handle down until you see all the text and some extra space (we’ll be extending the column’s white background next).
34. On the Tablet artboard, click on the main column’s white background to select it.
35. Drag the bottom-middle handle down so it ends below the text, with some extra space.
36. Click on the sidebar’s light blue background to select it.
37. Drag the bottom-middle handle down until it lines up with the white background of the main column.
38. Hit Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows) to hide the layout grid.
39. Choose View > Guides > Hide All Guides or hit Cmd–; (Mac) or Ctrl–; (Windows).

40. Zoom to 100% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows).

    NOTE: You may think the padding on the left and right is a bit tight. This is the least amount of padding you’d see, because slightly larger screens will have the same width content area, but more space on the left/right sides. Padding amounts in pre-built grid systems are predefined, and you may or may not be able to customize them. For this reason, some people prefer to create their own grid systems or customize the appearance of pre-made grid systems. To keep things simple, we’re sticking with Bootstrap’s predefined grid.

41. Do a File > Save.

Adapting the Design for Mobile Phones

Multiple text columns don’t fit on small screens, so we can make the mobile layout a single column, with the white main column on top.

1. Click on a blank area of the canvas to deselect any artboards.
2. In the Layers panel, click once on Phone.
3. Hold Shift and click on Tablet.
4. Zoom to the selection by hitting Cmd–3 (Mac) or Ctrl–3 (Windows).
5. Click on a blank area of the canvas to deselect both artboards.
6. To fit all the content, we’ll need to make the Phone artboard taller. At the top left of the artboard click on the word Phone to select the artboard.
7. Grab the bottom resize handle and drag it down a little. Visually resizing can be nice, but we need a lot more space. Let’s type in a larger height.
8. In the Property Inspector on the right, set H (Height) to 2000 and hit Return (Mac) or Enter (Windows).
9. Creating the Phone layout would be the same process of copy, paste, and adjust. You just did that, so we won’t make you do it again (although you can if you want).
10. Save the file and close it.