/ How to create an adaptive design?

How to create an adaptive design?

Adaptive site design means convenienta system for displaying the same site on different types of devices online. A simple language is the ability to view one web page on a laptop, smartphone and other gadgets.

Web adaptivity has become a necessity sincetime, as people have gadgets of different formats with access to the Internet. Companies, online stores and even simple informative sites tend to please their audience by adjusting to it in every possible way. Adaptive design solves the problem of convenience, so it is an indispensable working element.

Beautiful design

Adaptive Web Design Features

The convenience of design is characterized by several basic criteria.

  1. The size.Adaptive site design should have minor differences when displaying the page on different devices, so the size of images, text and other viewed items must match the size of the devices themselves. To do this, web developers adapt the design so that it has multiple versions of the viewer.
  2. Adaptation of content. The material that fills the site (images, video and other multimedia elements) must also meet the required screen resolutions without losing the quality of the display.
  3. Flexibility of design.Inclusion in the development of elements that allow you to quickly adjust the design of the site when you change the web page you are viewing. For example, the user scrolls the page up and down, moves to different sections or changes the position of the screen from vertical to horizontal and vice versa.
  4. Simplify the elements depending on the device for more convenient use.
  5. Hiding insignificant blocks on screens of smaller size.


Basic concepts

Site building is definitely related to languagesprogramming, because without them you just can not do. Using HTML and CSS, the browser recognizes the composition and order of objects (texts, illustrations, videos) - this is how the site is formed.

CSS is responsible for color, style, size,fonts, alignments, indents, background elements, forms, etc. HTML is responsible for the overall content and structure of the site. Thus, there is a construction of a web resource in the aggregate of two most important methods of description.

CSS, in turn, is an indispensable tool in the design. Has a large set of features that surpass HTML:

  1. Provides design unity with a large number of pages, the appearance of the site and manages the display of HTML documents.
  2. Provides an opportunity to design and design content simultaneously.
  3. Applies several styles and the ability to view on different devices.
  4. Carries out complex design solutions.
  5. It is characterized by high speed of work.

To develop a site, you need to know some basic concepts.

The CSS selector is denoted by the style name, which defines the properties and formatting parameters. It tells the browser which specific element the properties are applied to.

A property is a structural unit. It defines external parameters (size, location, color, shape, etc.) and is expressed in a specific code.

There is a set of specific CSS properties that describe an individual object in appearance and location.

Together, these elements form such a scheme:

Selector {property1: value; property2; value}.

Dimensions and resolutions of layouts

Development of design begins with the preparation of the layoutin "Photoshop" or other graphics programs. For convenience, special canvases of the modular grid are introduced into the canvas, special indentations are observed. Thus, the web designer shows the layout designer the principles of structuring the future site and the correct location of the web elements.

The permissions and sizes of the adaptive web design of the main types of devices:

  • In this design, they adhere to the principle of starting work with mobile permission. The layout for the smartphone is created in the size of 460 × 960 px.
  • The size of the layout for the tablet is 768 × 1024.
  • The size for a laptop is 1280 × 802.
  • The size for the PC is 1600 × 992.

In the mobile version of the site should be maximizedsimplified, while retaining all the main functions. If the layout is prepared for an online store, with all the simplicity in use, it should have a main description, a catalog of goods, the possibility of ordering, a basket, etc. - all the necessary elements for a full-fledged operation, as well as in full-screen viewing on a PC. Convenience of the mobile version is that you can avoid unnecessary pages, to save time when downloading.

In adaptive content using html code, you canhide some elements in which there is no strong need. Suppose, at high resolution, the site displays a commodity card with its description, price, delivery information and the possibility to add to the shopping cart. In mobile resolution, the process is simplified to photos, prices and "buy" buttons.

In the medium and minimum resolutions, adaptive design should take into account the convenience of reading and viewing by the user.

All screens


The goal of adaptive design is to createflexible layout, or as it is commonly called: "rubber template". The bottom line is not the unique size of the page, but the proportional compressibility of the template for easy viewing on all devices.

It is built mostly on CSS.During development, control points of screen sizes are defined. Thus, the width of the remaining objects is determined. For this, the width of the page is specified by the css max-width property, depending on these criteria, the size of other elements is selected in percentage. For example, the block size on the main page is 600px, and the sidebar width (sidebar) is 400px, the content width is 60%, and the sidebar width is 40%.

There are several types of adaptive mock-ups. Each is selected individually, depending on the features and construction.


  1. A layout type that allows you to move blocks while reducing the screen resolution. On multi-column sites, additional blocks are transferred down the screen.
  2. When for each permission a separate template is worked out. This kind of adaptive design takes more time, but is the most convenient when reading.
  3. A simple design type, whose task is to scale all elements. It can not be called flexible.
  4. The panel type is convenient for use in mobile applications, when additional functions appear when changing the position of the screen itself.

Creating adaptive layers is just one part of the job. Adaptive images are a separate case, which has its own problems and methods for solving them.

One image should be clearly displayed on thedifferent screen resolutions. There is a problem here - how to make the picture always remain the same regardless of the resolution change. Enter a simple CSS code in this case is not enough.

Example: img {max-width:250px;} - here you should apply a method that limits the size of the container containing the image, not the image itself. This will look something like this: div img {max-width: 250px;}. This method solves the problem of making small images, but is not suitable for large illustrations.

