12 Tips for Designing a Mobile Friendly Website

October 29, 2015

2:00 pm

In the last few years, there’s been an explosive growth in the usage of mobile devices. According to a report Digital Future in Focus released earlier this year by Internet analytics company comScore, people spend 60% of all their digital media time on mobile devices as compared to 40% on desktop devices.

If your website is not mobile-optimized, chances are it won’t get ranked higher in mobile search results. That’s because Google now considers “mobile-friendliness” as a crucial factor when determining where to rank a website in mobile search results. Thus, it becomes extremely important to incorporate a mobile strategy into every project you do.

To aid you in designing a website that renders perfectly not only on desktop devices but also on mobile and tablet devices, here are twelve proven practices you should follow to make your website as mobile friendly as it can be!

Dig Deeper into Google Analytics:

First things first, spend enough time analyzing your Google Analytics (or another analytics platform you use) data to find out what devices and browsers your website is being accessed the most on. This will help you understand what kind of experiences and intent visitors have with your site on mobile devices. Navigate to Audience ￿ Mobile Overview in your Google Analytics dashboard and analyze how visitors actually interact with your site. Once you know who your audience is, you can easily define what things you need to focus on during design and development.

Choose the Right Design Approach:

The next important thing is to select your mobile configuration. At present, there are three ways to make a website optimized for mobile devices: responsive web design (RWD), dynamic serving, and separate URLs. At your convenience, you can choose any one of these methods but I would strongly recommend you use responsive web design, which is a “one-size-fits-all” solution for all kinds of existing (and upcoming) devices. Even, Google also recommends using responsive web design approach because it adheres perfectly to their guidelines of clean link structure and high-quality content.

Define the Context:

Before you dive into design and development, consider the context in which visitors will be using your site on mobile. Think what features and content they actually expect from a mobile site. Find out what actions a user can perform while browsing your site on a mobile device. The best way to define what’s essential in your particular business is to “think like an end-user”. Only then you can determine what you need to put on your mobile website in an easy-to-find fashion.

Keep Content Short, Sweet and Readable:

Since the screen of a mobile device is much smaller as compared to a desktop device, you need to show only the most essential content on your mobile version. Try to convey your story with fewer words to retain the user-friendliness of your mobile site. As an example, you should not display lengthy bios and other non-essential content on the mobile version. To keep your mobile website clutter-free, I suggest you to use conventional icons wherever possible. Also, make sure the text is perfectly readable on all mobile devices.

Simplify the Navigation Menu:

Navigation is one of the most overlooked elements when optimizing a website for mobile. As a giant list of menu items may make the navigation troublesome, you need to think about cutting down the navigation menu. If your desktop website has more than two menus, it would be better to include them in a single menu icon that opens a drop down menu when tapped. Besides, hide the main navigation menu by using a combination of icon and text that indicates visitors about the menu.

Add a User-friendly Search Box:

When you reduce the number of navigational options on the mobile version, it becomes vital to provide users a hassle-free way to find a specific piece of content. That’s where an eye-catching and simple-to-use search box comes into action. So, consider placing a working search box on the home page of your mobile site. This will not only cover a lot of functionality of desktop site but also make it easier for users to navigate from one web page to another, saving a lot of their precious time.

Make Videos Available on Mobile:

Since not all videos are playable on mobile devices, you have to be careful when adding videos to your mobile website. Instead of putting videos in unsupported formats or using a proprietary video player like Adobe Flash, use a video technology that delivers users a seamless experience across a variety of mobile devices. To include videos or animations on your mobile site, my suggestion is to use HTML5 standard tags that work across all mobile devices and browsers. For creating HTML5-based animated content, you may consider trying Google Web Designer.

Make It Insanely Fast:

A mobile device, unlike a desktop PC, has less memory and slow data connection that makes almost everything load slower. So, do whatever you can to make your website damn faster on mobile. Add as few images as possible to your mobile site and for the images you’ve included, make them as lightweight as you can. To speed things up, reduce the number of file requests and replace heavy JavaScript libraries with standalone JavaScript. Keep in mind, anything that takes a lot of time to load on mobile version must be avoided.

Minimize Text Input:

Although a lot of technological improvements have been made to facilitate text input on mobile devices, but still most of the users find it difficult to use those tiny keyboards. Hence, you shouldn’t ask users to input too much text on mobile. To reduce the amount of text entry, keep requisites like sign up form as short as possible. Use dropdown menus, checklists and radio buttons that provide a great way to reduce user text input. Furthermore, you can take advantage of inbuilt mobile technology – such as GPS – to pre-populate fields like city, state and ZIP on a form.

Avoid Using Flash and Pop-Ups:

Since most of the devices (like an iPhone or devices that use Android v4.1 and higher) don’t support Adobe Flash, you must not add Flash-based content to the mobile version. Instead, use other technologies like HTML5 to show your content. Avoid interstitials or overlays – like pop-up signup forms or native app advertisements – that completely or partially cover the contents of a web page on mobile. They disrupt the visitor’s usage of your mobile site and even can create various search engine indexing issues.

Make It Visually Interactive:

Unlike most of the desktop browsers, which are equipped with their own visual indicators, mobile browsers don’t provide any visual feedback to users by default. Means, you have to provide your own interaction feedback for any actions users take while browsing through your mobile website. For instance, a button must change its visual appearance when tapped. Another good practice is to use expressive status messages, like “please wait”, for the actions that may take a bit longer to complete. Because most of the users are familiar with visual feedback, you’re suggested to make the most of it.

Test Your Mobile Website:

Last but certainly not least, “pass the test to be the best”. Never ever forget to test your mobile website against a wide range of devices, browsers, screen resolutions and operating systems. Check if the website is rendering in the same way as intended. To test whether or not your website is ready for mobile devices, I would suggest you to use Google’s mobile friendly testing tool. For more advanced testing, use a combination of developer SDK and web-based emulators.

Did you like this article?

Get more delivered to your inbox just like it!

Sorry about that. Try these articles instead!

Ajeet is a senior web developer at WordpressIntegration – PSD to WordPress Coders – where he writes custom JavaScript code for WordPress themes. In his spare time, he writes about different topics related to JavaScript, WordPress, HTML5 and Social Media to share his work experience with others. You can follow WordpressIntegration on Facebook

  • Shares

Leave a Reply

  • (will not be published)
TechCo Spotlight 300×250
Startup_Mixology_300x250
Enqos – Tower V1