fbpx

Top 10 Website Responsive Errors & How to fix them

Mockup of a space website on a computer & mobile phone
  1. Fixed Width Layouts
  2. Unoptimised Images
  3. Neglecting Viewport Meta Tag
  4. Inconsistent Font Sizes
  5. Overcomplicated Navigation
  6. Content Overflow
  7. Ignoring Touchscreen Interactions
  8. Inconsistent Spacing and Alignment
  9. Not Testing on Real Devices
  10. Failing to Prioritise Content

1. Fixed Width Layouts

Error

Using fixed-width elements or containers that don’t adapt to different screen sizes.

Fixed-width layouts can cause horizontal scrolling on smaller screens and leave large empty spaces on larger screens. By using percentage widths, the container adapts to the screen size, improving usability and appearance.

Solution

Instead of fixed pixel values, use percentage widths or flexible grid systems like CSS Grid or Flexbox. This allows elements to resize fluidly.

css

.container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
}

Before and After:

  • Before:
    A container with a fixed width of 960px might look good on desktops but overflow on smaller devices.
  • After:
    A container using a flexible width adjusts to different screen sizes, maintaining a consistent layout.

Tools and Techniques:

  • Browser Developer Tools:
    Open the browser’s developer tools (F12 in Chrome) and use the responsive design mode to resize the viewport. Check if any elements have fixed widths by inspecting their styles.
  • Responsive Design Mode:
    In Chrome, Firefox, and Safari, you can toggle responsive design mode to simulate different screen sizes.
  • CSS Audits:
    Use the Audits or Lighthouse panel in Chrome DevTools to identify fixed-width elements.

Common Pitfalls:

  • Not setting a `max-width`, causing the container to stretch too much on very large screens.
  • Forgetting to adjust other fixed-width elements inside the container.

2. Unoptimised Images

Error

Images that are too large or not responsive can slow down your website and look awkward on smaller screens.

Large images can slow down page load times, especially on mobile devices with slower internet connections. Using `srcset` allows the browser to choose the appropriate image size, optimising performance and appearance.

Solution

Use the `srcset` attribute to serve different image sizes based on the device’s screen size and resolution.

html

<img src="image-small.jpg" srcset="image-medium.jpg 768w, image-large.jpg 1200w" alt="Example image">

CSS Media Queries: Adjust image sizes using CSS for different screen sizes.

css

img {
    width: 100%;
    height: auto;
}

Before and After:

  • Before: A large, fixed-size image that takes too long to load on mobile devices.
  • After: An image that loads quickly and looks good on any device thanks to responsive techniques.

Tools and Techniques:

  • Chrome DevTools Network Panel:
    Check the size of images being loaded and see if different image sizes are served for different devices.
  • Image Optimisation Tools:
    Use tools like ImageOptim, TinyPNG, or Squoosh to optimise images.
  • Lighthouse Audits:
    Run a Lighthouse audit to identify large or unoptimized images.

Common Pitfalls:

  • Forgetting to include all necessary image sizes in the `srcset` attribute.
  • Not optimising images before uploading, leading to unnecessarily large files.

General Recommendations

  1. Resolution:
    Aim for a balance between quality and file size. Typically, 72 DPI (dots per inch) is sufficient for web images.
  2. File Format:
    • Use JPEG for photographs and images with many colours.
    • Use PNG for images with transparency or images that require high detail.
    • Use SVG for logos and icons that need to scale without losing quality.
    • Use WebP for a balance of high quality and smaller file size.

Specific Use Cases

  1. Hero Images / Full-Width Banners:
    • Recommended Size: 1920px width
    • File Size: Aim for under 500 KB
    • Alternative Sizes: Provide 1440px and 1024px widths for different screen resolutions using srcset.
  2. Regular Content Images:
    • Recommended Size: 800px to 1200px width
    • File Size: Aim for under 200 KB
  3. Thumbnails:
    • Recommended Size: 150px to 300px width
    • File Size: Aim for under 50 KB
  4. Icons and Logos:
    • Recommended Size: Use SVG for scalability
    • File Size: Keep as small as possible, typically under 10 KB

3. Neglecting Viewport Meta Tag

Error

Failing to include the viewport meta tag, which is essential for responsive web design.

Without the viewport meta tag, browsers may not render pages as expected on mobile devices, leading to issues like incorrect scaling and poor usability.

Solution

Add the following line in your HTML `<head>` to control the layout on mobile browsers.

html

<meta name="viewport" content="width=device-width, initial-scale=1">

Before and After:

  • Before: A site that looks zoomed out and difficult to navigate on mobile devices.
  • After: A site that adapts to the screen size, providing a better user experience.

