Nowadays smartphones and tablets are reining and it's no surprise that more Google searches take place on mobile devices instead of computers in 10 countries including the US and Japan. Cashing in on this trend, Google made certain changes to their search algorithm in order to boost the rank of mobile friendly websites in search results, penalizing sites that do not have a mobile-friendly design. Lately it has been seen that the rankings of many websites dropped significantly on mobile, thus the need has arose to make the sites mobile-friendly.
Get the checklist to find out how mobile-friendly your site is with UX design tips:
- How is its display on various devices?
Now it's no secret that mobile devices come in many sizes and forms and the smart devices range from smart phones with 3" screens to tablets with 7" screens and beyond. For the same check whether your website displays correctly across all devices. Here are the few tools to consider:
- DesignModo’s Responsive Test
- Responsive Test by ZooExtension
- Responsive Design Test by StudioPress
Earlier sites used separate URLs for the mobile version of thee site, serving different content on mobile vs. desktop access. Considering the wide range of screen sizes, you can use a responsive layout for your site.
- How easily can mobile users complete common tasks?
The screen space on a mobile device is certainly smaller than a desktop and in that regard touch is the primary mode of input. You must know that entering data into forms is not advised as you tap it out on a virtual keyboard with small keys. This way the user interaction is different than on a desktop. You must make it easier for users to interact with your site on a smartphone by using a font size that's legible on small screen and enabling them to call you with a single click, go a long way towards improving user experience.
- Is your Call to Action central and prominent?
Yes, increase user engagement and revenue with apparent and fulfilling CTAs place strategically on your website. The CTA designed to be strategically positioned at the top-right of your home-page may get re-positioned to screen 3 as you view it on a mobile device. It may happen that your website may not resize in a correct manner and have the crucial input fields fade away. So, you just double check your CTA's position, layout and appearance on mobile devices.
- Do you have deep multi-level menus?
Long back audience enjoyed having menus three and even four levels deep however that's now a thing of past. Still on a mobile device, it's a necessity, as mobile sites tend to have the menu condensed to an icon at the top of the screen that expands as you tap on it. Users are not certain to like multiple taps or to scroll through a long list of options. Thus it's best to keep menu shorts and simple for mobile devices.
- Can you return to your home page easily?
As a user go deep into your page hierarchy or blog posts or products, can they easily go back to the home page? In case, they fail to, this frustrates them to the core. Make it easier for them with simple act of linking your logo to the home page that wouldn't require multiple taps while freeing up one space in your menu.
- Is search on your site easy?
The mobile users must be able to quickly search what they are looking for. In that case implement â€˜smart-search' features like auto correction and auto-complete, while adding specific filters like e-commerce sites, helping users find relevant products faster.
- Do you have suitable forms for virtual keyboards?
There are certain people that prefer filling in forms on small, virtual keyboards so it's advised to make forms for mobile devices that are simpler. This way you can help the user by filling in default fields and have auto-complete available. Go for the easiest input method like for, with dates, use a pop up calendar where the user can tap on a date, instead of having to type it out in DD/MM/YYYY format.
- Is your entire site crawlable?
Google recognizes three different configurations for mobile devices:
- i) Responsive Designs where the layout adapts to the screen size.
- ii) Dynamic Serving where web servers send out different HTML depending on the device’s UserAgentString.
iii) Separate URLs that serve different code to each device, on different URLs