Adjusting the Layout for Tablets & Mobile Phones

Topics covered in this Photoshop for Web Design tutorial:

Comparing Bootstrap’s desktop, tablet, & mobile grids, Adapting the design for tablets, Adapting the design for mobile phones

Exercise Preview

Exercise Overview

In the previous exercise, you used a pre-made Bootstrap template to lay out a desktop design. In this exercise, you’ll learn how to modify that design for smaller screens, such as tablets and mobile phones.

Comparing Bootstrap’s Desktop, Tablet, & Mobile Grids

1. In Photoshop, close any files you have open.
2. To open a file, hit Cmd–O (Mac) or Ctrl–O (Windows).

3. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > NYC and double–click on About Page - Ready for Tablet & Mobile.psd to open it.

   NOTE: This is like the file you created in the previous exercise. We’re using it in case you got creative with your layout in the previous exercise.

4. Look at the grids on the Tablet and Desktop artboards, noticing that the gray 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 or larger. The content container is 750px wide.

5. Compare the Phone and Tablet artboards. Notice the phone has 2 gray columns (instead of 12), but the gutters are the same width. Bootstrap lets you have 12 columns at any screen size, but on a phone you typically use 1 or 2 columns (because you can’t fit much more than 2) so we included 2.

Adapting the Design for Tablets

1. Let’s copy over the elements from the Desktop artboard. In the Layers panel, click on the Popular New York Attractions layer to select it.
2. Hold Shift and click on the sidebar bg layer to select both layers.
3. In the Layers panel, Ctrl–click (Mac) or Right–click (Windows) on the name of any of the selected layers and choose Duplicate Layers from the menu.
4. In the dialog that opens, from the Artboard menu choose Tablet.
5. Click OK.
6. Notice that the two layers have been copied to the Tablet artboard. Both layers should still be selected.
7. Feel free to zoom in (View > Zoom In) to see the artboard more clearly.
8. If it’s not already selected, choose the Move tool .
9. At the top left of the Options bar, make sure Auto-Select is unchecked.
10. If the guides are not visible, show them by hitting Cmd–; (Mac) or Ctrl–; (Windows).
11. So that we don’t accidentally move the guides while we’re trying to move the content, choose View > Lock Guides.

12. In the Tablet artboard, drag the sidebar up so that the top-right corner of the background is aligned to the far right guide, as shown below. The top position is up to you, but refer to the image as a guide. (You can also use the Arrow keys to nudge it into position as needed.)

    

13. We need to resize the background (but not the text). In the Layers panel, in the Tablet artboard, click on the sidebar bg layer so that it’s the only layer selected.

14. Go to Edit > Free Transform (may say Free Transform Path depending on which tool you’re using).

    The sidebar spans 3 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.

15. Drag out the left resize handle so it fills up the 5 gray columns on the right. Remember that background colors like this should align to the middle gutter guide, not the edge of the gray column.

    

16. Hit Return (Mac) or Enter (Windows) to apply.

17. That resizes the colored background, but we still need to fix the text. In the Layers panel, in the Tablet artboard, double–click on the layer thumbnail (T) on the left of the Popular New York Attractions text layer.

    This should switch to the Type tool and select all the text in the layer.

18. Drag the left side of the box so it fills the 5 gray columns:

    

    NOTE: If we resized the text using Free Transform, it would scale the text (which we don’t want to do). By using the Type tool, we resize the text area without changing the type size.

19. Choose the Move tool .
20. Now let’s copy over the main text column. In the Layers panel, in the Desktop artboard, click the Unlike Any Other City layer to select it.
21. Shift–click the main col bg layer.
22. In the Layers panel, Ctrl–click (Mac) or Right–click (Windows) on the name of any selected layer and choose Duplicate Layers from the menu.
23. In the dialog that opens, from the Artboard menu choose Tablet.
24. Click OK.

25. On the Tablet artboard drag the main background as shown below, aligning the left edge with the first blue guide. Use the pink Smart Guides to align the top of the rectangle with the top of the sidebar background.

    

26. When we duplicated the layers from the Desktop artboard, the new layers were added above the columns layer. In the Layers panel, in the Tablet artboard, drag the columns layer to the top so we can see them.
27. Lock the columns layer by selecting it in the Layers panel, then clicking the Lock all button .
28. In the Layers panel, in the Tablet artboard, select main col bg.
29. We’re going to use Free Transform a lot, so to speed things up a bit, let’s use the keystroke. Hit Cmd–T (Mac) or Ctrl–T (Windows).
30. Pull the background’s right resize handle inward until it snaps to the edge of the sidebar’s background.
31. Hit Return (Mac) or Enter (Windows) to apply the changes.
32. Select the Type tool .
33. Hover over the text and notice that most likely the cursor has a circle around it. That means the background’s vector shape is still selected. Hit Return (Mac) or Enter (Windows) to deselect it.
34. Hover over the text again and you should get the normal I-beam text cursor with no outline. Go ahead and click into the text to put the cursor in it.

35. Drag anywhere on the right side of the text box (you don’t need to grab a resize handle) so it becomes 7 gray columns wide:

    

36. Choose the Move tool .
37. On the Tablet artboard, the two background rectangles are a bit short. In the Layers panel, in the Tablet artboard, click on main col bg to select it.
38. Cmd–click (Mac) or Ctrl–click (Windows) on sidebar bg so both are selected.
39. Hit Cmd–T (Mac) or Ctrl–T (Windows).
40. Drag the bottom resize handle down so they end a bit below the text.
41. Hit Return (Mac) or Enter (Windows) to accept the sizing.

42. To better preview your progress:

    • Hide the guides by hitting Cmd–; (Mac) or Ctrl–; (Windows).
    • Hide the columns layer in the Tablet artboard.

    NOTE: If you think the padding on the left and right is a bit tight, don’t worry. This is the least amount of padding you’d see, because 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.

43. Do a File > Save.

Adapting the Design for Mobile Phones

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

1. Let’s learn another way to select layers. Choose the Move tool .
2. At the far left of the Options bar, check on Auto-Select.

3. Make sure the menu next to Auto-Select says Layer.

   As we’ll see in a moment, this will allow us to select layers by clicking on them (or dragging over multiple layers).

4. On the Tablet artboard, click anywhere on the Unlike Any Other City text to select it.
5. Shift–click in an empty area of the white background.
6. Notice in the Layers panel that they are both selected!
7. In the Layers panel, Ctrl–click (Mac) or Right–click (Windows) on the name of any selected layer and choose Duplicate Layers from the menu.
8. In the dialog that opens, from the Artboard menu choose Phone.
9. Click OK.
10. On the Phone artboard, drag the selected layers so that the background aligns to the top-left corner.
11. In the Layers panel, in the Phone artboard, drag the columns layer to the top so they are visible.
12. To show the guides again, hit Cmd–; (Mac) or Ctrl–; (Windows).
13. To see all the text, we need to make the artboard taller. In the Layers panel, select the Phone artboard.
14. If you do not see the resize handles, select the Artboard tool .
15. Grab the bottom resize handle and start dragging down just a little and then stop. Visually resizing can be nice, but we need a lot more space. Let’s type in a larger height.
16. In the Properties panel on the right, set H to 1800 and hit Return (Mac) or Enter (Windows).
17. Now that we’ve changed the artboard size, the columns layer no longer matches. Let’s fix it. In the Layers panel, in the Phone artboard, select the columns layer.
18. Hit Cmd–T (Mac) or Ctrl–T (Windows) to transform it.
19. Drag the bottom resize handle down to the bottom edge of the artboard.
20. Hit Return (Mac) or Enter (Windows) to accept the sizing.
21. Notice that the text is cut off at the moment. Select the Type tool .
22. Hover over the text. If the cursor has a circle around it, hit Return (Mac) or Enter (Windows) to deselect the columns.
23. Once you see the normal I-beam text cursor, click into the text.
24. Drag anywhere on the right side of the text box and align the right edge with the outer gray column.
25. Drag the bottom edge of the text box until you can see all of the text.
26. Choose the Move tool .
27. The white background is also not tall enough. Click on it to select it, verifying that the main col bg layer in the Layers panel (Phone artboard) is selected. There’s not a lot of space around the text to click on it, so if you’re having a hard time clicking on it to select, just select the main col bg layer in the Layers panel.
28. Hit Cmd–T (Mac) or Ctrl–T (Windows).
29. Drag the background’s right edge inward until it snaps to the artboard’s side.
30. Drag the background’s bottom edge down to slightly below the end of the text.
31. Hit Return (Mac) or Enter (Windows) to apply the changes.
32. Choose View > Fit on Screen.

33. On the Tablet artboard, we want to select the sidebar text along with its background. We can do that by dragging a selection box around them.

    NOTE: Remember how we locked the columns layer earlier? If it wasn’t locked, it would be selected and moved.

34. As shown below, starting outside the artboard, drag a selection box over the sidebar text and sidebar bg until the selection box touches them at least a little.

    

    NOTE: With Auto-Select on, you’ll move an item if you drag on it. So to create this multi-layer selection you must start the drag from an empty place in your design. This could be outside the artboard, or an empty part of the artboard.

35. Verify that the two proper layers were selected in the Layers panel (Popular New York… and sidebar bg).
36. Let’s copy the sidebar across to the Phone artboard using a new technique. Hold Option (Mac) or Alt (Windows) and drag the sidebar layers across to the Phone artboard, putting it below the main text column.
37. Zoom in to 100% or 200% and scroll so you can see the top of the Phone’s sidebar (below the white main text column).

38. If it’s not positioned properly, drag the sidebar under the main column so their edges are touching (and it’s aligned to the left of the artboard).

    

39. In the Layers panel, in the Phone artboard, move the columns layer to the top.
40. Rename sidebar bg copy to sidebar bg.
41. With the sidebar bg layer still selected, hit Cmd–T (Mac) or Ctrl–T (Windows).
42. Drag the sidebar bg’s right edge to the right side of the artboard.
43. Pull the bottom edge up to just below the text.
44. Hit Return (Mac) or Enter (Windows) to apply.
45. Choose the Type tool
46. Hover over the sidebar text, and if the cursor has a circle around it, hit Return (Mac) or Enter (Windows) to deselect the rectangle.
47. Once you see the normal I-beam text cursor, click into the sidebar text.
48. Drag anywhere on the right side of the text box and align the right edge with the rightmost gray column.
49. If needed, align the left side to the outer gray column as well.
50. Choose the Move tool .
51. Go to View > Fit on Screen to compare the three artboards.
52. Hide the guides by hitting Cmd–; (Mac) or Ctrl–; (Windows).
53. Hide the columns layer in each artboard.

54. Do a File > Save.

    In the next exercise, you’ll work more on the Desktop design. While we won’t be working with the Tablet and Phone designs, the workflow you just learned applies to moving and adapting other elements (such as graphics).

    TIP: Hold Option (Mac) or Alt (Windows) and drag an artboard to duplicate it.