To make sure that your website is seen correctly on your mobile, it is a good idea to make a review from your smartphone. It should be a basic step you take after creating it. Just like every time you add a new section or make a major change.
But And what should you look at to know if your website is mobile ready?
In this entry I indicate the 7 main points of your website that you should review, since they are usually the ones that give more problems. And for each of them, I give you some guidelines for you to review.
How to check your website
First, I leave you this mini-tutorial where I explained how you can do to view a website from your computer as if it were on your mobile:
What you should review to adapt your website to mobile
Now I detail some of the points that you should pay attention to
1) Headers and visible content
The head of a website is important, because it is what is going to capture the visitor’s attention. You should also check its appearance on the mobile. It should fit well, and leave the most relevant part visible.
There is a concept that is usually called the “Above the fold” that comes to say something like “Above the fold” that refers to this part that will be seen as soon as you enter the first screen, before moving.
You have to try to ensure that the most important elements of each section of your website remain in this part, and that it is visually attractive to encourage people to continue reading.
Some guidelines to consider:
- If there is an image, does the header have the proper height? Is the interesting part visible? Is there a balance between image quality on desktop and speed of loading on mobile?
- Is enough information seen so that the visitor knows what the content is about?
- EYE: If you do not show that there is something below, you might think that there is not and leave. Keep that in mind.
- Be careful with Sliders, they reload the web a lot, and they are difficult to manage on mobile.
2) Images of the web on mobile
When viewing the web images on the mobile, it is sometimes necessary to make some adjustments.
Is the screen overflowing?
In case the theme you are using does not manage it well, the images could overflow on the sides, or distort your website.
Usually these aspects of the design, like the maximum width of the images, are controlled by the theme if you use WordPress. But in some websites made in code, in some old themes or unprofessional themes, not.
- If you use WordPress and this happens to you, I recommend you consider changing the theme of your website.
- Or if it’s made to code, ask the developer to review this detail.
They’re too small?
- They’re too small? In some cases, such as in blog posts, it’s a good idea to take them up to full width so they look good.
- Do they provide something in the mobile version or are they purely decorative? Sometimes it may be worth hiding an image in the mobile version. For example, if your contribution is purely aesthetic and there are already enough graphic elements.
Sometimes when reorganizing the content in a single column on the mobile it may happen that the result does not look too good.
For example, if you have a desktop layout with text blocks and photos alternating the left-right location. As in this example: When viewed on the mobile, it is reorganized by default as is, in the order in which the columns appear. And then you would have two images together, or two blocks of text, and it doesn’t look good.
- By default it would be organized on the mobile: Text 1, image 1, image 2, Text 2, Text 3, Image 3.
- Ideally, the mobile should display: Text 1, Image 1, Text 2, Image 2, Text 3, Image 3.
The bad thing is that to solve this, it will usually be necessary to make adjustments in code. But know that it is possible to change the order of the elements of the web on the mobile if necessary.
3) Text size on mobile
On mobile, it is important that the sizes are adequate: Large enough to be readable. But trying not to make them too big, so that more content can fit on the screen.
What font size is best for mobile?
What is the optimal font size for the mobile? This is a bit relative and cannot be given a specific value. For starters, because it depends on the font you are using. The same font size, in different fonts, can lead to a very different actual size.
Also, depending on the type of content you offer, and what type of audience. If you know it will be older people, you should opt for larger font sizes. If it will be middle-aged or young people, you can use a smaller font size that allows more content on the screen.
Suitable font size for mobile
What can be established are some guidelines for the appropriate size for the text of a website on mobile devices.
- For the body of text
- There is a minimum readability of about 9 pixels (px). Less than that, it should not be used on mobile.
- A reasonable minimum would be 12px.
- And up to a maximum of 16 or 18 px in the body of the text could be reasonable, if you want a more visible letter and it is not a problem to reduce the amount of content per page.
- For headings (titles: h1, h2, h3 …):
- Especially in headings, the recommended size can vary greatly depending on the font. Especially if you take any special, since in these sources is where the size changes the most.
- Normally the titles are better to adjust to a somewhat smaller size on the mobile than the one used on the desktop. Otherwise, the fonts are sometimes too large. This causes them to take up too much space and sometimes cut sentences across multiple lines, which also makes them less readable.
- A suitable size in a more or less standard font is usually between 22px and 38px for mobile. When on desktop you could go up to 50px or 60px. But the ideal is that you try it and values for the specific case.
They have to be big enough, and have enough space around them (especially other buttons or links) to press them easily on the mobile screen.
It is recommended that they be at least 48x48px in size and space around.
This is one of the points that usually gives the most problems in the forms. Both in the contact form and especially in the blog comments.
Sometimes form fields get crowded or disorganized in mobile view. And this is one of the things that gives a very bad image on your website.
Don’t forget to check the contact forms from your phone!
6) Bar color
Interestingly, Google has added this verification to its optimization controls from web to mobile.
It is relatively simple, some themes already contemplate it and allow you to customize it. And if not, you just have to add this code to the header