Browse Definitions :

Getty Images/iStockphoto

10 best practices to make a mobile-friendly website

By adopting practices such as building a responsive layout and decluttering design, you can improve mobile user experience and rank higher in search engines.

As people increasingly use their phones to search the internet, companies need to consider creating mobile-friendly websites to reach customers.

Having a mobile-friendly website is one way to improve your search engine ranking. One reason mobile-friendly websites are so important is that approximately 60% of internet traffic is from mobile devices, according to a report from Statcounter.

Being mobile-friendly means your website displays different versions depending on what devices visitors are using. Mobile devices have smaller screens than desktops, so a mobile-friendly website adjusts to give users a better viewing experience.

Desktop viewing not only provides a bigger screen, but also other programs and features that mobile devices might not have, such as Adobe Flash and pop-up screens. Mobile-friendly websites have features specific to mobile devices -- such as click to call and navigation -- and load in a timely manner.

Here are some best practices to ensure your website is mobile-friendly.

1. Develop a responsive layout

A responsive layout lets the website scale its size to fit the user's device. It can adapt to various screen sizes, displaying relevant content while changing design as needed -- such as moving from a two-column layout on a desktop to a one-column design on a mobile device. If it's a responsive design, it shouldn't affect the loading time when adapting to the screen size. You can choose a mobile-responsive theme when building or updating your site.

List of practices to make websites mobile-friendly.
These are ways to make your website mobile-friendly.

Having a responsive website can also improve search engine optimization, or SEO, because Google ranks websites that are mobile-friendly higher in search engine results. Google's algorithms use a mobile-rendered version of webpages instead of using desktop views when ranking sites.

E-commerce website builders such as Wix and Squarespace have mobile-responsive themes that can be customized. WordPress can also customize a website.

If you already have a website that does not perform well on mobile devices, try adding the viewport meta tag. By adding this tag, the website will scale correctly to different device screen sizes.

Add this code to the head tag on your website so that it scales correctly for different screen sizes.

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

2. Optimize website speed

Speed makes a big first impression on views. A website that loads in one second has a conversion rate three times higher than a site that loads in five seconds, according to a survey by Portent.

To check your website's loading time, visit BrowserStack SpeedLab. Enter your website's URL and select Get free report. This tool will verify your website speed and can display your score for both desktop and mobile viewing. The test must be run twice -- once for mobile and once for desktop.

One way to improve website speed is to host your videos on a third-party site and then embed them on your site. This way, your website won't feel the weight of these videos, which can affect your website's speed. Two popular video-hosting platforms include YouTube and Wistia.

Learn more about different types of marketing videos to reach customers.

3. Compress images

When adding images to your site, don't forget to compress images to limit the file size and help with downloading speed. When compressing images, the amount of data that needs to load for viewing is reduced, increasing the website speed. You can compress images using free tools, such as Kraken.io, to reduce the file size without sacrificing quality. Also, use proper image formats, such as JPEG 2000, JPEG XR, AVIF and WebP, which all result in smaller file sizes than JPEGs and PNGs of similar quality. Using those formats can help boost site speed.

Another option is lazy loading, in which images only load when needed. These images hover below the fold of the website -- or what the user can see without scrolling down. If the user scrolls down, then the images will load.

4. Use HTML5 instead of Adobe Flash

Adobe Flash is popular for animations; however, it is not supported by mobile devices. Avoid using Flash on your websites, and use HTML5 instead.

HTML5 lets you do many actions online without using browser plugins. You can embed movies and music as well as create animations using HTML5, which is supported by mobile devices.

5. Avoid pop-ups

Pop-ups work well on desktop versions of websites, but not on mobile devices.

Pop-ups are hard to view on smaller screens, and you can't trigger pop-ups at certain moments -- such as when a user exits your site or hits the Contact Us section. It can also be difficult for users to close out of pop-ups from a mobile screen because the X in the corner might not be visible.

