Ethan Marcott's Responsive Web Design

Perhaps many of you have already read Ethan Marcott’s “Responsive Web Design” in the original. For those who have not yet done so, I have good news - this spring, the publishing house Mann, Ivanov and Ferber published this book in Russian under the name Responsive Web Design .

Why is it worth reading this book?

First, this thin book (only 176 pages) contains a description of the technology that has already become revolutionary. If we evaluate the impact that this book has had on the Web and the web development process, then it can be put on a par with such innovative books of previous years as: “WEB-design by standards” by Jeffrey Zeldman and “AJAX in action” .

Secondly, this book was written by Ethan Marcotte (Ethan Marcotte) - a man who came up with the very concept of responsive web design.
')
Third, in November 2011, Responsive Web Design was recognized by .net magazine as one of the top 25 books for web designers and developers .

What is responsive web design?

The term responsive web design (Responsive Web Design) was first used on May 25, 2010 in the article by Ethan Marcott of the same name published in A List Apart .

Responsive web design is a technology for creating web pages that provides the convenience of viewing them on various devices (stationary computers, laptops, tablets, smartphones, TVs with Internet connection (for example, through a game console), etc.) . The goal of responsive web design is the versatility of the HTML markup of the website for various devices. In order for a website to be conveniently viewed from devices of various resolutions and formats, it is not necessary to create separate versions of the website for each specific type of device using responsive website design technology.

Responsive web design is based on 3 principles:

1. Flexible grid-based layout (flexible, grid-based layout)
2. Flexible images (flexible images)
3. Media Queries (CSS3 media queries)

If you have already worked with a standard ASP.NET MVC 4 RC web application (Internet Application pattern), it means that you have already seen responsive web design in action. The pages of this web application can flexibly adapt to different screen sizes, and for screens whose width is less than 850 pixels (for example, screens of smartphones), special styles are used (connected using a media query):

Book structure

Now directly about the book. Responsive Web Design is a step-by-step guide to creating a responsive website. The author, using the example of the “ROBOT ... OR NOT?” Test website, shows step by step how to use a responsive website design technology to improve a website that has a fixed layout.

In the first chapter, the author talks about the reasons that led to the emergence of technology responsive web design, and its basic principles.

In the second chapter, the author shows how to make the page layout more flexible (rubber). Examples are given of how to correctly calculate the size of page elements in relative units (the size of the text should be given in em `ah, and the size of blocks, fields and indents in percent).

The third chapter deals with the technology of flexible images - images that can adapt to different screen sizes, and gives a number of ways to cross-browser implementation of this technology.

If you have previously read Dan Sederholm and Ethan Marcott ’s joint book “CSS Handmade” (namely, the 6th chapter “Rubber Grid”), then many concepts from the 2nd and 3rd chapter of “Responsive Web Design” will be yours are familiar.

The fourth chapter discusses the technology of media queries from the CSS3 specification and features of the use of the viewport meta-tag. The examples show how to use media queries to set styles that are targeted to specific types of devices. In addition, the author provides links to JavaScript libraries that provide support for media queries in older versions of browsers.

The fifth chapter lists problems that may arise when creating responsive websites. The classic responsive web design technology assumes that it is based on a desktop version of a website and then adapts to tablets and smartphones. This approach has one major drawback: mobile users have to download design elements that have been developed for the stationary version of the site, which leads to an increase in traffic and web load time. As a solution to this problem, it is proposed to take as a basis the approach of Luke Wroblewski , described in detail in the book “Mobile First” . With this approach, a mobile version of the site should first be created, and then styles and capabilities for devices with a large screen size can be added to it. Ethan Marcott also notes that responsive web design requires changes to the web development process. In fact, with responsive web design, the design and development stages are combined, and the process becomes more iterative, which requires closer interaction between graphic designers and front-end developers. At the end of the chapter, the author shows how responsive web design is combined with the concept of progressive enhancement (progressive enhancement).

The advantages and disadvantages of the Russian edition

The unconditional advantages of the Russian edition include: high-quality translation and the presence of color illustrations (still a rarity for technical literature published by us).

Perhaps, I found only one drawback of this publication - the incorrect use of quotation marks in the listings (instead of the "double" and "single" computer quotes the "Christmas trees" and "Marrow quotes" are used).