Tools and Techniques:

  • HTML Validator:
    Use an HTML validator like W3C Validator to check for the presence of the viewport meta tag.
  • Browser Developer Tools:
    Inspect the <head> section of your HTML in the browser’s developer tools to ensure the viewport meta tag is present.

Common Pitfalls:

  • Incorrectly configuring the viewport settings, causing unexpected behaviour.
  • Overlooking the need to test the viewport settings on different devices.

4. Inconsistent Font Sizes

Error

Using fixed font sizes that don’t scale well across devices leads to readability issues.

Fixed font sizes can be too small to read on some devices or too large on others. Using relative units ensures font sizes adapt to the user’s settings and device.

Solution

Use relative units like `em` or `rem` instead of pixels for font sizes to ensure they scale appropriately.

css

body {
font-size: 1rem; /* 16px */
}

h1 {
font-size: 2.5rem; /* 40px */
}

Before and After:

  • Before: Text that’s too small on mobile devices or too large on desktops.
  • After: Text that scales appropriately across all devices, ensuring readability.

Tools and Techniques:

  • Browser Developer Tools:
    Inspect elements and check the font sizes to ensure they use relative units (em, rem) rather than fixed units (px).
  • Lighthouse Audits:
    Run a Lighthouse audit to identify accessibility issues related to text size.
  • Accessibility Tools:
    Use tools like axe or WAVE to check for text size issues.

Common Pitfalls:

  • Not considering user preferences for text size.
  • Inconsistent use of units, leading to unpredictable results.

Recommended Font Sizes

Desktop (≥ 1024px width)

  • Body Text: 16px (1rem)
  • Small Text: 14px (0.875rem)
  • Headings:
    • H1: 32px (2rem)
    • H2: 28px (1.75rem)
    • H3: 24px (1.5rem)
    • H4: 20px (1.25rem)
    • H5: 18px (1.125rem)
    • H6: 16px (1rem)

Tablets (768px – 1023px width)

  • Body Text: 16px (1rem)
  • Small Text: 14px (0.875rem)
  • Headings:
    • H1: 28px (1.75rem)
    • H2: 24px (1.5rem)
    • H3: 20px (1.25rem)
    • H4: 18px (1.125rem)
    • H5: 16px (1rem)
    • H6: 14px (0.875rem)

Mobile (≤ 767px width)

  • Body Text: 14px (0.875rem) to 16px (1rem)
  • Small Text: 12px (0.75rem)
  • Headings:
    • H1: 24px (1.5rem)
    • H2: 20px (1.25rem)
    • H3: 18px (1.125rem)
    • H4: 16px (1rem)
    • H5: 14px (0.875rem)
    • H6: 12px (0.75rem)

5. Overcomplicated Navigation

Error

Complex navigation menus that don’t adapt well to smaller screens, causing usability issues.

Complicated navigation menus can be difficult to use on smaller screens. A responsive navigation menu, like a hamburger menu, keeps the navigation accessible without taking up too much space.

Solution

Implement a responsive navigation menu, such as a hamburger menu for mobile devices.

html

<nav>
     <button class="menu-toggle">Menu</button>
       <ul class="menu">
          <li><a href="#home">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
       </ul>
</nav>

css

