Mobile adaptation of the site is becoming more and more popular due to the increase in the number of smartphones and tablets. What does she represent? What benefits does it provide? This issue is especially relevant for owners of online stores, websites of various service companies, blogs and popular forums. How can a website be adapted for mobile devices? Here is a small list of issues that we will consider as part of the article.
General information
So first let's look at what responsive design is. This is the name of a configuration in which the same HTML code is sent to all devices, but the sizes of the elements are adjusted using CSS. Various search robots are able to recognize such sites, provided that the pages and resources are open for crawling. The meta name="viewport" tag is used to indicate to browsers that this is possible. What is the adaptation of the site for mobile devices?
Consider the tag
So, you need to take care of the meta name="viewport" tag. Why is he? It is in himcontains instructions for the browser on how to resize and scale the page to fit the screen width of the device from which the site is viewed. If you don't add this small element, the desktop page will be displayed by default. But in doing so, mobile browsers will try to optimize the content, which will result in larger fonts, scalable content, or displaying some of the content that fits on the screen. Is it nice? No, the mobile version of the site in this case will only cause a negative perception. After all, the fonts will be disproportionate, you will have to scroll the page and perform a number of other actions, which, although they are secondary, are still tedious. You can check the adaptation of the site for mobile devices using a smartphone, tablet or special services and programs. Of course, the first two options are more preferable, but if you need a thorough analysis from the perspective of various devices and save time, then the latter will do.
What are the benefits of adapting a site for mobile devices?
Using this approach allows:
- Users share content when it has one address.
- Search engine algorithms get exact page parameters, no confusion with different versions.
- Reduce the chance of errors.
- Shorten load times by eliminating the need for reindexing.
- Save resources.
Also,It is easier to create an adaptive page than several variants of one thing. Adapting a site for mobile devices (it is quite possible to do it yourself) is not something difficult, it is enough to know JavaScript and be able to work with cascading style sheets (CSS) and images. There are many approaches to accomplishing the task. The article will consider the three most popular options:
- Focusing on JavaScript.
- Combination.
- Dynamic use of JavaScript.
Let's take a closer look at them.
Customization using JavaScript
In this case, one content is used. And with the help of JavaScript, formatting changes with the mechanism of the page. Everything in such cases depends on the platform. This algorithm is similar to Cascading Style Sheet media queries. Let's consider a small example of work in practice. So, we have a page with HTML code in which the element is placed. When 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 implementation is automatically recognized by the computer. In addition, you do not need to acquire a special header, since there is no dynamicdisplay content.
Combination
In this case, the adaptation of the site for mobile devices is used due to the combination of JavaScript capabilities and server functions. What does the general scheme look like? The user accesses the site from a specific device. JavaScript receives information about what it used and passes it to the server. The necessary code is generated there, which is subsequently sent to the device. Moreover, this information is stored in cookies. And on a subsequent visit, the server reads data from them. A feature of this approach is the ability to use different versions of the HTML code. True, for correct operation, you need to take care of the presence 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
This assumes that the same code will be provided with a specific element, which points to an external file whose content varies depending on which agent is being used. That is, we will have a dynamic page in front of us. How is it implemented? Many people use the same Vary: User-agent for this. And when working with pages, information will also be updated in real time, which is certainly very good. There is much more to be said about theory. How not to remember divas (), with the help of which you can literally “juggle” the appearance of the site and many other different things. But wewondering how to do it!
Preparing for implementation
It should be noted that there are two approaches to the task of creating a responsive website:
- Manual.
- Automatic.
Initially, you need to choose which path to take. So, a plugin for adapting a 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 do everything without problems. Due to such restrictions, and sometimes other moments and the lack of full creative freedom, the majority opts for manual settings. And although the programs help to get an attractive version of the resource in just a few minutes, they still have certain disadvantages.
Flexible layout
In order for us to get a literal "candy", you need to use only relative units of measurement. In practice, all fonts are em-sized, and the size of the elements is indicated as a percentage. Although you can periodically (if you really want to) use px, it’s better to do without them. When specifying width (width) or height, you should not use a certain fixed number like 1080, 1260 or 768, but a percentage. As an example - width: 90%. You can do 80%, 99%, and 100%. It all depends on the desire of the master. But what about the text that is displayed on a certain element? For such a 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 who have a screen width of 780 enter. When dividing, we get a very long number. Does it need to be rounded up? Well, the situation here is complicated. Many do not recommend doing this. It is 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, this is a simple job, this adaptation of the site for mobile devices. CSS, if it contains entries without errors, will be able to play everything.
Flexible font, images and media queries
By default, the font size in browsers is set to 16 px. But, as mentioned earlier, such an approach is highly undesirable for us. What to do in this case? Then the desired value is divided by the base. Consider a couple of examples:
- 16/16=1 em.
- 18/16=1, 125 em.
The result must be written to font-size, adding a colon after it. True, if these values are later included somewhere else, it should be borne in mind that it will be displayed exactly the value we entered.
And now for the images. Everything can be entered either in their attributes, or in a cascading tablestyling with max-width. Do not forget that the size is indicated in percent! 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 1260px, the rules nested in the media query will apply. 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 it can be written to remove it. In some ways, media queries are like an if construct. But their feature is a very big … individuality. They can record all the changes that need to be made when working with browsers of certain sizes.
Conclusion
The number of mobile devices and the people who use them is constantly growing. Therefore, it is highly desirable that even the smallest details, not to mention the 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 will not be displayed to them. Why? Well, this is elementary - so as not to slow down the loading of pages. And it's better to make sure that the data is loaded in small portions, and the site itself works quickly and efficiently.
