close button

How to make your website mobile-friendly

Published by

So by now you’ve heard about this whole mobile web thing, maybe you heard about the recent so-called mobilegeddon, and you’re thinking you probably need a decent mobile site, and so now you’re wondering how to make your website mobile-friendly. But your website was built a few years ago without thinking sparing a thought for mobile visitors. So what can you do? How can you make your website mobile?

What is mobile-friendly?

To build or make your website mobile-friendly, it will help if we have an idea of what we are aiming for. A few obvious things come to mind:

  • Webpages should fit on most mobile device screens, without having to pan or zoom
  • images and tables should be no wider than the screen
  • Buttons and links should be big enough to be easily tapped on by fingers and thumbs on touchscreens
  • Pages should load quickly, even on slow connections

This last item is very important. Whether designing for desktop or mobile, speedy page loads should be a key aim, but it’s particularly important for mobile, when users will generally be on slower connections that users on desktops and laptops. With this in mind, we can think of some extra things that can define what mobile-friendly is:

  • Page weight should be small: i.e. page size, in bytes and kilobytes, should be kept to a minimum since small pages load faster, and large pages load more slowly
  • HTML, JavaScript and CSS should all be aggregated and minimized (i.e. removing blank space and other superfluous features) to keep sizes down
  • Caching: as many web page resources as possible should be cached. This means they will only be fetched and downloaded once by the browser. When the same page is requested in the future, the local cached copy will be used instead of going off to the website to download it again. This saves time on subsequent visits.
  • Script and style code placement: putting unnecessary JavaScript and CSS near the start of your webpages can cause your page to block while it is processing them. By only placing code that is essential for the initial page rendering, you can improve the page load time.
  • Images should be compressed where possible to reduce load time

So now that we have a better idea about what it means to be mobile-friendly, how do you make your website mobile-friendly?

Is my site mobile-friendly?

The first thing to do before embarking on a project to make your site mobile-friendly, is to check if it already is mobile-friendly. There are a number of online tools and services that will

  1. Test if your site is mobile-friendly
  2. Advise you on how to fix mobile-friendly issues.

Some tools include mobiReady, and Google’s PageSpeed Insights

Related: Mobile testing tools are growing up

To use these tools, you generally just need to input your webpage URL into a textbox, and the service will go off and run a bunch of tests on your webpage. The tests will include the items mentioned above in the what is mobile-friendly section. It will then present a list of things that you should consider changing, such as the following output, from mobiReady:

mobile-friendly test

How to make your website mobile-friendly

There are a few options here, and like many things, it will depend on your time, budget and technical expertise. Over on mobiForge three basic approaches to building mobile websites are outlined:

  1. Build a separate mobile site

    One approach is to build a separate mobile template for your website. If you use a CMS such as WordPress or Drupal, then the problem is really one of creating a new mobile-friendly theme, or using one of the many available mobile-friendly themes, and having an appropriate mechanism in place to ensure that mobile device get sent to the mobile page, and desktop devices get the desktop page. This method is known as device-detection and is used by companies such as Google to ensure that everyone gets an optimal experience.

    A drawback is that you must maintain two separate site templates, and depending on your budget, the initial outlay might be too expensive for you.

  2. Use a content mobilization tool such as goMobi

    This is the fastest and easiest: a number of services are available such as goMobi that will create a mobile version of your site from your desktop site. Say your desktop site is at http://mysite.com, then when you give goMobi this URL, it will crawl your site, converting each page it finds into an equivalent mobile friendly version at http://m.mysite.com. Then, using goMobi’s device redirection, anytime a user visits the desktop site with a mobile device, he or she will be automatically redirected to the equivalent mobile page. Problem solved. With plenty of configuration options, and possibility to override the automatic decisions made by the system, you can tweak the way your mobile site looks and behaves.

    A big advantage of this approach is that it requires zero technical knowledge, and costs very little compared with getting one of the alternative custom solutions we list below.

  3. Use Responsive Design

    This approach to website design is built around having one webpage template the is flexible and fluid, so that it will squeeze and expand to fit onto smaller and larger screens. Responsive designs will do things like push page items down lower vertically if they don’t fit horizontally on a smaller screen.

    The advantage of this approach is that you only have to worry about a single page design, so updating your website page design is a bit easier when you need to do some redesigning.

    The main drawback is that it doesn’t really satisfy the pages should load quickly mobile-friendly requirement we mentioned above. Since a single design is used for desktop and mobile devices, then, generally speaking, they receive the same sized pages: the images might be oversized or hidden on the mobile device, but they are downloaded anyway. Should you go this route, you should managed it carefully to make sure you don’t end up with a spruce goose. Depending on the scope of the design, it could be expensive for custom work, but if you use a CMS, it might be possible to pick up a responsive template relatively cheaply.

  4. Adaptive or RESS

    Some business will desire or require more control over their mobile website. RESS solutions can offer this control. These solutions can deliver optimized images and page templates depending on the device. This has the advantages of responsive design, as well as the advantages of having a separate mobile site. You will probably need to higher a developer for this, but it isn’t necessarily more expensive than responsive design for instance. IF you can afford this approach, then this is the best one to go for.

  5. Common mistakes

    Finally, the most common issues according to Google are:

    1. Blocked JavaScript, CSS and image files
    2. Unplayable content
    3. Faulty redirects
    4. Mobile-only 404s
    5. App download interstitials
    6. Irrelevant cross-links
    7. Slow mobile pages

If, having run your site through one of the mobile-friendly checker tools, you have only a few items to fix, then it might simply be a case that all you need to do is to address these few items, whether yourself, or by hiring a developer to do the work, and you’ll be able to rest easy at night!

Main image: John Hancock