Website Navigation, Mobile and Performance UX: Menus, Search, Responsive Design and Speed

Visitors judge a website by two things before they read a word: can they find their way around, and does it respond quickly on the device in their hand? Navigation that hides what people want, a site that breaks on a phone, or a page that jumps around while loading all send people back to the search results — and search engines notice.

This guide covers the structural side of user experience: navigation menus, site search and filters, responsive and mobile-first design, loading states, and designing for speed. It sits alongside UX design fundamentals, visual design and accessibility and forms.

Good primary navigation is short, predictable and labelled in the user's language:

Keep top-level items to a manageable number (often five to seven).
Use plain, specific labels ("Pricing", "Running Shoes") rather than clever or vague ones ("Solutions", "Explore").
Order items by importance and convention, with the most-used first.
Show users where they are with a clear active state.
Base the structure on research such as card sorting and analytics, not the org chart.

The footer is where people look for contact details, legal pages, careers, help and secondary links. Organise it into labelled groups, include the essentials (contact, privacy, terms, accessibility statement), and avoid turning it into a dumping ground of keyword-stuffed links. A well-structured footer helps users and provides sensible internal links across the site.

Mega Menus: When They Help and When They Hurt

Mega menus suit sites with many categories — large retailers, universities, publishers — by showing several levels of options at once with clear grouping. They hurt when they are overloaded, open on accidental hover, close too quickly, or are hard to use on touch screens and with a keyboard. Group options under clear headings, use a short delay on hover, and make them fully keyboard-accessible.

Large sites need several navigation systems working together: clear top-level categories, section-level navigation within each area, breadcrumbs, strong site search, and hub pages that link to everything in a section. Test findability with real tasks — tree testing (asking users where they would look for something in a text-only structure) is especially useful before redesigning.

Breadcrumbs: When and How to Use Them

Breadcrumbs show where a page sits in the hierarchy (Home › Shoes › Running › Product) and let users move up a level in one click. They are valuable on sites with deep hierarchies — e-commerce, documentation, publishers — and less useful on flat sites. Place them near the top of the page, keep them consistent, and add BreadcrumbList structured data so search engines can display them in results.

Hamburger menus save space but hide options, which reduces discovery of everything inside.
Tab bars / bottom navigation keep three to five key destinations always visible and within thumb reach — better for frequently used sections.
Priority+ patterns show as many items as fit and collapse the rest into "More".

Many sites combine patterns: key destinations visible, everything else in a menu.

Most people hold phones one-handed and tap with their thumb, so the bottom and centre of the screen are easiest to reach. Place frequent actions and navigation there where possible, keep destructive actions away from easy-to-tap zones, and avoid crowding important controls into the top corners.

Designing Tap Targets That Are Actually Easy to Tap

Small, tightly packed links cause mis-taps and frustration. WCAG 2.2 sets a minimum target size of 24×24 CSS pixels (with spacing exceptions), and platform guidelines recommend around 44–48 pixels for comfortable tapping. Give links and buttons generous padding and space between adjacent targets.

Search and Filters

Designing Effective Search Functionality

For content-heavy and e-commerce sites, search is often the main way people navigate. Make the search box visible (not hidden behind an icon on large screens), tolerate typos and synonyms, show useful results with clear snippets and filters, and never show a dead end — offer suggestions and popular categories when there are no results. Search logs also tell you what users want and cannot find.

Designing Effective Search Autocomplete and Suggestions

Autocomplete speeds up searching and guides users toward queries that return good results. Show suggestions quickly as the user types, highlight the matching part, include popular searches and categories, and support keyboard navigation through suggestions. Keep the list short — around five to ten items — so it helps rather than overwhelms.

Filters help shoppers narrow large catalogues. Offer filters that match how customers decide (size, price, colour, brand, rating, compatibility), show the number of results for each option, make applied filters visible and easy to remove, and keep filters usable on mobile, typically in a full-screen panel. For SEO, decide deliberately which filtered combinations deserve indexable pages.

Responsive and Mobile Design

What Mobile-First Design Actually Means

Mobile-first design means designing for the smallest screen first, then enhancing the layout for larger screens. It forces prioritisation — when space is scarce, you have to decide what matters most — and tends to produce faster, simpler pages. Since Google indexes the mobile version of sites, the mobile experience is the one that counts for search too.

Breakpoints: Choosing Where Your Layout Should Adapt

Breakpoints are the widths where your layout changes. Rather than targeting specific devices (which change every year), set breakpoints where your content starts to look awkward — when lines get too long, cards get too cramped, or navigation no longer fits. A handful of content-driven breakpoints, plus fluid layouts between them, handles most screens.

Avoiding Horizontal Scroll on Mobile

Unintended horizontal scrolling is a common mobile bug, caused by fixed-width elements, wide tables, long URLs or unbreakable text, images without max-width: 100%, and embeds with fixed sizes. Test at narrow widths, make tables scroll inside their own container, and let long words wrap.

Designing for Foldable and Unusual Screen Formats

