Seeing the “Clickable elements too close together” error on a PageSpeed Insights report can send any webmaster down a frustrating rabbit hole of tweaks and tests. This common mobile site issue indicates buttons, links, and tap targets are crammed too closely together, hampering usability on touch devices.
While fixing this error takes some patience, optimizing clickable spacing is worth the effort for better responsive design. In this comprehensive guide, we’ll explore tangible solutions to resolve the “too close together” error, from quick CSS tweaks to navigation redesigns, using real-world examples and actionable tips to space out your site’s clickables.
What Does “Clickable Elements Too Close Together” Mean?
This PageSpeed Insights error occurs when clickable elements on your page, like buttons, call-to-action links, or navigation menus, are too close together on mobile screens.
Google wants at least 8px of space between tappable targets on touch devices. When clickable elements are too densely packed, users are more likely to accidentally tap the wrong thing.
So this error is a sign that your site’s clickable elements need better spacing for usability on smartphones and tablets.
Use Responsive Design Principles
The easiest way to fix overly dense clickables is to follow responsive design best practices. Make sure your site adjusts and expands smoothly for mobile screens.
Use relative units like EM or percentages instead of fixed pixels for things like font sizes, padding, and layout containers. This will allow elements to rescale appropriately on different viewport widths.
Setting maximum widths on large containers is also important to constrain wide desktop layouts to narrower mobiles. Let content reflow naturally within flexible containers.
Enabling responsive sizing, padding, and spacing will give clickables room to spread out on small screens, fixing the proximity error.
Increase Clickable Spacing
In some cases, you may need to manually intervene and increase spacing around clickable elements to pass the 8px threshold, especially for fixed pixel-sized navigation and components.
If a menu or set of buttons is crammed together, add margins, padding, or increased font sizes to clickables until they meet the minimum spacing for touch targets.
Make adjustments directly on mobile media query CSS to override desktop styling just on smaller screens. Test on real mobile devices to ensure tapable elements have enough breathing room.
Targeting just clickables rather than globally increasing spacing will fix proximity issues while maintaining a compact layout.
Reduce Button Padding
Sometimes overly padded buttons or links can cause clickables to crowd each other, especially in navigation bars.
Try reducing button left/right padding from values like 20px or more down to 10px or below. Similarly, reduce vertical button padding from 10px+ down to 5px.
This will shrink buttons to take up less horizontal space while still maintaining a tappable area. But be careful not to go too narrow—aim for tap targets above 48px wide if possible.
With less bloated buttons, you can pack more into menus and Calls-to-Action while solving the proximity error.
Limit Clickable Groups
Consider the groups of clickable elements on your page and aim to simplify and condense them.
For example, if you have a horizontal menu with 10 items plus adjacent social media buttons, that may exceed device space no matter how much you tweak padding.
Try to limit clickable groups like menus and button sets to 6 elements or fewer. If needed, consolidate things under “hamburger” menus or hide non-critical navigation.
Limiting clickables into leaner groups makes it easier to space those fewer items out sufficiently without overflowing viewports.
Use Scrollable Menus
For long menus with 10+ items, a scrollable solution may be needed over cramming into a horizontal row.
Set your main navigations to display: flex, hide overflowing items, and enable scrolling on mobile. This allows the same menu content while adding space between items.
You can also stagger menus into multiple rows, or use accordion drop-downs. Just avoid making users click multiple times to navigate.
Scrolling condenses menus but still provides all items accessible through scrolling rather than needing to squash items horizontally.
Choose Minimalist Navigation
Consider using a minimal, condensed navigation design to eliminate click proximity issues.
Instead of traditional menu bars, try icon or text-only menus with fewer, broader categories. Or use a “hamburger” icon for mobile menus instead of horizontal links.
These slimmer navigation options have fewer total clickables, allowing you to space those minimal items out comfortably. Decluttered navigation improves mobile spacing.
Just be sure minimized menus still provide clear, scannable ways to navigate for users. Also, test usability.
Adjust Column Count & Widths
Multi-column layouts can also constrain spacing for side-by-side clickable elements like newsletter sign-ups.
For mobile, switch any narrow multi-column formats to a single-column, stacked layout. Allow each element to take up the full width available.
You can also tweak column widths and counts to find the right balance between density and spacing for your content. Wider columns with fewer total columns can prevent cramming.
Beware stacks of multiple skinny columns on mobile which constrain horizontal space for clickables—go single column or fewer/wider columns.
Reduce Image Sizes
Oversized images can also indirectly cause clickable proximity issues by taking up space and pushing everything together.
Audit your page images and shrink any that are unnecessarily large in resolution or file size. Scaling them down creates more surrounding space.
Also, check for max-width settings on images and contain them on small screens. Avoid full-width images above the fold on mobile.
Optimizing and constraining images prevents them from hogging valuable real estate and gives clickables some breathing room.
Check For Wider Content Issues
If adjusting navigation spacing doesn’t fully resolve the errors, you may have globally overcrowded content.
Review your page’s overall layout elements like sidebars, ads, and widgets that may collectively clutter the width available.
You can tweak content font sizes, margins, and container widths to open things up where needed. Narrower main content areas also help.
But be wary of going too minimal—make sure to have adequate content for each page. Find the right balance to space clickables without excessively stripped-down layouts.
Ask Users For Feedback
After making spacing adjustments, directly ask mobile visitors for feedback on buttons and menus.
Do they find clickables easy to accurately tap? Or do they still feel too small and crowded?
Collecting subjective user input can catch remaining issues not flagged by automated PageSpeed tests. Fit your site to real human hands and feedback.
ITERATIVELY TWEAK clickable spacing and layouts based on usability findings. The goal is comfortable real-world tapping, beyond passing metrics.
The Bottom Line
By following these tips, you can methodically evaluate and adjust the clickable elements on your site to resolve the “too close together” errors. Optimizing spacing for mobile usability takes some trial and error—but the effort pays off in happy users who can easily navigate your site on touchscreens.
