by Samuel Klusmeyer & Felix Wolfstrom - November 30, 2021
Mobile-friendly websites are essential to your website's findability, and ranking with search engines -- therefore it's important to your business's overall success!
A focus on mobile user experience has been important for the last decade. In 2021, 58% of all multi-device purchases used a mobile device to close the sale.
An increase in mobile purchases means that you have opportunities to reach news customers you wouldn’t have had before! We say, onward toward the future. Take a deep dive into mobile web design with us to learn the best mobile UX practices you should implement for your business.
Why Are Mobile-Friendly Websites Important?
Mobile-friendly websites are essential to business success in 2021, and this is true for several reasons. Let's lead with another significant statistic: 54% of all web traffic is mobile. If you're not catering to mobile users, you're missing out on business.
As smartphones have dominated the market, mobile responsiveness has become essential during any web designer's process. Google understands this, so you need to make sure your website is mobile-friendly if you want your site to succeed in Google's search algorithm. Google even provides a custom-made tool to make optimizing your website’s design as easy as possible.
The Industry Guidelines for Mobile-Friendly Websites
Google, Apple, Microsoft, and other tech giants want you to use their products. So, they make information about their favorite mobile UX widely available to both businesses and the general public. This assistance often comes in the form of mobile-friendly web design optimization tools and guidebooks.
The abundance of mobile-friendly design tools puts UX designers in a great position. Web design companies like JTech aren't left in the dark. We get to interpret and combine a surplus of information to find the best possible solution—exciting stuff!
So, let's cover the basics of mobile web design for the two web browsers that your customers are most likely to be using on their mobile phones—Apple’s Safari & Google Chrome.
Apple’s Mobile UX Best Practices
Apple's mobile UX best practices share space with their guidelines for mobile apps. At their core, they follow three tenets:
Clarity — Your website must be easy to understand. So, text must be legible, interactive elements must be obviously interactive, and icon suites should follow industry standards for design.
Deference — Your mobile web design must make the functionality of your site more clear, rather than competing with it. That means minimalist designs are typically preferred, and content should fill the entire screen when possible.
Depth — Your Mobile UX design should contain layers that make understanding the hierarchy of information on your mobile-friendly website easy.
Google’s Mobile UX Best Practices
Google's Mobile UX guide is presented as recommendations from a study by Jenny Gove, a Ph.D.-holding UX researcher from Southhampton, UK. Gove states that mobile users are uniquely goal-oriented in a way desktop users aren’t. It's rare that a mobile user will casually 'browse the web.' Twitter, Instagram, and similar apps now fulfill mobile users' general browsing needs.
Instead, mobile search queries are made by people trying to find things like reviews, supplies, or local businesses on the go. In other words, they need their information now. We can see Google's recognition of this desire in their 'Map Pack'—a feature that places the top three results into a mobile-friendly interface near the top of search results.
All of this underlines that Google cares deeply about mobile experiences and mobile UX design. Google’s recommendations are:
Keep calls to action front and center – customers come to your mobile site to use your services. Make accessing those services as immediate as possible!
Keep menus short and sweet – if a mobile user needs to scroll to use your menus, the menu is too long.
Make it easy to get back to the home page – mobile users expect your logo to link to your home screen; make sure this is the case.
Don't let promotions steal the show – full-page pop-ups (and mobile pop-ups in general) are awful for a mobile-friendly website experience. They load slowly and create a barrier between your customer and your site—delaying information delivery and increasing bounce rates.
Let users explore before they commit – likewise, if a customer is immediately faced with a request for personal information, they are likely to leave (more so on mobile than desktop). You have to earn their trust first.
Make site search visible – If searching your site is central to your business, make sure your search function is easy to access outside the expanding menus.
Implement filters to narrow results – scrolling on mobile websites is a more significant barrier to conversions than you might expect. Ensure your customers have options to speed up their mobile search if your site includes a surplus of products. Take our client, Shipton’s Big R, as an example. Shipton’s has a large e-commerce website filled with every product under the sun. We created filters for Shipton’s customers to use to quickly find exactly what they needed on their product pages.
Use click-to-call buttons – Make reaching you easier with buttons that mobile users can access with a single click—preventing the monotonous copy and paste rigamarole. If a button feels like too much emphasis, a click to call text link can be an acceptable substitute.
Provide visual calendars for date selections – Using a visual calendar helps customers choose the date they want without having to type on mobile keyboards.
Optimize your entire site for mobile – your site's layout should change along with the screen size. A mobile design should accomplish everything your desktop site aims to accomplish… but faster! The more economical your mobile site is at delivering information, the better.
Make product images expandable – make sure you include expanding images in your initial web design. Having an option to make a picture full screen allows your customers to see what they're buying, enhancing your mobile-friendly UX.
Designing Mobile Sites to Optimize for Page Load Time
One of Google's tenants for their 'web vitals' measurement is called 'blocking time.' Blocking time measures the amount of time your browser takes to format your website. The simpler the design, the faster it will load.
Blocking time is especially important for mobile sites because mobile interfaces include additional instructions to tell Google how to interpret your site outside of a desktop format. Make your web design efficient and straightforward to help it load faster.
Follow Apple's advice and stick to large, elegant elements for your customers to interact with.
You can also combat mobile load times by following the correct coding practices, but the best mobile UX designs make load time a priority from the very start of the design process. After all, a gorgeous website means nothing if it's not made to be used in the real world.
The Mobile UX Design Best Practices That Jtech Follows
In addition to Google, Safari, etc.'s recommendations, JTech also has several best practices that we like to follow to ensure the best mobile-friendly experience we can. Because JTech's sites are all fully custom-built using our in-house framework, we can truly customize your site to offer your customers the best experience possible.
Here are three ways that we've made your customer's mobile experience extra enjoyable.
Mobile Site Menus
Menus are critical in mobile design. They need to be large enough to use easily and small enough to stay out of the way during navigation. Mobile menu design often compromises in this respect by including a large icon that users can tap to access a menu that drops down from the top of the screen.
JTech has adopted this approach in most situations to minimize intrusive elements in a mobile user's experience.
JTech’s Mobile Menu: Collapsed
JTech’s Mobile Menu: Expanded
Element Positioning on Mobile Screens
Phones are almost exclusively used with touch-based navigation, and the majority of the world is right-handed (anywhere from
OnSite Energy Homepage
70-95% percent depending on locality). So, the average mobile user will instinctively interact with the right side of their phone screen first.
We do our best to place your site's most important UX elements near the right-hand side in a mobile responsive view. Take OnSite Energy—one of our customers—as a great example. We placed their 'Get Quote' button near the bottom right of their site menu—as close to their customer's thumbs as possible while maintaining a consistent visual design.
Baking Accessibility Into Mobile UX Design
Finally, JTech bakes accessible design into every website that we create. ADA compliance makes your mobile-friendly website easier for everyone to use.
In a mobile context, accessible design means easier to read text, contrasting colors (see the OnSite Energy’s website above), and large buttons sized for thumbs—not mouse pointers. 26% of adults in the U.S. have some type of disability. So, great mobile-friendly websites always have a focus on accessibility.
If you're wondering whether your website is designed with accessibility in mind, look at it and think—could anyone I know use this on their phones? If the answer is yes, then you're probably very close to having an accessible website! (You can also use the WCAG's accessibility guidelines... which might be slightly more helpful.)
Tapping Back Around: A Summary of Mobile-Friendly Design
Let's sum up everything we've learned so far about mobile UX.
Mobile-friendly website design is critical to the success of your website
Industry-leading browsers all make UX and UI guides readily available (use them!)
Menus on mobile need to help customers find what they want clearly and concisely
A good, mobile-friendly website is an accessible website
Exciting, right? We sure think so!
If you’ve made it this far into our article, we genuinely hope you found our Mobile UX information helpful.
If you would like to learn more about mobile-friendly website design or if you would like us to build your next website, please reach out! We would love to hear from you.
