Responsive Design Testing

What is Responsive Design #

Responsive design means a web application adapts its layout and content to work well on any screen size — from a 320px mobile phone to a 2560px ultrawide monitor. Instead of building separate mobile and desktop versions, a single codebase adjusts using CSS media queries.

For QA engineers, responsive testing is about verifying that this adaptation works correctly at every size, not just the ones the designer had in mind.

Common Breakpoints #

Most design systems use standard breakpoints based on common device widths:

These are guidelines, not rules. Your application’s breakpoints depend on the design system it uses. Check with the design team or inspect the CSS for actual @media query values.

Testing Methodology #

The Resize Test #

The most effective responsive testing technique is simple: slowly resize the browser from its widest to its narrowest width while watching the page.

1. Open the page in a desktop browser
2. Grab the right edge of the browser window
3. Slowly drag it to the left, reducing the width
4. Watch for any of these issues:
   • Content overflowing its container (horizontal scrollbar appears)
   • Text overlapping other text or images
   • Navigation breaking or becoming inaccessible
   • Images stretching, squishing, or disappearing
   • Buttons becoming too small to tap
   • White space appearing where it should not
   • Elements jumping or reflowing awkwardly

This technique catches bugs between breakpoints that fixed-width testing misses. A layout might look perfect at 768px and 375px but break at 500px.

Device Emulation in DevTools #

Chrome DevTools device mode (Ctrl+Shift+M) offers precise viewport control:

• Preset devices: Select from iPhone, Pixel, iPad, and other device profiles
• Custom dimensions: Enter exact width and height values
• Responsive mode: Drag handles to resize freely while seeing exact dimensions
• Device pixel ratio: Simulate high-DPI (Retina) displays
• Touch simulation: Test touch interactions without a physical device

Key Viewport Sizes to Test #

At minimum, test these widths:

• 320px: Smallest supported mobile width
• 375px: Most common mobile width
• 768px: Tablet breakpoint — this is where most major layout changes happen
• 1024px: Laptop/tablet landscape
• 1440px: Standard desktop

Also test at widths just below and just above each breakpoint (767px and 769px, for example) to verify transitions are smooth.

Common Responsive Bugs #

Content Overflow #

The most frequent responsive bug. Content extends beyond its container, creating a horizontal scrollbar on mobile.

Common causes:

• Fixed-width elements (e.g., width: 600px) that do not scale down
• Long URLs or unbreakable words that do not wrap
• Images without max-width: 100%
• Tables that are wider than the viewport

How to detect: Scroll horizontally on mobile view. If you can scroll right, something is overflowing.

Touch Target Size #

Mobile users tap with fingers, not mouse cursors. Buttons and links must be large enough to tap accurately.

Google’s guideline: Touch targets should be at least 48x48 CSS pixels with 8px spacing between targets.

Common violations:

• Navigation links too close together
• Small checkboxes or radio buttons without enlarged tap areas
• Footer links crammed together
• Close buttons on modals too small

Navigation Collapse #

Desktop navigation with many items usually collapses into a hamburger menu on mobile. Test:

• Does the hamburger menu appear at the right breakpoint?
• Do all menu items appear when the menu is open?
• Does the menu close when you tap outside it?
• Does the menu close when you select an item?
• Can you navigate with the keyboard when the hamburger menu is open?

Typography Issues #

Text that looks great on desktop can become unreadable on mobile:

• Font sizes too small for mobile reading (minimum 16px for body text)
• Line lengths too long on wide screens (optimal: 45-75 characters per line)
• Heading text too large for mobile, causing wrapping issues
• Letter spacing or word spacing breaking on narrow screens

Advanced Responsive Testing #

Orientation Testing #

Mobile devices can be rotated between portrait and landscape orientations. This changes the viewport dimensions dramatically (e.g., 375x812 portrait vs. 812x375 landscape).

Test for:

• Layout adjustment when orientation changes
• Content that was hidden in portrait appearing in landscape (or vice versa)
• Forms maintaining input when orientation changes (users should not lose their typed data)
• Modal dialogs resizing appropriately
• Fixed-position elements (headers, footers) adapting correctly

In DevTools, toggle orientation using the rotate icon in device mode.

Responsive Image Testing #

Images must adapt to different screen sizes for both visual quality and performance:

• srcset attribute: Does the browser load appropriately sized images? A mobile device should not download a 4000px wide image.
• Art direction: Some designs show different image crops at different sizes. The <picture> element handles this — verify the correct crop shows at each breakpoint.
• Lazy loading: Images below the fold should load only when scrolled into view. Test by watching the Network tab while scrolling.

Exercise: Responsive Audit #

Choose a web application and perform a complete responsive audit:

1. Start at 1920px wide. Document the layout: how many columns? Where is the navigation?
2. Slowly resize to 1440px. Note any changes.
3. Continue to 1024px. The layout should shift significantly here. Does navigation collapse?
4. Continue to 768px. Tablet layout. Check that all content is accessible.
5. Continue to 375px. Mobile layout. Check:
   • Can you read all text comfortably?
   • Are touch targets large enough?
   • Does any content overflow?
   • Is the navigation accessible?
6. Go to 320px. The narrowest common width. Does anything break?
7. Test landscape orientation at 375px height, 812px width.

Create a bug report for each issue found:

Responsive Testing Checklist #

Use this checklist for every responsive testing session:

Layout:

• No horizontal scrolling at any width
• Grid/column layout adapts at each breakpoint
• Sidebar collapses or moves below main content on mobile
• Footer stacks vertically on mobile

Navigation:

• Desktop nav visible on wide screens
• Hamburger menu appears at correct breakpoint
• All menu items accessible in mobile menu
• Menu closes appropriately

Typography:

• Body text readable without zooming (16px+)
• Headings do not overflow on mobile
• Line length reasonable on all screen sizes

Media:

• Images scale without distortion
• Videos are responsive (not fixed width)
• Embedded content (maps, iframes) adapts

Forms:

• Input fields full width on mobile
• Labels visible and associated with inputs
• Keyboard does not obscure input fields
• Submit button easily tappable

Interaction:

• Touch targets at least 48x48px
• Adequate spacing between interactive elements
• Hover-only interactions have touch alternatives

Key Takeaways #

• Responsive design adapts layout to any screen size using CSS breakpoints
• The resize test (slowly narrowing the browser) catches bugs between breakpoints
• Test at standard widths (320, 375, 768, 1024, 1440) plus custom widths near breakpoints
• Content overflow is the most common responsive bug — always check for horizontal scrolling
• Touch targets must be at least 48x48px for mobile usability
• Test both portrait and landscape orientations on mobile
• Use a systematic checklist covering layout, navigation, typography, media, forms, and interactions