3 Responsive Design Disasters That You Should Avoid


Reliability upon responsive design has helped designers and developers in serving content to the audiences through the widest range of devices. This has helped them in delivering a seamless experience without the need to maintain separate versions for the website for different devices. Hence, this has eliminated the need to deal with the negative drawbacks caused due to traditional methods such as scaling and fluid layouts. With this blog post, we will be highlighting top 3 mistakes that most of the designers come across when dealing with responsive web designing and solutions for each of these mistakes.

Tug Of War: Scaling Vs Fluid Vs Responsive

When referring to these terms, designers often get confused, which ultimately leads to incorrect usage of them. In reality, these are intermediate steps for the layout technique that has grown eventually owing to the advancement in technology.

The scaling layouts have the purpose of scaling the elements. These are highly responsive as they scale the content dynamically as per the size change of the device being used. The layout remains static, only thing that changes is the size of elements so that the website seems consistent with the device it is being viewed over.

What makes fluid layouts different from others is the fact that they balance the container elements as per the device they are being viewed upon. Several relative units are being used to bring the effect such as ‘ems’ are used to overcome the shrinkage related problem. The user can scale the design to break it. In this case, readability is there but the consistency is missing.

In contrast to scaling and fluid layouts, responsive layouts do not perform any sort of scaling nor do they change the container size as per the size of viewport.

Disaster 1: Wrapping Menus

Most of the times, navigation bar at the top of page gets snapped in a responsive design. This is done so that it fits a compact format even when the page is displayed over a smaller screen. However, you cannot expect this to work perfectly in situations where even when the display area is wider than the break point, it still seems small enough to display the menu items within a single queue. What comes out as a final result is wrapping.

But wait, we have some solutions coming your way to solve this problem. The first way is to minimize the number of items that are being displayed horizontally on the navigation bar. This is possible when you sort them as per categories and sub-categories. Drop-down items can be further used for displaying the sub-categories under a selected category. An alternative is to alter the break point to a lower value. You can use a number that corresponds to the width at which the navigation bar begins to fail rather than a choosing a specific device size. Last but not the least, you should try utilizing a different menu for the devices, for instance a sliding drawer.

Disaster 2: Use of Images with Fixed Widths

In responsive design, the content areas are set as per a size that is relative to the device over which it is viewed. When an image with fixed-width is displayed over an area that is narrower than its size, it will get cropped.

However, this problem can be solved by making use of relative units for setting the width of image. Else, if you are using a framework such as Bootstrap, all that you need to do is to make use of a responsive image class.

Disaster 3: Distortion of Elements

This might seem difficult to understand but this is often experienced when your layout is displayed on a smaller screen. What happens is that all the unhandled columns in this case act like rows. This is mainly caused due to distortion of content that further changes the hierarchy of entire website design.

The solution is quite simple yet known to lesser people. All that you need to do is to set height, width, and padding of the web elements clearly. In case, the elements you might witness elements moving out of preset position and covering other elements. But, you can restrict it as where it is by wrapping it in a div and setting margins.

An efficient responsive website will not only help in keep the visitors happy but will ultimately lead to rise in conversions. For better conversions through your mobile website, read our post, “ Three Tips For High Conversion Mobile Experience“.

Responsive Design Disasters

Talk To Expert