Adaptive markup: learning or immediately into battle?

Let’s recall that a markup developer is a person who must make the web page look exactly the same as its design layout in PSD format. The XHTML/HTML markup languages ​​and CSS cascading style sheets help them with this.

The coder does not just create the code for every detail of the site – the way the site is displayed in all popular browsers also depends on this good person. And the site should be displayed in them so that it would be nice to look. Moreover, on all devices and in all browsers. This property of adaptive layout is called multiplatform.

All blocks must adapt to the height and width of the screen; elements must not “move out” wherever they fall. Surely, each of you saw such sites where you see elements (text, logo, pictures) that opened together on your smartphone as if scared of you, a big and evil uncle (or aunt). It looks not very aesthetically pleasing, you see.

What is the difference between adaptive layout and other approaches to website layout?

There are several approaches you need to know before learning adaptive layout:

• Fixed layout. Blocks do not change their width even when the browser window is resized. When viewing the site on a monitor with a low extension, a scroll bar will appear;

• Rubber layout. With this approach, the blocks change their width, depending on the height and width of the browser window;

• Adaptive layout. Sharpened under certain screen resolutions (768, 1024, etc.), implemented using various scripts. Resizing is jerky;

• Responsive layout. A peculiar mix of rubber and adaptive layout. From a technical point of view, this is a very complex approach, however, it is the most effective;

• Mobile version. It is a different site with a different address, design and layout.

Advantages of the adaptive interface

• The site looks attractive within absolutely all devices (computers, laptops, tablets, smartphones);

• The site is well ranked in the normal and mobile search, comes to the top;

• There are no problems associated with the mobile version of the site;

• More confidence and loyalty from website visitors;

• Good usability and, as a result, high behavioural factors and a smaller number of failures.

Thus, the main advantage of an adaptive website is its focus on mobile technologies, which are rapidly developing in recent times. More and more visitors refuse computers in favour of mobile gadgets. For a more convincing look at the statistics of some old site with good attendance in Yandex.Metrica and compare the proportion of mobile visits now and a few years ago. The difference will be obvious.

Since the mobile device is not always connected to the wi-fi network and often uses a slow mobile Internet, websites should be made as easy as possible when downloading. This is where adaptive layout comes to the rescue, thanks to which web pages are perfectly loaded on small screens, even with slow internet.

From an SEO point of view, responsive layout also has its advantages. Here, the principle of “one site – one address” is observed, in contrast to the option with the creation of a mobile version. In the case of the mobile version, you have to separately develop the reputation and attendance of the resource. Since pages of mobile versions are often “glued” with the main sites, they are not very well ranked by search engines. Adaptive design and layout will allow the entire reference mass to focus on one single resource.

What you need to know as the adaptive layout developer.

To learn the adaptive layout, you should have a good level of knowledge of HTML, CSS and JavaScript. Answering the question in the subject of the article: the theory should be combined with practice from the very beginning of training. The ideal option is video tutorials on adaptive layout, focusing on practical exercises, the complexity of which increases as you learn the basics.

The minimal package of the layout gentleman also includes Adobe Photoshop and the basics of working with images. If you are preparing to impose projects no larger than one-page pages, you can use Adobe Muse and similar tools.

Basic layout skills are acquired fairly quickly. Dealing with HTML and CSS does not take long. Initially, there may be difficulties with mastering JavaScript, however, they are compensated by the presence of a huge number of plug-ins and other ready-made solutions for all occasions.

Where is the line between layout, web design and frontend?

Despite the fact that the layout developer is a link between the web designer and the front-end developer, he plays a crucial role in the creation of the site, and the powers in this role are often rather vague, corresponding to the functions of other specialists.

When you need to develop a complex interactive interface, web designers are required to have some knowledge of web programming languages. Here you may even need to work closely with databases. As you understand, the line between Front-End and layout is very, very thin.

Or they can force a web designer to impose a layout, which doesn’t represent at all what they do with its layout, and who doesn’t care about your problems. And this, believe me, is a fairly common situation. The coder often has to group the layers in a PSD template and generally put things in order.

Frameworks and preprocessors: be or not to be?

Using CSS frameworks plays a very important role in layout performance. Perhaps, dissatisfied exclamations of the original 80 level markup developers will begin now; they think they can make the project’s grid a hundred times better than Bootstrap. They will be supported by opponents of excessive standardization and limitations in web design. Well, I will not persuade anyone.

The grid is a strong basis of adaptive layout. A project without a grid is a headache for a web developer and a favourable environment for the reproduction of HTML crutches. And since we are going to be professional layout designers, then we will use only the most efficient and fast tools. Naturally, not at the expense of quality.

For those who have never heard of Bootstrap framework or were sceptical about it, I advise you to take a closer look. Especially if you appreciate the download speed and the convenience of the site. With the help of Bootstrap, you can create a responsive, responsive template with a cool grid.

Another tip: save time writing CSS with the preprocessor. And it is very important, regardless of whether you use any framework or not. Since 60-70% of the layout is writing the CSS, it is logical to automate this stage. I personally use the Sass preprocessor, however, you can use any other that suits you.

Conclusion

You have already started to take video courses on HTML and CSS, but you are not confident in your abilities and have not done anything yourself yet? Do not worry, everyone goes through a stage of doubt. I wish you to quickly step over doubts, gain confidence and start doing. Any practical experience, even layout of elementary models, will bring much more benefit than viewing video and self-flagellation.

Use various tools that simplify the process, but only when you see the need for them. Git, CSS preprocessors, libraries, build systems, etc., will help you make layout better and faster.

Next time, how will you go on public transport, look at people, what are they doing? Most of them spend the whole way, having buried in their smartphones and tablets. Do you understand what I’m getting at? Perhaps these people are your future customers. In the frantic pace of modern life, mobile Internet and adaptive interfaces are simply necessary! That is why adaptive layout specialists are now in demand more than ever.

To learn all about creating responsive interfaces, subscribe to our blog and discuss the most interesting materials with friends. See you again!