Great website design is an important part of attracting new leads. You want a website that is easy to use, read, navigate, and learn from. But when it comes to mobile optimization, does your website have the same effect?
Sometimes, companies forget to consider how their website appears on mobile devices. Layouts get wonky and things can be misplaced if not properly designed for mobile. Little changes really do make all the difference when adjusting your website for mobile.
via GIPHY
Check out these six common mistakes companies make when optimizing their website design for mobile devices. Is your business guilty of making one of them?
via GIPHY
As of 2015, Google began acknowledging the mobile presence of a website as a ranking factor in its algorithm.
How your website looks on a desktop should be similar but unique to the size of a mobile phone. Transitioning from a horizontal layout to a vertical layout, the worst thing you can do is not make your website responsive – this means that users will have to not only scroll up and down to view your page, but they also scroll horizontally because your website did not effectively “shrink” to the screen size of the user's device.
A responsive design will conform to the dimensions of whatever screen it is on. It will adjust the layout according to the screen size users are using. Be sure to create a responsive site for desktops, tablets, iPads, cell phones – any device a person may use to view your website. By building a responsive website, you are giving your readers an optimized internet browsing experience.
via GIPHY
Phones screens might have increasingly grown in size over the years (the difference between the iPhone 4 and iPhone 8 Plus is insane), but it doesn’t mean our eyes have grown Superman-level eyesight.
Not tweaking the size of your type on your website for a mobile device is a huge pet peeve of customers. With mobile internet, people expect things to work in their favor right from the start – the type should already be at a size they can comfortably read without having to zoom, adjust, or rotate their screen.
This goes for both too small and too large fonts. You don't want a font size so small that readers have to squint ferociously or take the extra time to zoom in. Likewise, you don't want a large font to take up the entire screen, forcing someone to scroll further just to find one more piece of text or content.
To combat this issue, tell your employees to take a look at your website on their mobile devices. If any font is too small to read or taking up too much space on the screen, make some tweaks and try this process again.
Remember that text hierarchy is still important: Titles should be larger than subheaders, which should be larger than body text, etc. On mobile, however, there doesn't need to be a huge hierarchy. Using different font styles and weights can help you develop a clear hierarchy for your content.
via GIPHY
This is obviously bad if you are guilty of mistake #2. But, no matter what text size you feel is optimal for your audience, there will always be someone out there who will be hindered by disabling this useful tool.
The pinch and zoom feature of a mobile website is available to allow readers to zoom in and out on any part of the screen to take a closer look at the content. Blocking this feature only makes it harder for some to read your blogs, look at product photos, read reviews, etc. Because not everyone has 20/20 vision (myself included), you want to optimize your mobile site for anyone who might visit.
There is no good reason why you should disable pinch and zoom for your website on mobile – it doesn’t affect your webpage design at all. If you have this capability turned off, whether by accident or on purpose, consider turning it back on.
via GIPHY
While your website might have a super organized menu with categories and subcategories, mobile users don't have time for that.
Your website menu on mobile should be short and sweet; find the most important menu options to include in your mobile menu, and if needed, group existing menu items into a broader category so navigating to it is still possible but not as specific.
There is a whole debate as to which menu icon (or no icon at all) is best for site navigation. I personally like the hamburger menu because it is simple and is clear that a list of menu options will appear when I click it. However, there have been studies about how confusing and ambiguous the hamburger menu can be.
However you decide to design your menu, make sure it is easy to use and includes the most important navigation features for your site.
via GIPHY
A site search tool allows users to find exactly what they are looking for on your company website to avoid rummaging through unnecessary content. While navigation is still an important feature on your site, incorporating a search bar in your web design will create a more targeted content experience for your users.
Now, if you have site search on your website, awesome. You are already helping your customers personally navigate your site. For your mobile website, however, ensure that your search bar is visible within the first page. Don't make your customers dig around and scroll endlessly through your site to find it.
If your mobile optimization omits the site search tool, add it back. People want things to happen faster on mobile – whether they are scrolling, searching, or buying. A site search tool available on mobile devices will ensure your customer that they can find what they want, when they want.
via GIPHY
So we’ve already touched on the screen size difference of a desktop to a phone. When it comes to mobile optimization, you should always make sure that your buttons are sized accordingly so that the average finger can tap it.
Have you ever encountered a clickable item that was so small, and no matter how close you put the phone to your face at an angle to physically watch the tip of your finger tap the screen, it still doesn’t work?
This, surprisingly, happens more often that not.
While a computer point has the ability to click an icon with spot-on accuracy (given you aren't a crazy person that has an uncalibrated pointer), fingers don't.
Don’t make it harder for a reader to look deeper into your site and what your company has to offer. Google recommends a button size of at least 48 pixels with ample space between buttons as well to avoid clicking the wrong one.
If your website is guilty of any of these six no-nos, don’t fret. These are all easy adjustments to make to provide your visitors with the best, most user-friendly browsing experience. After all, you want their business, don’t you?