The Complete Guide to Mobile-Friendly Demos

Overview

Delivering a great demo experience on mobile devices requires more than just resizing your screen. Whether you’re capturing a desktop product for mobile viewing, recording directly from a mobile device, or showcasing a native mobile app, optimizing for smaller screens ensures your audience can easily navigate, engage, and understand your content.

This guide walks you through the best practices for preparing demos that look sharp, load quickly, and remain interactive—no matter the viewer’s device.

In this guide:

⚡ Quick Mobile Optimization (Start Here)
Get the smoothest mobile experience in minutes using Walnut’s built-in mobile viewing features.

• Quick Mobile Optimization: Instantly improve existing demos using built-in mobile optimization features — no re-capture required.

🖥️ Adapt Desktop Captures for Mobile Viewing

Learn how to make desktop product demos readable, navigable, and effective on smaller screens — without re-capturing unless necessary.

• Optimize New Desktop Captures for Mobile: Learn techniques to optimize new desktop captures for mobile screens.
• Optimize Existing Desktop Captures for Mobile: Learn how to adapt existing desktop captures for mobile viewing.

📲 Create & Optimize Mobile App Experiences

Showcase mobile experiences that look and behave naturally on phones and tablets.

• Capture Mobile-Responsive Versions of Desktop Apps: Capture the mobile-responsive layout of your product to deliver demos that look great and function seamlessly on phones and tablets.
• Showcase Native Mobile Apps (iOS & Android): Use the Screens Library and Custom Elements to create a realistic, interactive flow from screenshots, GIFs, or recordings of your native mobile app.

✅ Validate & Test

Confirm your demos perform as expected before sharing them widely.

• Use the Browser Simulator to Test Mobile Viewing: Preview your demo in the browser’s built-in device simulator to ensure it looks and functions correctly across different mobile devices and screen sizes.

⚡️Quick Mobile Optimization (Start Here)

Quick optimization is ideal for guided demos and works with existing desktop captures, no re-capture required*. Walnut’s built-in mobile viewing features make it easy to optimize desktop demos for mobile with minimal effort and zero rebuilds.

What Happens When Mobile Optimization Is Enabled

When Optimize mobile viewing experience is turned on, Walnut automatically enhances your demo in three key ways:

• Mobile-Optimized Screen Display - Applies a recommended 4:3 ratio to improve readability and reduce awkward scaling on smaller screens.
• Enhanced Guided Demo Experience - Automatically enables split-screen navigation for guided demos:
  • Portrait: Guide + demo displayed together for step-by-step flow
  • Landscape: Wider side-by-side view for more screen context
• Flexible Viewing Options - Viewers can switch between portrait and landscape depending on what works best for their device.
• Seamless Mobile Access (Optional) - This is a secondary setting, independent of mobile optimization. When enabled, demos can open directly on mobile without showing the “Heads Up!” screen.

Quick Optimization Steps

1. Open any template from your Walnut Library.
2. Go to Template Settings → Screen Display.

3. Turn the Optimize mobile viewing experience setting ON (recommended for guided demos).

   

4. Update existing demos or publish a new one to apply the changes.
5. Test both portrait and landscape views to confirm that transitions look smooth.

Mobile Demos At a Glance

Mobile Demo Methods at a Glance — compare approaches, inputs, and tools. Click any thumbnail to enlarge.

Method	Source Material	Tools Used	Example
Optimize New Desktop Captures for Mobile	Fresh HTML captures of your desktop app (Laptop/Desktop presets)	Walnut Extension Laptop Preset Desktop Preset Template Settings
Optimize Existing Desktop Captures for Mobile	Legacy HTML captures already in your library	Template Settings
Capture Mobile-Responsive Versions of Desktop Apps	HTML captures of responsive layouts (browser/device presets)	Walnut Extension Mobile PresetTemplate Settings
Showcase Native Mobile Apps (iOS & Android)	Screenshots, GIFs, or recordings from your native app	Screens Library Custom Elements

🖥️ Adapt Desktop Captures

When you start with a demo captured on a desktop, the default layout often isn’t ideal for smaller screens. In this section, you’ll learn how to adapt those captures so they display clearly, remain easy to navigate, and work seamlessly on mobile devices—without losing important detail or interactivity.

• Optimize New Desktop Captures for Mobile: Learn techniques to optimize new desktop captures for mobile screens.
• Optimize Existing Desktop Captures for Mobile: Learn how to adapt existing desktop captures for mobile viewing.

Optimize New Desktop Captures for Mobile

Step 1: Capture Your Desktop App with the Walnut Extension

