In the good old times, when there were no smartphones, there were also no problems with mobile sites: no sites - no problems. But, of course, there were WAP sites, which only needed to be of a minimal size, with no special features or client code. But soon it all began. Different mobile devices broke out in large amounts, becoming more and more powerful year after year. Mobile browsers, which were able to support HTML-standards in full started to appear. But, most important, the high speed mobile Internet, which could deliver content to such devices, became widely-used. And now when several years have passed, mobile traffic achieved (and in some cases even exceeded) the level of desktop traffic.
Accordingly, more and more sites treat mobile users as on their target audience from the very early stages of development. Let’s see what we should pay our attention to, while developing such projects, so as not to lose the target audience. Lots of particular things must be taken into account here. In this article, let’s look over the following: the speed of page loading, means of content delivery to the user’s device and its appropriate disposition on the display.
Page loading
Actually, problems here are absolutely similar to those of desktops, but seem to be more acute. People often search for something on the Internet when in a hurry, on the move, while commuting or waiting in the queue. That is why the speed of content representation is of paramount importance.
You should do your best to avoid blocking javascript. Quite often considerable part of client code is not required to render a page.
In such cases you can add attribute ‘async’ and, attribute ‘defer’ in a corresponding tag ‘script’ to support old browsers (IE<10), if needed:
<script src="/some/url.js" loading="lazy" loading="lazy" async defer></script>In such a way, script execution will not wait for the implementation of CSSOM or block the generation of POM, and the initial page rendering will occur faster.
Besides, the use of @import directive in CSS-files should be reduced, as it results in additional consistent enquiry to the server and puts the page loading further off.
Also, sometimes CSS appears to be redundant. Mobile phones may hardly need styles for desktop or tablet. Apparently, it is highly recommended to restrict the generation of CSSOM with the help of media requests. For example:
<link rel=”stylesheet” href=”/some/css.css” media=”(max-width: 640px)”>
@media (max-width: 640px) {
/* Some CSS */
}However, it should be pointed out that, anyway, all style files will be loaded from the server.
The question of images is also worth mentioning. Devices with the same display resolution as that of desktop computers flooded the market. The intention to improve visual characteristics on retina-displays turns into megabytes of traffic, which is unlikely to please the users. So if you are one of those who make rounded corners or gradients using images, it is better to remake them using CSS. And what is more, you should remake them even if you are no targeted at mobile audience. Various animations, all sorts of moving and twisting stuff, if they are really necessary, should rather be created with the help of CSS as well. Logos or other images, consisting of relatively simple figures, elements of interface or icons can be reversed in vector format. Also, it may be possible to use web fonts for icons, as well as for headings and other inscriptions. And, please, never use images for headings.
Now let’s pass on to the second part.
Content delivery
Admittedly, there are three major forms of content delivery to mobile devices.
Firstly, you can create a separate version for mobile devices and host it, for example, in a separate domain (m.example.com) or in a subdirectory (example.com/mobile). This is a good way which provides the higher degree of flexibility. You are free to do whatever you want. You can limit the access to certain pages for mobile devices. Or you can develop exclusive mobile pages. After all, you can create a brand new site, although this idea is slightly weird. However, if you deny mobile users the access, you should bear in mind, that if you are going to do it because you are going to do it because you think that nobody will never need to buy a helicopter from a mobile phone - stop! Somebody certainly will. And, most likely, there will be more than one who wish. And they are not able to do so, they will get upset. And you will not sell the helicopter. One more thing: no matter how excellent the mobile site is, it does not guarantee that everybody is going to like it. In that case people would rather choose to use a desktop version. Do not deprive them of such an opportunity. Just add the button to go to the full version of the site and you will have one more helicopter sold.
The second variant does not fundamentally differ from the previous one. It is actually the same except for URL being common for both versions of the site. The server in its turn decides which of two variants to choose, on the basis of the data from user-agent or, for instance, according to GET-parameter. This method provides with additional flexibility. You can return both special mobile versions and common desktop ones. But it is not as good as it may seem, which leads us to the next variant.
Responsive design is the third way. You always return one and the same HTML irrespective of user’s device. But then CSS-machinery operates and transforms the layout. Here the above mentioned media query comes in handy.
It may seem that responsive is opposed to the separate mobile version of the site, and given such version exists, you do not need to use it. That is not true. Even if the page is designed for smartphones, it does not mean that it should magically fit all to existing display dimensions and different different display orientations. Though, it may be easier to create for mobile devices only, ignoring desktops.
Let’s have a look at least at some basic things, required for responsive design.
Content Representation
If you just open not adapted page on your smartphone, the browser will render it in its usual, desktop-like configuration and fit it to display’s resolution. It can result in small font size, which the user will have to zoom in. It is quite inconvenient, and it can make the user feel tired, upset and willing to leave our site. In order not to allow this, it is necessary to use viewport magic.
Generally, while developing a site, you should consider all users to be sensitive and if something goes wrong, they leave and never come back again. And if the user happens to be a web developer himself, he will make fun of you.
So, all you need to do for viewport activation is to add the following meta tag to the head:
<meta name="viewport" content="width=device-width, initial-scale=1">But, although it will significantly broaden user experience, you should not think that it will be enough. Considerable work is needed to make a really adapted site for mobile devices. First of all, you should be on the safe side with font size. Although viewport has improved its layout, the font has to be over 14 points. After that, you should pay the closest attention to clickable elements, because fingertips differ from mouse cursor. They are incomparably bigger in size, which prevents from knowing exactly, where the click is applied. The clickable area is also wider, which makes hitting a single-character link a hard task. From this it follows that all similar elements should be bigger. You might also consider replacement of all links with something more button-like.
The last but not the least essential part of responsive design is a relative width of the elements. Although it is usually more convenient to set the width in pixels, it is utterly difficult to assure that the element will stay within a viewport if its width is full. That is why it is recommended to set the width of the elements in percent relation to that of the parent element.
It is not a secret that a size of smartphone’s display is much smaller than that of a desktop computer. That is why when it comes to mobile devices nothing should appear on a display when the user is reading or looking for something on the Internet. You should do your best to avoid any pop-ups with wonderful offers, unbelievable discounts or great sales. So the reduction of advertising might be considered, because, among other things, it wastes valuable and limited traffic, which will scarcely be tolerated by the user. Apart from this, you should rather not use the all-embracing navigating menu, which may look smart on a desktop, but will be too big for smartphone display. It goes without saying, that this menu should be hidden and available only on user’s request.
Although these pieces of advice will not make you a professional in mobile-friendly site development overnight, following them you will find satisfied and loyal customers. So good luck in selling helicopters and enjoy your work!
