Design and Speed

Optimizing Website Design for SEO Evaluation

How to fix the design problems an audit turns up, from cluttered menus and tiny links to cramped text, with simple changes ordered by effort and benefit.

On this page
  1. From findings to fixes
  2. Simplify cluttered menus
  3. Make links and buttons easy to tap
  4. Improve readability
  5. Tame pop-ups and overlays
  6. Reduce visual noise
  7. Prevent layout jumps
  8. Fix at the template level
  9. Test on real screens
  10. Order your work

From findings to fixes

A design review produces a list of observations: the menu is hard to use on a phone, the links are too close together, the text is faint, a banner covers the content. This article is about what to do next. It assumes you have already recorded the problems; if you have not, doing that comes first.

Resist the urge to redesign everything. Most design problems found in audits can be fixed with small, targeted changes, and small changes are easier to test and easier to undo. Work from the biggest obstacle to the smallest, and change one thing at a time so you can tell what helped.

Simplify cluttered menus

Menus are the most common source of design trouble. Typical symptoms are too many items, several levels of nested submenus, vague labels, and menus that behave differently on different pages. Ways to improve them:

  • Cut the top level to what visitors actually use. If analytics or your own observation shows some items are hardly ever clicked, move them to the footer or a secondary page.
  • Group related items. A handful of clear sections is easier to scan than a long flat list.
  • Use plain labels. “Pricing”, “Guides” and “Contact” beat clever names. Avoid labeling two items so alike that visitors cannot tell the difference.
  • Limit nesting. Two levels is generally manageable; three or more is hard on both mouse and touch.
  • Do not rely on hover. Menus that open only when a pointer hovers do not work on touch screens. Make them open on tap and close clearly.
  • Keep it consistent. The same menu in the same place on every page.
  • Make sure it works from the keyboard. A person who cannot use a mouse should be able to open and close menus, an area covered in keyboard navigation.

On large sites, a menu may need a restructure of the sections behind it. In that case, the problem is partly site architecture, and the menu should follow the structure, not the other way around.

On a phone, a finger is far less precise than a mouse. Small links sitting close together lead to accidental taps and frustration. Fixes include:

  • Increase the size of the clickable area, not just the text. Padding around a link enlarges the target without changing the look much.
  • Add space between neighboring links, particularly in lists, footers and menus.
  • Make buttons look like buttons, with a clear label that says what happens.
  • Avoid links inside long paragraphs that are only a few letters wide. If they cannot be avoided, make sure the line spacing is generous.

Commonly used guidelines suggest targets of roughly 44 to 48 pixels on a side, though recommendations vary slightly. The point is not the exact figure but that a fingertip can hit the target without hitting its neighbor. The article on tap targets goes deeper into mobile layouts.

Improve readability

If the audit flagged hard-to-read text, the usual fixes are quick:

  • Raise body text to a comfortable size, commonly around 16 pixels or more on phones.
  • Increase line spacing slightly and keep paragraphs short.
  • Darken light gray text. Weak color contrast is among the easiest problems to repair and helps everyone, particularly outdoors or on older screens.
  • Avoid placing text over busy images. If you must, add a solid or semi-solid background behind it.
  • Use headings and lists to break up long pages; clean heading structure also helps those who scan.
  • Replace text embedded in images with real text where possible, or provide matching alt text for images that carry information.

Tame pop-ups and overlays

Overlays that cover the content shortly after a visitor arrives are a common complaint, especially on small screens, where they may be hard to close. Search engines have described certain intrusive interstitials as a negative for page experience. Consider:

  • Delaying or removing pop-ups that appear immediately.
  • Making the close button large and easy to find.
  • Using a smaller banner at the edge of the page instead of a full-screen cover.
  • Keeping legally required notices, such as consent notices, as compact as the rules allow.

The article on intrusive pop-ups covers this topic in more detail.

Reduce visual noise

Pages that try to show everything at once often hide what matters. Review the main templates and ask what could go:

  • Autoplaying sliders and carousels, which are often skipped and can slow the page.
  • Redundant sidebars full of widgets that nobody uses.
  • Duplicate calls to action competing for attention.
  • Decorative graphics that add weight but no meaning.

Decide on one primary action per page and make it stand out. Everything else should support it or step aside.

Prevent layout jumps

Design fixes should include stability. Give images, videos and ad slots a reserved space, and avoid inserting banners above content after the page has begun to display. These changes reduce layout shift and improve the visitor’s sense that the page is reliable.

Fix at the template level

Wherever possible, make changes in the template or style sheet rather than page by page. One edit to a stylesheet can repair every page that uses it, and keeps the site consistent. Beware, though, that a change in a shared file can break unrelated pages, so test several page types afterwards.

Test on real screens

After each change, view the result on at least one real phone and one larger screen, as discussed in the notes on device testing. If you can, watch someone unfamiliar with the site try a simple task. Check also that the change did not slow the page down; extra scripts added to “fix” a design problem sometimes cost more than they give.

Order your work

If the list of changes is long, sort it by effort and benefit. Quick wins such as darker text, more space around links and removing an intrusive pop-up usually come first. A navigation restructure may deliver more but takes planning, so schedule it deliberately. Keep a short change log of what you altered and on what date, so that later results can be understood in context.

Design improvements cannot promise a better search position. What they do is make the site easier to use, which is a reasonable aim on its own and puts your content in the best position to be judged fairly.

The complete guide to design and speed

Evaluating Website Design for SEO Success
Read the guide

Keep exploring

Guides from other topics

All topics →