According to Hootsuite and We Are Socialaccording to Hootsuite and We Are Social, 55% of the world’s population uses the Internet, or nearly 4.2 billion people. The technological support that drains the most internet traffic remains the mobile with a share of 51.6%, followed by computers which show 44.1% against 4.3% for other supports. This implies that more than half of the Internet users access websites via their mobile. For this reason, your website creation project should take into account the fact of proposing an interface that adapts to different interfaces. Indeed, it is a question of making it responsive in order to enjoy the traffic coming from users not necessarily using a computer. To do this, I will guide you in the process of adapting a page of your website to the phone. This article, part of a long series, will show you ”step by step” all the steps so that you can do it yourself. Do not forget to follow the video that accompanies it and is likely to help you a lot.
Get “Responsive” pages!
Glossary
Find out in this video
how to adapt your website pages to the phone:What is a responsive website?
With the evolution of technology, a continuous number of people connect to the Internet. Most of them do it with their cell phone, that’s why your website must be perfectly adapted to the phone format in order to guarantee an optimized navigation experience to the users.
By the way, Mobify has found through a study that 30% of Internet users abort a transaction when a website does not adjust to their mobile format. Moreover, if a website takes more than 3 seconds to load, 57% of mobile customers tend to leave it.
For example, you will probably be annoyed by a website that forces you to zoom with your fingers, scroll up and down or left and right in order to read its content.
Therefore, a responsive website must be able to automatically adapt to the different media of the Internet users. And there are several reasons why you should switch to a responsive website.
Why you should have a responsive website?
There are many reasons to adopt a responsive website, but I reveal to you the most important ones that can have a great impact on your business.
Google recommends responsive websites
With more than 90,6 % of the world market share, Google remains the most used search engine by Internet users. It is therefore a reference in terms of user experience and the fact that it favors responsive websites is not by chance.
Indeed, the firm of Mountain View highlights in its search results, websites that adapt to the mobile format. In this sense, Google did not hesitate to set up the label ” Mobile Friendly in this sense, Google has not hesitated to set up the “Mobile Friendly” label in order to allow webmasters and site administrators to determine if the pages of their website are displayed properly on mobile.
In this logic, for a user who will make a search via his mobile, Google will take care to rank first in the results, the pages that are “Mobile Friendly” to the detriment of those who are not.
Improving your sales or contacts
Visitors are likely to automatically leave your website if they notice that the pages of your website do not display correctly on their mobile. Gold, 12.1 million
french people make purchases via mobile out of a total of 37.5 million who have purchased on the Internet.
This is why this category of Internet users is of great interest to you.
Your site easier to manage
In the past, it happened that some owners created two different sites, one for mobiles and the other for computers. This had the disadvantage of multiplying by two, the tasks related to the management of sites, content, etc. ..
For this, I suggest you to opt for a responsive website that will avoid all these troubles since it is only one site.
How to adapt my website page to the phone: steps for you to do it yourself
In order for you to have a full understanding of the steps to take to adapt your website to the phone, I’m going to use my SEO Agency’s website, Twaino.com.
It runs on the WordPress CMS and the theme I use is “Avada”.
First of all, please note that I have started a series of articles on how to create a website that you can consult depending on the stage you are at to create yours.
1) Check the display of your site on mobile
You can simply use your smartphone to see how your site looks on this medium, but you can also use the browser of your computer. To do this, you just have to reduce the width of your browser window by at least a third, while keeping its height.
When I do this for mine, I notice among other things on the home page that :
- The title “Twaino: SEO Agency” is a little too big for a phone
- The layout of the images is not good because I have two images that follow each other and I will shift their position by putting them between each text;
- The arrows in the “SEO Campaign Methodology” do not fit horizontally, but follow each other vertically;
- There are large image squares in the “Blog” section, while carousels of two small ones could make the user experience more pleasant.
These are some of the changes I’m going to make. Follow along!
2) Log in to your website’s dashboard
To make the changes you need, you need to access the WordPress console.
To do this, you just need to add the entry “…./wp-admin” to the URL of your website in your browser. Mine is ” https://twaino.com/wp-admin “.
On the connection page, fill in the boxes with your identifiers and then validate to access the dashboard.
3) Go to the home page
Once you are in your dashboard, go to the page you want to make responsive. In my case, it’s the homepage and once on it, click on the “Edit Page” window preceded by a pencil icon, located just to the right of “Create” and completely at the top of the page.
Once on the new interface, you will see all the blocks that make up your web page, thanks to the theme of your website. Mine is “Avada” and I will use this interface to make the different configurations
At this level, I suggest you duplicate in your browser, the window of the home page and reduce it. This will allow you to appreciate all the changes you will have to make as you go along.
4 Creating blocks for mobile or for computer and tablet
You will have to perform this action several times since you will create mobile blocks for all the blocks you want to modify. I will use the first modification I will make to illustrate it.
Indeed, if you have titles that are present on your page, it may be that their size is not optimized for display on a phone. This is my case with the title “Twaino : SEO Agency” which is too big and I will reduce its size.
4-1) Duplicate the block to be modified
To do this, find the block where the text is and click on it. The block I want to modify is “Agency” and I click on the small arrow on the right to see its content.
I then advise you to duplicate the block by pressing the second icon from the left. This will allow you to create the block to be displayed on mobiles.
Then, name this new block so that you can easily find it. I put “Mobile Agency”.
4-2) Create the block intended only for computers and tablets
The first block you duplicated, which is “Agency” at my level, is the one that will be displayed on all media by default. You must therefore deactivate the option to display on phones.
This action allows you to reserve only the first block for display on computer as well as on tablet and the second block, “Mobile Agency” in my case, for display on phone.
To do this, click on the edit icon which is the first one from the left. Then scroll down to “Container Visibility” which gives you three options:
- Small screen: For small screens including phones;
- Medium screen: For medium screens including tablets;
- Large screen: For large screens including computers.
Since I want this block to be visible only on computers, I will deselect “small screen” and keep only “medium” and “large screen”.
Then save this modification to continue.
4-3) Create the block only for mobiles
This is the same process as the previous step, except that here you will deselect :
- Medium screen
- Large screen
Make sure that their color becomes gray, which will allow you to use the configuration of the second block, “Mobile Agency” at my level, for display on phones only.
Save this modification so that it is taken into account. At this level, I advise you to always reduce the blocks that you do not use in order not to make mistakes. Indeed, if this is not the case, you risk making certain modifications in the wrong block and you will have to start all over again, which is not desirable.
5) Change the font size of your title
After these steps, you can now move on to the actual editing phase. To change the size of your text, drag your mouse cursor over the area where the text is displayed as a thumbnail. You will see an editing icon in the form of a pencil, which is in the first position on the left, which you will press.
On the page that appears, you have a field containing your text and several options for its formatting.
Then click on the “Text” tab in the upper right corner of the text field.
You have the html format of your text and look for the word “font-size” followed by a number. This is the size of the text you want to change.
At my level, I have “font-size: 50 px” which is on the same line as the title I want to change the size of, “Twaino: SEO Agency”.
This indicates that the size of the title is 50 pixels, which I change to 40 pixels.
6) Move your images
There are two images that follow each other in the “Mobile Agency” block, which does not look good on the phone. For this, I will move one of them below the text that follows them. Here’s how to do it if you want to do the same.
It is a very simple operation and once in the block, make a left click that you maintain on the frame of the image and drag on the area where you want to place it.
At my level, I drag it to the right and it takes the place of the second text, so I just placed it at the last position.
Save this change by clicking on the blue “Update” button in the bottom right corner. You can check if the configurations have been taken into account.
To do this, I refresh the homepage of the reduced tab of my browser and the changes have been taken into account with a good rendering that is different when switching from a computer display to a phone display.
7) Arrange the layout of the shapes
In the “Method” block, I have arrows that fit well with the computer display, but give a different result for the phone.
To perform the same action as me, first duplicate and name it. In my case, I write “Methode Mobile” to differentiate it from the first one.
Then, as you did in step 4, deactivate :
- The display on “Small screen” at the first block.
- The display on ” Medium screen ” and ” Large screen ” on the new block.
This allows you to make the changes for the phone.
7-1) Delete the old arrows
Click on the small arrow on the far right to see the content of the new block you want to modify, “Methode Mobile” at my level.
I delete the other elements leaving only one, which will allow me to have all the content on the same line. To do this, you just have to click on the trash can icon that accompanies them.
7-2) Insert an image
Then drag your cursor over the image and press the editing icon in the form of a pencil on the left to make the various changes.
On the interface that appears, select the “Edit” button which is located completely to the right and just below the image. This allows you to access the “Media Library” of your website.
You can select one of the images already in your library or upload a new image. At my level, I have already created a small image with the Adobe Illustrator software that I can use.
To do this, I click on “Upload Files” and then on “Select Files” to upload the image from my computer.
I take care to name the image and I press the “Insert on page” button. After saving by clicking on “Save”, I click on “Update” which takes into account my changes.
Once the home page is updated, I can see that I have the desired look.
Keep in mind that at this level, we have just inserted a single image for the phone display instead of three different images for the computer display. Therefore, there will be only one link and one clickable image for the mobile display instead of three in the second case.
8) Create a cube of several well-structured images
In the “Services” block, the real display on mobile is skewed. Indeed, of the three images that follow each other below the banner “NATURAL REFERENCING”, only two appear.
To correct this, I will create a cube in which I will put the three images and a square image of “NATURAL REFERENCING”.
8-1) Create the new block
To make these changes that will only affect the mobile display, first proceed in the same way as in step 4. In other words:
- Duplicate the old block;
- Rename the new block;
- Configure the display for both blocks.
In my case, I have “Service” as the old block and “Mobile Service” as the new block.
8-2) Create a cube of 4 images
Click on the small arrow on the right to see the content of the new block. To get the result I want, I remove the banner of the “NATURAL REFERENCING”. Then I change the organization of the three images.
I click on the editing icon in the form of a pencil and I delete one of the images to have the two that will constitute a line of my cube. To do this deletion, just click on the trash icon that is on the same bar as the image name and save.
I finally have two images that I duplicate to have the second line of my cube. To do this, click on the icon that comes right after the pencil icon and is in the second position.
Adjust them so that the two sections are correctly aligned one below the other. Now change the duplicate images by putting the other two images in their place either from your “Media Library” or by loading it from your computer.
I have now got my four images with my services:
- NATURAL REFERENCING ;
- WEB WRITING ;
- TRAINING ;
- SEO AUDIT.
8-3) Change the distance between the images
I save the changes and refresh the homepage to see the rendering. My cube with the four images appeared well, but the vertical distance is quite large.
To decrease it, press the edit icon in the first row of images in the “Mobile Service” block. Then click on the “Design” window, which is located in the middle of “General” and “Animation”.
Enter in “Margin” a lower number, I filled in “-15%” at my level. Then save and refresh your page to see how it looks. Mine is perfect and I recommend varying the “Margin” to get the ideal result if you don’t have it all at once.
9) Add image carousels
In the “Blog” block of my website, I have large images that follow each other horizontally, which does not look good. For this, I will create lines with two images each.
So I go to the “Blog” block and duplicate it to create the “Mobile Blog”. Use the same process described in step 4 to do this.
9-1) Choose the carousel and insert the images
Then open the content of the “Mobile Blog” block by clicking on the little arrow on the right. Then click on “+ Element” and look for the term “Carousel” in the bar reserved for this purpose.
The “Image Carousel” button will appear and you will click on it. On the page that appears, press “Select images” under “Bulk image Upload”, which takes you to your “Media Library” to select images.
In my case, I first take the two images marked “ON SITE” and “OFF SITE” for the “SEO” carousel.
9-2) Set up the carousel
After selecting the images, go down to the level :
- From “Picture size” and press “Auto” to make the sizing automatic;
- Hover Type” and select “Lift Up”;
- Autoplay” and check “No”;
- From “Maximum Columns” and choose the number you want. I use two for my images;
- From “Show Navigation” and select “No”.
I then save these modifications to see the rendering on the home page of my website.
The result is conclusive and to continue, you will remove the superfluous elements of your block. To do this, click on the trash can icons that are located just above the elements.
9-3) Create more carousels
In case you want to add other image carousels, duplicate the first one you just made. This will allow you to keep the different configurations you have already made.
After that, go and choose the images you want to put in place of the ones that are already there.
And this, by clicking on the icon of edition which is present on each old image. This allows you to select the new images one by one.
At my level, I take the two images marked “ROBOT” and “USER EXPERIENCE” for the “Website Creation” carousel.
I do the same for another image carousel by importing this time “WORDPRESS” and “WEBSITE”.
I also take the opportunity to set the “Margin” of the “Design” parameter to “-19%” so that the distance between the images is small.
9-4) Adjust the spaces
I save the changes and refresh the home page. The rendering is good, except for the space between the “Mobile Blog” block and the “Contact” block.
To reduce it, click on the edit icon on the same line as the block name and click on the “Design” window.
Decrease or increase the “Padding” depending on whether you want to decrease the distance or increase it.
Feel free to go back and forth a few times to find the perfect fit.
10) Check your changes one last time
You’ve just finished optimizing your website for cell phones. But to make sure that everything is working properly, do a final check. It consists in examining the final display on each support.
This will let you know if you’ve touched the widescreen display without knowing it. From there, you’ll know exactly what to do to fix the problem.
And that’s it! You’ve just adapted your website to the phone.
Conclusion
Currently, more than half of the Internet users use mobiles to connect to the Internet. Since this number is constantly growing, it is important to create a responsive website that automatically adapts to all types of media. This will considerably increase the user experience. A factor that is very important for Google which does not hesitate to rank in the first positions the responsive websites. I suggest you to follow the different steps that are presented in this article to offer the best experience to your users.
See you soon!
