wordpress design qa checklist for desktop, tablet, and mobile — start here if you want a repeatable, practical way to verify your WordPress site's design, usability, and conversions across devices.
This article walks through setup, visual and responsive checks, touch and accessibility checks, performance items to prioritise for mobile, a testing matrix, bug reporting templates, and device-specific quick checklists you can copy and use. It focuses on simple, actionable checks you can complete in a few hours or hand to a QA person without overcomplicating the process.
Table of contents
- Preliminaries and testing setup
- Visual design checks for desktop, tablet, and mobile
- Responsive behavior and breakpoints
- Interaction and touch for tablet and mobile
- Accessibility and inclusive design checks
- Performance and mobile speed checks
- Conversion and UX checks
- Cross-browser and device testing checklist
- QA bug reporting and prioritization
- Pre-launch and post-launch monitoring
- Device-specific quick checklists
- Next steps and when to hire a professional
- FAQ
Preliminaries and testing setup
Staging site and backups
Always perform design QA on a staging environment. Confirm the staging URL is password-protected, and create a full backup before you start. If you need to test with production data, snapshot the database and media separately so you can roll back quickly. Note the backup timestamp and store rollback instructions with the QA results.
List devices and viewports to test
Choose a practical set of devices and viewports. Prioritise the devices your analytics show most visitors use, then cover these basics:
- Desktop: 1366x768 and 1920x1080
- Tablet: 768x1024 (portrait) and 1024x768 (landscape)
- Mobile: 360x800, 375x812, and 412x915 (common Android/iOS sizes)
Use a mix of real devices and emulator sizes to validate layout edge cases.
Browser and tool setup
Install the current stable versions of Chrome, Safari, Firefox, and Edge. Enable device emulation in DevTools and use Lighthouse and the mobile-friendly test for performance and SEO hints. Keep a note of the versions you tested.
Define acceptance criteria and success metrics
Before testing, set clear pass/fail criteria. Examples:
- No content overlaps or horizontal scrolling at the target breakpoints.
- Primary CTA visible without scrolling on at least the main landing pages on tablet and mobile.
- Keyboard navigation must reach all interactive elements in a logical order.
- Largest Contentful Paint (LCP) under a chosen threshold for mobile (decide based on priority).
Visual design checks for desktop, tablet, and mobile
Layout and grid consistency
Check the layout against the design system or mockups. Look for:
- Consistent margins and gutters between sections and components.
- Consistent container widths and alignment for headings, body text, and CTAs.
- No orphaned elements or awkward single-column collapses that break the visual hierarchy.
If you need guidance on common visual mistakes to avoid, our post on common WordPress design issues can help identify what often looks unprofessional during QA.
Typography and readability
Check font sizes, line-height, and weight across breakpoints. Verify headings scale sensibly and body text remains readable without zooming. Use the recommended font sizes from our typography guide when in doubt.
- Desktop body: typically 16px–18px with 1.4–1.6 line-height.
- Mobile body: ensure text doesn't drop below a comfortable size for fingers and eyes; avoid forcing users to pinch-zoom.
Images, videos, and responsive media
Confirm media adapts to the viewport:
- Images use srcset or responsive picture sources so smaller files are served on mobile.
- Videos are sized with CSS to avoid overflow and should respect aspect ratio.
- Hero images should keep focal points visible at narrower widths; check object-position and cropping.
Color and contrast checks
Check color contrast for important text and controls. Ensure buttons and links have sufficient contrast against backgrounds, and that disabled states are visually distinct. For deeper guidance, see the accessibility checklist referenced later.
Responsive behavior and breakpoints
Confirm breakpoints match design system
Confirm the theme or CSS uses the same breakpoint definitions as the design specs. Mismatched breakpoints cause unexpected reflows and spacing issues. If you need implementation steps, our guide on making WordPress sites responsive provides practical CSS and theme setting tips.
Navigation and menu behavior
Test navigation across devices:
- Ensure mobile menus open and close reliably and that focus moves into the menu when opened for keyboard users.
- Check that submenus are accessible on touch (tap to open) and desktop (hover and keyboard). Avoid hover-only navigation that is unreachable on touch devices.
- Verify sticky or fixed headers don’t cover content or hide CTAs when users scroll.
Columns, sidebars, and content reflow
Confirm multi-column content stacks in the intended order on narrow screens. If the reading order changes, ensure it remains logical and accessible. Sidebars should either move below the main content or be converted to toggles on mobile where practical.
Component responsiveness (cards, buttons, forms)
Check individual components for breakpoints:
- Cards should maintain consistent padding and avoid clipped shadows or overlapping elements.
- Buttons should remain tappable and not shrink below the minimum recommended touch size (see next section).
- Forms must scale with inputs and labels stacked where necessary to prevent horizontal scrolling.
Interaction and touch for tablet and mobile
Touch targets and spacing
Make sure interactive elements meet minimum touch targets (recommended 44–48px) and have adequate spacing to avoid accidental taps. This includes buttons, links in lists, and form controls.
Hover states on touch devices
Ensure hover-dependent content has a touch-friendly fallback. For example, tooltips and dropdowns should be accessible via tap, and critical information shouldn't rely on hover alone.
Gestures, scrolling, and overscroll
Check native behaviours:
- Scrolling should be smooth and not trapped by fixed containers.
- Avoid intercepting swipe gestures that conflict with browser navigation or OS gestures.
- Test overscroll behaviour and ensure modals or drawers close predictably.
Sticky elements and fixed headers
Sticky headers and CTAs can improve conversions but often block content on small screens. Confirm their height and behaviour across devices and ensure there is a way to access obscured content. Test keyboard and screen-reader focus with sticky elements present.
Accessibility and inclusive design checks
Keyboard navigation and focus order
Use only keyboard to:
- Tab through the page and check that focus order matches the reading order.
- Verify all interactive components can be used without a mouse, including menus, modals, and carousels.
Note and fix any focus traps that prevent users from leaving a modal or menu.
Semantic HTML, landmarks, and ARIA
Confirm the site uses semantic elements (header, nav, main, footer) and ARIA only where necessary. Proper landmarks make navigation easier for screen-reader users. For deeper accessibility checks, see the WordPress accessibility checklist we publish.
Alt text, labels, and form accessibility
Verify all images have meaningful alt text, and form fields include labels or aria-label attributes. Error messages should be programmatically associated with the relevant field and convey clear next steps.
Color contrast and visual indicators
Check contrast ratios for primary text and interactive elements. Ensure focus outlines are visible and that the site does not rely on color alone to communicate information.
Performance and mobile speed checks
Measure page weight and critical resources
Use Lighthouse to get a quick view of mobile performance issues. Look for large JavaScript bundles, slow fonts, and oversized images. Prioritise fixes that reduce time to first meaningful paint and LCP.
Image optimization and lazy loading
Ensure images use modern formats where possible and that lazy loading is applied for below-the-fold images. Verify responsive srcset is present so browsers request appropriate file sizes for mobile.
Third-party scripts and ads
Audit third-party scripts (analytics, chat, tag managers). Consider deferring or loading them after the main content to reduce blocking time on mobile.
Test under mobile network throttling
Use DevTools to simulate slow 3G and verify the site remains usable. Identify render-blocking resources and deliver critical CSS inline or via priority loading where necessary.
Conversion and UX checks
CTA visibility above and below the fold
Check that the primary CTA is visible and actionable on tablet and mobile without excessive scrolling. For homepage and landing page guidance, our page design checklist is a handy companion when checking above-the-fold content.
Form usability and error handling
Test forms for mobile-friendly keyboard types (email, tel, numeric) and ensure autocomplete attributes are present. Trigger validation errors and confirm messages are clear, visible, and associated with the right field.
Trust signals and microcopy on mobile
Verify trust elements like security badges, testimonials, and delivery info remain visible and don't push CTAs off-screen. Our guide on trust signals provides examples you can validate during QA.
Clear next steps and contact options
On mobile, make contact options obvious: tappable phone links, visible contact forms, and a clear path to support. Our contact page guide contains practical form and contact UX tips relevant to testing.
Cross-browser and device testing checklist
Supported browsers and minimum versions
Define supported browsers and minimum versions. At minimum, test latest stable releases of Chrome, Safari, Firefox, and Edge. Note any polyfills required for older browsers and document expected behaviour differences.
OS variations (iOS, Android) and webviews
Test in native browsers and common webviews (in-app browsers, Facebook, LinkedIn). Some behaviours, like fixed positioning and file inputs, differ in webviews and need specific handling.
DevTools emulation versus real devices
Emulators are fast for initial checks, but always confirm key flows on real devices before release. Emulation can miss OS-level quirks and touch sensitivity issues.
Record and compare results
Capture screenshots and short video clips for each issue at every tested viewport. Maintain a testing matrix that shows pass/fail per browser, OS, and device to prioritise fixes.
QA bug reporting and prioritization
Repro steps template
- Page URL and environment (staging URL + credentials if needed)
- Browser, version, and device or viewport size
- Steps to reproduce (step-by-step)
- Expected result
- Actual result
Severity and priority matrix
Use a simple matrix:
- Severity 1: Site unusable or major conversion flow broken (fix before launch).
- Severity 2: Significant visual or UX issue impacting many users (high priority).
- Severity 3: Minor visual issues or content tweaks (low priority).
Screenshots, video, and console logs
Attach a screenshot and short screen recording for each issue. Include console logs for JavaScript errors and network waterfall snippets for performance-related bugs.
Regression testing and verification
After fixes, rerun the same steps on the same devices and browsers. Mark items as verified with a timestamp and the tester's name.
Pre-launch and post-launch monitoring
Final launch checklist items
- Move tested code from staging to production using a deployment plan and backups.
- Confirm canonical tags, robots, and sitemap are correct.
- Run a quick smoke test on production for the critical flows (contact forms, checkout, account).
For a full launch checklist, refer to our launch checklist to ensure nothing is missed.
Analytics, UTM, and conversion tracking
Verify analytics and conversion events are firing correctly on mobile and desktop. Confirm UTM parameters persist through multi-page flows and that thank-you pages are tracked as conversions.
Core Web Vitals and mobile monitoring
Set up ongoing monitoring for Core Web Vitals and real-user metrics. Track trends after launch to catch regressions from third-party scripts or new releases.
Rollback steps and emergency contacts
Document rollback steps and include emergency contact information for the developer or agency. This reduces downtime risk if something goes wrong after launch.
Device-specific quick checklists
Desktop checklist (20 quick checks)
- Site loads and header content visible on 1366x768.
- No horizontal scroll at 1366x768 and 1920x1080.
- Navigation hover and keyboard access work.
- Hero images correctly aligned and not cropped oddly.
- Font sizes for headings and body are as expected.
- Buttons visible and clickable with mouse.
- Forms validate and show inline errors.
- Video players maintain aspect ratio.
- Third-party scripts do not block render.
- Console shows no errors for key pages.
- Footer contains contact and legal links.
- Trust elements display correctly on large screens.
- Images use responsive sources where appropriate.
- Search and interactive widgets work via keyboard.
- Modal dialogs trap focus and close with Esc.
- Breadcrumbs and page hierarchy present where expected.
- Accessibility landmarks present (nav, main, footer).
- Performance snapshot acceptable for desktop target.
- CTAs visible above the fold on key pages.
- Screenshots recorded for any anomalies.
Tablet checklist (15 quick checks)
- Portrait and landscape layouts tested (768x1024 and 1024x768).
- Navigation is tappable and opens/closes cleanly.
- Touch targets meet minimum size.
- Hero focal point visible in portrait mode.
- Forms use appropriate input types and scale correctly.
- Carousels work with swipe gestures.
- Sticky header does not hide primary CTAs.
- Images and videos scale without overflow.
- Contrast and readability remain acceptable.
- Keyboard access tested with on-screen keyboards where possible.
- Third-party embeds behave like on mobile (no unexpected popups).
- Page performance acceptable under throttled networks.
- Modals and dropdowns positioned correctly.
- All links are tappable without accidental activation.
- Document any regression risks for launch.
Mobile checklist (20 quick checks)
- Test common viewports (360x800, 375x812, 412x915).
- No horizontal scroll or clipped content.
- Primary CTA visible and tappable above the fold.
- Touch targets are at least 44px where possible.
- Menus open and close reliably; focus moves into the menu.
- Forms use mobile keyboard types and show clear errors.
- Images served via srcset to reduce payload.
- Lazy-loading is working and not skipping above-the-fold images.
- Third-party scripts deferred where possible.
- Carousels are swipe-friendly and accessible.
- Fixed elements don’t obstruct input fields.
- Phone and email links are tappable and trigger the correct app.
- Contrast and font sizes remain readable without zoom.
- Modals can be dismissed with touch and keyboard.
- Analytics events fire for mobile conversions.
- Performance under throttled 3G acceptable for main flows.
- Webview behaviour tested for in-app access.
- Test forms and file uploads where applicable.
- Record screenshots and video for any failures.
- Mark issues with severity and owner for fixes.
Next steps and when to hire a professional
When to stop DIY and hire help
Keep testing and fixing smaller visual or content issues yourself. Hire a professional when:
- Major conversion flows or accessibility issues are failing and you need guaranteed compliance.
- Performance problems require build-level changes or theme refactoring.
- You need a repeatable QA process and reporting for multiple device types.
What to expect from a professional QA and fix
A professional should provide a prioritized bug list, clear repro steps, and a plan for fixes and verification. They will also supply before/after performance and accessibility snapshots and, if requested, handle deployment and rollback planning.
Request a quote
If you'd prefer a professional to run design QA, fix issues, or build a responsive WordPress site, Request a WordPress website quote. We’ll review your goals, outline a testing plan, and provide a prioritized proposal.
FAQ
What is a WordPress design QA checklist and why do I need one?
A WordPress design QA checklist is a structured set of tests that verify layout, responsiveness, accessibility, performance, and conversion paths across desktop, tablet, and mobile. You need it to ensure your site looks professional and functions for real users before launch.
How do I test responsive design for desktop, tablet, and mobile?
Start with DevTools emulation for fast iteration, then validate on real devices. Follow the breakpoints used by your theme or design system and test navigation, touch interactions, media, and forms at each breakpoint.
Which viewport sizes and breakpoints should I include in QA?
Include common desktop widths (1366x768, 1920x1080), tablets (768x1024 and rotated), and mobile sizes (360x800, 375x812, 412x915). Adjust based on your analytics to cover the devices your visitors use most.
Should I test on emulators or real devices for mobile checks?
Use emulators for quick checks and frequent iterations, but validate critical flows on real devices to catch OS- and hardware-specific issues.
What accessibility checks are essential during design QA?
At minimum: keyboard navigation, focus order, alt text for images, label association for forms, visible focus indicators, and color contrast for text and controls. For an expanded checklist, see our accessibility resource.
How do I prioritize design and usability bugs before launch?
Prioritise issues that block core user journeys (contact, purchase, sign-up), accessibility failures, and performance regressions. Minor visual inconsistencies can be scheduled after launch if they don’t affect usability.
What performance metrics should I check for mobile users?
Measure Largest Contentful Paint (LCP), First Input Delay (FID) or Interaction to Next Paint (INP), cumulative layout shift (CLS), and total page weight. Use Lighthouse and real-user monitoring to identify high-impact fixes.
When should I hire a professional to handle WordPress design QA?
Hire a professional when issues require code or theme changes, performance optimization at build level, or you need compliance with accessibility standards and a formal QA report and verification process.
Need hands-on help? If you want a professional to run QA, fix layout or responsiveness problems, or deliver a responsive WordPress build, Request a WordPress website quote.