According to a recent study, 52.2 percent of the world’s website traffic came from mobile phones in 2018.


That’s more than half of the world’s online browsing activity! It comes as no surprise considering the unbelievably robust growth the smartphone market and use of mobile devices nowadays. In addition, mobile internet has become cheap and convenient; people can now browse the Net even without a landline connection.

 

Mobile browsing has become so prevalent that Google recently rolled out an update specifically around mobile responsiveness. Because of this change, mobile responsiveness has become a major ranking factor in search result rank ever since 2015. In 2016,


As you can see, making sure your website design is mobile friendly, or responsive, is critical to increasing your ranking in search engines.

 

1. Check if your website is mobile friendly

 

The first thing to do is to see whether your website is adapted to the smaller screens of mobile devices. You can use this easy-to-use Google Mobile Friendly Test tool; just add your website’s URL and the tool will let you know if your website is mobile friendly or not according to Google’s standards.

 

You can also see how your web page looks in mobile devices. Follow these steps:

 

  • Open a web page that you want to check.
  • Right click and click “Inspect.” 
  • Click the cellphone icon.
  • Click the “Responsive” drop-down button. You can see a selection of various models and brands of mobile devices. Choose a model or brand.
  • Take a look at what your web page looks like in various mobile devices.
  • Click “X” to exit the Inspect Element panel.

 

2. Do not create a different website just for mobile devices

 



Web designers used to choose and cut content to fit for a website designed specifically for mobile browsing. However, new web design technologies and methodologies now exist to make your existing website mobile friendly. Thus, there’s no need to have a website solely for mobile devices.

 

Also, remember that Google penalizes duplicate content. So if you have two websites---one for desktops and one for mobile---with the same content, you may be penalized, causing your ranking to suffer.

 

3. Add a viewport meta tag

 

The rendering system of a browser uses viewport meta tags to determine how your web page content is scaled and sized. It tells the browser that the page web page being viewed needs to fit the screen. Thus, a viewport meta tag is an important code to include if you want your site to be mobile friendly. You can use the code below that the top of the page.

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

To know more about viewport, here's a quick guide from w3schools.

 

4. Make sure your font and button sizes are adequate for mobile devices

 

Mobile screens are smaller than desktop screens, so your content’s font must be big enough for the words to be seen easily. As a rule of thumb, font size must be at least 14px. Yes, it seems big, but readers don’t need to zoom in your content to read it.

 

In case of call-to-action buttons, go for bigger as a bigger button size captures attention quickly and easily. In addition of being more obvious, a bigger CTA button reduces the chances of viewers missing the button or hitting a wrong link.

 

Having bigger fonts and buttons also help improve your user experience, subsequently increasing viewership, retention, and conversions.

 

5. Use high-quality, high-resolution images

 



Today’s mobile devices have built-in retina-quality HD screens. This means that the resolution of your images should be twice than that of a desktop. With high-resolution images, the images won’t be blurry or pixelated when viewed on an HD screen.

 

6. Embed or link YouTube, Facebook, etc. videos

 

Do you have videos on your website? Making videos mobile-friendly can be difficult. To make it easier for you, use videos from YouTube, Facebook, Vimeo, and other video-sharing sites. These are already mobile responsive, which takes off the burden of making your videos mobile-friendly.

 

Furthermore, with a channel in a video-sharing website, you can improve your social media traffic and performance.

 

7. Test your design on various devices

 

 

Open your website on different devices and brands. Test all links, page, CTAs, and all functionalities of your website if they work. Put yourself in the shoes of a user and ask yourself: would you want to browse, explore, or use the website your are looking right now?

 

If your website does not automatically adapt to mobile devices or if you’re planning to have a mobile friendly website design, then get in touch with FolioWebsites. Our web designers create effective, visually stunning, powerful, optimized, and mobile-responsive websites. Start out with a free website consultation today.

 

Sources:

 

  • https://blog.hootsuite.com/9-tips-to-creating-a-mobile-friendly-website/