.menu {
  display: none;
}
.menu-toggle {
  display: block;
}
@media (min-width: 768px) {
  .menu {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
}

Before and After:

  • Before: A large, complex menu that overflows on mobile screens.
  • After: A compact, user-friendly menu that adapts to different screen sizes.

Tools and Techniques:

  • Mobile Device Testing:
    Test the navigation on various real mobile devices to ensure it works well and is user-friendly.
  • Browser Developer Tools:
    Use responsive design mode to simulate different screen sizes and test the navigation.
  • User Testing:
    Conduct usability testing with real users to gather feedback on the navigation experience.

Common Pitfalls:

  • Not ensuring the menu is accessible for all users.
  • Overlooking usability issues in the mobile navigation design.

6. Content Overflow

Error

Content elements (like images, tables, or text blocks) that overflow the viewport on smaller screens, causing horizontal scrolling.

Content that overflows the viewport can cause horizontal scrolling, which is frustrating for users. Media queries help adjust the layout to fit the screen size, preventing overflow.

Solution

Use media queries to adjust the layout and prevent overflow.

css

.content {
  width: 100%;
  overflow-x: auto;
}
@media (min-width: 600px) {
  .content {
    width: 80%;
  }
}

Before and After:

  • Before: Content that causes horizontal scrolling on small screens.
  • After: A layout that adapts to the screen size, eliminating overflow issues.

Tools and Techniques:

  • Browser Developer Tools:
    Use the responsive design mode and inspect elements to see if any content overflows the viewport. Look for horizontal scrollbars.
  • CSS Audits: Check CSS for fixed widths and large elements that could cause overflow. Adjust with media queries as needed.
  • Lighthouse Audits:
    Run a Lighthouse audit to identify layout issues.

Common Pitfalls:

  • Not testing for overflow issues on all devices.
  • Over-relying on fixed widths without considering fluid design.

7. Ignoring Touchscreen Interactions

Error

Designing interactive elements like buttons or links that are too small or too close together makes them difficult to use on touchscreens.

Small or closely spaced interactive elements can be difficult to use on touchscreens. Increasing the size and spacing of these elements improves usability on mobile devices.

Solution

Ensure buttons and links are large enough for touchscreen interactions, with adequate spacing.

css

button, a {
  padding: 1rem;
  margin: 0.5rem;
  touch-action: manipulation;
}

Before and After:

  • Before: Tiny buttons that are hard to tap on a mobile screen.
  • After: Larger, well-spaced buttons that are easy to interact with on touchscreens.

Tools and Techniques:

  • Touch Device Testing:
    Test your website on real touchscreen devices to ensure interactive elements are easily tappable.
  • Browser Developer Tools:
    Simulate touch events in the browser’s developer tools (e.g., using Chrome DevTools’ “Emulate touch screen” option).
  • Accessibility Tools:
    Use tools like axe to check for touch target sizes and spacing.

Common Pitfalls:

  • Not considering different screen sizes and touch capabilities.
  • Overlooking accessibility standards for interactive elements.

8. Inconsistent Spacing and Alignment

Error

Poor spacing and alignment that doesn’t adapt well across different devices, leading to a cluttered or misaligned appearance.

Inconsistent spacing and alignment can make a website look disorganized. Flexible layout techniques ensure that elements maintain consistent spacing and alignment across different screen sizes.

Solution

Use flexible layout techniques like CSS Grid or Flexbox to ensure consistent spacing and alignment.

css

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.item {
  flex: 1 1 calc(50% - 1rem);
}
@media (min-width: 768px) {
  .item {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

Before and After:

  • Before: Elements that are misaligned and have inconsistent spacing on different devices.
  • After: A layout that adapts to different screen sizes while maintaining consistent spacing and alignment.

Tools and Techniques:

  • Browser Developer Tools:
    Inspect elements and use the responsive design mode to check spacing and alignment at different screen sizes.
  • CSS Grid/Flexbox Inspector:
    Use built-in CSS Grid and Flexbox inspectors in browser developer tools to check layout structures.
  • Design Systems:
    Implement a design system or style guide to ensure consistent spacing and alignment across the site.

Common Pitfalls:

  • Not testing layouts on various screen sizes.
  • Using fixed values for spacing and alignment that don’t adapt to different devices.

9. Not Testing on Real Devices

Error

Relying solely on browser resizing for testing responsiveness instead of using real devices or device emulators.

Testing only in a desktop browser can miss issues that appear on real devices. Testing on actual devices ensures that your website works well across all screen sizes and resolutions.

Solution

Test your website on actual devices (smartphones, tablets, desktops) and use browser developer tools to simulate different screen sizes and resolutions.

Testing Tips:

  • Regularly test on a variety of physical devices.
  • Use browser developer tools to simulate different devices and screen sizes.

Tools and Techniques:

  • Real Device Testing:
    Test your website on various physical devices, including smartphones, tablets, and desktops.
  • Device Emulators:
    Use online emulators like BrowserStack or Sauce Labs to simulate different devices and browsers.
  • Browser Developer Tools:
    Use the responsive design mode and device emulation features in developer tools.

Common Pitfalls:

  • Overlooking specific device quirks and differences.
  • Not testing touch interactions thoroughly.

10. Failing to Prioritise Content

Error

Not prioritising content for different devices, which leads to a cluttered or unoptimised user experience.

On smaller screens, it’s crucial to prioritise essential content and hide or adapt less important elements. This improves user experience by making the most relevant information easily accessible.

Solution

Use progressive enhancement to ensure critical content is prioritised and secondary content is appropriately adapted or hidden on smaller screens.

css

@media (max-width: 600px) {
  .secondary-content {
    display: none;
  }
}

Before and After:

  • Before: A cluttered layout with all content displayed on small screens.
  • After: A clean, prioritised layout that highlights essential information and hides secondary content on smaller screens.

Tools and Techniques:

  • Content Inventory:
    Create a content inventory and prioritise essential content for different screen sizes.
  • CSS Media Queries:
    Use media queries to hide or adapt secondary content on smaller screens.
  • User Testing:
    Conduct user testing on different devices to ensure the most important content is easily accessible and readable.

Common Pitfalls:

  • Hiding too much content and compromising usability.
  • Not clearly identifying which content is most important for different devices.
Share
Scroll to Top