10 Simple Ways To Make Your Website Mobile-Friendly

10 Simple Ways To Make Your Website Mobile-Friendly

What is a Mobile-Friendly Website?

As the name implies, a mobile-friendly website is a site designed, developed and optimized for users on mobile devices – and this is both more complex and more important than it seems.

On the most fundamental level, users want content that’s easy to view. If your text and pictures are too small, they’ll grow frustrated and leave – so appropriately-sized content is critical.

Unfortunately, it’s not that easy to create – smartphones and tablets come in many different sizes and resolutions, so there’s no one format that will display perfectly on every device.

To solve this, today’s website templates are moving into a scaling format where they can quickly adjust to the device they’re displaying on.

How Do I Check If My Website is Mobile-Friendly?

Checking whether your site is mobile-friendly or not is easy – Google has a Webmaster Tool to do exactly that, and it’s accessible right here.

All you need to do is insert the URL of your web page and click on the ANALYZE button.

Google Webmaster Tool - Mobile Friendly Checker

Google will then analyze your website and display the result.

Google Mobile Friendly Checker Analyzing

You’ll see something like this if your web page isn’t mobile-friendly, Google will even list down why your web page isn’t mobile-friendly and suggest solutions for it:

not mobile friendly

You’ll see something like this if your web page is mobile-friendly:

Mobile friendly

Why is being Mobile-Friendly Important?

Well, first of all, the percentage of users that are accessing the internet through some sort of mobile device is increasing consistently while the percentage of desktop users are heading the opposite direction.

Just look at the graph below and you’ll have a clear picture of the trend, and it doesn’t take much to figure that one day, mobile users will outnumber desktop users.

Desktop user vs mobile user

If that graph isn’t enough to convince you to make your website mobile-friendly, this should – Google has recently updated their search engine algorithm to prioritize websites that are mobile-friendly on mobile searches. This means that even high-quality websites won’t be ranked highly for mobile searches if they’re not mobile-friendly.

In other words, you could be losing out on half or more of your potential visitors. Given today’s searching climate, making your website mobile-friendly – even if you have to build an entirely new site – is a (relatively) small investment to ensure you can maintain a steady stream of visitors.

If you’re still trying to figure out how to make your website more friendly for mobile devices, here are 10 simple things you can do to tighten up your code and make sure everything functions the way you want it to.

1) Use Media Queries

I know, this sounds like you’re going to talk to a reporter or something – but the ‘media’, in this case, is the content that you’re delivering to a user.

Media queries allow you to ask a device what size it is, then direct the browser to display things following the set of CSS that you have set.

CSS Media queries

Media queries are a key part of most mobile-friendly sites, but you’ll need to be sure that the system is properly configured for all devices currently in use – not just the two or three most popular. Make sure you actually look at the list or have some kind of ongoing subscription that gets the information for you.

2) Use Frameworks like Bootstrap

frameworks

There are many frameworks out there that you could use for free such as Foundation 3, Skeleton or TukTuk. One of the more popular framework is Twitter’s Bootstrap.

Bootstrap

Bootstrap is a front-end framework for your site designed to quickly and automatically scale your web page to any device. Using a pre-built system is much easier than trying to code every possible combination by yourself – and it’s much less of a headache as well.

However, you will need to check any framework you’re using for full compatibility with your existing site and goals. The more custom coding and functions your site has, the more difficult it may be to ensure everything works properly on a mobile device – don’t be afraid to call in an expert if you really need the help.

3) Don’t Disable the Submit Button

Mobile devices are popular, but many of them still aren’t entirely reliable – and this can be a headache for users who click a ‘Submit’ button only to have their connection drop out and see the button disable itself so they can’t try again. Trying to prevent repeat submissions is an admirable goal, but the realities of mobile connections mean it’s not good to prevent them in this way.

submit button

4) Use a Responsive Theme on CMS

