Free responsive QA tool
Responsive QA Checklist Generator
Pick the page type, devices, breakpoints, and risky areas. Get a copyable release checklist grouped by layout, media, forms, performance, and accessibility.
Current checklist
27 checks
5 targets - 6 risk areas
Build the checklist
Key devices and breakpoints
Risk areas
Page type
Marketing page
Targets
5
Risk areas
6
Checks
27
Responsive QA checklist
Grouped by the parts of a responsive release that usually break late.
Layout
Run the page at Small mobile (360px), iPhone (393px), Tablet (820px), Laptop (1366px), Wide desktop (1920px) before approving the responsive pass.
Check the first fold at 360px and 1920px for clipped headings, hidden CTAs, and awkward blank space.
Scan for horizontal scrolling in headers, card grids, modals, sidebars, code blocks, and tables.
Confirm the marketing page layout supports first fold, navigation, proof sections, and CTAs.
Compare loading, empty, error, and long-content states at the smallest selected width.
Open every nav menu, dropdown, tab set, and breadcrumb trail at mobile and tablet widths.
Verify sticky headers, promo bars, cookie notices, chat widgets, and bottom CTAs never cover primary actions.
Media
Check hero, product, avatar, and logo crops at each selected width.
Confirm responsive images use appropriate dimensions and do not stretch, blur, or jump after loading.
Inspect video, iframe, map, chart, and social embeds for overflow and correct aspect ratio.
Verify dark, transparent, and high-DPR assets remain legible against the page background.
Test galleries, carousels, lightboxes, and thumbnails with the longest realistic media set.
Forms
Check every visible input, select, checkbox, radio, date picker, and file upload at mobile width.
Trigger validation errors, success states, disabled states, and server errors without resizing the viewport.
Confirm labels, helper text, error messages, and required indicators remain connected to the right fields.
Test autofill, password managers, numeric keyboards, and long pasted values where relevant.
Performance
Run the smallest selected mobile width on a throttled network and watch for slow first render.
Check cumulative layout shift when fonts, images, banners, embeds, and consent UI load.
Confirm hidden desktop/mobile variants are not both loading expensive media or scripts.
Test scroll, menu open, modal open, and carousel interactions for jank on mobile.
Record LCP, CLS, and total blocking time before and after the responsive changes.
Accessibility
Tab through the page at mobile and desktop widths and confirm visible focus never disappears off-screen.
Zoom to 200% and verify content reflows without horizontal scrolling or clipped controls.
Check color contrast for text, icons, disabled states, badges, and overlay text on media.
Verify touch targets are large enough on mobile and have enough spacing to avoid accidental taps.
Confirm headings, landmarks, labels, alt text, and dialog focus order match the visual structure.
Run a screen reader smoke pass through navigation, primary content, forms, and dialogs.
Markdown export
Paste this into a ticket, PR description, release checklist, or QA doc.
# Responsive QA Checklist - Page: Target page - Page type: Marketing page - Responsive targets: Small mobile (360px), iPhone (393px), Tablet (820px), Laptop (1366px), Wide desktop (1920px) - Risk areas: Navigation, Forms, Media, Sticky UI, Performance, Accessibility ## Layout - [ ] Run the page at Small mobile (360px), iPhone (393px), Tablet (820px), Laptop (1366px), Wide desktop (1920px) before approving the responsive pass. - [ ] Check the first fold at 360px and 1920px for clipped headings, hidden CTAs, and awkward blank space. - [ ] Scan for horizontal scrolling in headers, card grids, modals, sidebars, code blocks, and tables. - [ ] Confirm the marketing page layout supports first fold, navigation, proof sections, and CTAs. - [ ] Compare loading, empty, error, and long-content states at the smallest selected width. - [ ] Open every nav menu, dropdown, tab set, and breadcrumb trail at mobile and tablet widths. - [ ] Verify sticky headers, promo bars, cookie notices, chat widgets, and bottom CTAs never cover primary actions. ## Media - [ ] Check hero, product, avatar, and logo crops at each selected width. - [ ] Confirm responsive images use appropriate dimensions and do not stretch, blur, or jump after loading. - [ ] Inspect video, iframe, map, chart, and social embeds for overflow and correct aspect ratio. - [ ] Verify dark, transparent, and high-DPR assets remain legible against the page background. - [ ] Test galleries, carousels, lightboxes, and thumbnails with the longest realistic media set. ## Forms - [ ] Check every visible input, select, checkbox, radio, date picker, and file upload at mobile width. - [ ] Trigger validation errors, success states, disabled states, and server errors without resizing the viewport. - [ ] Confirm labels, helper text, error messages, and required indicators remain connected to the right fields. - [ ] Test autofill, password managers, numeric keyboards, and long pasted values where relevant. ## Performance - [ ] Run the smallest selected mobile width on a throttled network and watch for slow first render. - [ ] Check cumulative layout shift when fonts, images, banners, embeds, and consent UI load. - [ ] Confirm hidden desktop/mobile variants are not both loading expensive media or scripts. - [ ] Test scroll, menu open, modal open, and carousel interactions for jank on mobile. - [ ] Record LCP, CLS, and total blocking time before and after the responsive changes. ## Accessibility - [ ] Tab through the page at mobile and desktop widths and confirm visible focus never disappears off-screen. - [ ] Zoom to 200% and verify content reflows without horizontal scrolling or clipped controls. - [ ] Check color contrast for text, icons, disabled states, badges, and overlay text on media. - [ ] Verify touch targets are large enough on mobile and have enough spacing to avoid accidental taps. - [ ] Confirm headings, landmarks, labels, alt text, and dialog focus order match the visual structure. - [ ] Run a screen reader smoke pass through navigation, primary content, forms, and dialogs.
Need to run the checklist against the real page?
Use this generator for the QA plan. Use Sizzy when you need synchronized devices, screenshots, responsive debugging, and repeatable browser checks.
Check individual viewport sizesGenerate screenshot batchFind breakpointsTry Sizzy
What is a responsive QA checklist?
It is a repeatable set of layout, media, form, performance, and accessibility checks for the viewport sizes where responsive bugs usually appear.
Which devices should I include?
Start with small mobile, large mobile, tablet, laptop, and wide desktop. Add custom widths around the breakpoints used by your CSS.
Is this a replacement for testing in Sizzy?
No. Use this page to plan the pass and export the checklist. Use Sizzy when you need to run the real site across synchronized devices.