Adjusting the Layout for Tablets & Mobile Phones

Topics Covered in This Adobe XD Tutorial:

Master responsive design fundamentals by designing with Bootstrap's Grid system, adapting layouts for tablets, and optimizing interfaces for mobile phones

Exercise Preview

Exercise Overview

Responsive design isn't just about making things smaller—it's about reimagining how users interact with content across different contexts. In this comprehensive exercise, you'll master the art of transforming desktop-optimized designs into tablet and mobile experiences that feel native to each device. You'll learn to work within Bootstrap's proven grid constraints while making strategic design decisions that prioritize usability and visual hierarchy across screen sizes.

Comparing Bootstrap's Grid Across Screen Sizes

1. Launch Adobe XD and navigate to File > Open from Your Computer or use the keyboard shortcut Cmd–Shift–O (Mac) or CTRL–Shift–O (Windows).

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

   NOTE: This starter file contains the completed desktop layout from the previous exercise. Using this ensures everyone begins with identical baseline designs, allowing you to focus on responsive adaptation techniques rather than troubleshooting layout inconsistencies.

3. Study the relationship between the Desktop and Tablet artboards. Notice how Bootstrap intelligently maintains consistent gutter widths while proportionally adjusting content column widths. This consistency is crucial for maintaining visual rhythm across breakpoints.

   NOTE: The Tablet artboard targets the 768px breakpoint—a critical threshold where many interfaces transition from desktop to tablet paradigms. The 720px content container provides optimal readability while accommodating touch interactions.

4. Compare the Tablet and Phone layouts to understand how dramatic grid simplification becomes necessary on small screens. The 12-column desktop grid collapses to just 2 primary columns on mobile, though 3-4 columns work effectively for supplementary content like icon grids or image galleries. Primary content blocks typically span the full width to maximize readability on constrained screens.

   NOTE: Our Phone artboard uses the 320px width of an iPhone SE—still relevant in 2026 as the baseline for ensuring accessibility across older and budget devices globally.

Adapting the Design for Tablets

Tablet design requires balancing desktop functionality with mobile usability patterns. Let's transform our desktop layout into a tablet-optimized experience.

1. Select the Select tool from the toolbar to begin transferring elements between artboards.

2. Create an optimal workspace by displaying both artboards simultaneously:

   • Click Tablet in the Layers panel
   • Shift–click Desktop to select both artboards
   • Press Cmd–3 (Mac) or CTRL–3 (Windows) to zoom both artboards into view
3. Click on empty canvas space to deselect the artboards and prepare for element selection.
4. Select the NEW YORK CITY heading text on the desktop artboard—this will serve as our primary navigation anchor.
5. Copy the text using Cmd–C (Mac) or CTRL–C (Windows).
6. Click on the Tablet artboard name to activate it as your paste destination.
7. Paste using Cmd–V (Mac) or CTRL–V (Windows).
8. Optimize the heading for tablet viewing by reducing the font size to 70 in the Property Inspector's Text section. This maintains visual hierarchy while improving content balance on smaller screens.

9. Position the heading by aligning its left edge with the leftmost aqua grid column and snapping it to the artboard's top edge. This establishes consistent grid alignment from the start.

   NOTE: Use Cmd/CTRL + Plus(+) or Minus(-) to zoom dynamically as needed throughout this exercise—precision often requires closer inspection.

10. Select both sidebar elements simultaneously on the Desktop artboard by dragging a selection box that encompasses both the background shape and text. Start your drag outside the elements and ensure the selection box touches both components:

    

11. Copy the sidebar elements using Cmd–C (Mac) or CTRL–C (Windows).
12. Switch to the Tablet artboard by clicking anywhere within its boundaries—verify your selection in the Layers panel header.
13. Paste the sidebar elements with Cmd–V (Mac) or CTRL–V (Windows). They'll appear centered on the artboard.
14. Set your zoom to 100% using Cmd–1 (Mac) or CTRL–1 (Windows) for accurate positioning work.

15. Position the sidebar strategically by aligning its right edge with the container's rightmost guide. This right-alignment approach ensures the sidebar doesn't interfere with primary content flow while maintaining grid integrity:

    

16. Click on empty canvas to deselect all elements.
17. Select the sidebar text within the Tablet artboard to optimize its width for the new context.

