It’s High Time to Create a Mobile Friendly Website

2017.06.09

MageNet Team

(9 votes, average: 5.00 out of 5)

In 2015 Google announced that it would rank mobile-friendly pages higher than those not optimized for different types of devices. This news made many SEO practitioners and developers sweat in an attempt to invent ways of how to optimize their sites for mobile. A year later a tool to test mobile-friendliness was presented, and today you can easily check if your website corresponds to Google’s demands.

By running this test you are able to get any website checked and obtain a 0 to 100 score to see the level of its mobile-friendliness. Along with this score you get a report and a list of possible improvements. If you haven’t performed this test yet, now it’s a good time to do it and get a clearer picture of what to work on.

But it’s not all about Google. The latest reports show that more and more people around the world prefer to use their mobile devices to access the Internet. Thus, it makes sense to think about those users and make their experience with your site productive and pleasurable by creating a mobile-friendly version of your site.

What to remember when you think of how to make a website mobile friendly

Though there are some similarities in mobile-friendly version and desktop design for a website, it’s essential to take a list of features into account.

Not a simple size change

Yeah, mobile-friendliness is not about that. The task should be about creating it accessible, comfortable and usable, not only about making a desktop page look more or less okay on a mobile device. However this is what we still observe sometimes – huge buttons or pop-ups, that cover the screen and don’t allow to get to the point, tons of text that takes too much time to read, a number of forms to fill in. All this often makes the users leave the page quickly with a feeling of frustration and it eventually robs you of potential customers.

10 tips for mobile website design

Here are 10 points that, to our mind, you would want to think of when choosing to make a fully mobile-friendly web design of your site.

1. Responsiveness.

In short, this is an adjustment of your page code the way that users get the optimal view from different devices. The first way to do so is to tell your page to change the size and layout when the device’s screen is smaller than the one of a laptop.

Another option is to use a responsive technology framework, like Bootstrap, for example. It is a free tool that helps to organize a page in a grid view and then adjust the scale so that the grid elements look suitable on phone, tablet or desktop computer. For some time now it has been one of the easiest way to create a mobile-friendly website and you should definitely give it a try.

2. No zoom.

It’s a pain to use both hands to navigate a page on a smartphone when you want to finish your morning coffee, that’s why double-check your site when it comes to buttons’ or links’ size. Make sure the font is big enough and there is no need to zoom a page for reading. Position all the CTAs within a reachable zone if you want users to actually click on them. Have a look at this example and keep it in mind next time you plan a layout for a website.

Moreover, don’t overload a page with too many CTAs in different places – choose one that is the most relevant and important and make it 100% visible and accessible.

3. Simple design and short crisp text.

When making any page, especially, the main page of a website, keep in mind, that you only have one shot at getting the readers interested and make them trust you or buy from you. And when it comes to mobile pages, the significance of laconic text and clear design grows even more.

Be careful with all the data that may take too much time to load – people hardly want to wait for hours to access a page. So re-edit texts several times to achieve better results with fewer words. Remember that users mostly scroll pages until they run into something that captures their attention. It may be better to break all the text in several sections so that users have a choice to read the info or not.

4. Optimize images.

Mobile internet doesn’t always work as fast as the cable connection. With that in mind, boost load speed of your pages by giving smaller resolution to pictures, so that users, once again, don’t have to zoom-in or zoom-out in an attempt to have a look at them.

You may want to try scaling images instead of making them one size for all devices, as smartphones themselves have various dimensions, starting from 240×320 and up to 2560×1440 pixels. If that doesn’t work appropriately, consider changing CSS rules and making images take 100% width.

5. Beware unreasonable JavaScript usage.

JavaScript works differently on different devices and browsers, therefore use it in a smart way in order not to reduce the performance of your mobile-friendly website.

The same applies to excessive page refreshes and pop-ups. The latter ones are especially uncomfortable to deal with, and most users would rather leave the page than proceed to it over a pop-up.

most users would rather leave the page than proceed to it over a pop-up

6. Make your contacts easily accessible.

Why do you need a page on the Internet in the first place? Possibly, to attract new customers to your business and make them buy from you. Then you definitely don’t want them to get lost in the information and miss your contact info. Include your phone number, address, working hours and make sure users can operate with the necessary data, e.g. make a call immediately or copy your address to put it in any Maps add. You may go further and use GPS to help locate your business or the nearest office.

7. Add videos.

Russ Somers, vice president of marketing from Invodo, believes that every mobile site should have a video, as users tend to watch them more often using phones than using a desktop computer. In one of our previous articles, we gave a list of reasons to include video marketing in your campaign as well.

However, pay a special attention to the technology you are using and note two critical moments: your player should run on HTML5 and shouldn’t take away too much bandwidth and phone’s resources.

8. Re-design forms in mobile-friendly web design.

Don’t force users to enter numerous lines of information about them. In fact, take advantage of technologies to improve friendliness towards users, like GPS when you want to know their city or state. Instead of a field where you need to type the answer in think of a good way to include drop-down menus, checklists and all kinds of buttons. As well as with content on pages, break the forms down into several sections.

9. Use geolocation.

When you think of how to optimize your site for mobile, remember that it’s a great opportunity to show that you care about a customer. For example, you can give information about the in-store availability of products in the nearest shop, give directions, or show the prices in local currency for online shops.

10. Perform tests.

Different screens, devices, operating systems give different results and you would want your website to perform equally well on each of them.

Of course, it’s much easier to do if you have a blog, as you can use one of the plugins for your platform (especially useful if you work on WordPress). However, more and more tools appear now to ease mobile testing, like Solidifyapp or UXRecorder.

Conclusion

After you’ve completed all the steps, take some time and then come back to your site and try to see it through your users’ eyes.

Is it concise?
Is there just the right amount of information?
Does it take a user much effort to read and process the info?
Can users navigate easily?
Does your site propose personalized data, tailored to users’ needs?

After all, it’s what use should care about – an entirely pleasant experience when using your site, formation of positive emotions and a feeling of significance.

What is your opinion about mobile-friendliness and the best options of how to optimize a site for mobile? We would be happy to read your comments on this matter.