This page has been robot translated, sorry for typos if any. Original content here.

5 golden rules of "responsive" web design

5 золотых правил «адаптивного» веб-дизайна

In May 2010, Ethan Marcott, in his article for "A List Apart", wrote the concept of responsive (responsive) web design, thereby initiating a new direction.

The article attracted the attention of a wide audience that forced the author to write a whole book on the adaptation of design.

A detailed description of the layouts based on the grid, flexible images and work with media queries has radically changed the process of creating beautiful sites.

Since then, responsive web design has become one of the most discussed topics in the design community.

Content Oriented Design

Before picking up a pencil or opening Photoshop, it seems appropriate to equip content with a strategy. It is necessary to make a certain idea about the content intended for a specific site. After all, there is no point in launching a website, without being aware of the nature of the material that will be placed on it.

5 золотых правил «адаптивного» веб-дизайна

With the availability of content, it is already possible to experiment with how everything will look like - to build a framework for the content. This term was suggested by Stephen Hey in the Responsive Design Workflow book, which implies the use of basic rectangular blocks to create a layout for content.

This technique is ideal to demonstrate the basic layout of the main patterns. The main components of navigation, hidden navigation elements, page footer and secondary modules. First, a frame is created, without undue detailing - additional elements will be added later.

Then you need to think about "adaptive" control points. For content generated as part of the content strategy, a simple single-column layout designed for mobile devices will do. It is better to do this in the browser using basic HTML elements, but more about this later.

By limiting the design to one column, you can already think about the hierarchy of content on the page. What is the most important information component of the page? Where should be the main call to action? Does it make sense to read the page from start to finish?

After drawing up the required order of presentation of information, it seems appropriate to expand the outline of the content, but not to such an extent that the content seems too stretched. It is necessary to fix the width. This will be the first reference point.

And after correcting the layout of the page to match the new width, adding a column, for example, for the sidebar.

Browser Design

It’s important to take into account that flat visual elements and Photoshop layouts make it too difficult to create a website design, providing a view of how the website will look depending on the browser settings.

5 золотых правил «адаптивного» веб-дизайна

But the final result almost invariably differs from the originally planned one. The expansion of the elements, the increase in the space around them and other nuances - all this affects the result.

The problem with visual elements is that they look too good. The images are clear, the typography is smoothed, the use of the shadow effect and blending modes turn the site into a work of art. But customer expectations should be commensurate with what happens in the end.

This will help the prototype, created using HTML and CSS (cascading style sheets), which can later be subjected to various manipulations. Show the client how the design looks on different devices and with different screen widths.

Do not worry about the fact that you may not be a magician of external interfaces, because there are tools that allow you to make prototypes (Macaw, Webflow and Adobe Edge Reflow). You can also use the advice of some developer, but it is believed that it is better to first learn the basics - this will help to get an idea about the process of building responsive web design.

One of the advantages of such a strategy is that the time required for making changes is reduced.

Suppose that there are 20 Photoshop (or Fireworks) layouts, each of which is in three versions (for desktop, tablet, and mobile devices), and the task is to update the style of buttons for a site, or navigation elements. This means that it is necessary to process 60 pages to change the style, in short, the work is very laborious.

But due to simple manipulations with CSS, such a change will need to be made only once - the updates will be applied to all available pages. In the long run, this will save time.

Among other things, it will be possible to test the capabilities of devices with different screen sizes. Most of the mentioned tools are substituted with the parameters already set for the viewing windows, but the opportunity is available to export your own design and adjust it to a specific browser. Thus, it is possible to convey the desired mobility experience.

Pattern Library Development

One of the key features of almost all RWD projects is the style guide. It usually includes the basic styles for the project and the interactive positions of all modules.

5 золотых правил «адаптивного» веб-дизайна

At this stage, it is necessary to determine each of the patterns of interaction experience.

Fireworks uses symbols and styles for common components and modules. For a good design, it is necessary to illustrate how each of the modules will be adapted to the selected control points.

Developer Brad Frost proposed the concept of Atomic Web Design, to describe it, he uses partly scientific terminology. The main styles of the brand, he calls the atoms that form the foundation of design. Things like color, font, and icons correspond to basic HTML elements to formulate “molecules.” Molecules are used to create "organisms." Take, for example, the search button. In this case, the input form and the label can be added to the button.

Then there is a mixture with other organisms to create "templates", for example, headings. In turn, the templates allow you to create pages already - and voila! You have Atomic Web Design.

This theory is applicable to the compilation of the pattern library structure. First, brand styles are created, and then they can be adapted to HTML elements, etc. Your library of patterns will be able to tell the story of the project - how the client brand has become a new look on the web. Developers need to add notes and program snippets related to a specific OSD option.

The pattern lab may turn into a changeable web design over time, as the transition from page design to system component design is made.

Versatility

When developing a design, it is impossible to predict every nuance of user experience, especially with regard to mobile devices. There are literally hundreds of different scenarios of how to use can access the site - all because of the huge number of smartphones and tablets, different screen sizes, resolution settings and type of data entry.

5 золотых правил «адаптивного» веб-дизайна

The design must adapt to any environment. The following are points that may be helpful.

Tested method

Most modern mobile devices are equipped with a touchscreen, so you need to consider the size of the interactive interface elements. There is no consensus about the ideal area of ​​the smartphone to click. Apple engineers choose 44px, people from Microsoft claim 34px is better.

Perhaps using 48px seems more practical when designing interactive elements. For each region, at least 6px are left, and usually 12px - for the base level. In the era of general design and large size, many of today's sites leave a little more space for desktops. These expanded elements should also be used in forms - for simplicity and consistency with mobile devices. Some prefer to design their own advanced form fields to match the style of the site.

