Three misfortunes of responsive design and ways to prevent them Source
Scaling vs. rubber layout vs. responsive design. There are many misunderstandings related to these terms that are equally periodically committed by web developers. In truth, these terms mean the evolutionary steps in the development of web resource layout technology, which appeared simultaneously with the developments of electronic devices. Scalable templates work on the principle of resizing each element in relation to all other elements. Their “responsiveness” lies in the fact that they scale the content in response to changes in the size of the viewport. At the same time, the layout itself remains static, and only the size of each element is subject to changes, the appearance of the site will be the same, changing only in size.
The illustration shows a scalable template at various device resolutions. Design sacrifices readability in favor of template resilience. The so-called rubber design behaves differently because it provides for scaling the elements of the containers relative to the size of the viewport. This effect is achieved through the use in the development of a template of relative units of measure of the em type, which avoids the problems of compressing text information. The template itself can be modified if the user increases or decreases it.
The first problem. Offset menu items on the next line. If you use the navigation bar at the top of a web page, it is assumed that the responsive design will “roll” it to a more compact look when the page is displayed on a small display. However, this does not always work correctly in situations where the display area is still large enough to reach a control point (or a jump point to another, satisfying the size of the viewport template), but at the same time too small to display all menu items on one line. As a result, we have the transfer of some links to the next line.There are several ways to solve this problem. The first is to reduce the number of horizontally displayed menu items, which is achieved by grouping them into categories and subcategories. When a user selects a specific category, subcategories appear as drop-down menu items. The second method involves changing the value of the response of the control point in the downward direction. The real value that needs to be used in this case should correspond to the width at which your navigation bar starts to “fall” down, and not the one that is tied to the size of a specific device. The third option is to use different types of menus for different devices, for example, sliding panels (SlidingDrawer). The second problem. Using fixed-width images.
Content display areas are typically set relative to the viewport. And in situations where images of fixed sizes become wider than the available space, they are cropped.
An example of an unsuccessfully selected fixed image size that is too large. This leads to scroll bars and a shift of content beyond the visible area. This problem can be avoided by using relative units of measurement when determining the width of the image. And if you work with a framework that supports them (for example, Bootstrap), then it will be enough to add an image to the class that defines it as responsive (for example, class = “img-responsive”).
The third problem. Element distortion This trouble is even more insidious. See what happens when your template is displayed with a small viewport. Any incorrectly created column can behave like a string. And this is really a problem, since unintentional distortion of content leads to negative consequences that destroy your design.
The column turns into a string, disfiguring your content. The solution to this problem lies on the surface and it is surprising why this causes difficulties for many people. You just need to explicitly set the dimension of the element (width and height), which will avoid its deformation. If the element is shifted from its “standard” position and / or superimposed on other elements, then by placing the object inside the diva with the installation of fields, you can force it to remain in place in any situation. Planning ahead will avoid mistakes. This article discusses only the three most common misfortunes of responsive design, but there are many other ways to break your pattern. The fact is that the prevention of such problems does not require any special efforts from you. Most modern browsers incorporate responsive layout testing mechanisms. You are only required to correctly and regularly plan your design and identify its problems at the initial level.