11 Steps For Creating a Mobile Friendly Website

First things first. If your website be accessed and viewed via a mobile device, that’s great. However, you still have a lot of work to do before it can be declared mobile friendly.

Not only should mobile users be able to look at your website and read your content, they should have access to its full functionality.

The number of mobile device users has skyrocketed in the last few years, and they are using those devices to access the internet. There was a point in time when mobile users were happy to have the functionalities of texting, emails, making phone calls, and doing a bit of limited surfing. Today, the expect to be able to do nearly everything they do on the desktop on their mobile devices. This includes:

  • Researching products and services
  • Watching videos
  • Looking at images and product descriptions
  • Shopping and making purchases
  • Signing up for offers
  • Consuming news and other content

If visitors to your website notice that they can only enjoy a limited user experience, there is a good chance of them going elsewhere.

If you would like to optimize your website so that it is truly mobile friendly keep reading. These 11 steps will help you to get started.

1. Eliminate the Need For Pinching And Two-Handed Navigation

Eliminate the Need For Pinching And Two-Handed Navigation

Here is a simple but very important test that every web designer should perform on each web page that they design. Open up the web page in question on your smartphone. Now, place that device in your prefered ‘phone hand’. Can you navigate your way around the page without having to use your other hand? Can you read the text without having to pinch and zoom in or out, or without scrolling? If you cannot do either of these things, it is time to make some changes.

One of the key convenience factors of using a mobile device is that it only requires you to engage with one hand. What you don’t want to do is take that convenience away from the people who you would like to purchase your products and services.

2. Focus on Simplicity

There might be plenty of room and bandwidth for videos, images, and lots of content on your desktop users, but that isn’t the case for your mobile users. Because of this, you should focus on creating a clean, simple design that emphasizes functionality over various features. Think of the things that visitors to your mobile website will want to see and do the moment they land on your home page. Make sure that these things are immediately available to them when your site opens. Then, focus on page load time. Only after those two things have been accomplished should you consider whether or not you have room for another feature.

3. Use a Technology Framework That is Responsive

Use a Technology Framework That is Responsive

Responsive design frameworks are extremely valuable for web designers who are concerned with creating mobile friendly websites. Essentially, tools such as Bootstrap allow designers to lay out the elements of each web page on a grid. Then, the dimensions of that grid can be adjusted for a variety of screen sizes. The result is that text, icons, images, buttons, etc. are all spaced out the way they should be. This ensure that each user has a similar experience regardless of whether or not they are using a desktop, laptop, smartphone or tablet. Even better, you don’t have to maintain a separate website for mobile.

4. Optimize Images For Mobile

Optimize Images For Mobile

The internet for mobile is simply slower than the internet that is provided by cable and phone companies, and other service providers. Two elements that can really impact this are videos and images. You don’t want to remove these items altogether. After all, mobile users as a whole really do love visual content. However, you do want to optimize as much as you can. Here are a few steps you can take to help improve speed and performance when using images:

  • Serve up lower res versions of images to users
  • Optimize images for specific device size and aspect ratio
  • Take JQuery into consideration if JavaScript is too unwieldy
5. Instead of Text Whenever Possible

Instead of Text Whenever Possible

Icons work well because they are essentially a form of internet short hand that all of us have agreed mean certain things. For example, social share buttons are instantly recognizable to anyone who has been using mobile for any period of time. The same is true for buttons for emailing, calling, or accessing the website’s menu.

Using these mobile friendly icons helps you to accomplish two things. First, you save valuable screen space over using text. In addition to that, you also communicate to people using your website that you have taken the time to consider mobile users in your design.

6. Keep Content Short

Keep Content Short

This is an area in which many web designers and content marketers have a bit of a dilemma. Long form content is becoming more and more popular, especially among decision makers, but it simply isn’t a great fit for mobile devices. The question is, is it better to limit or eliminate long form content on mobile, or to put it out there anyway and leave the choice of consumption up to the user? The best way to answer these questions is to take into consideration typical mobile user behavior.

