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. Now you'll master the critical skill of adapting that design for smaller screens—tablets and mobile phones. This responsive design workflow is essential in today's mobile-first world, where over 60% of web traffic comes from mobile devices. Understanding how to efficiently translate desktop layouts into mobile-optimized versions will make you a more versatile and valuable web designer.

Comparing Bootstrap's Desktop, Tablet, & Mobile Grids

Before diving into the adaptations, let's examine how Bootstrap's grid system responds across different screen sizes. This foundational understanding will inform every design decision you make.

1. In Photoshop, close any files you have open to start with a clean workspace.
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 this standardized version to ensure consistency as you learn the responsive design workflow.

4. Examine the grids on the Tablet and Desktop artboards. Notice that the gray content columns are narrower in the tablet size, but the gutters (space between columns) maintain the same width. This consistency in spacing is what makes Bootstrap's grid system so reliable across devices.

   NOTE: The Tablet artboard targets screens 768px or larger—Bootstrap's medium breakpoint. The content container spans 750px wide, optimized for portrait tablet viewing and small laptop screens.

5. Compare the Phone and Tablet artboards. The phone layout shows 2 gray columns instead of 12, while maintaining the same gutter width. Although Bootstrap technically supports 12 columns at any screen size, mobile design reality dictates using 1 or 2 columns maximum—anything more creates unusable, cramped interfaces.

Adapting the Design for Tablets

Tablet design requires a delicate balance: maintaining desktop functionality while accommodating touch interaction and reduced screen real estate. Let's systematically adapt our desktop layout.

1. Let's begin by transferring 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 simultaneously.
3. In the Layers panel, CTRL–click (Mac) or Right–click (Windows) on the name of any selected layer and choose Duplicate Layers from the context menu.
4. In the dialog that opens, from the Artboard menu choose Tablet.
5. Click OK.
6. Notice that both layers have been copied to the Tablet artboard with both layers remaining selected for immediate positioning.
7. Zoom in using View > Zoom In to see the artboard details more clearly and work with precision.
8. Select the Move tool if it's not already active.
9. At the top left of the Options bar, ensure Auto-Select is unchecked to maintain precise layer control.
10. Make guides visible by hitting Cmd–; (Mac) or CTRL–; (Windows) if they're not already showing.
11. To prevent accidental guide movement while positioning content, choose View > Lock Guides.

12. In the Tablet artboard, drag the sidebar upward so that the top-right corner of the background aligns perfectly with the far right guide, as shown below. Use the Arrow keys for fine-tuned positioning when needed.

    

13. Now we'll resize the background independently of the text. In the Layers panel, within the Tablet artboard, click on the sidebar bg layer to select it exclusively.

14. Go to Edit > Free Transform (may display as Free Transform Path depending on your current tool).

    Here's where responsive design strategy comes into play: the sidebar spans 3 columns on desktop, but that proportion feels cramped on tablets. Grid systems excel because they allow flexible column spanning across breakpoints. For optimal tablet readability, we'll expand the sidebar to span 5 columns.

15. Drag the left resize handle outward so the background fills the 5 rightmost gray columns. Remember: background colors should align to the middle gutter guide, not the edge of the gray column—this ensures proper spacing when the design is coded.

    

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

17. The colored background is now properly sized, but the text area needs adjustment to match. In the Layers panel, within the Tablet artboard, double–click on the layer thumbnail (T icon) to the left of the Popular New York Attractions text layer.

    This automatically switches to the Type tool and selects all text in the layer for immediate editing.

18. Drag the left side of the text box outward to fill the same 5 gray columns as the background:

    

    NOTE: Using the Type tool to resize maintains the original font size and formatting—crucial for responsive design. Free Transform would scale the actual text, creating inconsistent typography across breakpoints.

19. Switch back to the Move tool to continue with layout adjustments.
20. Now let's transfer the main content column. In the Layers panel, within the Desktop artboard, click the Unlike Any Other City layer to select it.
21. Hold Shift and click the main col bg layer to select both elements.
22. In the Layers panel, CTRL–click (Mac) or Right–click (Windows) on any selected layer name and choose Duplicate Layers.
23. In the dialog, select Tablet from the Artboard menu.
24. Click OK.

25. On the Tablet artboard, position the main content background as shown below, aligning the left edge with the first blue guide. Use the pink Smart Guides to align the top edge with the sidebar background for visual harmony.

    

26. When layers are duplicated, they're added above the columns layer. In the Layers panel, within the Tablet artboard, drag the columns layer to the top for visibility.
27. Lock the columns layer by selecting it, then clicking the Lock all button to prevent accidental movement.
28. In the Layers panel, within the Tablet artboard, select the main col bg layer.
29. Use the keyboard shortcut for efficiency: Hit Cmd–T (Mac) or CTRL–T (Windows) to activate Free Transform.
30. Drag the background's right resize handle inward until it snaps precisely to the edge of the sidebar's background, creating a seamless layout.
31. Hit Return (Mac) or Enter (Windows) to apply the changes.
32. Select the Type tool to adjust the text area.
33. Hover over the text—if you see a cursor with a circle around it, the background shape is still selected. Hit Return (Mac) or Enter (Windows) to deselect it.
34. When you see the normal I-beam text cursor, click into the text to activate text editing mode.

35. Drag anywhere on the right side of the text box to resize it to span 7 gray columns wide:

    

36. Return to the Move tool for final positioning.
37. The background rectangles need height adjustment to properly contain the content. In the Layers panel, within the Tablet artboard, click on main col bg.
38. Hold Cmd (Mac) or CTRL (Windows) and click on sidebar bg to select both backgrounds simultaneously.
39. Hit Cmd–T (Mac) or CTRL–T (Windows) to transform both elements together.
40. Drag the bottom resize handle downward so both backgrounds extend slightly below their respective text content.
41. Hit Return (Mac) or Enter (Windows) to confirm the sizing.

42. To evaluate your progress without distractions:

    • Hide the guides by hitting Cmd–; (Mac) or CTRL–; (Windows).
    • Hide the columns layer in the Tablet artboard by clicking its visibility eye.

    NOTE: The padding may appear tight, but this represents the minimum spacing on smaller tablets. Larger tablet screens will maintain the same content width while adding more margin space. Bootstrap's predefined padding ensures consistency, though some designers prefer custom grid systems for more control. For this tutorial, we're leveraging Bootstrap's battle-tested standards.

43. Save your progress with File > Save.

Adapting the Design for Mobile Phones

Mobile design requires a fundamental shift in thinking. Multi-column layouts become single-column experiences, and content hierarchy becomes critical. We'll create a mobile-first approach where the main content takes priority over sidebar information.

1. Let's explore an alternative layer selection method. Choose the Move tool .
2. At the far left of the Options bar, check Auto-Select to enable click-to-select functionality.

3. Ensure the menu next to Auto-Select reads Layer.

   This powerful feature allows direct layer selection by clicking on visual elements—perfect for rapid mobile layout adjustments.

4. On the Tablet artboard, click anywhere within the Unlike Any Other City text to select that layer.
5. Hold Shift and click in an empty area of the white background to add it to your selection.
6. Check the Layers panel—both layers should now be selected, demonstrating the efficiency of Auto-Select mode.
7. In the Layers panel, CTRL–click (Mac) or Right–click (Windows) on any selected layer name and choose Duplicate Layers.
8. In the dialog, select Phone from the Artboard menu.
9. Click OK.
10. On the Phone artboard, drag the selected layers so the background aligns perfectly with the top-left corner—establishing the mobile content hierarchy.
11. In the Layers panel, within the Phone artboard, drag the columns layer to the top for visibility.
12. Show guides again with Cmd–; (Mac) or CTRL–; (Windows) to maintain precision.
13. The default artboard height won't accommodate the mobile content. In the Layers panel, select the Phone artboard itself.
14. If resize handles aren't visible, select the Artboard tool .
15. Rather than eyeballing the resize, let's use precise measurements. Begin dragging the bottom resize handle slightly, then stop—we'll input exact dimensions.
16. In the Properties panel, set H (Height) to 1800 and hit Return (Mac) or Enter (Windows) for a proper mobile content length.
17. The artboard resize means our columns layer no longer fits properly. In the Layers panel, within 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 new artboard bottom edge.
20. Hit Return (Mac) or Enter (Windows) to apply the sizing.
21. The text is currently cut off due to the layout changes. Select the Type tool .
22. Hover over the text—if there's a circle around the cursor, hit Return (Mac) or Enter (Windows) to deselect the columns layer.
23. With the normal I-beam cursor visible, click into the text to activate editing.
24. Drag the right edge of the text box to align with the outer gray column, maximizing mobile reading width.
25. Drag the bottom edge of the text box downward until all text content is visible and properly contained.
26. Switch to the Move tool to adjust the background.
27. The white background also needs expansion. Click on it to select (verifying main col bg is selected in the Layers panel). If clicking is difficult due to limited space, select the layer directly from the Layers panel.
28. Hit Cmd–T (Mac) or CTRL–T (Windows) to transform.
29. Drag the background's right edge inward until it snaps to the artboard's edge—utilizing full mobile width.
30. Extend the bottom edge slightly below the text content for proper visual spacing.
31. Hit Return (Mac) or Enter (Windows) to apply changes.
32. Use View > Fit on Screen to see the overall layout context.

33. Now we'll transfer the sidebar content below the main content—mobile UX best practice. On the Tablet artboard, we'll select both sidebar elements using a selection box technique.

    NOTE: The locked columns layer won't interfere with this selection, demonstrating why we locked it earlier.

34. Starting from outside the artboard (to avoid accidentally moving existing content), drag a selection box that encompasses both the sidebar text and background, as shown below:

    

    NOTE: With Auto-Select active, dragging on existing content moves it immediately. Starting the drag from empty space creates a selection box instead—a crucial technique for multi-layer selection.

35. Verify in the Layers panel that both Popular New York… and sidebar bg layers are selected.
36. Here's an efficient duplication technique: Hold Option (Mac) or ALT (Windows) and drag the sidebar elements directly to the Phone artboard, positioning them below the main text column.
37. Zoom to 100% or 200% and scroll to see the Phone sidebar area clearly for precise positioning.

38. Position the sidebar directly beneath the main column with edges touching, aligned to the artboard's left edge:

    

39. In the Layers panel, within the Phone artboard, move the columns layer to the top for visibility.
40. Clean up the layer naming by renaming sidebar bg copy to simply sidebar bg.
41. With the sidebar bg layer selected, hit Cmd–T (Mac) or CTRL–T (Windows) for transformation.
42. Extend the sidebar background's right edge to the artboard's right side—full mobile width utilization.
43. Adjust the bottom edge to sit just below the text content for optimal spacing.
44. Hit Return (Mac) or Enter (Windows) to apply.
45. Select the Type tool to adjust the text area.
46. If the cursor shows a circle, hit Return (Mac) or Enter (Windows) to deselect the background rectangle.
47. With the normal I-beam cursor, click into the sidebar text to activate editing.
48. Drag the right edge of the text box to align with the rightmost gray column for maximum mobile readability.
49. Ensure the left edge also aligns with the outer gray column for consistent margins.
50. Return to the Move tool to complete the layout.
51. Use View > Fit on Screen to see all three artboards and compare your responsive design across breakpoints.
52. Hide the guides with Cmd–; (Mac) or CTRL–; (Windows) for a clean preview.
53. Hide the columns layer in each artboard to see the final design without grid overlays.

54. Save your work with File > Save.

    In the next exercise, you'll enhance the Desktop design further. While we won't continue developing the Tablet and Phone layouts, the responsive workflow you've mastered here applies to all design elements—images, buttons, navigation, and complex graphics. This systematic approach to responsive design will serve you throughout your career as mobile usage continues to dominate web traffic.

    TIP: Remember that responsive design isn't just about shrinking content—it's about reimagining the user experience for each device. The mobile-first approach you've learned here ensures your designs work beautifully across the entire spectrum of modern devices.