Clutch
G2
Responsive web design is now the standard way to build websites, and Google indexes the mobile version of your pages by default. Still, it can feel intimidating to adapt every part of a site to every screen size.
It is more manageable if you focus on individual elements, one at a time, with the visitor’s goals in mind. Navigation menus and logos are good places to start because they appear on every page and have a big effect on usability. Here are four tips for making them work well in responsive design.
Tip 1: Simplify your logo for small screens
Many logos combine text with a graphic or icon. When you are working on a logo design like this, plan for a compact version, such as just the symbol or a shortened wordmark. A responsive header does not have room for a full logo with a tagline. Swapping in a smaller version is a worthwhile trade for a cleaner layout, and recognition is rarely a problem, since visitors expect to find a logo in the top-left corner.
Use SVG files for logos. They stay sharp on every screen, including high-density phone displays, and they are small to download. Make sure the logo is still readable at the smallest size you will use, and give it descriptive alt text. Keep the logo linked to the homepage.
Tip 2: Use a slim header that leaves room for content
Large headers with multi-level link tiers look great on big screens, but they do not work on small ones. Tall headers push content below the fold, so shrink your header on phones. Mobile apps often use compact fixed headers, and the same approach works on a website: it leaves more room for content and keeps navigation within reach. If you use a sticky header, make it thin, or hide it on scroll down and show it on scroll up. If you do not want it fixed, still shrink it to save space at the top of the page.
Tip 3: Keep navigation short and easy to tap
Reduce the number of links in your main navigation when you revamp for smaller screens. Multi-tiered dropdown menus are a good place to start trimming, because they are hard to use with a finger. Keep all your dropdown levels only if you have a clear navigation strategy behind them. Put your most important pages, such as services, pricing and contact, first.
Choose a menu style that fits your site. The hamburger menu is familiar to most people, and a clear “Menu” label can help. Some sites also add a visible call button or a short bottom bar for the top actions. Make tap targets large enough for a thumb, generally at least 44 to 48 pixels, with space between them to prevent mis-taps. Larger link text and more room to click make navigation easier for everyone, including people with motor impairments.
Tip 4: Adjust full-screen background images for each screen size
Large hero images and full-screen backgrounds still attract attention on landing pages, but they work best on big monitors. On smaller screens, crop or realign the image after a certain breakpoint so it fits the window. Some CSS work is involved, but it gets easier with practice.
The golden rule is to keep the focal point in view at all times. Use responsive image techniques, such as serving smaller image files to phones, so large images do not slow the page. Page speed affects both rankings and conversions, and large unoptimized images are one of the most common causes of slow mobile pages. Check that any text over the image stays readable on small screens.
Test on real devices before you launch
There is no one-size-fits-all solution. Test your logo and navigation on real phones and tablets, in both portrait and landscape orientation, not only in a desktop browser. Check tap targets, header height, menu behavior and image cropping. Fix issues one element at a time, and your responsive design will come together faster.
“We are thrilled with the amazing work SmartSites did on our website.”
Adam BraatzWisconsin Conservatory of Music
