Mobile site adaptation is becoming more and more popular due to the increase in the number of smartphones and tablets. What is she like? What are the benefits? This issue is especially relevant for owners of online stores, sites of various service companies, blogs and popular forums. How can a site be adapted for mobile devices? Here is a short list of issues that we will consider as part of the article.
general information
So, for starters, let's look at what responsive design is. This is the name of the configuration in which the same HTML code is sent to all devices, but the size of the elements is adjusted thanks to CSS. Various search engines can recognize these sites, provided that the pages and resources are open for crawling. In order to tell browsers that this is possible, the meta name = "viewport" tag is used. What is the adaptation of the site for mobile devices?
Consider the tag
So, you need to make sure that there is a meta name = "viewport" tag. Why is he? It contains instructions for the browser on how to adjust the size and scale of the page, taking into account the width of the screen of the device from which the site is viewed. If you do not add this small element, then by default a page designed for computers will be displayed. But at the same time, mobile browsers will try to optimize the content, which will result in increased fonts, scalability of the content, or display of a part of the content that fits on the screen. Is it nice? No, the mobile version of the site in this case will cause only negative perception. After all, the fonts will be disproportionate, you have to scroll the page and perform a series of actions that, although they are secondary, are still tedious. You can check the site’s adaptation for mobile devices using a smartphone, tablet or special services and programs. Of course, the first two options are preferable, but if you need a thorough analysis from the standpoint of various devices and save time, then the latter will do.
What are the benefits of adapting a site to mobile devices?
Using this approach allows you to:
- Users share content in cases where he has one address.
- Search engine algorithms get exact page parameters, there is no confusion with different versions.
- Reduce the likelihood of errors.
- Reduce loading times by eliminating the need for reindexing.
- Save resources.
In addition, an adaptive page is easier to create than several variations of one. Adaptation of the site for mobile devices (it’s quite possible to do this yourself) is not complicated, just know JavaScript and be able to work with cascading style sheets (CSS) and images. There are many approaches to the task. The article will consider the three most popular options:
- Focus on JavaScript.
- Combination.
- Dynamic use of JavaScript.
Let's look at them in more detail.
JavaScript adaptation
In this case, one content is used. And with the help of JavaScript, formatting is changed with the mechanism of the page. Everything in such cases depends on the platform. This algorithm is similar to cascading style sheet media queries. Consider a small example of work in practice. So, we have a page with HTML code that contains the <script> element. When it is requested, the same data will be transmitted. But when it comes to processing, the characteristics of the device will have a significant impact on this. And as a result, the page formatting will change. An example is the situation with an image that will be optimized for viewing on smartphones and tablets, and not on computers. An important advantage of this option is that the computer recognizes the implementation automatically. In addition, you do not need to acquire a special heading, since there is no dynamic display of content.
Combination
In this case, the adaptation of the site for mobile devices is used due to the combination of JavaScript and server functions. What does the general outline look like? The user accesses the site from a specific device. JavaScript receives information about what it used, and passes it to the server. There, the necessary code is generated, which is subsequently sent to the device. Moreover, information about this is stored in cookies. And at the next visit, the server reads the data from them. A feature of this approach is the ability to use various variants of HTML code. True, to work correctly, you must take care of the Vary: User-agent header. The mobile version of the site in this case requires a little more work.
Dynamic JavaScript and other options
In this case, it is envisaged that the same code with a specific element will be provided, which indicates an external file whose contents vary depending on which agent is used. That is, we will have a dynamic page. How is this implemented? Many people use the same Vary: User-agent for this. And when working with pages, the information will also be updated in real time, which is certainly very good. There is much more to talk about theory. How not to remember the divas (<div>), with the help of which you can literally "juggle" the appearance of the site and about many other different things. But we are interested in how to do this!
Preparation for implementation
It should be noted that there are two approaches when performing such a task as creating an adaptive website:
- Manual.
- Auto.
Initially, you must choose which path to take. So, the plugin for adapting the site for mobile devices will help you do all the work quickly. But only if everything is created according to certain, clearly regulated rules. If the resource was created according to them, the program for adapting the site to a mobile device should complete everything without problems. Due to such restrictions, and sometimes other points and the lack of full freedom of creativity, the majority makes the choice in favor of manual tuning. And although programs help literally in a few minutes to get an attractive version of a resource, they still have certain drawbacks.
Flexible layout
In order for us to get a literal "sweetie", you need to use only relative units of measurement. In practice, fonts are all tailored to em, and the size of the elements is indicated in percent. Although you can periodically (if you really want to) use px, it’s better to do without them. When specifying a width or height, you should not use a fixed fixed number like 1080, 1260 or 768, but a percentage. As an example, width: 90%. You can make 80%, and 99%, and 100%. It all depends on the desire of the master. But what about the text that is displayed on a particular element? In this case, there is one very good formula: the font width is divided by the same indicator of the background component, and we get our claim result. Sometimes it happens that the numbers can be very long. For example, the standard is 1260. And users come in whose screen width is 780. When dividing, we get a very long number. Is it mandatory to round it? Well, here the situation is complicated. Many categorically do not advise doing this. It’s better to look at the situation and evaluate how important accuracy is. You can, for example, set that only two, three, four, or ten decimal places are taken into account. Believe me, there is a simple job, this adaptation of the site to mobile devices. CSS, if it contains records without errors, will be able to reproduce everything.
Flexibility of font, images and media queries
By default, in browsers, the font size is set to 16 px. But, as previously mentioned, such an approach is highly undesirable for us. What to do in this case? Then we divide the necessary value base. Consider a couple of examples:
- 16/16 = 1 em.
- 18/16 = 1.125 em.
The result should be written in font-size, adding after the colon. However, if these values are subsequently included elsewhere, it should be borne in mind that the value that we entered will be displayed.
And now for the images. Everything can be entered either in their attributes, or in a cascading style sheet using max-width. Do not forget that the size is indicated as a percentage! And a few more words about media queries. They can be used in cases where it is necessary to set certain conditions. For example, if the screen width is less than 1260 pixels, the rules attached to the media request will be applied. What can they do? If we have a beautiful background image that should be displayed in full, and the user has a small screen, in such cases you can register it to be removed. In a way, media queries resemble the if construct. But their feature is a very big ... personality. In them you can record all the changes that must be made when working with browsers of certain sizes.
Conclusion
The number of mobile devices and the people who use them are constantly growing. Therefore, it is very desirable that even the smallest details, not to mention concepts, be worked out in the site layout before starting its development. After all, it is necessary to ensure that users accessing the site from phones do not download data that they will not be displayed. Why? Well, this is elementary - so as not to slow down the loading of pages. And it is better to make the data load in small portions, and the site itself works quickly and efficiently.