Responsive Landing Page Design

1. Principles of Effective Mobile Adaptation

Before we start resizing elements in Figma, it's crucial to think strategically. Simply stacking your desktop content vertically is not enough; that's "irresponsible, not responsive." A successful mobile adaptation involves re-evaluating and optimizing every part of the page for a different context of use.

The image below summarizes four key best practices for a high-converting mobile landing page. Think of it as a strategic checklist for our work today.

To go deeper, let's explore the common pitfalls designers encounter when moving from desktop to mobile. Understanding what not to do will help you make better decisions.

Keep these principles in mind as we now move into Figma. For every section of your desktop design, ask yourself: "How can I make this clearer, simpler, and easier to use on a small screen?"

2. The How-To: Adapting Your Layout in Figma

Now for the hands-on portion. We will walk through the technical process of converting a desktop design to mobile, section by section. The following video provides an excellent end-to-end demonstration. We will use it as our guide, pausing to focus on specific techniques that you will then apply to your own landing page project.

Step 1: Setting Up the Mobile Frame and Grid

First, we need a canvas for our mobile design. It’s important to choose an appropriate frame size and set up a layout grid that works for smaller screens.

• Action: Watch the first part of the video, focusing on setting up.
• Key Points:
  • He chooses the "Android Large" preset (360px wide). His reasoning—that its width is an even number divisible by 8—is a great example of connecting a design system (the 8-point grid) to practical choices.
  • He creates a new 4-column mobile grid style. This is a simpler grid for a narrower viewport.
• Your Turn: In your Figma file, create a new page for your mobile design. Add a frame (e.g., Android Large or iPhone 13/14) and set up a 4-column layout grid.

Step 2: Adapting the Header and Hero Section

The header and hero are the most critical parts of the mobile view. We need to simplify the navigation and ensure the value proposition is immediately clear.

• Action: Watch the sections covering the mobile navigation and the hero section.
• Key Decisions:
  • He replaces the desktop navigation links with a single hamburger menu icon. In the next lesson, we'll focus on designing the menu that this icon opens. For now, just create and place the icon itself.
  • Notice his excellent point about increasing the tap target of the icon using an Auto Layout frame with padding. This is a crucial mobile usability practice.
  • In the hero section, he wisely removes the "send link" input field, realizing that on mobile, a direct link to the app store is a much lower-friction call-to-action.
• Your Turn: Adapt your header by replacing navigation links with a hamburger icon. Then, adapt your hero section. Do you need to change your CTA? Simplify the imagery?

Step 3: Creating Mobile-Specific Text Styles

Text that is perfectly legible on a desktop will often be too large and dominating on a mobile screen. Creating separate text styles for mobile is key to maintaining a strong visual hierarchy.

• Action: Watch the segment on mobile type styles.
• Key Technique:
  • He detaches the desktop Header 1 style, reduces its size, and saves it as a new style named Mobile/Header 1. Using the Folder/Name convention is an excellent way to keep your styles organized.
• Your Turn: Review the text on your mobile design. Identify any styles that need to be smaller. Create mobile-specific variants for your heading styles.

Step 4: Restructuring Content Patterns

This is where the most significant changes happen. Multi-column layouts from the desktop version must be re-imagined for a single-column world.

• Action: Watch how the video handles two common desktop patterns.
  1. Icon Grid to Horizontal Slider: Watch how a three-column grid is converted into a horizontal scrolling component. Notice how he resizes the cards and enables "horizontal scrolling" in the Prototype panel to create an affordance. He applies the same logic to the reviews section.
  2. Two-Column Media Section to Stacked Layout: Watch how the alternating image-and-text sections are stacked vertically. Pay close attention to his discussion around 15:38. He explains that while a browser would naturally stack elements based on their code order (left-to-right becomes top-to-bottom), a better user experience often requires overriding this. This is a fantastic insight connecting design intent to developer reality.
• Your Turn: Identify the multi-column sections in your desktop design. Decide on the best mobile pattern for each: should they stack vertically, or would they work better as a horizontal scrolling element? Apply the techniques from the video to restructure these sections.

Step 5: Adapting the Footer

Finally, the footer needs to be simplified and its content re-stacked for easy access on mobile.

• Action: Watch the final adaptation segment on the footer.
• Key Technique:
  • He uses Auto Layout's direction property to switch horizontal link groups to vertical lists.
  • He removes the non-essential input field and simplifies the CTA.
• Your Turn: Re-organize your footer content into a clean, vertical layout.

Conclusion

Congratulations! You have successfully translated a desktop design into a thoughtful, mobile-optimized layout. This process goes far beyond just resizing elements; it requires a strategic mindset focused on prioritization and context.

Key Takeaways:

• Mobile adaptation is about simplification: You must actively decide what to remove, shrink, or hide to reduce cognitive load and focus on the user's primary goals.
• Change patterns, don't just stack: Instead of long vertical scrolls, consider using horizontal sliders for content like galleries, testimonials, or feature lists.
• Think about the user's physical interaction: Ensure buttons and links have large enough tap targets for easy interaction.
• Communicate with developers: Understanding how your layout choices (like reordering stacked elements) might affect development is a sign of a mature designer.

Preview of the Next Lesson:
Your mobile layout is now structurally complete, but the navigation is just an icon. In our next lesson, we will bring it to life. We will dive into common mobile navigation patterns and design a functional, user-friendly hamburger menu for your landing page.