How to Make a Mobile Friendly Website in 11 Steps

How to Make a Mobile Friendly Website in 11 Steps

Having a mobile friendly website is important. Mandatory, instead. So if you haven’t had time to optimize your website to be mobile friendly, get ready to do it now.

There are three reasons why a website must be mobile friendly. Approximately this is the brief explanation:

  • The amount of traffic from cellphones has skyrocketed ━ More than half of the world’s people access the internet via smartphones. Statista predicted, the number will continue to increase every year. This is because the number of smartphone users also increases over time.
  • Mobile-first index ━ Google prioritizes website indexing on the mobile version. It is also from the results of this index that Google determines the search rankings of a website.
  • Mobile Search Engine Optimization (SEO) ━ The logic of mobile SEO is slightly different from the desktop version. Through the mobile version of SEO, you can better capture traffic opportunities.

If you don’t have a mobile friendly website, that’s all. You can lose visitors, search engine rankings, leads, and buyers’ interest.

So before it’s already on, it’s a good idea to move quickly to avoid it. So, how do you make a mobile friendly website? Here are the answers:

  1. Install a responsive theme;
  2. Create a simple menu;
  3. Include a search field;
  4. Choose the right type of font;
  5. Make sure there is sufficient whitespace ;
  6. Keep it short;
  7. Perform image optimization;
  8. Reduce pop-ups;
  9. Use AMP;
  10. Leave Flash
  11. Make speed a priority;

No need to worry about the many ways above. We’ll walk you through everything step by step.

Is Your Website Mobile Friendly?

Before rushing into optimization, you should first answer the questions above.

From there, you can tell how much needs to be done. Hence, you avoid doing everything from scratch. Then, you can focus on things that really need fixing.

To answer the questions above, you can use the Mobile-Friendly Test from Google. Just enter the website URL and wait a few moments.

Mobile Friendly Test

This platform works using Googlebot. Googlebot will access JavaScript, CSS, and image documents on the web.

From there, you can be sure whether your website is mobile friendly or not. Also through this tool, you can find out specific problems that make a website not mobile friendly.

After waiting a few moments, you will find a page like the one above. On that page you can get info in the form of:

  • Description of the test time and results;
  • Screenshot of the page visible from the phone;
  • HTML visible to Googlebot;
  • Issues encountered when loading pages;
  • Other important articles.

Make sure you click the Page loading issues section below the Test results section. There, there is a complete list of issues that Googlebot has encountered.

From there, you can start changing your website to be mobile-friendly. Make sure, you do the optimization recommendations that Goole prescribes on the website.

How to Make a Mobile Friendly Website

After knowing the specific issues that need to be addressed, it is his turn to carry out a thorough optimization. Here, we will show you 11 ways you can make a mobile-friendly website.

1. Install a responsive theme

Themes have a big impact on a website. Both in terms of website performance and visiting experience.

Technically , responsive themes help increase  loading times. This is because Google doesn’t need to redirect to an optimized version of the website.

The same theme criteria also help Googlebot index web pages. Hence, this has a direct effect on the ranking of the website in the search results.

In terms of user experience , installing responsive themes makes it easy for users to share content. Website owners only have one type of URL that is consistent. If the user shares the URL from the mobile version, the same URL can be opened on the desktop with the right display.

So, it is clear why a responsive theme must be installed on the website.

But in fact, not all themes are responsive. Some themes (sadly) work just as make-up. They only focus on beautifying the appearance of the website.

Then, what is the form of a responsive theme? Here are three main criteria to keep in mind:

  • Can adjust web appearance automatically;
  • Have a simple design and appearance;
  • Got an intuitive user interface (buttons, sliders, and forms).

To make things easier, you can get responsive themes in the WordPress Directory. All you have to do is type the URL: https://wordpress.org/. Then click the Themes option and enter the keyword “Responsive” in the search field.

Instantly, you will get thousands of responsive theme choices that can be used for free.

2. Create a simple menu

The size of the desktop screen is clearly different from the cellphone. When the desktop has a minimum resolution of 1080p, the screen resolution of the phone is only 720p. For this reason, the website menu needs to be designed differently from the one on the desktop.

If you want to simplify the appearance of your menu, there are a few principles you need to follow:

  • Display only important menus. Too many menus make visitors confused when browsing the website ( decision paralysis );
  • Put other menus into the collapsible navigation sidebar or navigation menus that can be hidden;
  • Write a call-to-action (CTA) briefly and clearly;
  • Make the button large;
  • Avoid using sidebars for content. The content located in the sidebar will usually be displayed at the very bottom of the mobile version of the page.

As for the best practices , you can take an example of Pizza Hut Delivery’s website. Below, you can compare the website in mobile and desktop versions.

In the mobile version, the Order Now and Order Status menus are displayed at the top. Because of the hope, the user is ready to place orders via cell phone.

Only then, the food and beverage menu is placed at the bottom. To be precise, after the slider contains promotional photos. The product menu is still easily accessible even though it is placed at the bottom.

Do not forget, there is a hidden navigation menu in the upper left corner. The navigation menu contains the exact same menu on the front page of the website. However, navigation does not mean a waste of space. In fact, this navigation works much like breadcrumbs , making it easy for the user to go back and forth from one page to another.

mobile view vs desktop view comparison
Image Credit: niagahoster.co.id

In the desktop version, the website display looks more detailed. The Order Now menu is both placed at the top. It’s just that its position is on the right side of the page.