Therefore, many developers preferUse javascript languages ​​that allow you to adapt any images without overloading the server. Javascript offers a large number of alternative scripts.

Pros and cons of adaptive layout

Positive sides:

  • The location of all elements is saved. This is convenient when the user is accustomed to the full version of the site.
  • Saving domains and addresses.
  • Full adjustment for other formats of permits.

Negative sides:

  • Functional flexibility is lost
  • Any informative overloads are fraught with a long run of the web resource, which causes many users to switch to faster versions.

Website creation

The structure of the site is divided into several sectionsand blocks. Traditionally, the layout consists of the top part of the site (caps), logo, menu, content block and the final part of the site (for example, detailed contact information). Consider how to make an adaptive site design from a simple template.

Website layout

Auxiliary tags for writing:

  • #wrapper - a tag that combines all elements of the template;
  • #header h1 - logo;
  • #header - header for menus and other important elements;
  • #content - block;
  • #colLeft - content size;
  • #colRight - sidebar (sidebar);
  • #footer - the final part of the site;
  • #media screen - sets the desired resolution.

When you write a site, these elements canmove in different ways depending on the need. For example, if the resolution is high, the menu can be displayed vertically. In the mobile version, the layout can be constructed in such a way that the menu will be moved in a horizontal position.

  • #viewport - A tag that allows you to save the text size in a smaller version of the design. It is located between the tags.
  • # max-width - to optimize the site, to avoid stretching at resolutions over 1000 pixels.

When you implement the layout, the jQuery library helps you when you need to change the style and structure of the blocks.

The difference between adaptive design and mobile version

mobile version

For a complete understanding, several explanatory examples should be considered, since the confusion between these two concepts is not uncommon.

It should be understood that the mobile version is an analogprimary site with a subdomain. The external submission of the site completely repeats the style and functionality, while its structure and content may differ from the main version, because the version is cut down to the necessary elements.

Adaptive design is optimal for all device resolutions. It has the ability to scale and display correctly regardless of viewing conditions.

These are two different site feeds around whichrelentlessly raging controversy, which of them is better. It is worth noting that they have not yet come to an unequivocal decision. Someone praises this design, pointing to a trendy trend and a lot of advantages. The mobile version also has several advantages, which are not peculiar to adaptive design. Therefore, you first need to understand the basic needs.


What is the mobile version of the adaptive design?

Versatility. In our time, with such furious growth of the market, it is simply necessary to submit information in a different way, satisfying the wishes of consumers. It is adaptive design that solves this problem.

Effective promotion in search engines. What can not be attributed to the main advantages of an adaptive device. Search engines prefer to give users adaptive sites.

Usability. Adaptive design is usually designed in the best design solutions, which is a pleasant presentation for the visual perception of users.

Ease and simplicity both in the implementation of the project, and in its use.

Good conversion rates. Since with the adaptive design of the opportunities for the display to become larger, the conversion itself increases.

Economical. It is relatively cheaper than creating and promoting a separate mobile version.

Pros and cons of the mobile version

Creating adaptive design in the mobile versionrequire universality and consistency. First of all, it is recommended to detail the terms of reference, which will certainly help to avoid unnecessary work and save time, as well as take into account the features of the server on which the site will be placed.

Mobile adaptive design has certain advantages and disadvantages.


  1. If there is a ready site, there is no need to develop a design for the mobile version from scratch. You can make only some corrections, freeing this model from the unrequired functional.
  2. Thanks to all possible simplifications, the mobile version is considered more speedy at downloads.
  3. The user sees the most important piece of information from all content.
  4. Fast implementation. There are plugins with which you can implement mobile adaptation, even if you do not know the tags and codes.
  5. The choice of search engines is more favorable to adaptive versions, because they require less time for analysis.
The urgency of mobility


  1. Not all mobile versions can matchmobile device permissions. The site, of course, will open, but not always the screen resolution is the same as the layout. Sometimes perfectly designed design for a smartphone can differ when opened in a tablet format.
  2. Mobile versions require separate paid domains.
  3. There are minor problems with the publication of content.If there are several versions at once, the content should be adjusted immediately for all formats. Submitting new material on the main site and copying it to the mobile version can be considered stealing. To avoid such a problem, you may have to prove the relationship of resources.
Website creation

Methods of implementation

Main ways of implementation:

  • After creating a layout design and layoutthere is a loading under the necessary sizes by means of a site of operators and the basic code. This is a classic method that is used to create medium and small versions (tablets, smartphones, etc.).
  • BootStrap - a simple and understandable set of toolsfor adaptation. Suitable for creating versions under Landing Page and other not very complex web projects. It gives a good opportunity to apply many different styles in the interface functions.
  • Responsive Grid System is a popular set of universal tools. It is easy to apply and does not require deep knowledge. Includes a wide variety of infographics.
  • GUMBY - CSS-framework can boast of flexible adaptability and excellent tools.
  • Cookies - allows you to implement adaptive images. Automatically accompanies files requested by the browser.
  • ExpressionEngine is another way to create adaptive images. Determines whether the device is mobile, able to change the images to the desired resolution.
  • ProtoFluid - provides fast prototyping. Suitable for all kinds of devices.