Smartphones and tablets are now the most widely used medium for internet searches. A number of Google searches take place on mobile devices than computers in most parts of the world. Google’s algorithms have been recently modified to rank mobile-friendly sites highly and penalize the ones that are not.
Many sites are constantly struggling to attain a mobile-friendly interface to achieve a high SEO ranking on Google. Yet, we continue to see websites that do not work well on mobiles or tablets. As designers and developers, it is essential to understand the impact of website design on search engine results and ensure our site serves the basic needs of users while generating revenues for our clients. It is almost mandatory now to incorporate the "mobile-friendly" part to website design to achieve the best results for any business.
Below we provide a list of top questions you need to ask to understand how mobile-friendly your site is:
1. Appearance on different devices: Mobile devices are now available in many sizes and forms. The first thing is to make sure your website displays correctly across all devices. A few tools to help you are:
1) DesignModo's Responsive Test
2) Responsive Test by ZooExtension
3) Responsive Design Test by StudioPress
In the past, sites used separate URLs or served different content for the mobile version as compared to desktop access. But given the wide range of screen sizes, creating a single site and using a responsive layout for the same is a better option.
2. Ease of use for mobile users: The screen space on a mobile device is much smaller than a desktop and touch is the primary mode of input. User interaction is, therefore, very different from desktop devices. Typing data into forms can be a struggle with virtual keyboards using tap input. Hence, it is recommended to make user interaction with your site on a smartphone as easy as possible. You can work on simple things like using legible font size, single-click calling or shorter forms to ease and improve user experience.
3. Call to Action positioning: Any website aims primarily to augment user engagement and business revenue. This requires the central and prominent placement of your call to action elements on the site. The CTA designed should be strategically positioned at an actionable place and tested several times to make sure it does not get repositioned or resized or, worse, disappear when opened on mobile. Repeatedly verify your CTA's position, layout, and appearance on mobile devices.
4. Deep multi-level menus: Earlier, it was a common practice to have menus three or four levels deep as a way of showing how much the site has to offer. However, the trend now has shifted to simple, elegant, clean and uncluttered navigation. This has become all the more necessary with mobile-friendly sites. Typically, mobile sites have their menu condensed to an expandable icon at top of the screen. The menus are kept short and sweet since users may not have the patience for multiple taps or may be unwilling to scroll through a long list of options.
5. Ease of return to home page: It is really important for users to quickly switch back to the home page once they have traversed deep into your page hierarchy or blog posts. Users are likely to get frustrated if they have to use 2 or 3 clicks to return to the home page. A simple act of linking your logo to the home page can save frustration and make site navigation a happy experience for the users.
6. Site search: You can save the users a lot of time by making it easier for them to find what they are looking for quickly and efficiently. Site search can be made easier by incorporating 'smart-search' features like auto-correction and auto-complete, adding specific filters and other such elements.
7. Forms suitable for virtual keyboards: People rarely like filling forms on small, virtual keyboards, hence, it is important to make them as simple as possible for mobile devices. You can add users by auto-filling the default fields and having the auto-complete feature available. Use the least number of fields and the easiest input method for each field.
8. No pinch-zoom: Pinch and zoom used to be popular when touch screens were first introduced. But today mobile users want instant access and should not have to pinch and zoom for basic information. Thus, try and make the font large enough to be clearly readable even on a small screen. However, this does not work for product images. Users prefer to zoom in and see the product at a more granular level so you will need to balance for image quality versus image size.
9. Make your site crawlable: Google algorithms recognize three different configurations for mobile devices:
1) Responsive Designs
2) Dynamic Serving
3) Separate URLs
10. Content play: It is possible for certain content types, especially videos, to not be compatible with all mobile devices. For instance, Flash does not work on all mobile devices. If your content does not play properly on mobile devices, it can cause frustration for users and defeat the purpose. It may be a good idea to use HTML5 tags for all audio and video content and run tests to ensure all the playable content plays as expected.
11. Cross-check redirects and cross-links: It is advisable to link the mobile and desktop URLs to link to appropriate pages. If you maintain separate URLs for mobile and desktop, you need to set up a redirect to the actual mobile page and vice versa for instances where users access your desktop page from a mobile device or the opposite. Do not redirect all desktop access to the mobile home page or mobile access to the desktop home page.
12. Handling complex tasks and sensitive information: Strangely, desktops are still considered a safer means than mobile devices and many mobile users are not comfortable performing complex tasks or jobs that require sensitive information on mobile devices. One solution is to offer a 'click-to-call' button to help users complete the transaction. Make sure sites as secure as possible and offer an atmosphere of safety even on a mobile site.
To conclude, one may be an amazing web designer, but apart from creating a great site, one needs to make sure that the site is accessible and usable from all devices that users are expected to use. That will distinguish the site, increase the SEO rank and help generate better revenues for a business.