Making moves to design a more responsive website? Here are a few elements you should make sure look great on any device to keep visitors browsing and increase your conversion rate!
Responsive web design is a huge topic and can get quite technical, so I want to focus on a few things that you can start improving as soon as possible.
Look at your site header, footer, sidebars, and overall content when you’re designing a responsive website, but don’t forget these seven elements that will help you convert!
1. Navigation
Can visitors to your website easily find their way around? This is an important element of any responsive website that hopes to turn potential customers into paying clients. Plan your site navigation carefully. The more complex your menu is, the less likely potential customers will see the rest of your website.
Sticky menus (menus that stay at the top of the screen as you scroll) might seem cool, but so many websites obscure their content with these. I recently visited a local retailer’s e-commerce website hoping to do some shopping. The menu took up about 30% of my desktop screen (I measured) and blocked out product images. I left the site in frustration. This would have been just as frustrating, if not more, on a mobile device.
My recommendation? If you must keep your sticky menu, leave it for larger screens but use another option for smaller mobile device screens.
Dropdown menus are going to add another layer of complexity if there isn’t a hover option on mobile devices. If dropdown menus are important to you, save them for larger screens. On smaller screens, show all menu items so that visitors see them all at a glance.
2. Logo(s)
If you have designed your brand’s visual identity, you’re probably familiar with the idea of a primary logo and a secondary one to complement it.
The secondary logo is usually a simplified or stripped down version of the primary one. It’s designed to fit smaller spaces and contexts, whether digitally or in print. Some brands don’t stop at two and design a whole logo set to fit a variety of contexts and environments, from massive billboards and jumbotrons to tiny social media profile pics.
This really cool site by Joe Harrison shows you how some big brands incorporate responsive logos. Resize your browser window to see them morph!
3. Padding & White Space
Responsive design usually involves shifting elements around. For example, you might have a single column of content on a mobile phone but two columns and a sidebar for a desktop screen.
However, you want to make sure that you maintain some breathing room for your content. This way, the page looks visually more appealing and things won’t feel too crowded.
When you give content space to breathe, it helps your audience focus on what matters. Your audience won’t get distracted by visual clutter and is more likely to engage with your content, whether they’re using a smartphone or a large desktop computer.
4. Typography
Typography can be a wonderful way to express your brand visually and keep things cohesive. Just remember to check if it’s legible on smaller devices.
The more complex a font is, the harder it can be to read, so make sure it’s easy to read on various devices and don’t make your font size too small!
5. Pop-ups
I’m not a fan of pop-ups – they’re so often poorly executed – but pop-ups are a popular tool to get website visitors to sign up for newsletters, download freebies, or receive exclusive offers.
If you use a pop-up, check to see that the whole box is visible on different screen sizes. Make sure the close or “X” button is visible and works on any device, and that the styling doesn’t get mangled on some screen sizes.
6. Forms
When used effectively, contact and opt-in forms can help you generate leads and help convert viewers. Like popups, any forms you use on your website should also be tested on various screen sizes.
Check that the form looks good on smaller screen sizes, that all elements function well (drop down menus drop down, check boxes are checked off) and stack form fields vertically if they’re too narrow on mobile screens.
7. Calls to Action
Your calls to action are a major deciding factor on whether a website visitor turns into a potential customer. Display your CTAs prominently on all screen sizes and make sure the text is always legible!
Tip: If you have a CTA that says something like “Contact Us”, try changing it to “Call Now!” on mobile phones – and make sure your phone number is included!
Resources
- Responsive logos: Check out these famous logos designed for different viewing contexts! Just resize your browser to watch them shift in response.
- Inspiration: Examples of some great responsive websites at Codrops.
