How to Show Clients Their Website on Desktop, Tablet and Phone

"How does it look on my phone?" is the question every web designer hears. Here's how to preview a site at every size in Chrome, and how to send clients clean screenshots and videos of each layout so they don't have to ask.

Preview any screen size in Chrome

Chrome's device toolbar lets you see a site at any width without touching a phone.

1. Open DevTools with F12 (or Cmd+Option+I on Mac).
2. Press Ctrl+Shift+M (Cmd+Shift+M on Mac) to turn on the device toolbar.
3. Choose a device from the list at the top, or type a width. Common sizes are 390 px for a modern phone, 820 px for a tablet, and 1440 px or wider for desktop.

It's great for checking your work. It's less great for showing a client, who doesn't want to open developer tools.

Screenshot each layout

In device mode, open the DevTools command menu (Ctrl+Shift+P) and run Capture full size screenshot to save the whole page at that size. Repeat for each width.

For desktop captures of animated or parallax-heavy sites, a dedicated tool gives cleaner results. See why full-page screenshots break for the details.

Record a scroll video at each size

Videos show clients how the site actually moves on each screen. Pretty Sites can record a smooth scroll video at a chosen size:

• 16:9: a normal desktop video, perfect for slides and email.
• Tablet: the site at 820 px wide.
• Phone: the site at 390 px wide, in its own phone-shaped window.
• As is: exactly your browser window.

Pick the size in the popup, click Scroll capture, and after a 3-2-1 countdown it scrolls the page and saves an MP4. Your window goes back to normal afterwards.

Good to know: tablet and phone recordings show the site's real responsive layout at that width, the same thing you see when you narrow your browser. They don't pretend to be an actual phone, so a site that sends phones to a completely separate mobile site won't switch to it.

Presenting it to the client

• Lead with the phone. For many small businesses, more than half of visitors are on phones. Show that version first.
• Put the sizes side by side. Drop the desktop, tablet and phone videos into one slide so the client sees the whole picture at once.
• Send videos, not links. A video plays instantly in email or chat. A staging link needs a password, a laptop, and the client's attention.
• Keep the originals. Before-and-after videos make great case studies later.

FAQ

What sizes should I check?

At minimum a phone (around 390 px wide), a tablet (around 820 px) and a laptop or desktop (1280 to 1440 px). Your analytics will tell you which matter most for a given client.

Is the Chrome device toolbar accurate?

It's accurate for layout. It can't fully copy how a real phone handles touch, fonts or performance, so test on a real phone before launch too.

How much do scroll videos cost?

Screenshots are free. Scroll videos use 1 credit each at any size, from 10 for $5, and your first one is free. See pricing.