The first thing most of us do when searching for a solution to a need or problem is turn to our phone for the answer. According to comScore, more than half of all digital media consumption happens on mobile devices. We sleep, eat and breathe with our phones.

Whether you’re looking for a restaurant, specialty store or a web design company, bad mobile design is an immediate turn off. It’s not enough to just be “mostly mobile friendly.” You either are, or you’re not.

Think you’re ready to redesign your company’s site? We’ve gathered our top 22 tips for creating an unforgettable mobile site.

Stage 1: Make A Plan

1. Start from the bottom.

   Although your mobile site might seem just like a mini version of your desktop site, successfully executing it without compromising user experience actually takes a lot more planning. Because of this, it’s good practice to start with your mobile design and move up from there with tablet and desktop.

2. Understand how your target audience will be using your site.

   Get into the heads of your brand personas. What are they coming to your site for? Is there a certain action that your customers will be primarily using your mobile site for, such as purchasing products or accessing blog content? These are questions that need to be answered in order to create the best customer experience, and keep them coming back.

3. Implement UI standards.

   Whether you’re designing for an iPhone, Android or something else, every operating system is different. Learning what makes them different and adhering to their guidelines will make your app easier to use. Here, you can also learn Google’s principals for material design.

4. Define your grid and breakpoints.

   If you’re new to responsive design, it’s important to understand how it works before diving in. Open your website and toggle the window to view it at different sizes. Are there any viewpoints where the design isn’t very strong? A successful responsive website looks good at any browser size. Once you decide how your users will be using your site (iPhone, Android, etc), you can design your screens for the proper sizes.

5. Create a content stacking strategy.

   Think of your design as building blocks that stack on top of each other as the screen gets smaller. Make a grid, decide where you want your content to go and how they will stack at different sizes.

6. Know the difference between simplifying content and not having enough.

   Creating a good mobile site is about keeping all of the content that the user needs and getting rid of the excess. Big, flashy graphics are better on a desktop and can result in slow load times, which may cause the user to leave. This doesn’t mean you should get rid of everything that makes your site beautiful, just remember that the main goal of your mobile site is to give users the information that they actually want, nothing else.

Stage 2: Implement User Experience

7. Simplify navigation.

   Consistency is the key to making your navigation user friendly. Instead of deleting navigation options for your mobile site, decide what condensed options is better for you. If you have a large navigation, a hamburger menu might be the best fit for you. If your navigation is limited, you might be consider a slide-out menu.

8. Make it easy to get back to the homepage.

   Make sure your users have clear and easy access to your homepage at all times. Since your logo will most likely be visible on the top of every page, use it as an easy link to your homepage.

9. Deliver content quickly.

   At this stage, you’ve defined why your users are coming to your site and what their primary action will be on every device. Use this as your guide for deciding what the first thing your user sees when they arrive.

10. Embrace the change.

    Platforms are now developing just as rapidly as new phones are being created. Although this is great for applying new trends, it also means that the hard work you put into developing your code and website maintenance might not work with the new technology. This is just a constant reminder that your site is never really finished.

11. Keep the user in a single browser window.

Stage 3: Simplify Information Entry

12. Minimize text input.

    I am not sure if anything can frustrate a user more than asking them to fill out extensive forms and enter an unnecessary amount of text using that tiny mobile keyboard. Whenever possible, if you can avoid text input, do it.

13. Create easy tasks.

    Strive to give your users the ability to do the simplest option for each task. Instead of asking them to enter in a date, give them a visual calendar. If your users are a frequent visitor, have available information already inputted into forms, such as their name and email, to avoid making them fill it out.

14. Give users the option to convert on a different device.

    If extensive information entry is unavoidable, such as a subscription sign up, give your users the option to submit their email and continue the action later. Many users may become frustrated with information entry and will leave the page all together, so providing them with this option allows you to send them an email reminding them to finish signing up.

15. Make purchasing your product simple.

    Don’t make purchasing your product a headache. Give your users the option to zoom in on images, and provide them with all of the information they need in a clear, concise way. Have product reviews and your return policy easy to find, and allow a guest purchase option.

16. Optimize your site search.

    Your customer should have the option to search within your site for what their looking for. We recommend making it one first things your mobile users see. Your site search should show the strongest results first and allow the user to filter results.

Stage 4: Make Visuals Prominent

17. Keep calls-to-action on top.

    You calls-to-action is how you’re converting your website visitors and social media fans into leads. Make sure your primary CTA is one of the first things your client sees when they visit your sight. For tips on creating click-envy CTAs, check out HubSpot’s blog 17 Call-to-Action Examples You Can’t Help But Click.

18. Show progress.

    Because users often feel overwhelmed by a long form, breaking the tasks up in a fun, visual way often makes them more willing to not only complete it, but enjoy the experience.

19. Use click-to-call buttons.

    Whenever possible, make information such as your phone number and address clickable and linked to the appropriate application.

20. Provide real-time validation and error notices.

    Rather than waiting for the user to click the submit button, provide validation and error notices as they occur.

Stage 5: Test and Repeat

21. Do extensive usability testing.

    Once you have your site planned out, take it out into the real world and ask people to test drive it on multiple different devices. Doing this will help you decide if there are still any usability issues or content that is troublesome to the user. Remember, a website is never finished, and you may need to complete this task more times than you would like.

22. Take risks.

    Last but not least, taking risks is key with any design. Even though there a lot of rules for creating a beautiful, user-friendly mobile site, it doesn’t mean you can’t take risks with your design. New trends have to start somewhere, so don’t be afraid to create the next new cutting-edge mobile site that everyone envies.

Thanks for reading! Check back next Thursday for more design and user experience tips.