Check the site on many screen sizes
See how key pages look on phones, tablets and wide screens.
QA · Software · When you ask · Updated
Works with
- Slack
SlackHow do you test a site on many screen sizes?
To test a site on many screen sizes, tell Maito which pages to check. It opens each page in a browser at phone, tablet and wide-screen widths, takes screenshots, looks for overlaps, cut-off tables and wrapped controls, and sends a report with the sizes where each problem appears.
How it's done today
Mobile issues get reported by customers.
What Maito does
- Open pages at common sizes
- Take screenshots
- Point out layout problems
Example
@Maito check the pricing page on mobile and tablet before tomorrow's launch.
I checked northstar.example/pricing at 5 sizes: 360, 390, 768, 1024 and 1440 px. Screenshots attached: pricing-screens.pdf. • 1440, 1024: fine • 768: the sticky header covers the Team plan's price when you arrive from the #pricing link • 390: the Annual toggle wraps onto two lines • 360: the plan table is cut off. The Business column is hidden and there's no sign it scrolls. Catch: 360 px is the Galaxy A-series width, and it's where the Business plan, your most expensive, disappears. This is the live page as of now. Want me to send these to Luca, the designer, to decide?
@Maito yes, copy me.
Emailed Luca with the 4 screenshots that show problems, and copied you.
Priya (1:05 PM):
check the pricing page on mobile and tablet before tomorrow's launch.
Maito (1:14 PM):
I checked northstar.example/pricing at 5 sizes: 360, 390, 768, 1024 and 1440 px. Screenshots attached: pricing-screens.pdf.
• 1440, 1024: fine
• 768: the sticky header covers the Team plan's price when you arrive from the #pricing link
• 390: the Annual toggle wraps onto two lines
• 360: the plan table is cut off. The Business column is hidden and there's no sign it scrolls.
Catch: 360 px is the Galaxy A-series width, and it's where the Business plan, your most expensive, disappears.
This is the live page as of now. Want me to send these to Luca, the designer, to decide?
Priya (1:20 PM):
yes, copy me.
Maito (1:21 PM):
Emailed Luca with the 4 screenshots that show problems, and copied you.
How to set it up
- Set up
Nothing to set up. Ask in Slack or by email whenever you need it.
What it won't do
It uses browser widths, not real phones, so device quirks and browser differences can still appear. Looks that are a design choice get flagged only when they look broken.
Questions
Common widths from small phones to wide desktops. You can name the exact sizes you care about.
Yes. Add the login to the Vault (Settings, then Vault) and it signs in first.
A document with screenshots and a short list of issues, each with the width where it happens.