But in relation to mobile devices it is recommended to use “native” controls if possible. Keyboards and drop-down menus should be optimized for a specific device. And one more thing: remove the selection of the link when you hover the cursor for mobile devices.

Some adjustment can significantly expand the interaction experience. But nothing can be worse than repeatedly pressing the touch screen to perform a specific task. And all because of the omissions of the selection when hovering the cursor.

Navigation

One of the common questions that arise during the development of an “adaptive” website is how to organize navigation. For this there are a number of ways depending on the number of control points.

Jump links

One of the simplest and most versatile mobile navigation techniques is the jump link menu. This is essentially an anchor link that provides the user with a menu at the bottom of the page.

It does not require javascript or any other additional scripts that will provide universalization for all browsers and devices.

Drop-down list

Another common navigation pattern is a drop-down menu, when menu icons provide the ability to navigate with the addition of smooth animation. This technique requires javascript - to place the menu below the button and then hide it until the user needs it.

In some navigation elements for this purpose, the “Harmonica” graphic element can be used, this allows you to view the navigation levels without loading each of the pages.

No canvas

This method is perhaps the most popular in RWD, because sites are increasingly resorting to using applications. The social network Facebook with its mobile applications has become a pioneer; it gives web developers a chance to place the site navigation at the edge of the viewing window and move it at the user's request.

On sites like Teehan + Lax and Squarespace, the described technique is used as the only navigation method. It is believed that soon it will become a trend in RWD.

Task-oriented mobile versions of sites

Another important point that you should pay attention to when developing a mobile version is the location of controls at the top of the page. Over the "fold".

Developers are arguing that in the field of web design there is no such thing as a “fold”, recently there has been a huge number of new devices with various resolutions, which further complicates the task of determining the fold line of a specific site. Based on the size of the smallest device, it is possible to determine the so-called "safe zone".

For the reason that mobile device users are usually in motion and have limited time and bandwidth, it is important that the surface of any element of the “call to action” category (banners, etc.) is always located in the upper part of the screen, and the additional content - below.

A vivid example of this is mobile design for e-commerce, when many product pages contain, along with site navigation, the name of the product, price, images in miniature and calls to buy everything that is above the fold. Secondary content, such as product features and specifications, can be placed at the bottom of the site.

Achieving this is possible due to strict adherence to the content strategy and careful consideration of what the top of the site will look like in the application.

5 золотых правил «адаптивного» веб-дизайна

Performance

It is impossible to predict what device will be in the hands of the user, and what connectivity he will have. Therefore, it is necessary to create a design of an "adaptive" site, keeping in mind the performance. No one wants to spend time and wait, especially on the Internet. If the site does not load within a few seconds, the user can leave.

5 золотых правил «адаптивного» веб-дизайна

If the site has a good design and all other components are also in order, users will certainly come back to it. The main thing to pay attention to is to make the pages as light as possible. More than 60% of the "weight" of most sites are just images. The rest: scripts, style sheets and other media elements.

The easiest way to reduce the size of the site files is to export them directly from the graphics application. However, this is not enough. In particular, when PNG files are used.

Sites such as TinyPNG help reduce the weight of files, reset the ballast of additional data, and reduce color. These portals are a real find, and many designers add TinyPNG to a set of frequently used tools.

"Adaptive" images

In addition to reducing the size of pictures, it is sometimes important that different pictures are suitable for different devices. After all, huge images (hundreds of kilobytes) are not designed for mobile devices that have data limitations and poor 3G connectivity.

There are many scripts to help achieve this (Picturefill Scottle Jelphy and Adaptive Images), depending on the needs of the site and the capabilities of the server. But do not worry about it. Web designers usually provide for how the images will be adapted to different control points and devices and make appropriate adjustments. Ideally, a style guide or pattern lab.

Script truncation

The large size of the site may also depend on various scripts, such as Javascript and additional CSS style sheets.

Some may say that developers should be concerned about all this, and they will be right - but only partially.

If the compatibility of a site with a mobile device is at the forefront, then CSS and any other style sheets for large control points should be written accordingly.

The total amount of animation is that which requires constant monitoring. Animation in this case means everything that moves and requires writing scripts. Animation significantly increases the size of files.

For neophytes, who work on mobile sites for the first time, it is better to follow the path of least resistance first, limiting for the most part to static elements. If you need to add a beautiful slide - you can experiment a bit and see how it affects the performance of the site.

Feed content in small portions

A good way to reduce the size of files and thereby improve performance is to “cut” content in small chunks and provide it as needed when users ask for it. This is not about segmentation of all content, but only secondary.

There are many progressive techniques, for example, “load on scroll” - many social networks use it for news feeds - so users can download more content based on need (instead of randomly downloading more content when they click on the bottom of the page).

Another useful method that provides more detail and allows you to view more secondary information is to place content on the next page for mobile viewing. For example, you can put a neat link to go to the page where the information is more.

In conclusion…

The days when web designers had to take care only of combining content with color, typographic styles of web pages and other things, were irretrievably gone. The design world has undergone dramatic changes: now web developers are not hired, just to paint a detailed framework in a typical waterfall project.

It is necessary to take into account many points, to have an idea about the process of building a site and choosing priorities in relation to content that meets the requirements of the user. Everything is selected experimentally, only by transferring the theory to a practical plane, it is possible to understand all these nuances.

The web design industry is trying to keep up with the times and take into account modern realities when a huge number of mobile devices are being produced. It's time to expand the design horizon and make the sphere of web design a little better - for each electronic device.

In this post, five features of responsive web design were presented, but they are, of course, much more. And by the time when the reader will master this text, the list of various nuances will be replenished with something new.

Thanks rusability for the wonderful material.