Make Websites Mobile-Friendly: 5 Astounding Tips
In this video, Carly from the WebFX Interactive team will cover how to make websites mobile-friendly. Check it out.
Transcript: Mobile web traffic makes up over half of all web traffic.
If your website isn’t mobile-friendly, you’re basically turning people away from your business.
Plus, as of September 2020, Google prioritizes the mobile version of your website when crawling it. So if you don’t have a mobile-friendly website, you may even hurt your rankings in the search results.
That means even fewer people will visit your website.
What you should take away from this is that your website needs to work well on all devices so you can meet people’s needs, whether they’re using a desktop computer or a smartphone.
A key to making your website mobile-friendly is using responsive web design.
What is responsive web design?
With responsive web design, you set up your site so that it adjusts to different screen sizes.
Generally, the content on your responsive site stays the same between devices, but you may see differences in the layout and sizing of your site elements.
As an example, let’s say that on a desktop computer, your homepage has a paragraph of text on the left and a form on the right. A computer monitor is typically a lot wider than a phone screen, so when this page loads on a phone, the paragraph of text sits above the form.
You don’t want to have people pinching and zooming to view your website on their phones, so responsive design seeks to prevent that when it adjusts to different devices.
When you want to make websites mobile-friendly, responsive design is just the beginning. Many elements go into having a mobile-friendly site, which I’ll talk about in a bit.
How to check if your site is mobile-friendly
You don’t need 100 different devices to test your site’s mobile-friendliness.
You can check this in a few ways.
First, our SEO checker can analyze your site’s mobile-friendliness.
WebFX SEO Checker
- it's Comprehensive.
- it's Immediate.
- it's FREE.
Second, Google has a mobile-friendliness testing tool you can use. In fact, you can just Google “mobile-friendly test,” paste your URL in the box and start the test.
Third, another fun way to see if your site is responsive is to go to any page on your site, right-click, select “Inspect,” and then go through the device options at the top of the page to see how your site looks on different screens.
This will give you an idea of how much work you have ahead of you. Hopefully, it’s not a lot! Website design for mobile devices can seem like a lot of work.
What is the cost to make a website mobile-friendly?
Unfortunately, there’s not an exact number for how much you’ll need to invest in a mobile-friendly site. It really depends on the scope of your project and your needs.
If one website has 20 pages that need mobile optimization and another website has 200, the 20-page project will take less time and require fewer resources.
In general, the average website design project can cost anywhere from $12,000 to $150,000, excluding maintenance. But if you don’t need a total redesign or only require some smaller adjustments, you’ll probably spend a bit less.
If you take on responsive or mobile web design yourself, the cost depends on what tools you use and how much value you assign to your time.
What makes a website mobile-friendly? 5 key tips
Don’t focus on responsive design and ignore other elements of your website. You can do a lot to improve your users’ mobile experiences beyond having responsive pages.
1. Forget the mouse
When people use their phones or tablets, they likely don’t have a mouse to help them navigate through your pages.
You need to make sure your website is tap-friendly.
A thumb is a lot bigger than a cursor, so having “clickable” elements that are too close together or that don’t work when tapped can create a poor user experience and chase people away from your business.
2. Speed things up
People aren’t patient. If your website takes longer than a few seconds to load, you’re going to lose potential customers.
If you plug your pages into Google’s PageSpeed Insights tool, you can see how fast they load and what you need to do to make them faster.
You may want to consider using accelerated mobile pages (AMP), which can help your site load super quickly on mobile devices.
Make sure all images and graphics you use are compressed. You’d be surprised how much of a difference a compressed file can make.
If you use videos, make sure you’re not hosting them directly on your site. That can be a major reason your pages are slow.
Instead of self-hosting your videos, embed them through a third-party hosting provider like YouTube or Wistia. An added benefit is that you’ll have access to plenty of data to tell you how your videos are performing.
3. Ask fewer questions
On your forms, that is.
In general, it’s better to keep your website forms short. Cut out any unnecessary fields so people can quickly give you the information that matters.
But think about the mobile experience. Typing on a phone isn’t always fun. The keyboard is small. The letters are too close together.
The less you have to type on a phone, the better.
Stick with the most important information you need to communicate with your customers and cut everything else.
4. Watch out for popups
On a computer, you have plenty of space for a popup to enter the screen and not completely disrupt people’s reading.
On a mobile device, a popup may take over someone’s screen.
How would you feel if you were reading an article on your phone, and all of a sudden there’s a big pink box obscuring the text? The words “frustrated” and “annoyed” come to mind for me.
Even worse, if someone can’t figure out how to close the popup, they may abandon a site altogether.
You may want to avoid popups—or use them sparingly—on mobile devices to avoid creating a bad user experience.
5. Slice through large paragraphs
Break up with long blocks of text, because I’m bored.
While a four-sentence paragraph might look small on a larger monitor, it will take up much more space on a phone.
You don’t have to write less. Just break large paragraphs into smaller ones.
Shorter paragraphs can help make your content easier to read.
You can also break your content into smaller sections.
So start with a main heading and add subheadings throughout that correspond with different subtopics.
Adding multimedia elements can help break things up, but keep in mind that videos and photos can slow your pages down if not optimized properly.
If you update your content according to these five tips, you’re bound to make your website mobile-friendly.
If you need help with responsive web design or with making different elements of your site ready for mobile users, don’t hesitate to reach out to our web design professionals.
Two things before you go! Subscribe to our YouTube channel so you never miss the latest video, and sign up for our Revenue Weekly newsletter to keep up with the latest digital marketing topics.
Thanks for watching!