According to Smart Insights, 80% of internet users own a smartphone. That’s millions of people browsing the web, trying to find products and information on the go. To satisfy potential customers, every company must make their site easy to navigate on mobile devices.
Here are some tips drawn from our experience at Sonifi to help you design and develop a mobile-friendly website.
Related: Mobile UX and user expectations
Tip 1: All mobile sites need a viewport meta tag
Remember to include a viewport meta tag when building a mobile site.
The viewport is a virtual realm used by search engines to determine how a site’s content is scaled and sized, making including a meta tag critical when building a multi-device experience.
The viewport meta tag tells the mobile browser that it must fit a smaller screen. Without it the site will simply not operate well on a mobile device. No matter which configurations you choose to use to specify your viewport to control, make sure it’s included at the head of the document.
“80% of internet users look for products on a smartphone.”
Tip 2: For mobile websites, size matters
Have you ever visited a site on your mobile device that prompted you to select a button, but the button was so small that you ended up pressing the wrong thing instead? Or have you ever had to zoom in just to read something?
It’s terribly frustrating, which is why it’s important to remember that when it comes to mobile design, size matters—and not just the size of the page, but also the size of the fonts and buttons.
Fonts:
Buttons: Remember this acronym BBAB: Bigger Buttons Are Better. Big buttons simply reduce the chances that the user will mistakenly hit the wrong button or miss it all together. Mobile leaders like Apple recommend that button sizes should be at least 44px by 44px in order to maximize user experience and increase conversions on ecommerce sites.
“For mobile websites, size matters—especially for buttons and fonts.”
Tip 3: Pop-ups or refreshes shouldn’t be used in mobile web design
Even small pop-ups can cause a big headache for mobile viewers. Because mobile browsers don’t typically support pop-ups, when they are present they make the entire user experience frustrating.
Throughout the design process, make sure you avoid using pop-ups for the best mobile results. Similarly, do away with periodic refreshes to prevent filling the mobile device’s limited device cache. If the page needs refreshing, let the viewer have control.
Related: 3 ways to be just pushy enough on mobile
Tip 4: Reduce user text entry required for navigation
As you probably know, it’s often incredibly difficult to input text in mobile versions of websites. Reduce user text entry by replacing it with buttons or a list instead, so viewers can select what they need with ease and without fussing with text input.
Keep in mind that, unlike desktop users, mobile users don’t have access to a traditional keyboard or mouse, so use creativity to develop different ways viewers can still have the same user experience without having to use small keyboards or challenging navigation.
Some solutions include:
- Checklists
- Drop-down menus
- Buttons
- Image selections
Tip 5: Use creative navigation placement in your design
Before you started building your website, you probably did a significant amount of research to get to know your audience and what they are looking for in a website. Revisit this information when optimizing for mobile to determine how the particular audience will want to navigate the site.
If your targeted users want to see quickly-changing content, position the navigation menu below the main material. This will leave room for the content and headlines to be visible without obstructing the page view.
On the other hand, if viewers want immediate access to category navigation, you should place the navigation menu at the top of the page.
Tip 6: Simplify the design of your site
Rid your site of unnecessary content and simplify the site’s design to create ultimate usability. Remember that the “mobile first” approach is all about minimalism, and simplifying the design helps improve usability.
Create a site that lets users navigate the site with zero difficulty by avoiding the inclusion of tables, frames, and other formatting. Keep padding to an absolute minimum, because the more users click on links, the longer they will wait for load time. Simplify your website to create a balance between content and navigation.
Tip 7: Break the page into small sections
Taking content that displays well on large desktop computers and cramming it onto a small, handheld device is sometimes like trying to fit a square peg into a round hole.
Break up the page into small portions by placing lengthy sections of text on several different pages instead of one page that users have to continuously scroll to view content. Rid the page of low-priority content and stick to a single column of wrapped text to prevent horizontal scrolling.
Tip 8: Image scaling will make all the difference for mobile users
Look at each image that’s used in the content and in the background. Verify that the image scales correctly when users browse in portrait and landscape orientation. If the images don’t scale to appropriate dimensions, you should change the CSS rules to tell the images to have widths of 100% or to contain (for background images) themselves in the page.
By following these simple tips, you can ensure that your designs are both desktop and mobile friendly so that visitors can have the best possible experience.
by Sarah Almond
Originally from Estes Park, Colorado, Sarah has been living in Salt Lake City, Utah since 2013. With a passion for adventure and the outdoors, Sarah can frequently be found exploring in the mountains with her two dogs. Writing for SONIFI Health has allowed Sarah to explore her interest in medical technology and generate a true curiosity for groundbreaking developments in the health and wellness community.
