Computers, Information Technology
Adaptation of the site for mobile devices: step-by-step instruction. Mobile version of the site
Mobile adaptation of the site is becoming more and more popular due to the increase in the number of smartphones and tablets. What is it? What advantages does it give? Especially this issue is relevant for owners of online stores, sites of various service companies, blogs and popular forums. How can the site be adapted for mobile devices? Here is a short list of issues that we will consider in the framework of the article.
general information
So, first, let's look at what an adaptive design is. This is the name of a configuration in which the same HTML code is sent to all devices, but the size of the elements is adjusted by CSS. Different search robots are able to recognize such sites, provided that the pages and resources are open for scanning. In order to tell browsers for this possibility, a meta name tag is used: "viewport". 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. What for? 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, the default page will be the page that is designed for computers. But while mobile browsers will try to optimize the content, which will result in increased fonts, scalability of content or display of the content that gets on the screen. Is it pleasant? No, the mobile version of the site in this case will cause only negative perception. After all, the fonts will be disproportionate, you'll have to scroll the page and perform a series of actions that, although they are secondary, are still tedious. Check the adaptation of the site for mobile devices can be using a smartphone, tablet or special services and programs. Of course, the first two options are more preferable, but if you need a careful analysis from the position of different devices and save time, then the latter will do.
What are the advantages of the adaptation of the site for mobile devices?
- Users share content in cases where it has one address.
- Search engine algorithms get exact page parameters, there is no confusion with different versions.
- Reduce the likelihood of errors.
- Reduce download time due to the lack of re-indexing.
- Save resources.
In addition, the adaptive page is easier to create, rather than several versions of something one. Adapting a site for mobile devices (it's quite possible to do it yourself) is not something complicated, it's enough to know JavaScript and be able to work with cascading style sheets (CSS) and images. There are many approaches to accomplishing the task. Within the framework of the article, three most popular variants will be considered:
- Focus on JavaScript.
- Combination.
- Dynamic use of JavaScript.
Let us examine them in more detail.