Responsive themes – such as those from Somothemes – make it easier to ensure a high-quality display for your users. This is something that many companies overlook when they’re trying to become mobile-friendly, and they shouldn’t – because what your users experience is far more important than how easy something is to code.

Somotheme Moderne theme

Of course, ideally, you’ll be able to get the best of both worlds – and responsive themes are outstanding for casual sites that don’t need a whole lot of customization in order to succeed.

5) Use Percentages

In the past, most people thought about pictures in terms of pixels – but the widely different resolutions on mobile devices mean that having a single size for images is an inherently bad idea. It just doesn’t work – so don’t do it.

Instead, configure things like images to have a certain specific width on the page – typically 100% unless you have a reason to do otherwise. This helps to provide a consistent viewing experience on many different devices and ensure that each image offers as much impact as possible.

6) Focus on Simple Designs

Simple web design

One major way mobile users differ from desktop users is their preference for simple site designs. This is a practical matter as much as anything else – things that are large and complicated will all but inevitably become slow on a mobile device, and one of their main demands is instant delivery of the content they want.

Simple designs also make it easy to keep their attention on the content you want them to see – mobile users often have notoriously short attention spans, and there’s definitely a point where keeping things simple can be more valuable than investing in an elaborate, complex theme.

7) Make Sure You Haven’t Blocked Javascript, CSS, or Image Files

Java is not a flawless system, but it is widely used – and together with CSS and image files, it’s one of the backbones of a responsive, mobile-friendly site.

One of your main goals here is trying to make your website universally compatible – it should display on practically any device that people would care to view it on, and for the most part, that means using software and coding that are universally accepted. The more specialized something is, the less likely your site will be compatible everywhere.

8) Optimize Image Size

When you’re dealing with mobile devices, the goal is to create images that have the smallest possible file size while still looking crisp and clear on whatever screen it’s being viewed on. This is because the bandwidth of mobile devices are much smaller compared to desktop’s and causes longer loading time.

So if you need your users to download a 1MB jpeg file just so they can see a thumbnail-sized image, they’re going to be frustrated and leave your site.

Remember, mobile friendliness isn’t just about having a nice site design – it’s about improving the user’s experience, and the load times they go through are a major part of that experience. Shrinking the file sizes uses less of their data (if they’re on a limited plan), helps load the page faster, and generally contributes to a positive image of your site.

9) Don’t Use Flash

No Flash

Broadly speaking, mobile devices do not support Flash. The reasons for this are less important than the reality – if your website is still relying on Flash, then it’s not going to display properly on any mobile device.

Flash is an obsolete technology and nobody loves Flash, even on desktop. Even if you think you need to use Flash, you could find other technology that could replace Flash, so to be smart and safe, do not use Flash.

Switch to a compatible technology like HTML instead – and remember that if you want to do something complicated on a mobile device, it’s best to relegate it to the realms of apps.

10) Use Standard Fonts

Google fonts

Custom, creative fonts can help a website look nice, but mobile users don’t want to be constantly prompted to download new fonts to their phone – in fact, it’s more likely that they’d instantly reject any such request and navigate to a different website instead.

Fortunately, most of today’s devices come with a wide variety of fonts pre-installed, and chances are you’ll be able to use these when designing your site. There’s one more thing to note, though – some fonts are easier (or harder) to read at different sizes, so be sure you check the readability of your font before you’re done with your updates.

Final Advice

Finally, we have one more design tip to share with you: remember your directions. The average desktop is a horizontal screen – sure, we may scroll up and down, but it’s wide. Smartphones, on the other hand, are tall and narrow – so the width of your content is an important consideration. Whether you’re creating drop-down menus, adding pictures, or playing a video, remember the direction of the device and how people will view the content.

And if all else fails, there’s no shame in relying on some professionals to fix your website to make it mobile-friendly. This might require some investment, but with the increasing amount of mobile users and Google’s updated algorithm, you could say that it’s a calculated and worthy investment to make.

Source: http://seopressor.com/blog/mobile-friendly-website/