You love responsive design, right? Of course, you do. The way a responsive website fits different screens and browsers is just magical. You feel great when you see how different elements of the website changes positions, some elements appear or disappear magically depending on the screen size but there are some downsides of responsive design that we should not overlook as well.

By taking a close look at the shortcomings of responsive web design, we will be able to make the websites more intuitive and users friendly. So friends let’s get started.

# To Hide or Not to Hide

The above code looks familiar, right? Well, it does and web designers use this CSS property to hide those elements that we deem unnecessary.

But problem is that designers find it really hard to identify design elements [they have themselves placed on the desktop version of the website] that they think unnecessary. We hope you can identify the dilemma of a web designer here.

“If you think these elements are not that important, why on earth you have used them in the first place?” – you might be confronted by questions like this.

So, you have to be very careful while hiding elements for the mobile version of the website because it might get you into tough spot. Make sure you have explained it to client properly before hiding a single design element.

The ideal approach maybe – Mobile First Approach. In this technique, designers start with the mobile version of the website first and then start adding different designing elements as the screen size increases.

# Multiple Prototypes

Previously web designers had to create just one standard prototype of the design in Photoshop and then they used to send that mockup to the client. Based on the feedback of the clients, some changes were made in the design. Basically, designers had to deal with desktop based users interface as people used to develop spate website to target mobile devices.

But things have changed dramatically with the rise of responsive design. Responsive design is basically rearranging different designing elements and squeezing template depending on the screen size and that means, we are not going to design multiple mockups to target multiple devices or screen sizes.

This may seem straightforward but explaining the idea to client is a huge pain. As most clients are not tech savvy, designers might have to face difficulty to explain how the design will look like in a mobile device or a smaller screen.

Now, you might be wondering how to fix this issue. Well, the answer is working hard. First design different prototypes for the desktop version of the website and get one them approved by the client. Once it is approved, you need to design two prototype again for two different screen sizes – ideally one for a smartphone and another one for a Tablet device.

Too lazy to design three different prototypes? Well, you can fall back on the old and trusted pen and paper. Sketch three different versions in pen and paper and send them over to clients so that they can have a fair idea of how the website is going to render in a mobile device.

# Navigation

Navigation has to be simple but some web designers think otherwise. The trend is quite obvious in responsive web design segment. Some designers are now even hiding the top navigation; rather they are using an icon represented by three Bars surrounded by a square block.

This is not helpful for users who are not that much tech savvy. Most people would bounce back eventually as they might fail to locate the navigation hidden under the aforementioned Icon.

At 9Leafs, we are against this practice. We believe that the interest of the customer is well served by keeping the navigation clean and easily accessible. Rather than making experiments with the navigation, we all should stick to the old and ‘boring’ [sarcasm] top navigation.

But there is a small problem with this technique. As the screen gets smaller, you will find it hard to keep all the individual menu items in a single row. The solution to this problem is – create a two rows based navigation for the smaller screens and it will fix the problem.

Or you can hide some not-so-important menus from the top navigation so that the template can fit the screen size.

# Long Testing Period

Since you are going to serve the same template to multiple devices and screen sizes, it means, you will have to test the website for a long period of time. You will have to check a single website on multiple devices and fix things carefully so that the changes in the code don’t interfere with the website’s rendering process on another device.

Yup, we understand this is a tedious and tiring process but we will have to do it to ensure that the website is getting rendered seamlessly and perfectly on all possible devices.

Moreover, you just can’t different designing elements on the interface wherever you like because you will always have to keep in mind that you will have to reposition all those elements later so that the design does not look clumsy when accessed from smaller screens.

# Images and Icons

You can’t use too many images when you are designing a responsive website as this will spell disaster. Allow me explain why. Since we are not developing a different version of the website for the mobile devices, use of too many images in the design can have adverse impact on the loading time of the website. Moreover, not all mobile devices have good processing power and that means, your website might become unresponsive in some cases.

The best way to deal with this problem is by using fewer images. Clever use of CSS3 elements like – CSS gradients or use of solid colours can help fix this issue.

Use solid colours rather than images to deck up your website. This will twin benefits –

• Firstly, your website will look great and elegant.
• Secondly, your website will load faster.

# Internet Explorer

Okay, IE sucks. Are you happy now? But there are some people, good many of them, who still love Internet Explorer. Now, as you are aware of, older version of Internet explorer does not offer any kind of support to CSS media query and that means, your responsive website is going to crash-land on this browser.

Now, the number of people who are still using Internet Explorer 6 or 7 is very low and therefore, we can assume that you can ignore them fairly easily.

But if you are a righteous person and don’t want to make anybody feels left out, you need to give polyfill a try. A guy named Scott Jehl created this respond.js file to help fix the issue of old browsers. You may want to read this amazing conversation on how to make Media Query work on bolder browsers.

# To Scroll or Not to Scroll

Infinite scrolling is immensely popular these days and this might make some web designers think whether they should embrace Infinite scrolling while designing a responsive website. From the perspective of a mobile user, infinite scrolling seems a very good idea. Users will not have to click on the links to be able to go to next page but there are some drawbacks as well. If you make the design too long, it might make the website crashed as most mobiles don’t have enough processing power to render a heavy website.

So, make the website less heavy and it will fix the problem. Take a look at the codes and make sure that you have removed all the redundant codes as this will help the website load faster. Hide all the elements that seems unnecessary for the mobile devices.

Resources for Further Reading:

• Natda, Kailashkumar V.“Responsive Web Design.” Eduvantage 1.1 (2013).
• Harb, Eva, et al.“Responsive Web Design.” (2011).
• Prototyping Tools for Responsive Web Design
• Blackmon, Marilyn Hughes, Muneo Kitajima, and Peter G. Polson.“Tool for accurately predicting website navigation problems, non-problems, problem severity, and effectiveness of repairs.”
• Weideman, Melius, and Mongezi Mgidana. “Website navigation architectures and their effect on website visibility: a literature survey.”
• Stout, Glenn A. “Testing a website: best practices.”