Responsive web design is an advancement in webpage rendering technology that visually adjusts the layout of a website, depending on the size of the viewport. Even when you resize the width of your bowser window, a responsive site will adjust its content to fit the dimensions of the viewport.
A viewport is the device’s screen – which can range from monitors, smartphones, tablets, or smart TVs. It is achieved by using CSS3 media queries and is supported by modern browsers (supporting CSS3). The HTML structure of the website, however, is left unaltered.
This article discusses some of the apparent pitfalls of responsive web design. At face value, this seems like an instant solution to the problem of having to design separate websites for multiple devices. But not everything is picture-perfect. Let’s dig in.
1. Important Elements get Misplaced
We’ve established the fact that the content of the website is rearranged to fit the viewport. This means a full-width (horizontal) menu bar will most likely will turn into a drop-down one, with the menu elements stacked one on top of the other. Since the relative positon of each element is shifted, it may so happen that the important ones are undermined. For example, if you place the newsletter signup box on the right sidebar, in the responsive version of the website, it gets moved to the bottom, just above the footer. Result? You are reduce you newsletter sign up rate.
2. Slow Performance
The images used in responsive websites are visually scaled down. This means that a 600px image will be loaded, while its actual size on the viewport would be around 200px. This rendering and downsizing of image requires considerable computation power. Other element like certain JavaScripts that are not applicable to the responsive website is still downloaded. It also consumes more bandwidth and the loading time is potentially higher if not implemented correctly.
3. Significantly Higher Cost
The initial cost of a responsive website is quite high. Moreover if you’re developing a custom-coded website, implementing a proper responsive design framework would cost you a great deal. Nonetheless, it would be a good investment given the current trend of smartphone users.
The good news is, if you’re buying a WordPress theme from a theme marketplace like Themeforest or CreativeMarket, rest assured, all newer themes are responsive. The degree of responsiveness (adhering to best practices, etc.) would depend on the developer, but in general, all of them would perfectly fit mobile, tablet and large displays.
4. Porting to a Responsive Website is Exhausting
When you want to make a pre-existing website responsive, the cost would vary a lot. It typically depends on how well the HTML architecture was defined, the number of existing elements and the new functionalities required. In most cases, if you’re porting to a responsive website, you need to re-think the entire architecture of your website.
It is worthwhile to point out that investing in a good responsive site from the foundation, would bear fruit in the long run, specifically for e-commerce websites.
5. Hidden Information
Some web elements which require a minimum width of the viewport must be excluded from the responsive version of the website. This would depend on the width of the device. For example, if the minimum width for the front banner is 800px wide, then the element would only be visible in a PC or tablet it in the landscape view but the same element would be hidden in the portrait view of the tablet.
This is not necessarily a bad thing. Consider an ecommerce site for instance. When you view it from a desktop or laptop computer, they display promotional banners on the top. But when a user opens the site from a mobile device, it is more likely that he is one the move, and is looking for a particular product he wants to buy (or look-up). In this case, a design emphasis on easier navigation is necessary to enhance the user’s overall experience. Thus, the large promotional banner (which is your hidden element) is not displayed in the responsive version of the website. A user logging onto an online store on a mobile is far more likely to have a product in mind that they wish to (quickly) purchase over a desktop user who is more likely to have a browse around the site at multiple products and content before purchasing.
6. “Scroll, scroll, scroll your site, merrily down the screen”
The length of the page increases inversely with the width of the viewport. That means that the smaller the width, the longer the length. This leads to a lot of scrolling for long articles. Important points might get overlooked in due process.
7. Incompatibility Issues
The responsive nature of a website comes to effect only in CSS3, using a property called ‘media queries’. While the majority of browsers support CSS3, their previous versions are stuck at CSS2. In such devices, the desktop version of the site is rendered.
Conclusion
Responsive web design is a much needed revolution in the web designing industry. Its primary focus is improving user experience. Be it a 27” monitor or a 5” mobile screen, the visitor can easily navigate the website in both cases.
Keeping all the above factors in mind, we wholly encourage you to go for a responsive website. Forecasts suggest that tablet sales are set to rise this year from 18m to 62.5m and in addition, rapid sales of smart TVs have been reported from Samsung, selling 2m in the first 3 months of their global launch. Google recommends responsive websites as compared to their mobile counterparts.
