A mobile-friendly website is a site that functions and displays equally well on a mobile device — such as a smartphone or a tablet — and a desktop computer.
The fact of the matter is that mobile use is growing every year, and access to mobile-friendly, user-focused websites is becoming more important to search engines and consumers.
In April 2015, Google confirmed that it uses mobile-friendliness as a ranking signal when delivering results to users searching on mobile devices. Google doesn’t typically confirm or deny the signals that it looks at when ranking websites, so when Google tells you outright that something matters for search rankings, it’s a big deal.
Not sure how to get started making your site look and function just as well on mobile as it does on desktop? Not to worry; this article contains optimization tips to get your site on the path to mobile-friendliness.
Table of Contents
How To Know If My Website Is Mobile-Friendly?
Your website may have been built with mobile in mind if it was built or updated within the last few years by a designer or website builder. If you’re planning to put a lot of resources into how to make your website mobile-friendly, you should first take a look at how your website currently performs.
You can test your website on mobile devices using Google’s testing tool. In the search box, enter your URL. Besides getting a quick answer on how mobile-friendly your site is, you will also receive a screenshot of how the page looks on a smartphone screen and a list of recommendations to improve the mobile experience.
When the tool reveals that your website has a great deal of work to do, then you should make it mobile-friendly as soon as possible. In addition to improving your website’s visibility in search engines, doing so will encourage your visitors to stick around, which in turn will help you increase conversions.
If Google’s tool gives you a thumbs up, updating your mobile website doesn’t need to be as urgent. That said, it may be worthwhile to consider ways to improve your users’ experience on mobile devices. Any improvement is welcome.
12 Steps to Make Your Website Mobile-Friendly
Take a look at these steps to make sure your website works well on mobile devices as well as on desktops.
1. Make your website responsive
Explained simply, responsive design is a web design technique that uses CSS and a series of coded rules to dynamically adjust the appearance of your desktop content so that it best fits within the screen-size parameters of different mobile devices.
Responsive design uses JavaScript and client-side serving (also known as front-end serving) to alter the way pages appear in mobile or desktop browsers after the server has already loaded the page.
Websites using responsive design have one single set of URLs for all content regardless of whether that content is being delivered to a desktop computer or a mobile device.
Responsive mobile sites benefit from shared indexing with desktop sites, which can result in improved mobile ranking. Although you can use special code if you go with other mobile design options for your website to make sure the search engine sees the mobile site as the same as your desktop site, this is a technical issue that can introduce complications.
Your first thought maybe that you cannot build a responsive website by yourself. With responsive design becoming the norm, many tools now make it easy. Take a look at these 10 best tools for building responsive websites.
It is also possible to use a website builder that has responsive templates, which is the easiest of all. Mobile-friendly design templates are included in ClickFunnels’ drag-and-drop website builder. Having your website work on a mobile device doesn’t require any special modifications. Simply choose your template and you’re ready to go.
2. Prioritize website speed
According to the PageSpeed Insights portion of the Google Developers help site, Google prefers above-the-fold content (what the user sees first) to render in under a second for a mobile user. Anything longer than a second, Google says, can result in a poor user experience.
The search engines care a lot about user experience, so fast load times really matter when Google determines which of the least imperfect websites to rank the highest.
To improve your mobile site speed and ranking potential, try to eliminate redirect chains and loops, make sure that images are compressed and optimized, and always follow the page speed optimization recommendations outlined in the Mobile Analysis portion of the Google Developers PageSpeed Insights.
Learn more about how to improve your page speed.
3. Keep your navigation simple
Keep the top-level navigation as simple as possible, especially if you want it to run across the top of your mobile page. Don’t forget that mobile devices have smaller screens. (Apple iPhone 11 has a 6.1″ physical screen size and its resolution is about 828 x 1792 Pixels).
Mobile sites are designed to make it easy for users to browse your website on a mobile device. Your navigation should direct them to your main category pages and pages that enhance usability (such as a “Call Now” option and a shopping cart link).
You do not need to link to every page on your website here. In fact, too many choices can lead to decision paralysis and confusion, which results in a poor user experience. It is usually a good rule of thumb to include four to eight items in your top menu.
4. Don’t crosslink between your mobile site and your full desktop site, if possible.
Sending a mobile site user away from the mobile site and into your full desktop experience does not provide the best user experience. If at all possible, try to keep the links within your mobile site pointing to other mobile site pages.
If you have only a desktop version of a page, never redirect your user to a 404 error page or a different mobile-optimized page instead of the page the user is asking for.
Google considers this to be a faulty redirect, which creates a bad user experience and is grounds for a SERP rank demotion. Always think: Will my users be happy with this experience? Am I giving them what they expect? If the answer is yes, move forward. If it’s not, think of a better way.
5. Ditch Text-Blocking Ads and Pop-ups.
Ads and pop-ups are annoying in any context, but when you’re trying to read text on a small screen, an ad or pop-up blocks your view.
Your visitors aren’t going to spend time trying to figure out how to minimize the pop-up, they’ll just click away and find another website. Don’t allow ads or pop-ups that block the content of a page, if you are trying to create a positive user experience.
If you can’t get rid of them altogether, at least disable them for mobile users or set it up so a pop-up only appears when they scroll to the bottom of the page, not when they just land on it. The X to cancel out the ad or pop-up should be large enough for your customers to find and select it easily.
6. Create single-tap calls to action
To make your content mobile-friendly, you want to make it as easy as possible for your user to find what they need and take action.
In the mobile environment, in which users are working with small screens and finger taps rather than mouse clicks, prominent click-to-call call-to-action buttons are a great way to help users easily accomplish common tasks. And completing a task means a conversion for you!
Click-to-call buttons are a great mobile-specific call to action because mobile users are often already holding a phone. This button helps users get what they need (a chat with you) and for you to get what you need (a conversion).
Also, consider creating single-tap buttons that help mobile users find your storefront or accomplish tasks on the go.
7. Design for a small screen size
Mobile devices are smaller than desktop computers, so you have less room to fit content on the page and less room for white space. Some small screen content optimization tricks include:
- Make your logo serve as a link that redirects back to your mobile home page.
- Minimizing white space and making sure that the majority of the page is filled with actual content.
- Building off-screen elements such as a toggle menu, which is a navigation element that can expand and close.
- Shorten the text that appears on buttons when possible.
8. Choose a legible mobile font
Any time you put words on your website, the first priority needs to be user comprehension. Your user needs to be able to clearly see, and quickly read, your words on a variety of devices.
Because no one size fits all standard currently exists for mobile screen size or graphic quality, unfortunately, we can’t give you a one size fits all recommendation for font selection. We do recommend that you keep it simple and user-focused. Here are some rules of thumb to follow about fonts:
- Whether you go with a Sans Serif or Serif font, consider the height of the characters in your font alphabet and the white space between the letters. Fonts with a moderately high individual character height and a little bit of space between letters can improve readability.
- Know your demographic and remember that older folks may have a harder time reading smaller, more condensed fonts.
- Make sure to provide enough contrast between the font and the background so that users can see your content, even outdoors or in other conditions where screen glare is a factor.
- The safest route is to use a common font that mobile device manufacturers and users approve of, such as Arial, Helvetica, Courier, Georgia, Times New Roman, Trebuchet MS, or Verdana.
9. Optimize images
Not all images are created equal: Some are created in giant sizes for billboards, some are in high resolution for print, and some are compressed so that they load quickly on mobile devices. In this chapter, we’re most concerned with the third type of image.
To make your website mobile-friendly, it’s important to make sure your images are sized and saved in a way that allows them to load quickly on desktop and mobile devices. Optimized images that load quickly keep both the user and the search engine happy.
To optimize images for mobile, make sure to
- Save images in a compact file formats, such as JPG, GIF, or PNG.
- Never size images larger than they need to be; remember that big images mean big file sizes, which in turn means slow load times.
- Optimize the size of images even if you’re using responsive design. With responsive design, you can make sure that images are optimized for mobile by using CSS to write in a max-width clause — {max width:100%} — which will resize your images based on the size of the detected screen.
10. Design for multiscreen
These days, it is not uncommon for customers to visit your site using multiple devices over a short period of time. For instance, visitors may start shopping for your selection of boots using their phone on the train home from work, and then, after they’re home, they may continue their search using a desk-top computer or tablet.
To optimize your mobile content for multiscreen use, make sure that the colors, fonts, and themes that you use closely imitate your desktop colors, fonts, and themes.
Doing so helps your visitors feel confident that they’ve landed in the right place when they navigate to your website using a new device, and it can also help reinforce branding.
10. Avoid using Flash
In general, designing with Flash is unreliable and not recommended for either desktop or mobile design. This includes relying on Flash to play video content. Some mobile devices, such as iPhones, can’t render Flash at all, so any elements of your website that require Flash will render a poor user experience. Flash is also bad for SEO because Google has been known to bump SERP rank and insert SERP warnings when mobile sites use Flash.
11. Optimizing forms
Forms are used on websites to collect information from users. Sites use this information to complete transactions and registrations or to complete other tasks such as submitting an insurance claim online.
When approaching form design for mobile devices, keeping the physical mobile experience in mind is important. If you make your form slow to load or overly complicated, your visitors will likely abandon the form in the middle, or even before they begin.
Keep these best practices in mind when designing your mobile-friendly forms:
- Keep forms short and sweet. Make your forms easy to complete by minimizing the number of required fields. Having one field for “Name” rather than two fields for first and last name is a good example of an easy way to make your form one field shorter.
- When they can’t be short, create multipage forms. If you must have a long-form, break it up into multiple pages, present only a few above-the-fold fields on each page (“above the fold” means before you have to start scrolling down the screen), and include clear Next buttons so that visitors don’t have to scroll excessively. A progress bar can also help keep users committed to multipage mobile forms.
- Make the Submit button and the form fields finger size. Your mobile users are completing forms with their fingertips, so your fields and buttons need to be big enough to make tap interaction easy. No standard size exists that works best for every mobile device, but creating buttons and form fields that are 44 pixels wide by 44 pixels tall is generally a safe rule of thumb.
- Minimize typing by using drop-down menus, radio buttons, and auto-selected answers. Anything you can do to limit the amount of typing required will help speed up the process and improve your customer satisfaction. For example, if your form asks for a state, let users select their state from a drop-down menu so that they don’t have to type it.
- Make what you’re asking for clear. Above each field, clearly specify exactly what you want the user to put in the form field. If you’re asking for a birthday, for instance, clarify whether the form wants the birth year entered as two or four digits.
- Clearly specify which fields are required. If your form has more than one field, make sure that your users know exactly which fields are mandatory and which they can skip. Placing an asterisk (*) next to required form fields is a common convention. If all your form fields are required, place an asterisk next to all your fields. Don’t assume that your visitors will understand that they are all required.
- Visually validate when a form line is completed correctly. Mobile users don’t love filling out forms the first time, and they really don’t love having to go back and fill them out a second time because the form has errors. Using visual cues to let your user know they have completed each line of the form correctly — or incorrectly — can save time and limit frustration.
12. Don’t include intervening pages that block access to content for any reason
This includes any kind of page that asks for a login, a newsletter opt-in, or an app download. When searchers tap a link from a mobile search results page, both Google and Bing want the searchers to immediately be redirected to the content they are interested in, without any barriers.
Pages that block the user from having immediate access to the content she wants creates a bad user experience and — because such pages can make your website less imperfect than your competitor’s — often result in a rank drop.
13. Perform regular mobile testing
Testing your website on your mobile device is the best way to ensure your website offers a good mobile experience. Spend some time browsing your website on your phone or tablet every now and then to see if anything is difficult to see or to use. You can also hire users to test the system (since they’ll see all the changes from a new perspective).
Performing regular testing is one of the best ways to detect small issues that could lead to a negative user experience. You will be able to update your website so that it is truly mobile-friendly faster if you notice them as soon as possible.
Should You Build a Separate Mobile Site?
Here are a few circumstances in particular when it may make the most sense for your business to build a separate mobile site:
- When you need to prominently include elements on your desktop website that don’t render well on mobile devices — Flash, for instance. Although we don’t recommend using Flash or other high bandwidth interactive elements on your website, we do recognize that sometimes you have to (say, if you are running a movie website and need to create image-based experiences and show movie trailers). If your boss says you have to do this, you’ll benefit from building a separate mobile site.
- When you need to build a mobile-specific conversion flow or your visitors use search terms on mobile that are very different from the search terms they use on a desktop.
- When you have a huge website with lots of pages and limited resources. Making a large website multidevice responsive can take a lot of resource time. A mobile site can be a solution that allows you to show your mobile users a smaller, refined, sampling of your website content.
- When your visitors use older — not “smart” — phones to access your website. Mobile sites tend to work better on these types of older, less dynamic phones.
- When you have the resources to build, update, and maintain a separate mobile site.
Making Mobile a Part of Your SEO Strategy
To understand how mobile SEO and desktop SEO strategies work together, think of a successful SEO strategy as being like a large jigsaw puzzle with many pieces that rely on one another to create the big picture.
Mobile optimization is just one piece of the puzzle. Without it, you have a large hole in your SEO big picture. On the other hand, get mobile optimization right and your website’s big picture becomes less imperfect overall.
Get your site less imperfect than your competitors’ sites, and now you’re ranking above the fold on page one of the search engine results page — exactly where you want to be!
Learn more about how to make an SEO-friendly website.