When a site is created, cross-browser layout is important in terms of ensuring its effectiveness. What it is? How can it be done? What are the pitfalls?
What is a cross-browser layout?
Html / css is the foundation when creating a site. Many webmasters approach this by the principle: I feel good - and that's enough. And how unpleasant it is when you go from your browser or mobile device, and the site does not display correctly. In such cases, adaptive design and cross-browser layout come to the rescue.
Css and html in this case form the backbone with which everything is implemented. In some cases, JavaScript may be used for this purpose. But there is only one final goal - to make everything work on different versions. Therefore, if there is a desire to ensure cross-browser compatibility, so that the site displays well in all browsers, you have to think about it constantly, from the very first second of working on the site.
Walkthrough in general
So, let's look at how to make cross-browser layout. Initially, you should decide what programs the site will work with. Please note that the number of browsers is approaching two hundred, so trying to please everyone is a matter of incredible complexity. Therefore, they choose a number in the range from 3 to 8. To determine what to focus on, you can use auxiliary services like Yandex Metrika and Google Analytics. After that, you should find out how the problem of achieving cross-browser compatibility will be solved.
Many rely on hacks. These are special codes, selectors and rules that only one specific browser understands. But, given that you have to write at least a few dozen such inserts for different browsers and their versions, many discard this approach because of its high cost, duration and irrationality. Some rely on the use of those elements that are displayed the same way. But at the same time, a number of important advantages are often lost. To minimize losses, an adaptive design is also used in parallel. What is he like?
Adaptive design
This is an approach to site layout, during which the site becomes rubber, that is, one that adapts to different browsers and screen sizes. It should be noted that adaptive design and cross-browser compatibility are closely intertwined, and when they talk about one thing, they usually mean the second. Let's look at a small example.
There are browsers like Opera and Opera Mini. The first is used on ordinary computers, and the second on mobile phones. In general, they are similar, but have a number of features. In such cases, it is important to include individual files and / or use media queries. What is it? In the first case, separate files are created that are aimed at the operation of a particular browser, and their call is registered. In the second case, files with media queries are needed. If the program used meets the specific requirements, the file is loaded in the desired configuration.
What do we have to do?
Initially, remember that when working with html, cross-browser layout requires special attention. Therefore, for greater effectiveness, you should use the capabilities of cascading style sheets to the maximum. It is also necessary to change some approaches to work. So, many inexperienced people, when they indicate the size of something, use pixels - px. Consider an example with a large caption that adorns the top of the site.
Her width was set at 800px. With a 1600px screen, this will be pretty attractive. But at 700px it will look ridiculous. What to do in this case? You can set the size not in pixels, but as a percentage! And the inscription will occupy not a fixed length, but half the width of the screen. In percent, you can also set the distance at which a certain element will be placed from the edges of the screen. But what if the screen is too small?
Let's say it is 300px? In this case, a media query will help us, for which it is necessary to prescribe a width fix. And if it is 700px or less, then it can be established that the inscription will occupy 75% of the space. And if the width is 300px or less, then you can set all 100%. In general, the topic is very interesting and useful, so it can be studied in great detail. But, alas, there is information on the book, and to put everything in the article will not work.
Why does cross-browser adaptive layout attract search engines?
And the answer is very simple: because it means that the developers are monitoring the site and make it as enjoyable as possible for their users. So, such people can be encouraged by giving them higher positions in search engines. Of course, your site will not be immediately displayed on the TOP-1, but in combination with other factors, this will allow you to go up significantly. It should be noted that this is not a simple useless requirement, but something that deserves such attention.
After all, think for yourself: what is it like for a user when he gets to a site that is not very pleasant in appearance? But he may come to the conclusion that the search engine offers low-quality content! Therefore, they select so carefully the sites that should be offered. In addition, this is the benefit of webmasters, because they create a high-quality shell for content in which people can receive information of interest to them using any hardware: computer, laptop, tablet, smartphone or mobile phone. Accordingly, the more satisfied visitors, the faster the site and the level of income grows.
Conclusion
It should be noted that the modest fact that the creation of a cross-browser website with responsive design is not an easy, very long and time-consuming task. Therefore, you need to be patient and remember that discipline is a great thing! It is possible that something will not work out initially, but it is necessary to try, look for information, use various approaches and not back down. And then it will surely turn out to make a website that will show it to visitors with pleasure.