Mobile
Article

How Mobile Friendly Is Your Design? 12 Tips to Follow

By Richa Jain

Though smartphones and tablets have been around for less than 10 years, mobile Internet access has already caught up with desktop access. More Google searches take place on mobile devices than on computers in 10 countries including the US and Japan.

Google has been talking of this trend for a while now, and recently made changes to their search algorithm, to boosts the rank of mobile friendly websites in search results and penalize sites that are not mobile friendly. Commonly called "Mobilegaddon", many sites saw their rankings drop significantly on mobile after these changes, and countless others are scrambling to make their sites mobile friendly. Yet, we continue to have websites that just don't work well on Mobile. Even new websites.

Search engine optimization isn't just the domain of Internet marketers. Website design and its implementation has an impact on search engine results.

As designers and developers, we need to take a step back and evaluate our work. The websites we create can't just look pretty. They need to serve the needs of the user and generate revenues for our clients. Don't leave the "mobile-friendly" test to the end of your design. Incorporate it into the design and development.

To help you out, here's a shortlist of the top questions you should ask to better understand how mobile-friendly your site is.

1. Does it display well on different devices?

Mobile devices come in many sizes and forms. Smart devices span the range from smart phones with 3" screens to tablets with 7" screens and beyond. Firstly check whether your website displays correctly across all devices. A few tools you can use for this are:

In the past, sites have used separate URLs for the mobile version of the site or served different content on mobile vs. desktop access. Given the wide range of screen sizes, using a responsive layout for your site is probably the best option today.

Website displayed on various devices

2. How easily can mobile users complete common tasks?

The screen space on a mobile device is smaller than a desktop. Touch is the primary mode of input. Entering data into forms is painful at best when you're trying to tap it out on a virtual keyboard with small keys. That makes the user interaction different than on a desktop.

Make it easier for users to interact with your site on a smartphone. Simple things like using a font size that is legible on small screens, or making it possible for them to call you with a single click, go a long way towards improving user experience.

3. Is your Call to Action central and prominent?

The main goals of any website is typically to increase user engagement and revenue. This requires clear and actionable CTAs placed 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 when viewed on a mobile device. Or worse, it may not resize correctly and have the crucial input fields disappearing below the fold. Double check your CTA's position, layout and appearance on mobile devices.

Click to Call

4. Do you have deep multi-level menus?

Until recently, having menus three and even four levels deep was common practice, a way of showing how much you have to offer. Sadly, many websites today still have this. Not everyone appreciates the simplicity and elegance of having clean, uncluttered navigation. But on a mobile device, this isn't an option, it's a necessity. Mobile sites typically have the menu condensed to an icon at top of the screen that expands when tapped. Users are unlikely to have the patience for multiple taps, or to scroll through a long list of options. Keep the menus short and sweet for mobile devices.

5. How easy is it to return to your home page?

When a user has traversed levels deep into your page hierarchy or blog posts or products, how easy it's for users to find their way back to the home page? In this Google study, participants expected to return to the home page when they clicked on the site logo and became frustrated when it didn't work. Sure, they could also tap to open the menu, and then tap on "Home", but why not make it easier for users? Why use two taps instead of one? The simple act of linking your logo to the home page can save frustration, taps and also free up one space in your menu.

6. Is it easy to search on your site?

Make it easy for mobile users to find what they're looking for and quickly. Implement 'smart-search' features like auto-correction and auto-complete. Adding specific filters, especially for e-commerce sites, helps users find relevant products faster.

7. Are your forms suitable for virtual keyboards?

Few people like filling in forms on small, virtual keyboards. Make forms for mobile devices as simple as possible. Help the user by filling in default fields and having auto-complete available. For each kind of field, use the easiest, most suitable input method. For example, with dates, use a pop up calendar where the user can tap on a date, rather than having them type it out in DD/MM/YYYY format.

8. No pinch-zoom. Other than product images.

The ability to pinch and zoom used to be popular when touch screens were first introduced. Not any more. Today's mobile users are savvy, and want instant access. They should not have to pinch and zoom your page for basic information. Make the font large enough to be readable on a small screen.

The reverse holds true for product images. Users want to able to zoom in and see the product at a more granular level. You'll need to balance for image quality versus image size.

9. Is your entire site crawlable?

Google recognizes three different configurations for mobile devices:

  • Responsive Designs where the layout adapts to the screen size.
  • Dynamic Serving where web servers send out different HTML depending on the device's UserAgentString.
  • Separate URLs that serve different code to each device, on different URLs

Irrespective of which method you're using, if Googlebot can't crawl your site properly, it will impact your search results. Make sure the Googlebot can see your site like an average user. Keep your CSS, JavaScript and images crawlable. You can check your robots.txt with this tool.

10. Does all your content play on mobile devices?

Certain types of content, especially videos, may not be playable on all mobile devices. For example, Flash doesn't work on many mobile devices. This also applies to unsupported video formats. If your content can't play, it can be quite frustrating for mobile users and defeats the purpose. Instead, it may be a better idea to stick to HTML5 tags for all audio and video content.

If you maintain separate URLS for mobile versus desktop, then anytime users access your desktop page from a mobile device, you'll need to set up a redirect to the appropriate mobile page. Don't redirect all desktop access to the mobile home page. That's not what the user expects or wants. The same holds for mobile to desktop, make sure to link to the appropriate page. Don't link them all back to the desktop homepage.

Page not Found

12. How do you handle complex tasks and sensitive information?

Many mobile users are not comfortable with performing complex tasks or those that require sensitive information to be inputted on mobile devices. Desktops are still perceived to be more secure than mobile devices. One good work around is to provide a 'click-to-call' button to make it easier for users to complete the transaction. Another way is let the user carry over the interaction to another device. For example users browsing a job search site may appreciate the option of emailing a list of suitable jobs to themselves, so that they can apply later, perhaps from a desktop.

For more details on how to make your site mobile friendly and better yet, rank better in mobile SEO, Google has a much more in-depth set of guidelines available here.

How does your website fare against these criteria? Are you making a conscious effort to keep things easy for mobile users?

More:
  • http://ChiefAlchemist.com/ Mark Simchock

    It might help to list some tools that are browser add-ons. The main reason being if you’re dev’ing local and/or have the staging site behind an htaccess password he tools lists don’t really help. Thanks.

  • http://ChiefAlchemist.com/ Mark Simchock

    p.s. Not to parse words but these aren’t really tips. For example:

    4. Do you have deep multi-level menus?

    Should probably be something like

    4. Keep your menus shallow and the site as flat as possible.

    The former is a question, the latter is a tip.

    For that matter, I would probably make Tip #1 – Understand the intent behind mobile-first; and then build up from there.

    Otherwise, thanks. :)

    • http://www.walabbady.com Waleed Alabbady

      Good comment .
      that what you find in COPY/PASTE Articles !

  • donsw

    I think you should also add that it is quick to load. Lately I am seeing so many sites that are slow on a phone and I don’t stay . its too painful to press another link on the site to see yet another page to load so slow.

    • https://twitter.com/WPezDeveloper WPezDeveloper

      Great point. Slow kills.

    • Lasse Rafn

      As much as I hate Chrome (it’s a memory hog..) I love the device-testing, that allows you to test it on e.g. 3G and 2G, which really helps you find bottlenecks! I started doing this and optimising for this; really helped conversions too

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Mobile, once a week, for free.