Shrinking Fonts
One of the easiest, but often overlooked, mistakes to avoid on your mobile-optimized website is shrinking fonts. When you forget to enlarge your fonts, buttons, and anything you want your audience to be able to read and interact with on a mobile site, then you’re inadvertently crippling both your website and your reader’s ability to engage with your website’s content.
Mobile users expect the things they use to work for them, and they’ll leave your website without a second thought if it isn’t catered to them and their lifestyle. An easy rule to follow, then, is that any text on a mobile device should rest comfortably around a 14px size. This may seem large, but for a smaller screen that will probably be read on-the-go, you want your font to be big enough that it can be easily skimmed and understood. This also makes it so readers don’t have to zoom in on your page, eliminating an extra step that could inconvenience your audience.
Adjusting your font size for mobile devices isn't just about accessibility, it’s also about anticipating your audience’s wants and adjusting your strategies accordingly. Take the time to test your website with different font sizes, and test them across devices of different sizes so you can ensure that your website is easy to read for everyone.
Of course, an easy fix is to add code in the backend so that your font doesn’t scale down completely because of the screen size. If you already have a large, readable font on your site, it will stay readable on smaller screens. For instance, if the container is the body, viewport values can be used, such as:
p {
font-size: 4vw;
}
When the viewport width increases, so will the font size, without using media queries. However, you might want to keep it old school for compatibility reasons:
@media only screen and (max-width: 767px) {
p {
font-size: 14px;
}
}
Forgetting About the Search Bar
A mobile website should value speed and user-accessibility above most, if not all, things. Including an easily accessible and visible search bar is a great way to do that. While showcasing your website’s best features and content on a homepage is great, you won’t have the same amount of real estate on a small screen as you do on a big one. Always let your reader decide for themselves what they’re interested in, and placing a search bar to the top of your page will help facilitate this.
Some companies like to eschew a search bar in favor of a “mega menu.” While this can be a useful tactic for users on a desktop computer, a mega menu can overwhelm a user on a smaller screen. You may need to do some deft coding to keep your menu in check or stick with a search bar that offers the user recommendations for pages as they type.
Building an Antisocial Website
Social media is an important tool for any company to take advantage of. As such, you need to not only invest time and resources into setting up a strong social media presence, you also need to make sure your social media channels are visible and accessible to everyone visiting your website.
With social media occupying a substantial percentage of mobile users’ attention, if your mobile website forgets to include links to social media, then you’re allowing for an antisocial website that inhibits, rather than encourages, social engagement with your audience.
By prioritizing social media in your mobile website, you can meet your audience on the platforms they already frequent and give them the ability to easily and seamlessly share your content with their own followers if they choose to do so. Word-of-mouth is one of the most effective marketing tools, so the easier you make it for your audience to share your content, the more potential you’ll have for a valuable lead generation.
Cluttering the Page
Once again, this is a common problem on both desktops and mobile devices alike, but one that is especially magnified on the smaller screens of mobile devices. Poor website design is a death sentence in any situation, but if your website shows up on a mobile device as a mess of images, links, and navigational tabs, then people are likely to abandon your site instead of trying to sort through the chaos.
This goes for your text as well as your visual elements, as a mobile page that’s primarily built with blocks of text will overwhelm the reader and make it that much harder for them to engage with the content. When designing a page of text, be generous with headers, bullet points, and negative space, as they go a long way towards breaking up the stiffness of a web page.
For each page on your website, try to focus on one specific topic or goal so the user isn’t confused about what they’re supposed to be interacting with. One or two columns is usually your best option for displaying your page on mobile, but as long as your page is easy to read and relies on a straightforward structure, you can be confident in the site’s ability to guide readers through its content.
Using a Different URL for Mobile
One of the worst mistakes you can make for your company’s website is creating a mobile site that exists independently from your default desktop site. For example, creating a desktop website with the URL “https://websitename.com/” and a mobile site with the URL “https://m.websitename.com.”
Not only does setting up a separate URL for your mobile site cost money you don’t need to spend, but it also divides your workforce in two, forcing one team to focus on the upkeep of your desktop site while another works on the mobile site.
There are no real benefits for a duplicated mobile website, so just don’t do it. Keeping a separate domain for mobile sites is an obsolete strategy that can actively hurt your company, as Google will often punish duplicate content with lower search ranking results.
Instead, retain the same URL and make your regular website mobile-responsive. You can also use smart content, which is programmed to display different messaging and images depending on the type of device being used to access the website.
There are plenty of ways to make sure your website is optimized and adaptable for the needs of mobile users, so invest your time and energy in pursuing those options instead.
Not Optimizing for Mobile Responsiveness
A fast and responsive design will help guarantee that your website is easily viewable on all kinds of devices. To avoid the catastrophic pitfalls of a website that’s not mobile-optimized, invest as many resources as you can into designing and implementing a website that is responsive and flexible in terms of its layouts, images, menus, and text.
Remember to test your website before launching it too. There’s always the chance that you overlooked something, so get second opinions from people who haven’t had their hands in the design so you can make you cover all your bases. If you have the means, you can even run A/B tests with your current customers, which helps ensure that your website as functional, effective, and easy-to-use on all devices for all users.
