About The Author
Jao is a Manila-based freelance writer and former editor. He spends most of his free time playing video games, wasting time on Reddit, and pestering his pet cats.
People spend more time on mobile devices than ever before, meaning your website needs to be mobile-friendly to capitalize on this trend.
Not to mention – Google requires that websites emphasize mobile device performance if they want to rank well on search engines.
If you need help optimizing your existing site for mobile users, this article covers much of the necessary ground.
How to make a website mobile-friendly
A mobile-friendly website is easy to use on a phone or tablet: It has been optimized for viewing on a small screen, allowing users to navigate it with their fingers easily.
Your website should also load quickly and have a layout that won’t require readers to scroll horizontally or zoom in to read text.
Another aspect is that your website should utilize a responsive design: This means your site adapts automatically to accommodate the size of a user’s window or mobile device.
In addition, a mobile-friendly site should use dynamic serving, which means that users see different versions of the site based on what device they’re using. This adaptability is crucial for mobile users because the users’ viewing experience varies significantly between a desktop and a phone.
As a start, you can check if your website is mobile-friendly by using Google’s Mobile-Friendly Test. If it isn’t, there’s a good chance your site will be ranked lower by search engines and lose traffic.
If your site doesn’t pass the test, don’t panic! Many options are available to ensure you can adequately optimize your site for mobile devices.
If you want a quick overview of how to make your website mobile-friendly, here are some key tips:
Your website’s speed is an essential factor in the user experience. Users will leave your site on mobile or PC if it takes too long to load.
For example, research from Google has shown that 70% of mobile landing pages took more than 5 seconds for visual content above the fold (i.e., the bottom part of a website) to display and more than 7 seconds to load all visual content above and below the fold fully.
To ensure the best user experience, you should aim to meet or surpass these numbers. You can use various tools, such as our website speed checker, which will grade your site from A+ to E.
Alternatively, you can utilize Google’s PageSpeed Insights tool to test how fast or slow your site is on mobile and desktop and give you a performance score from 1–100.
You’ll also get handy feedback on possible performance improvements. For example, correctly sizing your images and so on.
Now that you’ve learned how fast (or slow) your site is, you’ll need to improve. To improve its speed, consider these quick and easy tips:
One of the easiest ways to make your website more mobile-friendly is to compress the images it uses. To do this, you can use a free image compression tool, such as kraken.io. Drag and drop the image(s) you wish onto the tool and pick an optimization mode.
If you’re unsure what the different optimization modes do, you can simply click on the blue circle with the question mark to the right of the “Select optimization mode” section for more information.
Once kraken.io compresses your image, click “Download File” to download the compressed image.
You’ll need to use a responsive theme or template to make your website mobile-friendly. Picking a mobile-responsive theme for your site allows it to seamlessly scale its size to different user devices (e.g., different screen sizes).
Most website builders, such as Squarespace and Wix, have customizable, mobile-responsive templates. If you’re using WordPress, ensure that the theme you’re using to build your site is responsive; alternatively, if you’ve already built your site, consider switching to a responsive theme.
Having a terrible layout can spell your website’s doom. Ensuring that site visitors get a pleasant browsing experience is essential, and these following three sections will help you ensure that your website’s layout is the best it can be.
Imagine you’re pulling out your phone to find an answer to a simple question. Which would you prefer: A site that takes two paragraphs to answer your question or one that answers it squarely in the very first sentence?
Know your audience. Put yourself in their shoes, and test out how your website works.
For example, if you’re an artist setting up an online storefront for your art, what are the first things your site’s visitors would be looking for?
They’d be looking for a gallery to view your art and a way to purchase your works. Therefore, these should be easily accessible from your main page.
If people have to browse to the very bottom of your page just to order, they may just quit halfway through and visit another artist’s page.
In addition, remember to check for feedback and make adjustments as necessary regularly. For example, consider adding an FAQ page to your site if visitors often ask the same questions in the Comments section.
Mobile phone screens simply do not allow for the precision that a mouse does. Phone screens (and people’s thumbs) come in all shapes and sizes, get smudged, and can be annoying.
Keep this in mind when making buttons and links for your site. Most people use their thumbs when browsing on mobile, so you can design your site so that the most important links and buttons are within a thumb’s reach.
Also, make your buttons and links easy to tap with a thumb, and space them out! If they’re too small, people may have difficulty tapping on them.
Similarly, if there’s very little space between your links, people may tap on the wrong links, which is the opposite of what you want your site to do!
The final thing you can do to optimize your site’s mobile-friendly layout is to use large fonts. The larger font will make it easier for people to read your site’s content and tap on any text hyperlinks.
If you’re unsure about what font size would be the best, 16px would be an excellent start for a mobile page. Start from there, and then make adjustments as needed after testing.
In addition, make sure to use a standard font for your site! Standardization speeds up page load times since users don’t have to download multiple fonts. They also provide users with a more consistent reading experience.
If you’re building any website, using Flash is a bad idea since it’s a somewhat legacy technology. Flash also slows down a page’s load time and is unsupported by Android and iOS devices.
If you want to use animations, you can simply use HTML5: It’s more secure than Adobe Flash and works on most mobile devices.
HTML5 allows you to build sites with media content (e.g., video and audio) without installing third-party software. That means your site will work across all devices—whether a desktop computer or a smartphone—without any extra effort!
Pop-ups are a plague, and you should avoid them when possible. They’re annoying, doubly so if you’re browsing on a tiny screen.
Users won’t bother looking for a way to close pop-ups. Instead, they’ll just click off your site when that first pop-up appears. As such, you’re better off avoiding them entirely when creating your website.
Test your website regularly to ensure it’s accessible to everyone, regardless of device or browser. This includes checking whether your site loads quickly on different devices and that content displays correctly.
Armed with these tips, you’re more than ready to set up your website, big or small, for the mobile audience. It’s important to remember that your website is essentially the face of your business, so it needs to be functional, beautiful and accommodating to all audiences.
Above all, being aware of requirements like mobile-friendliness will help you avoid getting relegated in search results. You’ll be addressing the current-day and future needs of your readers.
Jao is a Manila-based freelance writer and former editor. He spends most of his free time playing video games, wasting time on Reddit, and pestering his pet cats.
