9 Reasons Your Responsive Web Design Sucks. 

By Nicole Hyman

Apr 8, 2014

With more than 80 percent of mobile phone owners using their devices for web browsing, the web community is placing an increasing emphasis on responsive web design, fully functional across all devices and platforms. And with more than 80 percent of Alexa’s top 100 websites opting for responsive web design, responsiveness is quickly becoming the rule.

Responsive websites are designed to provide the end user with a fluid experience and to ensure content accessibility across all devices. In addition, responsive web design helps businesses maintain a unified online presence, and makes it easier to optimize and manage content for multiple devices, even those yet to be released, without incurring any app development costs. Responsive web design is also found to boost SEO by reducing duplicate content and improving search engine indexing and crawling. In fact, responsive web design is Google’s recommended configuration.

The importance of responsive web design in creating mobile-friendly sites can’t be overlooked. After all, 61 percent of consumers said they’d look for another site if they didn’t find what they were looking for immediately on a mobile site. However, designing for multiple devices has its limitations. Designers considering responsive web design need to be aware of the drawbacks that may limit the efficacy of their work and affect user experience.

How Limitations Of Responsive Web Design Affect User Experience.

1. Can’t “Pixel-Perfect” Your Website.

Responsive web design doesn’t give a designer unlimited control to determine how every element renders on different devices. This means that the design might look slightly different than initially intended when viewed on different screens and at different resolutions. Instead of responsive web design, the ideal is “Pixel-Perfect Responsive Web Design,” which gives a designer precise control over all elements including pixels. This pixel-accurate design ensures that the website functions and appears as planned, regardless of where it is viewed.

2. User Experience Can Suffer.

In placing emphasis on adapting content for all devices, responsive web design often overlooks user experience. While content-rich sites work well as responsive websites, others that rely on ad revenue, opt-ins, and sidebars can quickly become unbearable to navigate on mobile devices. In this case, the user may struggle navigating and finding relevant information on the website. The user experience is just as, if not more, important than the visual appeal of the site, and should be considered thoroughly before implementing a responsive design.

3. Poor Conversion Rates.

It’s estimated that by 2018 global mobile commerce sales will amount to more than $638 billion. Despite the growing popularity of mobile commerce, responsive web design’s poor user experience often ends up costing e-commerce businesses. In fact, more than 40 percent of consumers admitted to cancelling a mobile transaction because the checkout process was too slow. Other factors, such as poor mobile site performance, and a lack of clearly visible call-to-action buttons, have also been found to affect conversion rates.

4. Too Many Considerations.

When designing responsive websites, there are many design considerations to ensure a website is fully functional, regardless of the device, platform, or resolution. This means that unless a designer plans the website carefully, there is much greater room for error. For example, given the sheer variety of devices, it can be very challenging trying to determine what widths to design for. To avoid these errors, designers can use many different responsive design tools available to them. These include a Device Diagram, Responsive Design Sketchbook as well as Responsive Web Design Sketch Sheets.

5. Poor Performance.

Load time affects not only user experience, but conversion rates. A recent survey found that most users expect a website to load in 2 seconds or less. The same users tend to abandon a website if it hasn’t loaded in 3 seconds. This has significant implications for responsive websites when viewed on mobile devices, as mobile browsers are forced to download big HTML files. This dramatically slows load time and often frustrates users. In many cases, a simple dedicated smartphone website with very few scripts, CSS files, and images is a far more effective option.

6. Complex Implementation.

It’s not impossible to build a responsive website that runs efficiently on mobile devices. It's simply far more complicated than creating a separate mobile-dedicated website. When designing for a responsive experience, there are many different factors to take into consideration to ensure the site provides a seamless viewing experience. In comparison, a simple dedicated mobile site, also known as an "m dot" site, is far simpler to create as it's designed specially to be viewed on touchscreen mobile devices. M dot sites have limited images and a small amount of HTML to worry about, making them a more efficient alternative.

7. A Costly Investment.

Responsive web design is an investment, and a costly one at that. Generally, a responsive website costs more and takes longer to develop than a traditional website. Many argue that investing in responsive web design is more affordable than building a dedicated mobile site. While there may be some truth to this, it’s important to understand that responsive websites don’t always provide the best user experience. For many, a non-responsive website will be far more effective and cheaper to develop in the long run.

8. Significant Work Involved.

Developing a responsive website requires a significant amount of time, and there’s a never-ending amount of work involved. Even with time-saving frameworks and tools, making a website function across all devices is a complicated task. In fact, creating a responsive website can end up adding more work than creating a separate, mobile-dedicated site.

An effective way to reduce workload is to reuse code instead of trying to manipulate CSS so that it’s compatible with all devices. To simplify things and speed up the process, you can reuse the back-end code from both the mobile and desktop version of the site. Sometimes it can be easier to maintain two simpler codebases than one codebase that’s overly complicated.

9. Technical Stumbling Blocks.

There are several technical challenges facing designers creating responsive websites. While these challenges aren’t insurmountable, it’s important to keep them in mind, as they can be used to inform the design process. Many technical challenges stem from the need to design in such a way that the website will be suitable, no matter where it’s viewed.

A good place to start is with the content. Designers need to consider whether the same content a user will find useful on a desktop is effective on a mobile device. Designers need to plan the content that will appear in different environments carefully. They can start by deciding on the content necessary for the mobile version, and then add more elements as the browser size increases. This marks a shift from the waterfall method of design, where traditionally HTML markup would be derived from a set of Photoshop concepts. With responsive web design, on the other hand, content is the starting point.

Asset management also needs to be considered carefully. While it isn’t difficult to scale images to fit mobile devices, designers need to find creative ways to do this to avoid performance issues and page bloat. One effective workaround is to use conditional loading, where some content, like avatars, is loaded after the page has been loaded. This helps boost performance.

Developers and designers also need to find ways to optimize their designs for different pixel densities. This means that they need to find a way to make sure their content displays as well on mobile device screens as it does on large screens. Sometimes, when designing for retina, for example, you’ll want to use high resolution images to ensure that the images render well on a high-density screen. In this case, it’s a good idea to use CSS replacement techniques, where the larger image will be displayed only on retina displays.

Create Websites that Render Optimally Regardless of Device.

When designing for responsiveness, remember that the website needs to render properly no matter where it’s viewed. This means that a designer should never design a website specifically for a mobile device and assume there will be high-level support. When it comes to responsive web design, the one-size-fits-all approach is no longer relevant. Instead, designers need to consider what content is necessary, and based on that, create grid-based layouts upon which the rest of the design can be built.

Conclusion.

For the correct type of website and with proper execution, responsive web design provides designers with an effective way to optimize their website for all devices. However, this depends on several factors, including the site’s content-heaviness and image-heaviness, and the designer’s technical know-how. An equally effective approach for optimizing websites for mobile is to create a dedicated smartphone website that runs independently of the desktop website. For many, this has proven to be a cost-effective and efficient alternative.

But given the unpredictability and expense of both responsive web design and of creating a separate mobile site, Pixel-Perfect Responsive Design is becoming an increasingly appealing solution. This makes for precise design, and gives designers the chance to control their work down to the last pixel.

Blog  /  Web Design  /  Responsive Web Design

Comment