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

5 golden rules of "adaptive" web design

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

In May 2010, Ethan Markott in his article for "A List Apart" wrote the concept of adaptive (responsive) web design, thus launching a new direction.

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

A detailed description of the mesh-based layouts, flexible images and working with media queries has radically changed the process of creating beautiful sites.

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

Content-oriented design

Before you pick up a pencil or open Photoshop, it seems appropriate to arm the content strategy. It is necessary to make a definite idea of ​​the content intended for a particular site. After all, it makes no sense to run the site without realizing what kind of material the material will be placed on it.

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

If you have content, you can already experiment with how everything will look - to build a framework for content. This term was proposed by Stephen Hey in the book Responsive Design Workflow, which means using the basic rectangular blocks to create a layout for the content.

This technique is ideal for demonstrating the basic layout of the basic templates. The main components of navigation, hidden navigation elements, page footer and secondary modules. First, the frame is created, without excessive detailing - additional elements will be added later.

Then it is necessary to think about "adaptive" control points. For content generated within the content strategy, a simple one-column layout designed for mobile devices will do. This is better done in the browser, using basic HTML elements, but more about this after.

Restricting 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 the main call to action be located? Does it make sense to read the page from beginning to end?

After drawing up the required procedure for submitting information, it seems appropriate to expand the content of the content, but not to the extent that the content seems too stretched. It is necessary to fix the width. This will be the first checkpoint.

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

Design in the browser

Keep in mind that the flat visual elements and layouts of Photoshop too complicate the process of creating a website design, providing a view of how the site will look depending on the browser settings.

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

But the final result is almost invariably different from the originally planned one. Expanding elements, increasing the space around them and other nuances all affect the result.

The problem with visual elements is that they look too good. The images are clear, the typography is smoothed, the application of the shadow effect and blending modes make the site a work of art. But the customer's expectations should be balanced with what will result in the end.

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

Do not worry that you may not be a wizard 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 there is an opinion that at first it is better to learn the basics - this will help to get an idea of ​​the process of building adaptive web design.

One of the advantages of this strategy is that it reduces the time it takes to make changes.

Suppose that there are 20 Photoshop (or Fireworks) layouts, each in three versions (for the desktop, tablet and mobile device), and the task is to update the button style for the site, or navigation elements. This means that you need to process 60 pages to change the style, in short, the work is very time-consuming.

But thanks to simple manipulations with CSS, such a change will only need to be made once - updates will be applied to all available pages. In the long term, 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 already set parameters of the viewing windows, but you can export your own design and adapt it to a specific browser. Thus, it is possible to transfer the desired experience of mobility.

Development of a library of patterns

One of the key features of almost all RWD-projects is a style guide. It usually includes the basic styles for the project and the interactive provisions 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 module will be adapted to selected control points.

Developer Brad Frost proposed the concept of Atomic Web Design, for its description, it uses a somewhat scientific terminology. The main styles of the brand, he calls the atoms that make up the foundation of the design. Such things as color, font and icons correspond to the basic elements of HTML for the formulation of "molecules". Molecules are used to create "organisms." Take, for example, a search button. In this case, an input form and a 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 already create pages - and voila! You have Atomic Web Design.

This theory is applicable to the structure of the library of patterns. First, the 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 - about how the client brand began to look in a new way on the network. For developers, you need to add notes and program fragments related to a specific on-screen menu option.

After some time, the pattern laboratory can turn into a modifiable web design, as the transition from page design to design of system components is carried out.

Versatility

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

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

Design should adapt to any environment. Listed below are the points that can be useful.

Proven method

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

Perhaps using 48px seems more practical when developing interactive elements. For each area, at least 6px is left, and usually 12px is for the base layer. In the era of general design and large size, many of today's sites leave a little more room for desktops. These enlarged elements should also be used in forms - for simplicity and compliance with mobile devices. Some people prefer to design their own extended form fields to match the site style.

But for mobile devices it is recommended to use "native" controls if possible. Keyboards and a drop-down menu should be optimized for a particular 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 experience of interaction. But nothing can be worse than repeatedly pressing the touch screen to perform a specific task. And all because of the omission in the selection part when hovering the cursor.

Navigation

One of the most 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 techniques for mobile navigation is the jump link menu. This is essentially a link-anchor, which provides the user with a menu at the bottom of the page.

This does not require javascript or any other additional scripts, which will provide universalization for all browsers and devices.

Drop-down list

Another common navigation pattern is the drop-down menu, when the menu icon provides the ability to navigate with the addition of smooth animation. For this technique, javascript is needed - to place the menu below the button and then hide it until the user needs it.

In some navigation elements, a "Garnishka" graphic element can be used for this purpose, this allows you to view navigation levels without downloading each of the pages.

Without canvas

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

On sites like Teehan + Lax and Squarespace, the technique described is used as the only method of navigation. There is an opinion that in a short time it will become a trend in RWD.

Mobile versions of sites that are task-oriented

Another important point that should be considered when developing a mobile version is the location of the controls at the top of the page. Above the "fold".

Developers argue that in the field of web design there is no such thing as a "fold", recently there appeared a huge number of new devices with a variety of resolution, which further complicates the task of determining the fold line of a particular site. Based on the size of the smallest device, it is possible to determine the so-called "safe zone".

Due to the fact that users of mobile devices tend to be on the move and have limited time and bandwidth, it is important that the surface of any element of the category "call to action" (banners and stuff) is always located at the top of the screen, and additional content - below.

A vivid example of this is the mobile design for e-commerce, where many pages devoted to products 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 compliance with the content strategy and careful consideration of how the top of the site will look in the application.

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

Performance

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

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

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

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

Sites such as TinyPNG help to reduce the weight of files, reset the ballast of additional data and reduce color. Such 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 (for hundreds of kilobytes) are not intended for mobile devices that have data limitations and poor 3G connectivity.

There are many scripts that will help to achieve this (Picturefill Scotia Gelfi 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 how images will be adapted to different control points and devices and make appropriate adjustments. Ideally in the style guide or laboratory patterns.

Truncating the Script

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

Someone can say that the developers should worry about all this, and will be right - but only in part.

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

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

For neophytes, for the first time working on mobile sites, it is better to go first along the path of least resistance, limiting themselves to most of the static elements. If there is a need to add a beautiful slide - you can experiment a little and see how this will affect the performance of the site.

Submission of content in small portions

A good way to reduce the size of files and thereby increase productivity is to "cut" the content in small portions and provide it as needed when users are asked to do so. It's not about segmenting all the content, but only secondary.

There are many progressive techniques, for example, "load on scroll" - it is used by many social networks with respect to news feeds - so users can download more content based on the need (instead of accidentally loading more content when clicking on the bottom of the page).

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

In conclusion…

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

It is necessary to take into account a lot of points, to have an idea about the process of building a site and selecting priorities for content that meets the requirements of the user. Everything is selected experimentally, only by transferring the theory to the 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 produced. It's time to expand the design horizon and make the scope of web design a little better - for every electronic device.

In this note, five features of adaptive web design were presented, but there are, of course, many more. And by the time when the reader master this text, a list of all sorts of nuances will be replenished with something new.

We express gratitude to the rusability for the excellent material.