Skip to content
certyn logoCertyn
Start Free
RecipesDoc

Mobile and Tablet Layouts of Your Web App

Certyn checks your key flows at phone and tablet sizes in a run and files layout bugs with screenshots.

For teams whose web app must work on phones and tablets.

Your setup

  • A responsive web app on staging, with a test account.
  • Key flows: sign-in, search, checkout, account settings.
  • You want to know what breaks at phone and tablet sizes.

Say this to Certyn

Check sign-in, search and checkout on staging at iPhone 14, Pixel 7 and iPad Air sizes. File anything cut off, overlapping or hard to tap.

What Certyn does

  1. Says the run length and starts an explore run with your flows and devices in the goal (app.run.create type explore). The device tool works in runs, not on the chat's own Machine, so Certyn starts a run even for one page.
  2. In the run, sets a device preset (browser.device.set): screen size, user agent and touch. The page reloads. The presets are iphone_14, iphone_14_pro_max, pixel_7, galaxy_s23, ipad_air and desktop_1080p.
  3. Walks each flow at each size: menus open, tables and dialogs fit or scroll, forms work, buttons are big enough to tap, nothing hidden or overlapping.
  4. The preset stays on in that browser tab until Certyn changes it or sets reset. It resets when done.
  5. Files one issue per real bug, with a screenshot and the size in the title, for example "Pay button hidden on a 390px wide screen".

What you get

  • Issues with screenshots, each naming the device size.
  • A run report with each flow and size checked.
  • If you ask: test cases that name the preset in their steps. Test case runs have the same device tool, so a suite can repeat the check on a schedule or after each deploy.

Limits

  • This is Chromium with a phone's size, user agent and touch. It is not real Safari on an iPhone or a real Android phone. Bugs that come only from Safari, the on-screen keyboard or the notch are not found. Check those on a real device.
  • Only the six presets. For another width, ask for the nearest preset.
  • A page that opens in a new tab starts without the preset.
  • For a native mobile app (not a web page), see Mobile App on BrowserStack, Sauce Labs, LambdaTest or Your Own Appium Server.
PreviousDev and Staging as Separate Environments, Compared Side by SideNextDark Mode, Reduced Motion and Print Views