We all know how responsive designs have benefited us! The impact is such that some clients have started refusing to pay if their transaction is held up for extra time. Whenever something new comes up, myths about that get generated. It's in human nature to create rumors so as to affect the common people.
Myths are a waste of time. They prevent progression. ~ Barbra Streisand
These misconceptions can be one of the biggest barriers while planning, scoping, estimating, and executing your next responsive project. So, here is our effort to bust 8 common responsive web design myths:
#1: Responsive design has to be all about mobile:
It may be a fact that the sudden growth of the mobile web is the actual reason why the idea of responsive design came to life. But we also have to take into account the different levels of users involved whenever we are working with responsive websites. We need to take into account the device a user can use (whether it's a mobile or a desktop or even, a TV); we need to consider their locations and the approach they have while accessing the particular web design. If your users are relaxing and playing beach volleyballs, then it will not matter how well your content is if the page takes an eternity to load itself.
Content matters, but what matters more is how you approach towards presenting it to the user. Think about the resolution, layouts, and text sizes and in whichever way you can, please give a thought on increasing the performance of the design. It's not all about mobile. Context shifts, and so it's really important to maintain all the other aspects of a website while designing and developing it.
#2: You can't get a responsive design for each and every use case:
Use cases matter, a lot. A design is not responsive if it can't take into account each and every use case. The website should work for anyone in any situation, and that ‘any' includes ‘everything'.
#3: Your device breakpoints matter in responsive designs:
Most developers nowadays have this style of developing websites where they scale the resolutions down to fit those of particular devices. This is wrong! If a design is being claimed as a responsive one, then one has to make it accessible for all devices, not just some particular ones.
Developers need to be aware about having some king of framework to work with, which will help them to deal with breakpoints. Better still, build your own framework. Get yourself a few wireframes in order to get a general idea about the whole thing, and then get started off with putting down the pixels. Creating a live prototype maybe one solution. In fact, if you do that then you can also add breakpoints after creating yourself a fluid mockup.
#4: Typography gets harmed due to responsive designs:
This is one big flaw associated with many responsive websites. Most often in these cases, the typography is not taken care of properly as the developers think more about the device than the design. This is not the approach for building a responsive website. You have to think about the user who is the ultimate consumer of the content your website contains. The content should be readable. If you throw the typographical aspects of your website to the dogs, then the website loses half its meaning and intent.
Try using relative units to ensure readability of your website contents. Font-size, margins, padding and layouts need your attention. Proportionate your layouts properly, the rest will fit in. Remember, the user is the king. Focusing on a particular design will not take you far. Focusing on the general user will.
#5: Content gets hidden in responsive designs:
This is a really absurd myth; probably the most absurd of all. The whole idea of responsive design is to make the websites accessible to all. Then why should anyone give any thought to hide contents? Hiding content is seldom a brainwave. Most importantly, if you have to hide content, then what was the point in putting it in the website?
It's not a good idea to hide content in a design where you have used your imagination in order to come up with a decision. It's likely that because of your unnecessary assumption, a user somewhere in this big wide world is up to his neck in trouble. Mostly these assumptions are done in the navigation areas of a design. A better way to approach the whole thing is to get the idea of hiding content away from your head while you are sitting down to build a responsive design. Accessibility is all that there is to it.
#6: A Heavy page load makes these designs slower than others:
This is a very thin ice to walk on. Is it really the methodology at fault here, or is it the person who implemented it? One always ends up blaming the other, as such giving rise to a transparent argument. There are several sites which are built on the idea of responsive designs. They provide a desktop experience to all their users, no matter what device they are using. But in case the users use a mobile, it takes the page a little while longer to load. But this is not the actual point of the whole thing. Not only will the page lose some properties while taking a longer time to load on a mobile device, it will also result in the user visiting some other site instead.
This can never be blamed as a methodology issue. If a programmer writes a bad program, you can't blame the computer language for that. Similarly, the person implementing the methodology is actually at fault here. Ensure that you have performance considerations listed in your list of requirements while you are building a website.
#7: Universal image optimization is required for all screens:
Let us use the example of Foundation to explain this issue. The framework you work with, while developing a responsive design, is not built to work well with images which are larger than the container size. You need to tone it down so that it fits inside the grid. You have the background size property to scale down background images. In practice, even large images are toned down to fifty percent of their original size on new-age devices.
A media Query, in order to load large images uses a pixel ration of 2. This way, it tones down the size to fifty percent. As a result for retina displays, an absurdly large image only gets loaded on the retina. These may not be perfect ways, but nonetheless they are hugely effective in implementing the basic idea behind building responsive designs.
#8: Make the design universally acceptable by testing it on all kinds of devices:
This is just reiteration of the mantra of Responsive Designs. It's “Design for all”. This doesn't mean that one has to literally test their designs on each and every device available in the market. That's neither a practical, nor a feasible solution. Just one brand has around a hundred devices in the market, and even then, each has variations.
Small samples are the solution. Test on a select few such that all the basic aspects get covered.
Read more: 8 Common Responsive Web Design Myths Busted
