3 disasters of responsive design and how to avoid them

Responsive design is quite in demand, as it allows you to deliver content for more devices without having to develop a separate version of the site and without any negative consequences for other methods, such as scaling and rubber layouts.



This article will highlight 3 main mistakes that developers make when working with responsive designs, and a few strategies for avoiding these mistakes.



Scalable, rubber and responsive layouts



These terms are often confused by designers and can be misused by replacing one with another. In truth, each of these terms is a separate stage in the evolution of the pattern technique, which was formed over time as technology developed.

')

Scalable layouts are designed to scale each element in relation to each other element. They are responsive in the sense that they scale content dynamically in response to resizing the viewport. The template itself remains static, changing the size of each element to maintain a uniform appearance.





Above: an example of a scalable layout with different resolutions: for the sake of homogeneity, the design sacrifices readability



Rubber layouts are different because they scale the elements of the container relative to the size of the viewport. This is achieved by using relative units of measure, such as em, to overcome the problem of text compression. The design can be broken if the user scales it.





Above: an example of a rubber layout on different resolutions: for the sake of readability, design sacrifices uniformity



Responsive layouts do not scale anything. Instead, they change the display depending on the size of the viewport.





Above: an example of responsive layout at various resolutions

Catastrophe 1: sliding menus

If you use the navigation bar at the top of the page, a responsive design can “collapse” it for a more compact view if the page is displayed on a small screen. But this does not always work if the display area is wider than the transition point, but too small to display all menu items in one line. The result is a sliding menu.





There are several ways to solve this problem. The first is to reduce the number of horizontally displayed elements of the navigation bar, dividing them into categories and subcategories. Then you can use the drop-down menu items to display subcategories when selecting a category.



The second way is to reduce the transition point. The actual number to use is the width at which your navigation bar no longer displays correctly, and not the specific size of the device.



The third way is to use different menus for devices, such as the “sliding drawer”.

Catastrophe 2: using fixed-width images

The size of the content zones is usually adjusted relative to the viewing area. Therefore, if an image with a fixed width turns out to be wider than the size of such a zone, the image is cropped.





Above: an example of a poorly matched image with a fixed width, which turned out to be too large: scroll bars appeared on it, and the content was pushed out of the screen



You can avoid this problem by using relative units of measure to set the width of the image, or if you use a template that supports it (for example, Bootstrap), you can use the responsive image class (for example, class = ”img-responsive”).





Above: the same element using the responsive image class approach: the scroll bar has disappeared

Disaster 3: distortion of the element

This disaster is a little less known, but this is what happens when your layout is displayed in a small window and the columns behave like rows. This is a problem, as content distortion inadvertently changes the hierarchy in your design.





Above: the column is turned into a row, distorting the content



The solution is obvious, although it is surprising why so many people struggle with it: just clearly set the height, width and indents of the element. If he moves from the spot and blocks other elements, you can force him to return to the spot by moving him to the divider and adjusting the fields.

Planning helps avoid mistakes

In this article, we discussed only the 3 most common disasters of responsive design that designers face, but there are still many ways to spoil a good design. Preventing mistakes is easy. Modern browsers have built-in testing for responsive layouts, so plan your design well and test it often.