- Home
- Blog
- Web Design Make Websites Mobile-Friendly: 5 Astounding Tips
Make Websites Mobile-Friendly: 5 Astounding Tips
- 6 min. read
-
Jessica BonacciContent Writer
- Jessica is a Google Analytics certified Digital Video Analyst at WebFX. She has created over 100 videos for the WebFX YouTube channel (youtube.com/webfx) in the last two years. Jessica specializes in video marketing and also loves content marketing, SEO, social media marketing, and many other aspects of digital marketing. When she’s not creating videos, Jessica enjoys listening to music, reading, writing, and watching movies.
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 (and embracing mobile marketing).
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.
Looking for an all-in-one SEO audit tool? You’ve found it
SEO checker provides data on key metrics to give you:
- Complete SEO score
- Site Speed Analysis
- Content Grade
- and more.
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!
-
Jessica is a Google Analytics certified Digital Video Analyst at WebFX. She has created over 100 videos for the WebFX YouTube channel (youtube.com/webfx) in the last two years. Jessica specializes in video marketing and also loves content marketing, SEO, social media marketing, and many other aspects of digital marketing. When she’s not creating videos, Jessica enjoys listening to music, reading, writing, and watching movies.
-
WebFX is a full-service marketing agency with 1,100+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost CalculatorWeb Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator