Cover Image

Responsive web design

Responsive web design is a special technology for creating websites that automatically adapt to any screen size. Synonyms: responsive, responsive, adaptive. The main principle is the ease of perception of information, regardless of the device from which the user came to the site. At least from a mobile phone, at least from a TV connected to the Internet. At the same time, you do not need to create a separate version of the site for each device.

In contrast to the ancient "rubber" layout in RWD solved a number of special tasks, such as changing not only the width of the blocks, but also directly the pictures and videos on the fly, which previously was simply not available. Thanks to new technologies and modern browsers, this process is now possible and available to every webmaster.

In addition, Responsive web design takes into account such things as: the orientation of the device, hiding some non-essential parts of the site, providing easy-to-click links on the touch screens of mobile devices, geolocation, etc.

The task of adjusting the site blocks to the desired screen size is solved by the so — called Media Queries-a special set of rules from the CSS Arsenal, which prescribes the width and height of the browser window, screen resolution and orientation in space (portrait or landscape). Rather, in the styles prescribed several such sets, taking into account different options for placing blocks. For example, on a large monitor, the site has 3 columns (content + 2 sidebar), and on the iPad in the vertical orientation of the columns will be only 2, and the third will either crawl into the horizontal plane under the cap, or will be hidden as not very important.

Personally I'm more interested in the issue of changing images, that is, on the fly. After all, for a web designer, this feature is crucial when creating a layout of the future site. It is necessary to foresee in advance how exactly this or that picture will change (and whether it will change at all), whether it is necessary to make several variants of the picture in advance, or it will be rendered on the move. The idea here is quite simple: for images you need to use the {max-width: 100%} property and then they will not go beyond the parent block, even if this block is smaller than the image itself. The image will be proportionally reduced.

In fact, the same approach is applicable to other objects: flash, video, other:

img,

embed,

object,

video {

 max-width: 100%;

}

Very simple and convenient.

Another important thing is links. It is very inconvenient, and sometimes impossible to get a finger on a text link on a mobile phone with a touchscreen. Therefore, the web designer should foresee the replacement of typical links with large buttons. For example, the well-known text link "read more" on the blog. That is, for mobile phones to make the referring of the easy button.

Thus, the task of the web designer in terms of adapting sites to different devices is to draw several display options in advance, taking into account the size of the screens and their orientation. The number of such options will not be endless, as it may seem at first. Sets of rules in Media Queries just limit this number of conditional determinants "if": if the window width is less than t, then apply such a set, if less than mmm, then so-and-so. Etc. it is necessary to Proceed, naturally, from the contemporary realities in the market of mobile devices. In fact, the game has only three participants: tablets, smartphones a La iphone and mobile phones with small screens. Thus, the website design options will need to be adjusted to the most typical screen sizes of these devices. For example, less than 1000px, less than 700px, less than 480px.

 

Service that allows you to quickly check the site for adaptability online: www.responsinator.com

 

About

The website provides an opportunity to reach out to a wide audience, but a well thought-out website will turn visitors into customers and fans of your products, services or brand. We offer you our help, which will give you the knowledge and skills to build a successful career in web design.

Tags