1. Select the Laptop or Desktop presets in the Walnut Chrome Extension. These presets are the best option for ensuring desktop apps display well on mobile devices. Capturing at larger resolutions may produce long, narrow screen captures that don’t translate cleanly to smaller screens, making navigation and readability more difficult.

   

2. Check for consistency: ensure all screens are captured at the same resolution.

•  
  • Do not adjust screen size during capture.
  • Do not capture in full-screen mode.
  • Avoid mixing different screen sizes, as this can cause jumps or awkward transitions during playback—especially on mobile.

Step 2: Set Screen Display Settings for New Desktop Demos

1. Open Template Settings and select the Screen Display tab.
2. Select Proportional Fit or Fixed Width (1920 or 1440).

Step 3: Configure Mobile Settings for New Desktop Demos

Mobile Settings for Guided or Hybrid Desktop Demos

For guided or hybrid desktop demos, turn View On Mobile → ON to provide a smoother experience for mobile viewers.

View On Mobile → ON:

• Removes the “Heads Up!” prompt (normally shown on screen widths less than 720px).
• Enables split-screen navigation on mobile for step-by-step guidance. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable and does not obscure the captured screens.

Configure Mobile Settings for Non-Guided Desktop Demos:

For non-guided desktop demos, we recommend leaving View On Mobile → OFF. This prevents a frustrating experience on smaller devices and instead directs viewers to open the demo on desktop, where navigation is easier.

View On Mobile → OFF:

• Directs viewers to open the demo on desktop with a “Heads Up!” prompt (normally shown below720px), where navigation is easier.
• Non-guided desktop app demos, even with optimized display settings, are often difficult to view on smaller devices.

Step 4: Publish & Test Your Demos

• Test across multiple devices or Use the Browser Simulator to Test Mobile Viewing to confirm readability and usability.               

Optimize Existing Desktop Captures for Mobile

Step 1: Check the Original Capture Resolution

1. Open an existing template.

2. In the Screens panel, hover over the Display Options icon in the upper-left corner of the screen thumbnail.

   

3. Note the original capturedscreen resolution.
4. Check for consistency: confirm whether all captures share the same resolution, or if some screens have differing dimensions.

Step 2: Update Screen Display Settings

1. Open Template Settings and select the Screen Display tab.
2. Apply the following screen display setting depending on your original captured screen resolution:
   • If the captured width is 1920px or smaller → Select Proportional Fit.
   • If the captured width is greater than 1920px → Select Proportional Fit or Fixed Width (1920 or 1440).

Step 3: Configure Mobile Settings for Existing Desktop Demos

Mobile Settings for Guided or Hybrid Desktop Demos

For guided or hybrid desktop demos, turn View On Mobile → ON to provide a smoother experience for mobile viewers.

View On Mobile → ON:

• Removes the “Heads Up!” prompt (normally shown for screen widths less than 720px).
• Enables split-screen navigation on mobile for step-by-step guidance. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable and does not obscure the captured screens.

Mobile Settings for Non-Guided Desktop Demos:

For non-guided desktop demos, we recommend leaving View On Mobile → OFF. This prevents a frustrating experience on smaller devices and instead directs viewers to open the demo on desktop, where navigation is easier.

View On Mobile → OFF:

• Directs viewers to open the demo on desktop with a “Heads Up!” prompt (normally shown below720px), where navigation is easier.
• Non-guided desktop app demos, even with optimized display settings, are often difficult to view on smaller devices.

Step 4: Test and Update Existing Demos

• Test across multiple devices or Use the Browser Simulator to Test Mobile Viewing to confirm readability and usability.

📲 Create & Optimize Mobile App Experiences

• Capture Mobile-Responsive Versions of Desktop Apps: Capture the mobile-responsive layout of your product to deliver demos that look great and function seamlessly on phones and tablets.
• Showcase Native Mobile Apps (iOS & Android): Use the Screens Library and Custom Elements to create a realistic, interactive flow from screenshots, GIFs, or recordings of your native mobile app.

Capture Mobile-Responsive Versions of Desktop Apps

Step 1: Capture Your Mobile-Responsive Desktop App with the Walnut Extension

1. Select the Mobile preset in the Walnut Chrome Extension to capture your mobile-responsive desktop app at mobile resolution (500 x 831px).

   

2. Check for consistency:ensure all screens are captured at the same resolution.
   • Do not adjust screen size during capture.
   • Do not capture in full-screen mode.
   • Avoid mixing different sizes, as this can cause jumps or awkward transitions during playback—especially on mobile.

Step 2: Set Screen Display Settings for Mobile-Responsive Desktop Demos

1. Open Template Settings and select the Screen Display tab.
2. Select Proportional Fit.

Step 3: Configure Mobile Settings for Mobile-Responsive Demos

