9 Reasons Your Responsive Web Design Is Failing.
Responsive web design is one of the most important new techniques available to website designers and developers today. With the ever growing number of devices and screen sizes that are being used to access website content on today’s Web, delivering just one website that was initially designed for large desktop screens to all other devices is no longer a viable option. People expect a better experience, one that is suited to the device they are using at that time, whether it is that aforementioned large desktop screen, a laptop, a tablet device, or a handheld smartphone. Each of these devices has wildly different screen sizes, yet all of them are routinely used to access the websites that you are designing for your clients. This is why you must think about those designs as more than just a large, desktop layout that will be pushed to all screens. Effective websites today need to accommodate these varied devices and responsive web design has quickly become the preferred method to do so.
The Benefits of Responsive Web Design
Popularity alone is never a reason to embrace a new web design technique, so while responsive web design, or RWD, is indeed popular these days, the benefits of this approach is what makes it an attractive option that should be considered.
Responsive websites dynamically reflow their layout based on the screen size being used to access it at any given time. If a large, widescreen monitor is being used to access the site, a multi-column layout that takes advantage of that large amount of space can be presented. If the screen size is much smaller, say an Android phone or an iPhone, then that same site will reflow to present the content as one, single column with typography and hyperlinks that are appropriately sized for a small, touch screen device (where those links will be ‘tapped’ with a finger or thumb) as opposed to large, desktop screens (where the links will be ‘clicked’ with a mouse). This ability to dynamically present different layouts for different devices is a powerful way to optimize the layout and experience across the widest range of devices and screen sizes possible.
Other benefits of RWD include Google’s preference for this approach. Google actually recommends the use of responsive web design for multi-device supporting websites and there is strong evidence that the search engine has begun to reward sites that use this method.
From a client’s perspective, responsive web design makes site management easier and more cost effective when compared to trying to manage and maintain multiple, separate sites, each with a different code base. Separate sites often manifest themselves as “mobile-only” sites. If you visit a site on a mobile device, that site forwards you to a separate version meant just for mobile. Instead of one site that dynamically reflows its layout, you actually have distinctly different sites and code bases to support. That will multiply your management time and make it difficult to keep your content consistent across these different channels, something that no business wants to have to deal with.
Not All Responsive Website Are Created Equal
While the benefits of responsive web design are substantial, so are the challenges of creating these sites correctly. The simple reality is that not all responsive websites are created equal. There are a number of places where those sites fail. We will take a look at 9 common missteps that many RWD websites take:
One: No “Pixel Perfect” Guarantee
Because responsive websites automatically reflow their layout based on the user’s screen size, it is nearly impossible to guarantee the look of that site across every possible screen size.
Responsive websites are “fluid”, meaning they act like liquid does when poured into a container, growing or contracting to fill the space available to it. This may sound great, but it means that while your site may look pixel perfect at one specific size, that look will begin to become strained or break down as the reflow happens. For many designers, this is unacceptable because it destroys the integrity of their original design decisions. Designers want Pixel Perfect Responsive Design, an idea which is impossible to achieve with traditional responsive techniques, but which we will offer a solution for later in this article!
Two: Danger of Changing the User Experience Between Devices
Different devices and screen sizes require different experiences. The way a site works on a giant desktop screen will be different than how that site is used on a tablet or phone. This is a reality, but it is also a challenge for your users.
If a user is used to how a site works on the desktop version, then the radical changes needed for the small screen, or “mobile” version, may be jarring for them. As the designer, part of your job is to design a look and experience that embraces the requirements and limitations of each device size, but which is consistent enough so that visitors do not feel lost with each new version they see. Many RWD websites fail in this regard.
Three: More Design Consideration = Higher Chance of Error
Building off the last point, when you have more designs considerations to deal with, there is a higher chance of error and the reality is that some of those screen sizes will not be up to the same high standard as others. You see this in many RWD designs. The “wide screen” version looks great, but subsequent smaller versions don’t look as nice. It’s almost as if the designer spent so much time working on the large screen version, that when it came time for the others, they kind of coasted and didn’t really give it their all. That is a problem. If you want to do responsive web design right, each “version” or layout needs to have the same, meticulous attention given to it.
Four: Slow Loading Time
This problem is not confined to responsive websites. The reality is that the Web as a whole has become heavy and bloated, with the average size of a website nearly doubling since 2010 (according to Web Performance Today). Sites have become bigger and bigger, meaning that download times have become longer and longer. So yes, this is a problem that responsive web designs face, but it is one that our industry as a whole is grappling with. RWD or not, slow load times hurt performance and conversions for websites.
Five: Complexity
Building a responsive website design can be a complex and grueling process. The way that media queries, which is the CSS code that “reflows” the website as different browser sizes are reached, interacts with earlier CSS code for your page can be challenging to follow and understand. Additionally, the fact that some older browsers, specifically versions of Internet Explorer prior to version 9, do not support media queries, therefore requiring Javascript patching to handle those antiquated platforms, certainly adds a level of complexity not seen previously in website design.
Six: Takes More Work and Takes Longer
Because of the additional considerations a designer must have when creating a responsive website, these projects tend to be much more work than their non-responsive counterparts. This additional work means additional time needed for each project. With many clients anxious to get their new websites done quick, fast, and in a hurry, this additional time is something you will need to address.
Seven: The Cost of RWD
In addition to increased timelines, responsive websites are more expensive than their non-responsive counterparts. This may be great for you, because you can bill more for each project, but it also may make these sites harder to sell to your clients because of that cost. Like any solution, you must be able to show the value of the solution so your client can weight that value against the cost, but the reality is that responsive websites do cost more than non-responsive ones.
Eight: Testing
Because responsive websites fluidly support all devices and screen sizes, testing becomes a big challenge. There is no way that anyone can be expected to have access to every possible device or screen size that could be used to visit their site. Because of this, many designers and developer test a responsive site on a token number of devices and hope for the best on the others. This can cause issues when the unexpected happens on a non-tested device (and trust me, the “unexpected” happens all the time!).
Nine: Stumbling Blocks – Content, Asset Management, Advertising, Deep Navigation
In addition to the challenges presented in this article, there are also a number of other factors that are difficult to work with on RWD sites. Large amounts of content, the need to display advertising on a site, or large sites with deep navigational structures are all difficult to work into a site that will dynamically reflow its layout for all different devices. Again, you see many responsive sites that do not handle these challenges, or others, well at all, making for a site that may support all devices, but not very well.
Conclusion
Responsive web design is a powerful and important solution, but it is a solution that comes with many challenges that must be met. One way those challenges can be met is by altering your approach a bit and going with an Adaptive Web Design (AWD) process. Similar to RWD in its goal to present the best possible experience to the widest range of users, AWD websites allow designers to create Pixel Perfect Responsive Designs because, instead of using a fluid approach to try to handle all screen sizes, including many that do not even exist on today’s devices, you use predetermined sizes (based on popular devices available today) to deliver a predefined set of layout sizes. With this approach, you can enjoy some of the best parts of RWD while also meeting many of the challenges presented in this article.
3 Ways to Apply This Information Now
- Read more about responsive website design on Webydo's blog.
- Share this article on LinkedIn. Sharing quality content increases your credibility and visibility with your existing contacts, creating conversations and new contacts.
- Leave a comment below. Let's start a conversation about responsive website design.