Mobile internet browsing isn’t just the future. It’s the present. You must have a mobile-friendly presence.
In 2020, 274.7 million people in the U.S. accessed the internet through a mobile device. This means that about 83 percent of Americans are mobile internet users.
You can refresh yourself on even more reasons why your website should be optimized for mobile. Then, consider these 16 tips you simply can’t ignore when it comes to a mobile-friendly user experience.
Understand scaling
It might be hard to believe, but there are hundreds of different screen sizes when it comes to Android, Apple, Windows and other mobile brand devices, especially when you consider phones versus tablets.
The key is to make sure that your website scales to both landscape and portrait views.
You’ll also want to confirm that the site is coded in HTML5 instead of Flash since Flash does not load on all devices (specifically iPad and iPhone, which have a large share of the market).
Simplicity rules
It’s always tempting to fit as much as you can into any website. Just remember, are you cramming 10 pounds of stuff into a 5-pound bag for you or for the user?
Considering what the user experience should be on your website, especially on a mobile device, is accepting that simplicity is the best rule.
Mobile screens are smaller. Internet connection might not be as strong or consistent without WiFi. Too much information can be a turn-off for the user (or even a loading-speed hindrance that will also lose the visitor).
Specifically, a high bounce rate on your mobile website can lower your search ranking in Google because you’re either attracting the wrong type of visitors and/or you’re not delivering a great experience to visitors.
To help prevent a high bounce rate due to slow loading speeds, your website should aim for a maximum 3-second loading time.
Remember that buttons can always be used to navigate to additional information.
Audit your full website and outline the “must haves” for your mobile presentation. Keep in mind what mobile navigators are likely looking for when on your site on their devices and go from there. Keep the mobile site limited to just the essentials.
Consistency matters
Similar to simplicity, a mobile-friendly experience should feature a consistent look and functionality.
This includes the menu options, the home screen, any dropdown menus, and so on.
Consistency helps a mobile visitor navigate and stay longer on your website.
Information can be prioritized
If your mobile-friendly site needs to serve more than one primary purpose, it is possible to prioritize what is shown in what order, as well as the way the site can be navigated in general.
Look at your website traffic. Where is the highest concentration on mobile devices? Is it a Contact Us page or something else? What’s the second-most visited page on mobile?
This will help you make informed decisions about how to prioritize the essential aspects of your mobile site.
Minimize any form fields
If you’re including any form fields on your site, try to keep them to as few as possible. Ideally, you should have no more than six.
Again, this is intended to keep the visitor engaged and not overwhelmed, depending on what you’re hoping he or she would do.
A search bar is helpful
Every website is as different as every business. So, if you simply have to include more information than is ideal for a mobile-friendly website, you can include a search bar.
Just make sure that it’s easy to find, easy to use and yields accurate results.
Scrolling better than ‘pinch and zoom’
Mobile visitors now more than ever will scroll quite a ways if a mobile site is compelling enough and designed well enough. This is especially true when compared to the need to “pinch and zoom” the screen itself.
(All that being said, you don’t want to force visitors to scroll for an extended amount of time.)
Needing to zoom in on anything on a website displayed on mobile is the sign of a poorly designed (or considered) mobile experience.
Don’t be afraid to go big
With the font, that is. And truly, with any buttons and the spacing between buttons.
Remember, you’re designing for a small touchscreen.
If you keep the design of your mobile website simple enough, the benefit is that you’ll have space to increase the size of both your font and any other elements you like.
The recommended font size for body copy is 14 to 16 points on a mobile-friendly website. The vertical spacing of the font is just as important. The general recommendation is to use the browser default line-height of 1.2em.
Just be sure that whatever you choose, keep it limited to a consistent font type, size and spacing. Otherwise, your site will appear messy.
Legible font also important
With so many font styles out there, it’s easy to get carried away with any number of possibly-hard-to-read fonts.
For example, most cursive fonts are very difficult for the average website visitor to read, especially on a small screen.
Helvetica is a classic, go-to font, but some others you can consider are:
- Arial
- Adobe Gothic Std
- Museo
- Myriad Pro
Short and sweet copy
Think of each instance of text on your website like a tweet. The shorter, catchier and clearer it is, the better.
For example, instead of using a longer customer testimonial on your mobile-friendly site, you can use a shorter, one-liner testimonial.
It’s about catering to the mobile visitor who has a more limited attention span and more potential distractions. You want to get the point quickly in each part of your site.
Photos are worth 1,000 words
When you’re keeping your text limited, images can play an especially critical role in conveying information and/or your brand to a mobile visitor.
Eye-tracking studies show that images will attract a mobile user’s attention better than just words.
However, any old image (or even what you use on your full website) won’t necessarily work.
For mobile, images should:
- Be sized for the web and compressed for faster loading times.
- Catch the eye even when small.
- Be non-distracting with clean backgrounds as much as possible.
- Not have harsh or clashing colors. Neon yellow, for example, is especially hard to look at on the screen.
Consider using videos
If you’re feeling limited by using only images and text to convey your message, videos are definitely an option.
Whether it’s an embedded YouTube video or something else, mobile users are more familiar than ever with viewing video on mobile.
In fact, 62 percent of U.S. internet users watched video content via mobile, compared to only 55 percent of respondents who said the same about watching video on a computer. On average, U.S. adults spent 13 minutes per day accessing video apps on a smartphone as of 2019.
Great videos to consider using could be product demos, About Us narratives and so on—whatever helps tell your story. But just like with text, the shorter the better.
Colors can make or break your design
Likely, when you’re designing the full and mobile versions of your website, you’re choosing colors that are reflective of your brand.
This is perfect unless the colors themselves work against the user experience.
Be sure that your background (color, image or pattern) doesn’t compete with the text on your site.
Complementary color palettes are a good way to go. Canva has a color wheel that you can explore.
When in doubt, consider lightening the tone of any color. The lighter tone of a color can be much easier on the eyes and not compete as much with other colors.
Easy-action icons needed
At this point, mobile browsers expect a certain look of typical buttons that you likely would include on your mobile website.
For example, you should use the Twitter logo (of the bluebird) to link directly to your Twitter account rather than a hyperlinked word that says “Twitter.”
Other common interface actions include but are not limited to:
- Online support or sales chat
- Social media share links
- Click to call
- Move an item to the shopping cart
Wherever you can include a visual logo or icon on these easy-action buttons, you should.
Be aware of pop-ups
Pop-ups have had a long, somewhat annoying history for internet users.
The upside is that pop-ups have largely “grown up” into a more sophisticated lead generation tool. (Find out more about how you can capture more leads through pop-ups.)
However, it’s important to consider and test how your pop-up ads appear on mobile devices. Because of the smaller screen size, it’s all too easy for an otherwise appealing pop-up to only cause confusion or frustration on your mobile-friendly website. For example, a pop-up could block the entire screen with a not-so-easy-to-find opt-out button.
They can still work, but ideally, they won’t block the entire screen, and have a clear call-to-action (CTA) and an easy-to-find opt-out.
Test your site with visitors
When it comes to user experience, it’s not only about putting yourself in your ideal customer’s shoes, it’s also about going directly to typical users and getting feedback about what works and doesn’t on your mobile-friendly website.
You can gather a focus group or compile feedback a little less formally. Either way, the point is to get others’ thoughts and opinions on the functionality and usefulness of your site.
In conclusion
When in doubt, think “mobile first.” Mobile usage is only continuing to dominate internet browsing traffic. To assume that your visitors will mostly be using a full screen to visit your website is to risk losing those visitors to more mobile-friendly competitors.
