Responsive Web Design

For the first time, the concept of responsive web design ( eng. Responsive web-design from responsive architecture ) was introduced by Ethan Marcott ^[2] in one of his articles in May 2010 ^[3] . Subsequently, he released a book entitled "Responsive Web Design" dedicated to this technology ^[4] .

Jeffrey Zeldman proposed to expand the concept of Ethan Marcott to cover any approaches that provide a clear visual perception, regardless of the characteristics of the screen and other restrictions of the user device ^[5] .

On the other hand, Aaron Gustafson has published Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement ^[6] , which considers progressive enhancement ( unobtrusive JavaScript ) as an important component of responsive design.

As a result, among web designers, they began to understand adaptive design ( English adaptive design , not to be confused with English adaptive layout ) as a broader concept that includes responsive design (as one of the implementations of adaptability) and gradual improvement ^{[7] [8]} .

The main reasons for the emergence and development of adaptive web design technologies are:

• an increase in the number of different device resolutions from which it is possible to access the Internet;
• the popularity of mobile devices with Internet access and the increase in mobile Internet traffic;
• recommendations of search engines Yandex and Google (lack of duplicate pages and concentration of link mass on one domain).

in responsive design ^[9]

• application of a flexible layout based on a grid ( English flexible, grid-based layout );
• use of flexible images ( English flexible images );
• work with media queries ( English media queries );

in addition to this in responsive design

• applying gradual improvement;
• design for mobile devices from the earliest stages ^[10] .
• smoothly rebuild blocks in a responsive design when changing the screen size (for example, when you rotate the tablet)

Mobile First ( first)

Design starts with a responsive mobile website. At this stage, designers seek to correctly convey the meaning and basic ideas using a small screen and just one column. The content, if necessary, is reduced by removing secondary information blocks and leaving the most important ^[11] .

To illustrate the suitability of this approach, we can quote a former developer of mobile applications for Facebook :

Initially, I considered the mobile web application only as an auxiliary service for facebook.com, but when I got acquainted with the platform, I quickly became convinced that you could create a version that would be much better than the main site! (Joe Hewitt)

Original text

My goal was initially just to make a mobile companion for the facebook.com mothership, but once I got comfortable with the platform I became convinced it was possible to create a version of Facebook that was actually better than the website! (Joe Hewitt)

- Joe Hewitt, iPad

This approach is not a prerequisite, but its advantage is a smaller code size, due to fewer media queries and increased emphasis in design at low resolutions.

• Bootstrap

• Ethan Marcotte. Responsive Web Design. - A Book Apart, 2011 .-- 143 p. - ISBN 978-0-9844425-7-7 .
• Ethan Marcott. Responsive Web Design = Responsive Web Design. - M .: Mann, Ivanov and Ferber, 2012 .-- 159 p. - (Actual books for those who create sites). - ISBN 978-5-91657-385-5 .
• Luke Wroblewski. Mobile first! = Mobile first. - M .: Mann, Ivanov and Ferber, 2012 .-- 176 p. - ISBN 978-5-91657-388-6 .
• Ben Frain Responsive Web Design with HTML5 and CSS3. - Packt Publishing Ltd, 2012 .-- 324 p. - ISBN 9781849693189 .
• Aaron Gustafson. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. - Easy Readers, 2011 .-- 144 p. - ISBN 978-0-9835895-0-1 .

• Gallery of sites based on adaptive web design (Spanish) . Date of treatment January 13, 2012.
• Ryan Boudreaux. What is the difference between responsive vs. adaptive web design? (eng.) . Date of treatment September 3, 2014.