Foldable phones, very tall phones, tablets in split-screen and small laptops all create unusual viewport sizes. Fluid layouts with content-driven breakpoints handle these better than device-specific designs. Avoid placing important content where a fold or hinge may fall, and test in browser developer tools with custom sizes.

Testing Responsive Design Across Real Devices

Browser emulators are a good start but do not catch everything: touch behaviour, real performance on mid-range phones, on-screen keyboards covering inputs, and browser quirks. Test key journeys on a few real devices — an older Android phone, an iPhone and a tablet — and on a throttled connection.

Progressive Web App UX Considerations

Progressive web apps (PWAs) can work offline, be installed to the home screen and send notifications. Good PWA UX makes offline states clear, caches the content users need most, asks for install or notification permission only after the user has seen value, and keeps navigation and back-button behaviour predictable.

Performance as UX

Why Page Speed Is a UX Metric, Not Just a Technical One

Users experience speed as quality. Slow pages increase abandonment, reduce conversions and make a brand feel unreliable — long before any technical report flags them. Treat speed as a design requirement owned by the whole team, not a developer task left for the end of a project.

Understanding Core Web Vitals From a Design Perspective

Google's Core Web Vitals measure user-centred aspects of performance:

Largest Contentful Paint (LCP) — how quickly the main content appears. Affected by large hero images, fonts and slow servers.
Interaction to Next Paint (INP) — how quickly the page responds to interactions. Affected by heavy scripts and complex interfaces.
Cumulative Layout Shift (CLS) — how much the layout jumps while loading. Affected by images without dimensions, late-loading ads and font swaps.

Many of these are design decisions: hero image size, number of fonts, third-party embeds and reserved space for dynamic content.

Building a Performance Budget Into Your Design Process

A performance budget sets limits — total page weight, number of requests, LCP target, JavaScript size — that designs must stay within. Agree budgets at the start of a project, check designs against them, and treat exceeding them as a bug. Budgets turn "we should be fast" into decisions about what earns its place on the page.

Balancing Rich Visual Design Against Page Weight

Large images, video backgrounds, animations, multiple fonts and third-party widgets all add weight. Use rich elements where they genuinely help — a product video that answers buying questions — and cut purely decorative weight. Compress and size media properly, load non-essential elements later, and prefer CSS effects over heavy images.

Optimizing Images Without Sacrificing Visual Quality

Use modern formats (WebP or AVIF), compress at sensible quality levels (often indistinguishable from the original), resize to display dimensions, and serve different sizes to different screens. Reserve high-quality, larger files for images where detail matters, like product zoom.

Responsive Images: Serving the Right Size for the Right Device

The srcset and sizes attributes let the browser choose an appropriately sized image for each screen, so phones do not download desktop-sized files. The <picture> element allows different crops or formats for different contexts. Always include width and height attributes to prevent layout shifts.

Lazy Loading: Improving Perceived Speed Without Losing Content

Lazy loading defers images and embeds below the fold until the user scrolls near them, speeding up the initial load. Use the native loading="lazy" attribute for offscreen images — but never lazy-load the main image at the top of the page, which delays LCP. Make sure lazy-loaded content is still discoverable by search engines.

Reducing Layout Shift During Page Load

Prevent layout shifts by setting dimensions on images and video, reserving space for ads, embeds and dynamically loaded content, avoiding inserting banners above existing content, and using font-loading strategies that minimise text reflow. Users who misclick because a button moved at the last moment rarely forgive the page.

Designing for Low Bandwidth and Unreliable Connections

Many users browse on slow or patchy connections. Design so the core content and actions work with minimal data: prioritise text and essential images, avoid auto-playing video, compress aggressively, and handle failures gracefully with clear messages and retry options rather than blank screens.

Designing Loading and Progress Indicators That Reduce Frustration

When waiting is unavoidable, feedback reduces frustration. Use spinners for short waits, progress bars for longer, measurable processes (uploads, multi-step operations), and explain what is happening for waits over a few seconds. Never leave users staring at an unresponsive screen wondering whether their click worked.

Using Skeleton Screens Instead of Blank Loading States

Skeleton screens show a greyed-out outline of the content that is about to appear — text lines, image blocks, cards. They make loading feel faster than a blank screen or spinner because users can see the structure forming. Keep skeletons close to the real layout to avoid shifts when content arrives.

Error Pages

The Custom 404 Page Most Sites Get Wrong

A good 404 page admits the page is missing in plain language, keeps the site's navigation, offers search and links to popular or relevant sections, and returns a genuine 404 HTTP status (not a 200 "soft 404"). Monitor which URLs hit the 404 page — frequent ones may deserve redirects to their closest replacement.

The Bottom Line

Navigation, search, responsive layout and performance are what make a site feel effortless. Keep menus short and plainly labelled, invest in search and filters, design mobile-first with content-driven breakpoints, and treat speed and visual stability as design requirements. Users reward sites that let them get things done quickly — and so do search engines.

Next step: Check your pages' speed and mobile basics with the free SEO Audit tool.