Mobile Settings for Guided, Hybrid, or Non-Guided Mobile-Responsive Demos

1. Turn View On Mobile → ON to provide a smoother experience for mobile viewers.

View On Mobile → ON:

• Removes the “Heads Up!” prompt (normally shown for screen widths less than 720px).
• Enables split-screen navigation for guided demos. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable.

Mobile-Responsive Examples:

This example shows a non-guided and a guided mobile-responsive demo with the Proportional Fit setting displayed on an iPhone 16 Pro Max (6.9″, 2868 × 1320 px).

• First screenshot: non-guided mobile-responsive demo with View On Mobile → ON.
• Second screenshot: guided mobile-responsive demo with View On Mobile → ON.

Step 4: Publish & Test Your Demos

• Test across multiple devices or Use the Browser Simulator to Test Mobile Viewing to confirm readability and usability.              

Showcase Native Mobile Apps (iOS & Android)

Step 1: Gather Your Assets

Prepare the visuals you want to use for your demo. Templates from the Screens Library support:

• Screenshots from your iOS or Android device
• Screen recordings (MP4, MOV)
• GIFs showing specific interactions
• Design mockups (e.g., Figma exports)

👉 Recommended asset dimensions: 1179 × 2556px. Longer images are supported and will be scrollable inside your demo, making it easier to showcase full mobile screens without distortion.

Step 2: Import Your Assets Into Walnut with the Screens Library
 

1. Open an existing template or create a new template.
2. If using an existing template, expand the Screens panel on the left side.
3. Click the Add button at the bottom of the panel, or click the plus (+) icon at the top.
   
4. If starting from a new template, click Browse existing demos when prompted.
   
5. Click Add Screen.
6. In the Insert Screens pop-up, go to the Screens Library tab.
7. Select one or more template screens, then click Done to insert them into your template.
   

8. Select an inserted template screen, then click on the placeholder image within the device.

9. Choose Change Image, then upload your asset:

   • Image (PNG, JPG)

   • GIF

   • Video (.MP4)

   • Media from a URL

     

10. Create screen links or add annotations to the static screens using the Custom Element feature.

Step 3: Configure Mobile Settings for Native Mobile Demos

Mobile Settings for Guided, Hybrid, or Non-Guided Native Mobile Demos

Turn View On Mobile → ON to provide a smoother experience for mobile viewers.

View On Mobile → ON:

• Removes the “Heads Up!” prompt (normally shown for screen widths less than 720px).
• Enables split-screen navigation for guided demos. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable.

Native Mobile App Examples:

This example shows a non-guided and a guided mobile demo with the Proportional Fit setting displayed on an iPhone 16 Pro Max (6.9″, 2868 × 1320 px).

• First screenshot: non-guided demo with View On Mobile → ON.
• Second screenshot: guided demo with View On Mobile → ON.

Step 4: Test and Update Existing Demos

• Test across multiple devices or Use the Browser Simulator to Test Mobile Viewing to confirm readability and usability.

✅ Validate & Test

Use the Browser Simulator to Test Mobile Viewing

You can use your browser’s built-in device simulator to preview and test how your demo will look on various mobile devices—without leaving your desktop. This helps you confirm that text remains readable, buttons are tappable, and layouts display correctly before sharing your demo with mobile viewers.

To test with the browser simulator:

1. Open your demo in a Chrome browser tab.
2. Open Developer Tools:
   • Option 1 (menu): Right-click anywhere on the page and select Inspect. 
     • Option 2 (keyboard):
       • On Mac: Command + Option + I
       • On Windows: Ctrl + Shift + I
     
3. Toggle Device Toolbar by clicking the small phone/tablet icon in the top-left corner of DevTools, or press:
   • On Mac: Command + Shift + M
   • On Windows: Ctrl + Shift + M
   
4. In the simulator panel on the left, select a device preset from the Dimensions dropdown (e.g., iPhone 14 Pro Max, Pixel 7, Galaxy S20 Ultra).
5. Adjust the zoom level if needed to see the full layout.
6. Test navigation and interactions just as you would on an actual mobile device.
7. Try multiple device sizes to confirm your demo is mobile-friendly across different screens.

👑 Pro tip: Use the Responsive option at the top of the list to manually drag the viewport to custom widths and see how the layout adapts.

FAQs

Can I Capture From Mobile App Emulators With the Walnut Extension?

• No. The Walnut Extension does not support HTML capture of native mobile apps or mobile app emulators. If you attempt to capture from an emulator, Walnut may record the outer emulator window but the inner app content will appear blank or as a static image.

To demo a native mobile app in Walnut, see Showcase Native Mobile Apps (iOS & Android).