After the increase in the number of Internet users using smartphones, responsive sites have become popular among users, and search engines also give them priority in appearing, so ensuring that your site is responsive is essential for you.
Therefore, in this article, we will learn about the most important modifications that you need to make to your WordPress site, starting with using a responsive template and then ensuring that all its elements respond to different screens so that your site becomes friendly to smartphone users.
The concept of mobile compatibility means that your site displays all its internal parts and various elements in an organized and comfortable way for the eye while browsing the site for the phone user. We will take an example of two designs to better understand the concept of responsiveness.
The following image shows the consistency of the elements and their presentation in an organized manner that is comfortable for the eye while browsing them from a mobile phone
As for the following image and the arrangement of the elements in it, which are not organized or arranged in front of the user
What is mobile compatibility and why is it important?
The largest percentage of Internet users around the world come from mobile phone users, which have screens much smaller than the screen sizes of regular computers such as desktop computers or large displays. This was the reason behind the spread of the concept of mobile responsiveness, especially since it has become an absolute necessity for every website owner who wants to continue gaining the trust of his visitors or customers online.
Website programmers use different techniques to improve the responsiveness of websites, but in the case of WordPress, you may not need in-depth knowledge of programming in order to create a website that is compatible with mobile phones or different display devices. For WordPress, it is related to the template you use to create your site and its internal pages.
Let’s simplify the concept of mobile-friendliness in a way that is easier, and more understandable for those without a technical background.
When the programmer who works on developing and programming a WordPress template sets the width of any element on the site, be it the header element or the header that appears at the top of the site, there are two ways to set the element’s width ( Width ):
- The first method : is to set a fixed value for the width of 900px (px means that it is the unit of measuring dimensions on the web). In this case, the width of the text will be set to 900 pixels on all types of screens, including mobile screens that may not exceed 500 pixels in width.
Therefore, the width of the item will increase on the mobile screen and the scroll bar will begin to appear to scroll to the rest of the content of the item. Of course, this is considered a bad model and is not friendly to the phone user.
- The second method : is to set the width of the element to be a percentage, not a fixed number. For example, when the programmer sets the width of the element specified in the site to be 100%, this means that the element will take up an area of 100% of the width of the user’s screen, whether it is a mobile screen, a desktop computer, or Any other screen, then this is a good example of responsive design.
The previous example is certainly not a complete explanation of the concept of mobile compatibility from a technical or programming perspective, but it may help clarify the idea of the difference between setting the values of Widths as well as the rest of the other characteristics of site elements, and how that affects the site’s compatibility with the display screen.
Now, most modern WordPress templates support mobile compatibility to a large extent, but there are some templates that are still not responsive to mobile phones, and therefore it is important to choose a professional template from the beginning and ensure that it is designed excellently by learning about the template’s characteristics and reviewing user experiences.
For example, this description attached to one of the templates in the WordPress theme store says that the template is “ responsive .” This means that when you install the template on your site, it provides a copy of the site that is completely compatible and suitable for display on different phone devices:
If you choose a responsive template, this will save you a lot of hard work.
The importance of the site’s compatibility with mobile devices is not only limited to mobile phone users having a good and satisfactory browsing experience, but also to their ability to interact within the site and perform various actions easily with all elements of the site.
The importance of responsive design also lies in increasing the website’s chance of appearing in search engines, which have become the most important source for most website owners online, as it is the ideal client for most website owners in various specializations.
Testing the site’s compatibility with phones
There are many tools that you can use to test your site’s compatibility with different mobile devices. For example, you can use Google’s compatibility test to ensure that the site provides a good experience with visitors from mobile devices.
The previous image shows a test of one of the sites, which showed that the site is compatible with mobile phones, where the message “Page is mobile friendly” appears in green. This indicates that the site and its internal pages appear appropriately on mobile devices:
You can also know more precisely whether your site is compatible with mobile devices, by entering the Google Webmaster Tools Google search console, then entering “Mobile Usability” to display a report showing you the number of site pages that are compatible with mobile devices, as well as the number of Pages with an “error” appear on mobile devices.
For example, the following image shows the mobile compatibility report for a site from within the Google console tool. The image shows that 700 pages on the site, which is the total number of pages on the site, are compatible with mobile devices, while there are no pages with an error regarding appearing on mobile:
Now that you have chosen your site in terms of compatibility with mobile devices, you may find some incompatible links or even find the entire site, and perhaps you will also find all the links and pages of your site compatible with mobile devices. Let us now learn how to solve these problems.
Optimize your website pages for mobile users
Let us now discuss the easiest things that you can do, whether in the pre-launching stage of the site, or if your site has already been launched and you would like to get some tips that will help you improve the appearance of the site on different mobile devices.
1- Choose a responsive template
When you search for any template suitable for the content of your site, and make sure that the template is constantly updated, as well as looking at the number of installations of the template as well as users’ experiences with it, there is an important final step that you must take, which is making a preview of the template.
When you preview the template, you will see a demo page showing how the site will look when the template is installed. During the preview, you can minimize and enlarge the browser window in order to show you what the design will look like on different screens. In this case, you will be sure that the site’s appearance and layout remain good with an improved design on all screen sizes. This is the procedure. It’s much easier than launching your own non-responsive website and then starting to improve it.
You must also make sure that the template is compatible with the mobile phone when you purchase the template from an external store or from the merchant’s page, which indicates whether the phone is responsive to different screens or not.
2- Avoid add-ons that provide unresponsive elements
WordPress plugins do not only affect the functionality of the site, but they also affect the display of some elements on the site that may not be responsive, such as this button that is not compatible with mobile phones because it appears larger than the size of the site content and thus causes a design flaw.
In this case, the easiest solution is to delete that add-on, and look for an alternative add-on that provides the same feature in a responsive manner and with a better design, where you can view user reviews and experiences and learn about the advantages and disadvantages of the add-on before installing it.
We mentioned the example of adding a call button for clarification, but the same problem may occur with another add-on that provides a visual element that is not responsive to different screens.
3- Examine the type of advertisements displayed on the site
One of the cases that cause problems with the site’s responsiveness is placing advertising codes from external sources that add non-responsive advertising elements. In this case, you deal with the problem in one of two ways:
- Communicate with the company that provides you with advertising codes, and ask them for an advertising code that provides responsive offers and sizes, then take the ready-made code and place it on your site without the hassle of configuring the code.
- Or you can modify these codes yourself and change the fixed width values so that it appears well, but after making sure that the advertising network allows modification to the codes.
4-Delete unresponsive widgets
You may rely on a template that relies on responsive elements and other non-responsive elements. In this case, the template may contain some widgets that cause a responsiveness problem. In this case, if you have not changed the template yet and solved some of the existing problems, you can delete the non-responsive widgets.
Ways to solve phone responsiveness problems
It may happen that you buy a template that is 100% responsive to mobile, then you design some pages or elements that are not responsive, and thus the responsiveness problem occurs on that page or element separately without affecting the rest of the pages. In this case, you need to review these pages or those elements and know their values to fix them individually, especially if you are using one of the Visual Builders plugins.
Look at the following image, which shows one of the bad sites that faces problems with mobile visibility for all pages of the site
In this case, this site owner has a lot of work to do in order to improve the appearance of his site on different mobile devices, and in the following paragraphs we will talk about the most important procedures that must be taken to make your WordPress site compatible with all screens.
Note : Some of the following tips may contain software modifications to the source code of the site or theme, and should only be done if you have sufficient experience in modifying the source code and ensuring that the modifications are implemented correctly.
1- Maintaining updates to WordPress and all tools
Updates are considered one of the ways through which problems that affect the performance and speed of the site, as well as the way it is displayed, are solved. Sometimes they are influential and have a role in solving problems with the compatibility of the site and its elements on different screens.
For example, WordPress published Update 4.4 , which included a software solution to the problem of some website images not appearing better on mobile devices.
Therefore, maintain the latest updates to WordPress and all of your site’s tools, as these updates always improve many things related to increasing the efficiency and security of your site.
2- Adapt the site’s display to the user’s screen width
Programmatically, WordPress theme programmers write some code that forces the browser to open the site in order to adapt the display of your site to the user’s screen width, such as the following code for the header.php file.
So if your site is not compatible with mobile screens, this is one of the initial steps that you take from within the WordPress control panel by going to: Appearance << Template Editor .
Then search for the header.php file and make sure that the following code is present inside it
If you don’t find the previous code already added, copy it and add it inside the header.php file right after the <head> line.
3- Solve the problem of image compatibility with different screen displays
Notice that the image is larger than the width of the original site, thus causing a problem with the responsiveness of the images.
You can solve this problem by adding CSS code and adding it to your site so that the images are displayed responsively on all types of screens.
You can add the code, by going to the path: Appearance << Customize << Additional CSS Styles . Then add the following code:
img {
max-width: 100%;
height: auto;
}This method may not work 100%, but it is one of the suggested solutions that works in many cases.
4- Ensure that the menus are responsive
Since we are talking about your site not being mobile friendly, one of the reasons for this is having a menu that is not mobile responsive. In this case, the easiest solution is to install one of the plugins that creates a responsive menu, and we advise you to add Max mega menu
The additions enjoy good trust among users, as there are more than 400,000 active installations at the time of writing the article, to help users solve the problem of unresponsive site menus.
After installing and activating the plugin, go to its settings from within the WordPress control panel, then you will find the Mobile menu option . You will often find the Responsive Breakpoint field set to 768px as the following image shows
In the plugin’s default settings, the mobile menu is shown when your site is opened from a screen with a width of less than 768px, and you can modify this number as you wish to control the appropriate width to show the mobile menu.
5- Ensure that the tables are responsive
Another problem caused by templates that are not compatible with mobile is the incompatibility of the appearance of tables on different screens. In this case, you can add some CSS code that will improve and adjust the appearance of tables on mobile screens in an organized and eye-friendly manner.
To add these codes, go to the WordPress control panel, then go to the path: Appearance << Customize << Additional CSS Formatting , then put the following code:
table {
width: 100%;
border-collapse: collapse;
}The following code helps in ensuring that the width of the tables does not deviate from the width of the part in which they are placed within the site, which solves the problem of the horizontal “scroll bar” appearing within the site while viewing from mobile devices.
Or you can add the code from the template customizer.
6- Verify the customized offer
In some non-responsive templates, the display has been compensated using fixed values and not a percentage as we explained at the beginning of the article, so in this case, change those values to a percentage in order to improve the display intended for phone users.
To access the fixed width value for the site content, go to the WordPress control panel and then go to the path: Appearance << Template Editor << style.css page . Then look for the following code Wraper:
As you can see, the value Width: 900px has been set , which is a fixed value, and will not help in the responsiveness of the display on phone devices, so this value can be deleted and replaced with the following value, with which the width is set in a percentage, which you can write as width:100% , so that it takes up 100% of the width of the user’s screen. Regardless of the device used.
Check the custom width for header and footer
In the same way, you can enter the WordPress control panel, then go to the path: Appearance << Edit Template << style.css file , and check the value of the custom width for Header & Footer.
In the previous code, you will find that the width value is fixed at 1200px. As we previously explained, fixed widths are the first cause of non-responsive design, so trying to change that value to a percentage value such as 100% may help solve the incompatibility problem to a large extent.
This is because changing the Width value in general within the code file from a fixed value to a percentage value of % helps in obtaining a responsive design with different screens.
Note : Make sure that the previous modifications are made accurately, and then preview the site after making the specified modifications. If you encounter any new problem with the appearance of the site, cancel the modification you made immediately and ensure that it works again correctly.
In general, we recommend that you have a test site to make new modifications that you make for the first time, especially if you are a beginner, as this will give you more opportunities to learn and reduce error rates on your commercial site.
In the end, the responsiveness of your site to various screens (desktop, laptop, tablet, smartphone, and other types of display screens) has become essential for site owners so as not to lose a large segment of your site visitors or potential customers, and therefore you need to ensure that all pages of your site are responsive. If you do not have sufficient ability or skill to modify the site’s elements or internal codes, it is worth hiring a specialist to do this for you