For your particular website,you can rely on analytics to get an idea of what your mobile users are doing and what they are not. However, mobile users tend to use their devices for staying connected on social media, news consumption, listening to music, shopping, and reading content that tends to be more short form than not. Now, this does not mean that long form content for mobile should never be considered. It does have this place. Another common use for mobile is to find solutions to problems. If you have a piece of long form content that, for example, can walk a mobile user through the process of solving a problem, then you should make that available to them.

7. Make Contact and Location Information Easy to Find

If you operate a website that focuses on humor, entertainment, news, curating trending content, dating, or you operate a social media platform, people may go to your website on their mobile devices for the purposes of surfing around. If not, chances are quite good that a person pulling up your website on mobile wants to contact you or figure out where you are. The best way to help them out is to make that information available to them as soon as your home page opens up.

If you have a brick and mortar location, you may want to ensure that this information is included on your landing pages as well. If people are surfing in after answering a call to action from one of your ads, you don’t want them to have to dig around to find out exactly where you are.

8. Thoroughly Test The Mobile User Experience

Thoroughly Test The Mobile User Experience

Here are the things that you need to consider when it comes to designing mobile friendly websites:

  • There are a variety of screen sizes
  • There are a variety of operating systems running mobile devices
  • Users may be accessing your website using a variety of internet browsers

Taking all three of these facts into consideration means that there are multiple possible combinations of operating systems, screen size, and browser choice. Your goal, to finish your next web design project, should be to test as many possible combinations as possible so that you can ensure that each user enjoys a great mobile experience. You can use an app like UxRecorder to help with some of this testing.

9. Use Geolocation

Use Geolocation

Geolocation is extremely helpful for mobile users. If you implement this technology on your website visitors will be able to find store locations near them, map directions from their location to yours, and check their local store for product availability. As a business, you will be able to target content specifically to a geographical area, make offers to users in specific locations, price items in the local currency, and encourage users to check in or add their insights on social media sites that are divided by location.

10. Optimize Your Forms For Mobile

Optimize Your Forms For Mobile

Ideally, none of your forms should be excessively long, nor should you use them to try and extract a bunch of information from your users for marketing purposes. It’s irritating and likely to stop people from signing up for your offers. With mobile users, this is doubly true. This is why it is very important to keep your forms short, intuitive, and ensure that they can be filled out quickly.

You can do this by only asking for the information that you need to give them what they are signing up for, by providing them with checkboxes and pull-down menus, and using their location to fill in some fields for them.

11. Encourage Feedback

Remember that your users don’t walk in lockstep with ‘other mobile users’ or any other demographic. They are your customers and potential customers and they have unique needs and behaviors. These are driven partially by their own preferences, but also by their specific wants and needs related directly to their use of your website.

What does this mean? It means that you can create a textbook perfect, version of a mobile website that simply does not work very well for your users. You can also develop a website that SEO people and other web designers insist will never work for your users that absolutely meets the needs of your audience.

This is why it is so important to get feedback from your users. Analytics are wonderful, but they are no replacement from listening to what customers have to say. You may be able to use analytics to determine that a lot of people are spending time on a particular page. What analytics cannot tell you is that they are on that page out of necessity, but hate the way that it’s designed. Take the time to read comments that your visitors send to you, and consider creating a poll specifically for mobile users. You can then use the information that you get from them to determine what is working fine and what should be overhauled.


Don’t stop at simple mobile compatibility. Take advantage of the increasing number of mobile users and create a user experience that truly caters to their wants, needs, and expectations. Mobile users are no longer content to deal with a websites that work reasonably well on mobile. They demand full functionality, and features that are designed specifically for them.

Whether you are designing a new website, or taking an existing one back to the drawing board, it may be time to consider a mobile first strategy. After all, isn’t it good business to consider your fastest growing audience first?

Like the article? Share it.

LinkedIn Pinterest

One Comment

  1. Nice article Norman. Nowadays as designers we should focus on designing a simple and clean mobile websites in order to optimize the user experience like fast loading pages etc… Also listening to our customers and getting feedback from them is crucial. Adding polls to our website like you mentioned in the article is a good solution. Thumbs up!

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *