97 Point Mobile-Friendly Web Design Checklist

Mobile accounts for over 55% of global web traffic, yet most websites continue to be developed for the desktop experience – at great cost. 53% of smartphone visitors will leave a website if it doesn’t load within the first 3 seconds and 70% of mobile shoppers abandon their purchase if the process is too difficult or frustrating.

On the flip side, investing in a superior mobile experience will pay dividends in the form of higher page views, greater conversion, higher SEO rankings, and increased customer loyalty. Research has found that mobile designs that prioritize user experience (UX) can lead to a 30% increase in sales.

This guide will walk you through the must-have elements for mobile-friendly websites and powerful add-ons that can help take a mobile website to the next level – delivering a more powerful user experience. Mobile app development solutions are only successful when they meet users’ needs. Read further to gain a better perspective on mobile-friendly web designs.

Optimize mobile user experience to increase sales and loyalty. Tweet This

What is Mobile-friendly Website Design?

A mobile-friendly website is a site design that is optimized for smartphones and tablets; a site design that is not just scaled down, but rather is purpose-built for the mobile experience. A mobile-friendly website design will take into consideration performance across a variety of bandwidth scenarios, as well as a design that can be easily viewed and navigated across a variety of screen sizes.

Is My Website Mobile-Friendly?

Before looking at the checklist, the first step is to take stock of the existing performance of the mobile platform. Chances are that most mobile websites may fall short in some areas or may perform slower than optimal. Mobile app development  doesn’t add much value if the design doesn’t appeal to your users. To get a baseline on website mobile experience, there are some great online tools to assess mobile performance:

• Google’s Mobile-Friendly Test and PageSpeed Test
• HubSpot’s Website Grader
• mobiReady
• Media Genesis’ Responsive Design Checker

Mobile-Friendly Web Design Frameworks

In mobile website development, there are two main approaches (or frameworks) for design: responsive and adaptive. In responsive design, the website design is developed to scale across a variety of device sizes. In adaptive design, the website design is purpose built for each device class. Responsive designs typically load faster, boosting their SEO, and are more sustainable in the long-term from a maintenance perspective.

Mobile-Friendly Web Design Checklist

Page Layout Considerations

Page layout needs to be both visually appealing as well as organized to support mobile browsing. For example, 49% of people use their phone single handed, so navigation items need to be within a natural finger swipe. The start of this checklist examines best practices for page layout:

• 1. Keep important elements within reach
• 2. Place your logo in the top left
• 3. If eCommerce, place the shopping cart in the top right
• 4. Place the search in the top right
• 5. Keep the number of menu or navigation items to a bare minimum

Design

A standard website design may not directly translate to a smaller screen – it may appear too ‘busy’ and involve icons that are difficult to see. In designing for mobile, the process must incorporate user feedback to help you arrive at a good UX design.

• 6. Keep it simple. Simple sites are more aesthetically pleasing, easy to navigate, and reduce the number of steps to do something (find, read, purchase)
• 7. Include white space and negative space to create a feeling of clean design and to minimize code bloat that impacts performance
• 8. Choose a common font in a large enough size to avoid pinching or zooming
• 9. Ensure any playable content (video) does not auto play and is supported across all target devices
• 10. Minimize the number of images to prioritize performance
• 11. Be consistent in color choices that reflect your brand
• 12. Ensure elements of the design are of an appropriate size (scale)
• 13. Follow labeling best practices to create a sense of familiarity
• 14. Design for UX accessibility with consideration to color, contrast, font, focus indicators, labeling, and tags for screen readers
• 15. Ensure all “like” pages look the same
• 16. Hide detailed information with a “+” or with sub-menus

*Powerful Add-Ons*

• 17. Integrate social proof (user reviews, photos, social media)

Navigation

Mobile navigation is often the most important element of user experience, so the kinds of menus, how they work, and where they are placed are of great importance. Easy is the goal.

In sight, in mind. [3/4] pic.twitter.com/b7Kxrab4M1

— Luke Wroblewski (@LukeW) February 2, 2015

• 18. Prioritize a hamburger menu (three stacked lines) for site navigation instead of the traditional navbar, which takes up too much valuable real estate
• 19. Focus on ease of navigation with a minimum number of clicks needed to find what users want
• 20. Include a fixed navigation bar in the bottom with a maximum of 5 items on the bar. Use icons or a combination of icons and text.
• 21. Use icons to represent common functions and categories of your website
• 22. Highlight the current in-use navigation position with a line or color shift
• 23. If your site supports a user profile, include the standard profile icon (person) in the top navigation
• 24. Make it clear how to open and close any pop-over items or menus
• 25. Make it clear how to return to the previous page
• 26. Hide elements that do not add to the main experience (profile, help, settings)

*Powerful Add-Ons*

• 27. If eCommerce, ensure that returning to the previous page preserves the position on the page
• 28. Integrate mobile chatbots to offer personalization, improve search, improve engagement, or improve customer service

Buttons

The goal for a button is to make the desired action obvious – by ensuring a clear path and call to action. The more buttons there are, or the difficulty in finding the buttons, the greater the chance people will be lost along the way.

• 29. Ensure buttons and menu items are large enough to click without being missed
• 30. Ensure high contrast and white space to improve action clarity
• 31. Provide action feedback (animation, change-state, sound, haptic)
• 32. Make the priority button the most obvious

Search

• 33. Use the standard magnifying glass icon for search
• 34. Open a search box with placeholder “Search” or prompt text (“Search for products”) as a hint
• 35. Place search in the top right of the screen
• 36. Make search a fixed element on all pages
• 37. Make the search easy to clear / reset
• 38. Correct or fix misspellings
• 39. Show the search history
• 40. Display the number of results found
• 41. Ensure you have a no-results page that prompts further action (alternate search, category icons, etc)
• 42. If site search is your main focus, include it prominently on the homepage
• 43. Reduce the default number of search results for fast loading
• 44. Support multiple views for search results (boxed, product detail, number of results)
• 45. Allow filtering of search results and make it easy to see / clear filters

*Powerful Add-Ons*

• 46. Include search auto-complete to speed up search
• 47. Include suggested search items based on trending or sponsored content
• 48. Include the option to browse by category categories
• 49. Leverage AI to offer personalized search
• 50. Support voice search

Performance

Speed is important for user experience – as well as search rankings. 53% of visits are abandoned if a mobile site takes longer than three seconds to load, with the top 10 search results often loading between 1 to 2 seconds. Google’s rule of thumb is to design for a “page weight” of no more than 1000 KB.

• 51. Minimize image sizes / include image compression (by 30-40%) to optimize performance. Ensure you are scaling your images, not the browser.
• 52. Ensure your website server can provide the speed you need
• 53. Enable browser caching
• 54. Minimize HTTP requests
• 55. Leverage CSS to add elements such as shadows, rounded corners
• 56. Put scripts at the bottom of the page, or remove them, to allow the page to load faster
• 57. Load above the fold first (“lazy loading”) to improve user experience
• 58. Minify / minimize your code (HTML, CSS, JavaScript) by removing unnecessary elements, spaces, comments, scripts, or files.

If you don’t have a fast website, people will bounce faster than you can say ‘conversions.’ – Niel Patel

E-Commerce (Shopping Cart)

• 59. Support sign-up and login by social media account or by Sign in with Apple
• 60. Keep form fields to the absolute minimum
• 61. Allow one-click guest checkout
• 62. Allow users to turn on / off password preview controls
• 63. Support digital payments such as digital / mobile wallets (Apple Pay, Google Wallet, etc), PayPal or Alipay, in addition to debit or credit card purchases.
• 64. Support saving address, card details or payment preferences
• 65. Support scanning of credit card details
• 66. Support toggle for country / currency
• 67. Show all products, sizes, prices in the cart
• 68. Allow for full price on the cart screen (including shipping, applying promo code)
• 69. Integrate a pop-over cart summary
• 70. Show the number of items added to the cart
• 71. Provide feedback (message, haptic) when an item is added to a cart
• 72. Offer a variety of shipping speed (cost) options
• 73. Be transparent about where you ship

*Powerful Add-Ons*

• 74. Support shipping preview without sign-in or sign-up
• 75. Offer the option to buy-online, pick up in-store (BOPIS), clearly articulating if pick-up is curbside
• 76. Integrate with points programs to support shopping with rewards
• 77. Consider “buy now, pay later” systems to split payments into installments, which has been proven to boost sales
• 78. Offer green shipping options (reduced packaging, send in as few shipments as possible) to support sustainability and “green” initiatives

Forms

The fastest way to lose customers is to ask too much of them too quickly.

• 79. Keep fields to a minimum (e.g. one field for name, vs two)
• 80. Reduce visual clutter with progressive forms or single column layouts
• 81. Use text placeholders to improve clarity of each field
• 82. Provide the appropriate keyboard for the field (numeric vs text)
• 83. Integrate autocorrect
• 84. Use autocomplete
• 85. Ensure errors are clear. Ideally jump to the problem spot
• 86. Make the call to action (data submission) clear at all times

*Powerful Add-Ons*

• 87. Leverage mobile integrations to support saved identifies
• 88. Automatically scroll down the screen after completion or place completed items out of sight
• 89. Include a progress indicator for completion of eCommerce steps

Security

• 90. Use HTTPS and its “lock” symbol
• 91. Choose a secure web host
• 92. Where appropriate, state that information (address, credit card) will be kept confidential
• 93. Ensure your privacy policy is visible on all page footers
• 94. Display logos of trusted payment providers
• 95. Make it obvious how to contact you for help

*Powerful Add-Ons*

• 96. For eCommerce, support 2-factor or multi-factor authentication
• 97. Consider secure socket layers

How Net Solutions Can Help

At Net Solutions, we design for the mobile experience. Our experienced team of mobile web designers and developers have put together this checklist with tips to help you optimize your mobile web design.

We respect your privacy. Your information is safe.

If you want a hand up on your mobile website, eCommerce platform, or mApp, contact us.

Request Free Consultation

Hire experts to build your mobile website, eCommerce platform, or mApp.