You’ve probably read or heard it many times before in your tenure as a blogger: mobile is the future and it’s starting right now. That much is true, the number of people using the internet with their mobile devices has surpassed that of desktop/laptop users. There should be no doubt right now that making mobile-friendly websites is paramount to success these days.
Such a paradigm shift could mean many things. Most likely, however, the heydays of your pre-2010 website which has limited functionality on mobile are numbered. So, if you don’t want to lose that valuable traffic, adapting is the key. Lucky for you, making mobile-friendly websites, whether from scratch or conversion is not that difficult.
We have prepared how to do it in the simplest way possible so you can get started right away with embracing the near future.
Check your website
First thing’s first, before you dive in and start converting your old website or building a mobile version from scratch, you might want to check if you’ve already got one. Some websites and their desktop versions have automatic portable mobile versions. They usually don’t do the job well but it’s still worth checking to see what can be improved.
Google has its own tool for checking how mobile-friendly websites fare, you can use it by clicking this link. It will do an analysis of the URL you entered; you’ll get a straight answer whether your website is mobile-friendly or not along with some other details regarding problems. It will also give you a good view of what your website looks like on a phone’s screen in case you haven’t tested it already.
Depending on how your website fares on the checking tool, you can decide if you want to continue with further down the line with this guide. Even if they are, you might want to make some improvements to them. In any case, a good website builder or conversion tool can help you design or re-design elements of your website.
There are affordable options for this such as HostGator which not only lets you build a website but also convert an old desktop site to its own mobile version. Meanwhile, if you just built your website within the second half of this decade, then chances are, you will already have a mobile version. That highly depends on whether you used a website builder or built your own site from HTML by scratch (which is not the easiest way to do it). If it’s the latter, do yourself a favor and use conversion tools like HostGator. If it’s the former, then you’ll have to check with the website builder you used since each one is different.
Vital information is the priority
Having mobile-friendly websites doesn’t stop with your desktop website’s mobile version. Think of that as only half the battle. The other half involves tweaking some things; so as to make sure that the user experience of mobile visitors is as smooth and painless as possible. One way to cater to the needs and preferences of mobile users is to do away with the introduction and present vital information upfront.
This is especially important when writing news articles or making video-based content. People who browse on their phones usually have limited time or are at work. They want the gist or the meat of the information as much as possible. In a way, you’ll also have to adjust how you present your content for mobile users. Minimizing the “clickbait” and giving the information you promised right away is a huge favor for your mobile visitors.
Forget about Flash
Turns out Flash is terrible for search engine optimization (SEO) which is why it was never ported over to mobile. Nifty a browser tool as it may be, you’ll just have to come to terms that Flash is absent on mobile devices’ browsers. It can slow down a page’s loading time. This is a downside for mobile devices since they only rely on WiFi.
This can be problematic for you if your old website has a ton of Flash animations or functions. That essentially means your website is not mobile-friendly and will never be until you abandon the said tool.
Turn on Autocorrect
We all know how Autocorrect can be annoying on the phone especially when the language you’re using is not supported. The same idea applies when it comes to navigating websites or filling out online forms; having Autocorrect off can be a reliable time-saver. In order to disable the Autocorrect function for your website’s mobile version, you’ll have to search for the HTML input field of your website.
If you’re not certain how to access it (since it can be different depending on your website builder or content management system), you might have to ask for help from techs or the website admin. Once you’ve located the said input field, simply add the autocorrect=off line. This will ensure a stress-free form-filling activity for your website users.
Fix the website scaling
This is one of the harder parts of porting a website over to mobile. That’s because each mobile device is different. It doesn’t help that there are limitless brands, models, and variations of mobile devices from phones, tablets, and anything in-between. All of them have different screen sizes and resolutions. As such, you’ll have to adjust your website for that as well. It’s easier today than it is a few years ago, thankfully.
There are many ways to do this such as setting up media queries or tweaking the size content to the viewport. Google has a guide to this to make your life easier. Another method would be to utilize a framework such as Twitter’s Bootstrap. Similar or less popular frameworks automatically scale your webpage to fit any device’s screen. It uses a pre-built system which saves you from the trouble of inputting the code to all possible resolution combinations. The downside is that these frameworks don’t always have the best compatibility.
Make the images smaller
This part of the guide is similar to fixing your website scaling. After all, images are a huge part of your site; fixing your website scaling only for the images to retain its desktop resolution is pretty much undoing all the hard work you’ve done. By “smaller” we mean several image aspects such as the size, the resolution, and the percentage.
It’s better to use percentages for image resolution on mobile versions since each device has different pixel counts. Meanwhile, for the image sizes, you want to make sure that each and every image is no bigger than 200 KB, or at the very least, doesn’t exceed kilobytes in terms of information size. In short, use JPEG. The reasoning for this is that mobile devices need run on WiFi or data which are not the best types of internet connection. That means you want to put less load on these connection types so as to keep the user experience smooth.
Check the functionality
Of course, when making mobile-friendly websites, you don’t want to sacrifice function for form. Creativity and resourcefulness involved in preserving all the desktop functions of your website into a mobile form so you can have the best of both worlds. Mobile versions don’t always retain the full functionality– buttons are usually the most common manifestation of this.
Checking whether the button sizes are still optimal for the user experience on mobile is a must especially for websites that deal in eCommerce or are used for selling things. These buttons can be anything from “submit,” “next,” to even the more minute details such as an “x” or “close” button being minuscule. You’ll want to address these oversights in order to have a perfect mobile-friendly website.