Adaptive website design refers to a convenient system for displaying the same site on different types of devices online. In simple terms, this is the ability to view one web page on a laptop, in a smartphone and other gadgets.
Web adaptability has become a necessity since the time when people had gadgets of various formats with access to the Internet. Companies, online stores and even just informative websites strive to please their audience by adapting to it in every possible way. Responsive design solves the problem of convenience, therefore, is an indispensable working element.
Responsive Web Design Features
Convenience of design is characterized by several basic criteria.
- The size. The responsive design of the site should have slight differences when displaying the page on various devices, so the sizes of images, text and other viewed elements should correspond to the sizes of the devices themselves. To do this, web developers adapt the design so that it has several viewing versions.
- Adaptation of content. The material filling the site (images, videos and other multimedia elements) must also correspond to the required screen resolutions, without losing the quality of the display.
- Design flexibility. The inclusion in the development of elements that allow you to quickly adjust the design of the site when changing the viewed web page. For example, the user flips the page up and down, navigates through different sections or changes the position of the screen from vertical to horizontal and vice versa.
- Simplification of elements depending on the device for more convenient use.
- Hiding minor blocks on smaller screens.
The basics
Site building is definitely associated with programming languages, because they simply can not do without. 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, font, alignment, indentation, background elements, shapes, etc. HTML is responsible for the overall content and structure of the site. Thus, the construction of the web resource in the aggregate of the two most important methods of description.
CSS, in turn, is an indispensable tool in design. It has a large set of features that are superior to HTML:
- Provides unity of design with a large number of pages, the appearance of the site and controls the display of HTML documents.
- It makes it possible to engage in design and content design at the same time.
- Applies several styles and the ability to view on different devices.
- Carries out complex design decisions.
- It is characterized by high speed.
To develop a site you need to know some basic concepts.
The CSS selector is indicated by the name of the style that defines the properties and formatting options. It tells the browser which specific element the properties are applied to.
A property is a structural unit. It determines the external parameters (size, location, color, shape, etc.) and is expressed in a specific code.
There is a set of specific CSS properties that describe a single object in appearance and layout.
Together, these elements form the following scheme:
Selector {property1: value; property2; value}.
Dimensions and layout resolutions
Design development begins with the preparation of the layout in Photoshop or other graphics programs. For convenience, special markings of the modular mesh are introduced into the canvas, special indents are observed. Thus, the web designer shows the layout designer the principles of structuring the future site and the correct arrangement of web elements.
Resolutions and sizes of adaptive web design of the main types of devices:
- This design adheres to the principle of starting work with mobile resolution. 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 the laptop is 1280 × 802.
- The size for the PC is 1600 × 992.
In the mobile version, the site should be as simplified as possible, while retaining all the main functions. If the layout is prepared for an online store, with all the simplification in use, it should have a main description, a catalog of goods, the possibility of ordering, a basket, etc. - all the necessary elements for full functioning, as well as for full-format viewing on a PC. The convenience of the mobile version is that here you can avoid unnecessary pages to save time while loading.
In responsive content using html code, you can hide some elements that are not really needed. Suppose, at high resolution, the site displays a product card with its description, price, delivery information and the ability to add to the "Cart". In mobile resolution, the process is simplified to photos, prices and the buy button.
In medium and minimum resolutions for adaptive design, the convenience of reading and viewing by the user should be taken into account.
Layout
The purpose of the layout of adaptive design is to create a flexible layout, or as it is customary to put it: “rubber template”. The point is not in the unique page sizes, but in the proportional compressibility of the template for easy viewing on all devices.
It is mainly built on CSS. During development, control points of screen sizes are determined. Thus, the width of the remaining objects is determined. To do this, the page width is set by the css max-width property, depending on these criteria, the size of other elements is selected in percentage terms. For example, the block size on the main page is 600px, and the width of the sidebar block (sidebar of the site) is 400px, respectively, the content width will be 60% and the sidebar width will be 40%.
There are several types of responsive layouts. Each is selected individually, depending on the features and construction.
Kinds:
- A type of layout that allows you to transfer blocks while reducing screen resolution. On multi-column sites, additional blocks are carried down the screen.
- When a separate template is worked out for each resolution. This kind of responsive design takes more time, but is the most convenient when reading.
- A simple type of design whose task is to scale all the elements. It can not be called flexible.
- 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 only one part of the job. Adaptive images are a separate case that has its own problems and methods for solving them.
One image should be clearly displayed at different screen resolutions. There is a problem - how to make sure that the picture always remains the same, regardless of the change in resolution. Introducing simple CSS code is not enough in this case.
Example: img {max-width: 250px;} - here you should apply a method in which the size of the container containing the image, and not the image itself, is limited. It will look something like this: div img {max-width: 250px;}. This method solves the problem of layout of small images, but is not suitable for large illustrations.
Therefore, many developers prefer to use javascript languages, which allow you to adapt any image without overloading the server. Javascript offers a large number of alternative scripts.
Pros and cons of adaptive layout
Positive sides:
- The arrangement of all elements is saved. This is convenient when the user is used to the full version of the site.
- Saving domains and addresses.
- Full adjustment for other permission formats.
Negative sides:
- Lost functional flexibility
- Any informative overload is fraught with a long launch of a web resource, which forces many users to switch to faster options.
Website creation
The structure of the site is divided into several sections and blocks. Traditionally, the layout consists of the top of the site (heading), logo, menu, content block and the final part of the site (for example, detailed contact information). Consider how to make a responsive website design from a simple template.
Helper tags for writing:
- #wrapper - a tag that combines all the elements of the template;
- #header h1 - logo;
- #header - a header for menus and other important elements;
- #content - block;
- #colLeft - content size;
- #colRight - sidebar (side column);
- #footer - the final part of the site;
- #media screen - sets the desired resolution.
When writing a site, these elements can move in a different order depending on the need. For example, at high resolution, the menu may be displayed vertically. In the mobile version, the layout can be built in such a way that the menu will be advanced in a horizontal position.
- #viewport is a tag that allows you to save text size in a reduced version of the design. It is located between the <head> tags.
- # max-width - to optimize the site, which avoids stretching at resolutions over 1000 pixels.
When implementing typesetting, the jQuery library helps a lot when you need to change the style and structure of blocks.
What is the difference between responsive design and mobile version
For a complete understanding, several illustrative examples should be considered, since confusion between these two concepts is not uncommon.
You need to understand that the mobile version is an analog of the primary site with a subdomain. 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 trimmed to the necessary elements.
Responsive design is optimal for all device resolutions. It has the ability to scale and correctly displayed regardless of viewing conditions.
These are two different feeds of the site, around which disputes rage relentlessly, which of them is better. It is worth noting that an unequivocal decision has not yet been reached. Someone praises such a design, pointing to a fashionable trend and a lot of advantages. The mobile version also has several advantages that are not characteristic of adaptive design. Therefore, to begin with, you should understand the basic needs.
Benefits
What is the mobile version superior to responsive design?
Universality. Nowadays, with such a frenzied growth of the market, it is simply necessary to submit information in a different way, satisfying the wishes of consumers. It is responsive design that solves this problem.
Effective search engine promotion. What can not be attributed to the main advantages of an adaptive device. Search engines prefer to give users responsive sites.
Usability. Responsive design is customarily designed in the best design solutions, which is a pleasant present for the visual perception of users.
Ease and simplicity both in the implementation of the project and in its use.
Good conversion rates. As the responsive design of the display opportunities becomes greater, the conversion itself increases.
Profitability. It is relatively cheaper than creating and promoting a separate mobile version.
Pros and cons of the mobile version
Creating responsive design in the mobile version requires versatility and consistency. First of all, it is recommended to write down the technical specifications in detail, which, of course, will 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 hosted.
Mobile responsive design has certain advantages and disadvantages.
Pros:
- If you have a ready site, there is no need to develop a design for the mobile version from scratch. You can make only a few amendments, freeing this layout from unnecessary functionality.
- Thanks to all sorts of simplifications, the mobile version is considered to be faster at downloads.
- The user sees the most important piece of information from all content.
- Quick implementation. There are plugins with which you can implement mobile adaptation, even if you don’t know the tags and codes.
- The choice of search engines is more favorable to adaptive versions, because they require less time for analysis.
Minuses:
- Not all mobile versions may match the permissions of mobile devices. The site, of course, will open, but the screen resolution does not always coincide with the layout. Sometimes a well-designed smartphone design may differ when opened in tablet format.
- Mobile versions require separate paid domains.
- There are minor issues with publishing 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 may be considered theft. To avoid this problem, you may have to prove the relationship of resources.
Implementation methods
The main implementation methods:
- After creating the design of layouts and layout, loading to the required sizes occurs using the operators website and the main code. This is a classic method that is used to create medium and reduced options (tablets, smartphones, etc.).
- BootStrap is a simple and understandable set of tools for adaptation. Suitable for creating versions for Landing Page and other not very complex web projects. It gives a good opportunity to apply many different styles in the functions of the interface.
- The Responsive Grid System is a popular set of versatile tools. Easy to apply and does not require deep knowledge. Includes a wide variety of infographics.
- GUMBY - The CSS framework boasts flexible responsiveness and great tools.
- Cookies - allows you to implement responsive images. Automatically accompanies browser-requested files.
- ExpressionEngine is another way to create responsive images. Determines whether the device is mobile, capable of changing images to the required resolution.
- ProtoFluid - provides rapid prototyping. Suitable for all kinds of devices.