Responsive Design Testing Checklist (Free)

Use this checklist to test whether a website works well on phones, tablets, laptops and large monitors. It suits front-end developers, testers and students building their first responsive projects. Test each page type (home, listing, article, form) at the widths listed, in both orientations, and on at least one real Android phone and one iPhone. Note every problem with the width and device where you saw it, then fix and re-test.

0 of 47 checked

Set-up and viewport

Confirm the viewport meta tag is present<meta name="viewport" content="width=device-width, initial-scale=1">. Without it phones show a zoomed-out desktop page.
Make sure the tag does not disable zoomingAvoid user-scalable=no or maximum-scale=1; users must be able to pinch-zoom.
Check media queries use sensible unitsBreakpoints in em or rem respond better when users change their default font size.
Test in current Chrome, Edge, Firefox and SafariSafari on iOS is essential: every iPhone browser uses Apple's WebKit engine in most regions.
Clear cache or use a private window between fixesOld cached CSS is a common reason a fix appears not to work.

Breakpoints and widths to test

320px wideSmallest common phone width and the width WCAG reflow is measured at. Nothing should overflow horizontally.
375px and 414px wideTypical modern phone widths. Check headers, cards and buttons fit comfortably.
768px wide (tablet portrait)Two-column layouts often start here; check they are not cramped.
1024px wide (tablet landscape, small laptop)Navigation frequently switches from a menu button to a full menu around this width.
1280px and 1440px wideCommon laptop and desktop widths. Check content is not stretched too wide.
1920px and widerSet a max-width on content so lines do not become too long to read.
Drag slowly between breakpointsBugs often appear at in-between widths, such as 600px or 900px, not at the exact breakpoints.

Layout and overflow

Check for horizontal scrolling on every pageIn the console, compare document.documentElement.scrollWidth with clientWidth to find overflow.
Make wide tables scroll inside their own containerWrap tables in a container with overflow-x: auto rather than letting the whole page scroll.
Break long words and URLsUse overflow-wrap: anywhere or break-word for user content and long links.
Check fixed and sticky elements on small screensSticky headers, cookie banners and chat widgets must not cover content or focused controls.
Check embeds and iframes scaleUse aspect-ratio or a responsive wrapper for videos and maps.
Check content order makes sense when columns stackVisual reordering with CSS should not confuse keyboard or screen reader order.

Images and media

Make images flexiblemax-width: 100%; height: auto; stops images overflowing their container.
Use srcset and sizes for content imagesThe browser can then download a smaller file on phones and a sharper one on high-density screens.
Use <picture> for art direction or modern formatsServe a different crop on small screens, or AVIF and WebP with a fallback.
Set width and height attributesThis reserves space and prevents layout shift (CLS) as images load.
Check important parts of images are not croppedBackground images with background-size: cover may cut off faces or text on narrow screens.
Check the network panel for oversized downloadsThrottle to a mobile network in DevTools and confirm phones are not downloading desktop-sized images.

Typography and readability

Use a body text size of around 16px or moreSmaller text on phones is hard to read and may trigger zoom on form focus in iOS Safari.
Keep line length comfortableRoughly 45–75 characters per line on desktop; use max-width in ch units.
Check headings scale down on phonesUse clamp() so large headings do not break into one word per line.
Check line height and spacingBody text with a line height around 1.5 is easier to read; WCAG 1.4.12 requires layouts to survive increased text spacing.
Check text contrast in every stateText over images, disabled-looking buttons and placeholder text often fail contrast on small screens in sunlight.

Make touch targets at least 24 by 24 CSS pixelsThis is the WCAG 2.2 Target Size (Minimum) requirement at Level AA, with some exceptions such as inline links.
Aim for 44 by 44 CSS pixels for main controls44 by 44 is the WCAG enhanced (AAA) size and a comfortable target for thumbs.
Leave space between adjacent links and buttonsSmall, tightly packed icons cause mis-taps, especially in footers and toolbars.
Use the right input types and attributestype="email", type="tel", inputmode and autocomplete bring up the right keyboard and autofill.
Check the on-screen keyboard does not hide fields or errorsTap each field on a real phone and make sure the active field and its error message stay visible.
Test the mobile menu with touch and keyboardThe menu button needs an accessible name and aria-expanded, and must open, close and trap nothing unexpectedly.
Check nothing depends on hoverTouchscreens have no hover, so dropdowns and tooltips must also work on tap and focus.

Orientation, zoom and reflow

Test portrait and landscape on phones and tabletsWCAG 1.3.4 says content should not be locked to one orientation unless essential.
Zoom the desktop page to 200%Text must remain readable and functional with no loss of content (WCAG 1.4.4 Resize Text).
Check reflow at 320 CSS pixels wideAt 400% zoom on a 1280px window, content should reflow into one column with no two-way scrolling (WCAG 1.4.10).
Increase the browser default font sizeRaise it in browser settings and confirm text grows and nothing overlaps.
Check focus stays visible when zoomedSticky headers and footers must not cover the focused element (WCAG 2.2 Focus Not Obscured).

Real devices and tools

Use DevTools device mode for quick checksChrome, Edge and Firefox all offer a responsive or device mode; it simulates size, not real touch or browser chrome.
Test on at least one real Android phone and one iPhoneReal devices show browser toolbar resizing, notches, keyboards and performance that emulators miss.
Use remote debugging for real-device bugsConnect Android via USB to Chrome DevTools, or an iPhone to Safari Web Inspector on a Mac.
Check safe areas on notched phonesUse env(safe-area-inset-*) if content runs to the screen edges.
Run Lighthouse with the mobile profileIt flags missing viewport tags, small tap targets and slow images.
Record each issue with width, device and browserPrecise notes make bugs reproducible and quick to fix.

Frequently asked questions

Which breakpoints should I use?

Let your content decide: add a breakpoint where the layout starts to look wrong. Then test at common widths such as 320, 375, 414, 768, 1024, 1280 and 1440 pixels.

Is DevTools device mode enough?

It is good for quick layout checks, but always confirm on real phones, because touch, on-screen keyboards and browser toolbars behave differently.

What is the minimum touch target size?

WCAG 2.2 Level AA requires at least 24 by 24 CSS pixels, with some exceptions. 44 by 44 CSS pixels is the enhanced level and a better target for main buttons.

What does reflow at 320px mean?

Content should fit a 320 CSS pixel wide viewport without horizontal scrolling, which is equivalent to zooming a 1280px wide window to 400%.

Responsive Design Testing Checklist

How to use this checklist

Set-up and viewport

Breakpoints and widths to test

Layout and overflow

Images and media

Typography and readability

Touch targets, forms and navigation

Orientation, zoom and reflow

Real devices and tools

Frequently asked questions

Which breakpoints should I use?

Is DevTools device mode enough?

What is the minimum touch target size?

What does reflow at 320px mean?

Want to Learn This Properly?

How to use this checklist

Set-up and viewport

Breakpoints and widths to test

Layout and overflow

Images and media

Typography and readability

Touch targets, forms and navigation

Orientation, zoom and reflow

Real devices and tools

Frequently asked questions

Which breakpoints should I use?

Is DevTools device mode enough?

What is the minimum touch target size?

What does reflow at 320px mean?

More free templates

Want to Learn This Properly?