#

How to Design an Intuitive Mobile Website: Step-by-Step & Best Practices

You might have heard it before. Think, design and optimize for mobile.

We live in a time when mobile usage has surpassed desktop usage. Consumers are attached to their phones like a Red Bull is to Jagermeister. The reality is that 3 out of 5 businesses have not yet invested in optimizing their mobile online presence. That’s why mobile marketing and it’s surrounding services present a big opportunity.

This article will show you how to design and develop an amazing mobile experience for your visitors, users, and customers. You will discover how to research specific user behaviors, take into consideration how to ensure your development matches your brand’s identity and explore other best practices and tips for design and development.

Follow these tips to make sure your mobile website is a 5-star experience.

 


Why Should you Care About Mobile?


Look around you. If you are in a public setting, chances are you will see someone using their phone. In a coffee shop, in a zoo, on public transit or at a conference. People are on their phones all the time.

Let’s review some recent statistics:

  • More than 90% of North American households own three or four phones
  • Over 60% of phone users in North America use data daily
  • 90% of Millennials use their phones to go online daily. (Google)

In October 2016, mobile usage surpassed desktop usage for the first time in history. That speaks volumes.

mobile, tablet and desktop statistics

At Growth Media, we are truly invested in mastering the mobile experience because our data shows that people consume our content on their mobile devices. We welcome the opportunity to give people what they want. Therefore, we have to think mobile to offer the best possible experience to our readers, like you.

 

 


1. Use Data Analytics


Using data is a great first step to getting insights on how many people interact with your online properties using a phone.

You can do this easily by looking at Google Analytics to see what traffic share comes from mobile and which devices your website visitors are using. From your data, you can determine how many people are visiting your website using a phone as well as what kind of device they use.

Here is how you can do it:

After you open Google Analytics, use the left side navigation to follow this path to reviews your mobile traffic. Audience > Mobile > Overview.

Mobile view Google Analytics

Here is how to see insights on which devices your website visitors are using. Audience > Mobile > Devices.

Device view Google Analytics


2. Know the Behavioral Patterns of Your Customers


Do you love when people say “hmmm, this website is so intuitive!” Let’s talk about why that happens and why knowing the behavioral patterns of your visitors is important.

Your target market will be different depending on the product or service that you are offering. Right? That’s why your website design should be specifically tailored to your target audience. Agree? And, the way you design your website will make your visitors act in a certain way.

The key is to get to know the behavioral patterns of your customers, so you can make your website “intuitive” and customize your website to your visitors’ behaviors.

Here is a real life example.

Take a look at these two yoga studios. Factually, most of their website traffic comes from returning visitors using their cell phones. The primary desire of this segment is to check the schedule for upcoming classes so they can register. If you look at the “not optimized” experience, users have to search or go to the navigation, select schedule and scroll down to book their class. The “optimized” version has a schedule button right on the hero image where with a one click, visitors can see upcoming classes.

Use Behavior Pattern Example

In order to discover such user behaviors, you will need to look under the hood.

A combination of web analytics like GA, Mix Panel, Kiss Metrics and heat map tools (Crazy Egg, Hotjar, FullStory) will give you enough data to discover patterns. If you want to see more about tracking user behavior, Joel Musambi wrote an amazing post about tracking website visitors.

This is how you get to know the quality of interaction such as bounce rates, pages per sessions and average session duration. Google Analytics > Audience > Mobile > Overview

Mobile Metrics

This is how you can find and analyze user behavior flows. The key focus should be on identifying unusual patterns of your user behaviors. Google Analytics > Behavior > Behavior Flow > Add new segment for mobile traffic

user behavior flow google analytics

 


3. Built for Mobile vs. Mobile Responsive


If you are developing a new website from a stretch, you have two options: You can build it specifically for mobile or make it device responsive.

Let’s take a look at the pros and cons of each option.

 

Mobile website

Mobile-dedicated sites are developed specifically for phones.

Pros: These sites can be highly customized to a particular an Android or iPhone, allowing their functionality to play a role in the overall experience.

Cons: Can get costly due to timely upkeep, maintenance or modifications. Also, a mobile website needs to get a different domain (typically m.domain.com) which can hurt your organic traffic, back-links profile and content management.

 

Responsive Design

Responsive design should always nicely scale between any devices and should automatically adjust according to a device’s screen size and orientation.

Pros – Google thinks responsive design is better as you preserve a single domain and a canonical URL, avoid complicated redirects. Also, everytime you update your site, you won’t have to update it separately on your mobile version. Overall, it is a better return on investment.

Cons – Designers often do not consider mobile when developing a site for a desktop usage. Since your visitors may use mobile for different purposes than desktop, your mobile experience might irritate your visitors.

 


4. Plan Your Layout Ahead


What should you design first? Mobile or desktop?

I think both. Back in the day, most web developers were designing only for desktop but now, it’s a two-way street. You have to think about how your layout will be orchestrated for both desktop and mobile.

From a content perspective, it’s necessary to be mindful about the readership of your content. For example, if you design a detailed looking graphic for a desktop, consider how it will be to read on mobile as it will display way smaller than on a larger monitor.

reponsive website design

 

It’s recommended to sketch your wire-frame and content stacks before you start coding or building. You want to know what the architectural plans will be before you start stacking bricks to build a house.

A clear overview of your pages will help you build your website more quickly as you won’t be wandering around, trying to figure what to do next. It will also help you to keep the theme of your website and styling elements consistent across all pages.