This position makes product menus and promotional sliders much more striking. With a display like this, users are more provoked to find out what products are served by Pizza Hut Delivery.

 

3. Include a search field

Not everything can be made simple. This includes the menu and website content. Especially if the website in question is a marketplace or online store. Inevitably, there are so many menus and pages containing products for sale.

If you have a website like that, it’s a good idea to add a search field. The search column can make it easier for customers to find products that are really needed. After all, it is also impossible for you to tell visitors to search for content or products manually, right?

4. Select the correct font type

As with themes, fonts also have an effect on the mobile friendly level of a website. Due to the limited space on a cellphone, the choice of fonts has an effect on the overall appearance of the website.

With the right font, website content can be easily read. In addition, fonts can also affect the impression, mood, and branding of the website itself.

Decorative fonts are usually not included in the mobile friendly category. Indeed, the appearance of a classic font like this is usually very eye-catching. It’s just that, when viewed from a cellphone the appearance will be very large and less beautiful.

 

5. Ensure that there is sufficient whitespace

This one thing may have nothing to do with technical problems. However, it’s a good idea to keep on remembering and practicing this.

The plain white appearance gives the website a clean and elegant impression. Especially if the website is viewed on a cellphone.

At the same time, the white background also makes visitors focus on the main object on the website page. If you have an online shop, a white background helps your products stand out more.

If the content in question is in the form of a paragraph, it will be easier to read. As long as you write in short paragraphs.

6. Create a short form

The form on the website should be brief in principle. But when it comes to mobile friendly, you need to take an extra step.

Trim all forms that are not important to the user. When you ask for information for leads and contacts, include only two kinds of forms: name and email address.

 

If the context is for delivery of goods, just make a form that is necessary. Focus on the important information that is needed. You don’t need to know your favorite colors or where buyers get info about your business.

7. Perform image optimization

In making a mobile friendly website, images are usually a scourge. Because, there are still many people who post pictures on the website. No matter the image format or size.

As a result, the website is slow. Not to mention that the server disk memory is wasteful. Therefore, image optimization is an important thing to do.

There are several things that need to be done in optimizing images, namely:

  1. Choose the right image format . To save disk space, it’s a good idea to use JPG or JPEG format images. If you need a detailed image such as a screenshot, then use an image with a PNG extension;
  2. Perform image compression . Upload images to TinyPNG or TinyJPG Both will compress file sizes by reducing color complexity and less relevant information about images;
  3. Minimize the image dimensions . For an extra step, you can also reduce the dimensions of an image before uploading it to the web. Use software like Paint or Picasa to make it easier for you;
  4. Install an image optimizer plugin like WP Smush . This step can be done if you need help with image optimization. This plugin can also be used to check that the image resolution is not yet optimal;
  5. Add title text and alt text for SEO. Bot can’t see pictures. You can help by adding the appropriate title text and alt text. Include keywords for the title text, then describe the appearance of the image for the alt text.

8. Avoid pop-ups

Pop-ups are eating places. Just imagine that small cell phone screen full of pop-ups. It’s annoying, right?

Even worse, pop-ups are very difficult to close. The close button (X) is usually too small or hard to find. Double sucks.

There is no need for another reason. As much as possible, avoid pop-ups on the mobile version of the website.

9. Use AMP

Accelerated Mobile Pages (AMP) is a project fronted by Google. AMP is claimed to be able to make website loading times super fast.

This is because AMP works using a cache. Cache is used to store website data on gadgets. In addition, AMP Cache is also able to optimize server work by:

  • Limit image dimensions or resolution;
  • Change the picture format to a size suitable for the phone display;
  • Lower image quality to speed up loading;
  • Secure website via HTTPS protocol.

Through the methods above, it’s no wonder that AMP is able to cut website data up to eight times smaller.

As a Google project, AMP certainly has an edge on the Google search engine. Websites with AMP have priority to appear at the top of the search page. As can be seen in the image above.

 

10. Leave Flash

Flash is outdated and outdated. Everyone doesn’t like him.

Even on the desktop, the experience of browsing websites in Flash is a pain. The website is unresponsive and the loading time is long. It’s so annoying, both iOS and Android don’t support Flash.

Therefore, don’t ever use Flash. Instead, use the latest, more compatible technology. HTML, for example.

11. Make speed a priority

The essence of mobile friendly is about speed. Therefore, website speed must be a priority.

If your website doesn’t appear quickly within three seconds, the chances of visitors not accessing it increase by 32 percent. The longer the load time required, the higher the bounce rate is likely . As seen in the infographic below.

the relationship between loading time and bounce rate

Fortunately, it all doesn’t matter. Especially if you have successfully implemented the 10 ways to make a mobile friendly website above. Hopefully you also take additional steps such as:

  • Reducing the number of posts that appear on the front page;
  • Get rid of unnecessary widgets;
  • Uninstall rarely used plugins.

However, there are times when all of these steps don’t work. If so, it means that something is wrong with the server performance you are using.

Then what is the solution?

You can upgrade your hosting package to a we hosting service as needed. If you can give suggestions, we recommend the Personal hosting package for shared hosting services .

 

Ready to Create a Mobile Friendly Website?

Oh of course! We hope that the 11 ways to make a mobile friendly website above are really useful for you.

Eiits, not only that. We also provide a free ebook to download. All you have to do is enter your name and email address on page 25+ Tips to Make WordPress Super Fast . It didn’t take long for the ebook to arrive in your email inbox.

Finally, happy website optimization!

Print Friendly, PDF & Email

Leave a Reply

CommentLuv badge