18. Resize the text box to span exactly 5 columns by dragging the left-middle handle inward until it aligns with the appropriate grid guide:

    

    NOTE: Strategic grid flexibility is key to responsive design success. While the desktop sidebar spans 4 columns, expanding to 5 columns on tablet creates better readability and visual balance. Effective responsive design prioritizes user experience over rigid column consistency.

19. Address the sidebar's background height by selecting the light blue background element.

20. Extend the background by dragging its bottom-left handle downward until it properly contains all text and aligns with a gutter guide for visual consistency:

    

21. Navigate back to the Desktop artboard using Spacebar + drag to pan, or utilize trackpad gestures on Mac (2-finger drag to scroll, 2-finger pinch to zoom).

    Mac Users: Trackpad navigation significantly speeds up multi-artboard workflows—master these gestures for professional efficiency.

22. Select both the main column's white background and its text content on the Desktop artboard using a selection drag.
23. Copy these elements using Cmd–C (Mac) or CTRL–C (Windows).

24. Transfer the main column to tablet by:

    • Navigating to the Tablet artboard
    • Clicking within the artboard boundaries to activate it
    • Pasting with Cmd–V (Mac) or CTRL–V (Windows)

    The dramatic size difference between artboards becomes immediately apparent—this visual contrast helps inform design decisions.

25. Create a cohesive two-column tablet layout by positioning the main column's left edge against the container's leftmost guide. The element should snap precisely into alignment both horizontally and vertically with the sidebar:

    

26. Deselect all elements by clicking in empty canvas space.
27. Select the main column's white background and resize it by dragging the right-middle handle inward until it snaps against the sidebar's background edge—creating a seamless column relationship.
28. Select the main column's text box for width optimization.

29. Adjust the text box width by dragging its right-middle handle to align with the appropriate aqua grid column, ensuring proper text flow and readability:

    

30. Optimize the artboard height by first clicking in the gray canvas area outside any artboards.
31. Select the Tablet artboard in the Layers panel.
32. Extend the artboard height by dragging the bottom-middle handle downward until all content is visible with appropriate breathing room.
33. Select the main column's white background on the Tablet artboard.
34. Extend the background downward using the bottom-middle handle, ensuring it extends beyond the text with professional spacing.
35. Select the sidebar's light blue background for height matching.
36. Align both column backgrounds by dragging the sidebar's bottom-middle handle until it matches the main column's height—creating visual harmony.
37. Hide the layout grid using Cmd–Shift–' (Mac) or CTRL–Shift–' (Windows) to see the clean design.
38. Remove all guides via View > Guides > Hide All Guides or Cmd–; (Mac) / CTRL–; (Windows).

39. View your completed tablet design at 100% zoom using Cmd–1 (Mac) or CTRL–1 (Windows).

    NOTE: The tight padding you observe represents Bootstrap's minimum spacing standards—larger tablets will maintain the same content width while adding more peripheral padding. While some designers prefer custom grid systems for greater control, Bootstrap's constraints ensure cross-platform consistency and faster development cycles. Understanding these trade-offs helps you make informed decisions about when to use pre-built versus custom solutions.

40. Save your progress with File > Save.

Adapting the Design for Mobile Phones

Mobile design represents the ultimate constraint challenge—transforming multi-column layouts into single-column experiences that prioritize essential content and thumb-friendly interactions.

1. Clear any artboard selections by clicking on blank canvas space.
2. Select the Phone artboard in the Layers panel.
3. Add the Tablet artboard to your selection using Shift + click.
4. Frame both artboards in view using Cmd–3 (Mac) or CTRL–3 (Windows).
5. Deselect both artboards by clicking on empty canvas space.
6. Prepare the mobile canvas by selecting the Phone artboard (click the artboard name at its top-left corner).
7. Begin resizing the artboard height by dragging the bottom handle—though visual approximation helps, precise dimensions are crucial for mobile design.
8. Set an appropriate mobile artboard height by entering 1000 in the Property Inspector's H (Height) field, then press Return (Mac) or Enter (Windows). This provides ample space for the single-column mobile layout.
9. The mobile adaptation process mirrors the tablet workflow you just mastered—copy elements from the tablet design, paste them onto the phone artboard, then adjust sizing and positioning for optimal mobile usability. Since you've demonstrated proficiency with these techniques, you may choose to complete this adaptation independently or move forward with the provided solution.
10. Save your work and close the file to prepare for the next exercise.