For many websites, mass adoption of responsive design (over mobile websites and dynamic serving) was spurred six years ago when Google officially released their mobile-friendly ranking algorithm update.  As mobile adoption continues to cement its reign over desktop (61% of visits to U.S. websites were on mobile devices in 2020), a responsive website is no longer the endpoint for a mobile-friendly website -- it is the starting point in providing users an optimized mobile experience. 

Whether you call it mobile experience design, mobile UX, or mobile-friendly design, the core objective is the same - creating a delightful and relevant user experience for mobile users of your website or app. 

How Do I Design an Optimized Mobile Experience? 

If a responsive website is the first step, what are the next steps in creating an ideal mobile experience for users?  Thankfully, the internet is full of insight into Mobile UX, from UX Collective’s Mobile UX design principles and best practices, Adobe’s 10 Do’s and Don’ts of Mobile Design, or Google’s Mobile UX Fundamentals. 

Pulling from these, others, and our own UX experts, the below is a list of Mobile Experience best practices we feel provides a high-level approach to delivering a delightful and relevant mobile experience for your users. 

Define Mobile User Goals 

Ensuring that you understand the circumstances and goals behind why your users use your mobile site is crucial to ensuring your site is designed to meet their needs. Too many websites stop at simply replicating their desktop site at a mobile viewport, preventing their mobile experience from truly delivering what their user’s need when they arrive on a mobile device.  

• Mobile User Research:  Taking a deep dive on where, why, when, and how your mobile users interact with your site allows you to prioritize which user experience patterns matter the most to your user base and where your site needs the most help. 
• Are your mobile visitors outdoors when they visit your website? Using high contrast colors can help with viewing your content under bright sunlight. 
• Are they looking for support articles while installing your product? Ensuring a mobile-optimized tutorial, installation instructions, product QR code search, and 1-touch customer support can help make your product installation a better user experience. 
• Are they typically using WiFi or relying on their data plan? Focusing on a lightweight front-end experience can help ensure it loads as quickly as possible on spotty connections.  
• Prioritized Mobile Experience Roadmap: Armed with your research and what elements of your mobile experience are most critical, creating a prioritized mobile experience roadmap helps you focus on the optimizations that will make the most impact. 
• Look to your competitors: What are your competitors providing mobile users that you aren’t?  A great place to find where your mobile experience is lacking is by comparing it to your competitors. 

Mobile Content Strategy 

Mobile users have different content needs than desktop users. Your website’s content strategy should take your Mobile User Research into account, revealing what content is critical for mobile users and what content may be getting in the way of a relevant mobile experience. 

• Write for the Mobile Web: The idea of writing for the web has been around for quite a while.  Yet, many of these lessons were applied at the desktop level and simply duplicated at responsive viewports. Copywriting practices like the inverted pyramid, brevity, bulleted lists and scannable content become even more critical at the mobile experience.  A singular sentence on a horizontal desktop resolution can have minimal impact on what information is visible. On a small, vertical screen, it can be the difference between a mobile user exiting your page and checking out your competitor.  
• Get to the Point: Ensure you know the content your mobile users need urgently and remove obstacles (like marketing fluff, unnecessary visual elements, interstitials, etc.) that prevent them from accessing it as quickly as possible. 
• Mobile Video: Is your best product information hidden behind a 3-minute 4K video optimized for gigabit bandwidth? Accessibility and the mobile experience can go hand-in-hand. Focusing on quality video/audio captions and transcripts can help ensure your site allows for a robust mobile and accessible experience. 
• PDFs & Multi-Tabbed Content: Having your website open and the PDF that explains how to create a new account may work on for desktop users with multiple browsers or monitors. However, content that requires multiple browser windows or apps to interact with can be troublesome for mobile users. 

Consistent Simplicity 

The mobile experience abhors clutter, complexity, and fluff.  A positive mobile experience is often the product of designed simplicity that relies on delivering a delightful but consistently simple content experience. 

• Navigation: Ensuring navigation is intuitive and recognizable is more vital than ever for the mobile experience.   
• Be direct: Mobile Navigation should be direct (Careers, About Us, Products) and shy away from clever jargon (All Work and No Play, A Tale of Two Companies, What We Make) to avoid creating unnecessary obstacles and hesitation for your mobile users. 
• Recognizable Iconography: House for Homepage, Magnifying Glass for Search, these icons have become widely recognized for their meaning and relationship to navigation. Navigational icons should be easily recognizable and consistent.  
• Device Consistency: A good Mobile Experience alters enough to be delightful for mobile users but not unrecognizable for those mobile users who also rely on your desktop experience.   
• Consistent design elements: CTA (Call to Action) colors, branding, and architecture should be consistent across devices.  While the experience may differ, your website should be building trust through a seamless transition between devices for users engaging with your website across various device categories. 
• Functional Forms: Completing heavy-handed forms is hard enough on a desktop, but it can be a deal-break on a mobile device.  Ensuring that you’re asking the bare minimum from your mobile users and doing so with their mobile experience in mind is paramount. 
• Fill in What You Know: Leverage information integrations wherever possible to avoid making mobile users laboriously type out repeat information on a smaller keyboard and screen. SSO Integrations with Google/Facebook, Ecommerce integrations with Square, Shop, and PayPal, the profile information you already have should all be tools at your disposal to make form flows easier for your mobile users. 
• Display the right keyboard: Numeric fields such as Zip Code and Phone Numbers should always trigger the user’s numeric keyboard.  
• Interaction Feedback: Buttons and CTAs should provide visual feedback (transitions, animations, and tactile feedback) that alert a user action has been taken.  
• Improve Speed: Design your mobile experience as though every user you have is viewing your site on 1-bar and a 3G network.   
• Reduce Front End Load: Optimize render-blocking front-end elements, compress or swap out hi-res desktop imagery, make 4k video trailers optional to the experience, simplify or minify CSS and JavaScript where relevant.  
• Core Web Vitals: Google’s Page Experience update is on the horizon making Core Web Vitals and other mobile experience initiatives championed by Google something that should be on your radar.  Getting in front of these now can not only help improve your mobile experience but put your website in a stronger SEO position before your hand is forced. 

As stated, the above is not meant as the end-all laundry list of building a great mobile experience--it is intended to start conversations within your organization that can lead to a more improved one.  Incredible mobile experiences are fast becoming the norm as 3^rd parties like Google, and an ever-rising mobile consumer pattern makes it an expectation instead of a luxury. The Mobile Experience is fast becoming the primary experience designers should consider and something too critical to your website’s future to be an afterthought.  

Interested in learning more about Mobile Experience Design? Let us know how we can help!