6. Change button size and placement

If a button is too small or in the wrong spot on a mobile website, it can be difficult to use. Most mobile device users use their thumbs for navigation, so buttons should be large enough to hit with a thumb.

Users should also be able to hit any button on your website with their thumb when scrolling, meaning buttons should be located toward the bottom of the page.

7. Use a large and readable font

The recommended font size of at least 14 pixels for a desktop might not be large enough to be legible on a smaller screen. The best way to know if it's legible is to test it on a mobile device.

Don't experiment with new fonts, such as script-type fonts, on a mobile device because they might not be as easy to read. Try bolding different lines of text and stay consistent with the font style.

Use black for text instead of various colors. This helps users see when the background is a different color or if there are reflections, such as sun glare when viewing their device outside.

8. Space out links

Think about how hard it can be to accurately use your thumb to click a link as opposed to using a mouse. To help people click the link they want, space out your links.

It's also best to limit the number of links to avoid a sea of blue, and limit the number of redirections that take users to another site for a better user experience on a mobile device. If you have a link that takes users to another site, make visitors aware that they are leaving your site, such as, "Click here to see Company XYZ's new website."

9. Declutter web design

Don't clutter a website by adding multiple calls to action on one page. If there are too many actions for users to take, it can be difficult to navigate on a smaller screen and cause confusion. Use only the critical functions the users would actively look for, such as the contact form.

Make sure the design is simple so that the navigation is easy to understand. Use white space so that users can see everything at a glance and keep content organized. Also, remove any outdated content so that it doesn't take up unnecessary space or confuse users.

For menus, avoid long lists of options and features. A menu with all available navigation options might seem straightforward, but it takes up a large amount of screen space, especially on smaller screens. Instead, try using a hamburger menu -- a button that opens a longer menu. It will save space and create less clutter.

10. Test the website on mobile devices regularly

To make sure your website is mobile-friendly, there are multiple ways to test. First, test websites on mobile devices for user experience. Be sure to test using both Android and iOS devices.

You can also run the website through Google's Mobile-Friendly Test, which is free to use. You can test each page.

Don't forget to test often, especially after any website updates.

Next Steps

Mobile website vs. app: What's the difference?

7 reasons why websites crash

Dig Deeper on Marketing and customer experience

Networking
  • firewall as a service (FWaaS)

    Firewall as a service (FWaaS), also known as a cloud firewall, is a service that provides cloud-based network traffic analysis ...

  • private 5G

    Private 5G is a wireless network technology that delivers 5G cellular connectivity for private network use cases.

  • NFVi (network functions virtualization infrastructure)

    NFVi (network functions virtualization infrastructure) encompasses all of the networking hardware and software needed to support ...

Security
  • phishing

    Phishing is a fraudulent practice in which an attacker masquerades as a reputable entity or person in an email or other form of ...

  • computer forensics (cyber forensics)

    Computer forensics is the application of investigation and analysis techniques to gather and preserve evidence from a particular ...

  • cybersecurity

    Cybersecurity is the practice of protecting internet-connected systems such as hardware, software and data from cyberthreats.

CIO
HRSoftware
  • OKRs (Objectives and Key Results)

    OKRs (Objectives and Key Results) encourage companies to set, communicate and monitor organizational goals and results in an ...

  • cognitive diversity

    Cognitive diversity is the inclusion of people who have different styles of problem-solving and can offer unique perspectives ...

  • reference checking software

    Reference checking software is programming that automates the process of contacting and questioning the references of job ...

Customer Experience
  • martech (marketing technology)

    Martech (marketing technology) refers to the integration of software tools, platforms, and applications designed to streamline ...

  • transactional marketing

    Transactional marketing is a business strategy that focuses on single, point-of-sale transactions.

  • customer profiling

    Customer profiling is the detailed and systematic process of constructing a clear portrait of a company's ideal customer by ...

Close