That being said, you should not over complicate it. Not every single detail needs to be captured before you start building. As long as you firmly know what your backbone is, start working.

In the future, you design will change as you progress your business.

wireframe desktop and mobile UI example

 


5. Follow Your Style Guide


I can’t stress enough the importance of having a style guide. If you don’t decide on your style before you start designing, you will spend many more hours re-designing all these details later.

That is why the overall website experience should be thoroughly designed from beginning. Everything from website type, look, feel, colors and overall experience should be tailored towards the user.

Speaking of brand consistency – 83% of mobile users say that a seamless experience across all devices is very important. (Wolfgang Jaegel)

Selecting a highly responsive typography that looks stellar across all devices is an excellent idea for enhancing the readership of your website. If you are looking for a typography that stands out and is responsive, fontsquirrel has a large library of free and premium fonts you can easily download.

From a branding perspective, don’t use more than 2 or 3 different fonts to keep your website look consistent. If you use two fonts, apply one font on your main titles and second font on subtitles and text.

Your color scheme should be connected to your brand and the psychological effect that would make the best connection with your users.

color schemes web design

Finally, consider selecting the right color for your brand.

psychology of colors


6. Deliver the Most Important Content First


Once you know the behavioral patterns of your visitors, you should have a clue about what content your visitors are most interested in.

If you deliver the most important content first, your users won’t have any reason to get irritated, which will make them love your business a little bit more every single time they interact with your website.

For example:

If you are in the restaurant business: address, food menu, opening hours and reservations are more important than the bio of your chef.

Let’s say you are running a fitness studio: your class schedules and equipment bookings should be prioritized over any photos of your facility.

If you are a blogger, your articles should be easy to access before you ask people to subscribe.

 

By using heatmaps and analytics to monitor your visitors behaviors, you will identify what these key pieces of content are.

optimize website for mobile

Keep the Foundation, Modify Details

As I mentioned above, your mobile experience should be different from your desktop because your audience might use desktop and mobile for difference purposes.

That is true for your website content as well. Since you can display or hide different information on mobile vs desktop, you should keep your most important content and modify only things that serve particular micro-moments that your audience is looking for.

 


7. The Most Overlooked Thing: Navigation


Mobile navigation is extremely important. Since our mobile screens are smaller than desktop.

If you look for different options for placing your navigation, take a look at Brad Frost’s article about responsive navigation patterns.

Keep in mind that on mobile you can have any position for navigation and users can swipe to the side to get an extra screen.

 

best mobile navigation example

 


8. Connect your Mobile and Desktop Experience Funnel


Since each device has a different purpose, engaging users across all the devices will need to be a part of your buyers journey and experience funnel. What does that mean?

For example, collection of information through website forms. On mobile, ask only for email or even better, offer to send your promotional offers or content to your visitor’s email address. Your visitors can open it later on a desktop and travel back to your website.

There are many funnels you can implement to connect mobile and desktop experience. Now it is your turn to think for yourself about how these funnels can look like for your specific business.

 


9. Test Your Website on all Browsers and Devices


Doing a quick scan through the most used browser and devices can uncover any small errors that you can typically solve using basic CSS.

 

browser testing tools

 

To test your browsers and devices, you can use the following tools:

Browserstack offers a free trial.

Browserlink is free limited to 3 minutes sessions, after you can purchase a plan.

Screenfly is a great tool for responsive screen testing on monitors, tablets and smartphones.

 


10. Consistently Run A/B Tests to Improve Visitors Experiences


I prefer to keep this point short and simple, but will offer one piece of advice.

Before you start A/B testing, develop a consistent system for marketing testing to properly track all your experiments. If you don’t do it, you will barely know which details resulted in an improvement or a failed experiment.

 


11.General SEO Tips for Mobile


Google now gives a “search priority” to websites that are fast and mobile friendly.

In May 2016, Google rolled out a new mobile-friendly algorithm that gives a boost websites that are mobile friendly.

48% of consumers start mobile research with a search engine. (Smart Insights)

Mobile-Friendly Test

You can use this free mobile-friendly tool to check how easily your visitors can use your page. If your page has any errors, Google will outline exact steps that you can take to fix them.

If you are looking for any additional information, tips, and resources to fully optimize your site, access the Mobile-SEO documentation.

Speed Test

If you are looking to get insights on the speed of your website on mobile, run a Google speed test. Generally, you should be aiming under 2 seconds.

AMP – Accelerated Mobile Pages

AMP should now be a standard for every website. The sad news is that it’s not. AMP is a Google-backed project created to assist fast page loading on mobile devices by stripping down all unnecessary code.

AMP example

Pop-ups

If you ran pop-ups on mobile, you might get penalized. On mobile, pop-ups do not contribute to a great user experience as they tend to be intrusive and annoying. The Google algorithm assigns a penalty if it detects pop-ups in your website code.

Conclusion

The world is going mobile and there is no doubt about it.

If your analytics shows that your website visitors are using their mobile phones to interact with your site, you should seriously consider making your mobile experience highly intuitive.

I hope this article will help to guide you through designing a mobile website for your business.

 

There are many businesses who can benefit from this article. Share this article to help others.  It takes only few seconds.

 

Comments (1)

I jᥙst like the helрfuⅼ information you supplу in your articles.
I will bookmark your blog and taқe a look at once more right here fгequently.
I am somewhat sure I’ⅼl be told a lot of new stuff proper riցht here!
Вest of luck for the following!

Leave a comment