Pros and Cons of Responsive Web Design

When you create websites you have to keep up with the latest trends and techniques. One such trend is called responsive web design or “RWD”. It’s a design technique used to make a web site adapt to the different screen sizes used by internet users of today (and tomorrow). In this article I’ll highlight some of the advantages and drawbacks of using responsive web design. The hope is to make it easier to choose between RWD and other options when creating your next website.

How Does Responsive Web Design Work?

Responsive web design adapts to your screen by using a fluid grid system. You assign flexible width values to elements on your website and also reposition those elements based on the screen size. Another common sight on responsible websites is a menu that collapses into a simple icon (on smaller screens) that shows a drop-down menu when clicked.

RWD is used to solve a problem with websites: How do you make your website adapt and look good on any screen? We used to design websites based on the average users screen size, but these days the screens vary from small smart-phone and tablet screens to big, high-resolution computer monitors. Some websites would previously use a flexible layout, changing the width depending on the screen size. But RWD takes it one step further by rearranging and resizing elements depending on screen size. So does this mean that RWD is always a good idea? Should you jump on the RWD-bandwagon for your next website? Let’s examine the pros and cons of responsive web design to answer that question.

Advantages of Responsive Web Design

As you probably know, RWD has many advantages compared to other ways of adapting your website to different screen sizes. This is my list of the most important reasons to use RWD.

  • Your website will be easy to use on any device.
    Because of the adaptive features of websites using RWD, your website will be easy to use on any device. No need to zoom in or out and scroll left and right. Text and design elements will fit well on your screen. The user experience will be consistent and optimized regardless of the user’s device.
  • Easier to manage
    With just one website for all users, you don’t have to worry about creating content specifically for mobile users. You only have one website to manage. That also makes your job easier when it comes to SEO since you don’t have to worry about duplicate content on a mobile website or creating advanced redirects to and from your mobile/desktop sites. When speaking of SEO, you might also find it interesting, that Google recommends RWD.
  • Staying ahead of the competition
    Many companies still haven’t created a responsive website, despite more and more users browsing the web and shopping online on their phone or tablet. This means that you’ll have a business advantage if you adopt RWD before your competitors.

Drawbacks of Responsive Web Design

While RWD has many advantages, it might not be the best choice for everyone. Let’s look at some of the disadvantages.

  • User needs may change when a changing device
    Imagine browsing a website on your desktop computer. You’re visiting the website with a specific purpose. Later that day you visit the same website using your phone. This time, however, you’re looking for a specific piece of information. Your behaviour and needs has changed. The point here is, that one (responsive) website may not be ideal. Depending on the use and purpose of your website you may need to consider having a seperate, mobile website with content targeted mobile users. Think about who your users are, how they would use the website on different devices and what information they would access depending on the device.
  • Speed
    The next issue is speed. When working with RWD images are typically large and then scaled according to screen size. This and other factors may affect how quickly your page loads on a phone in a poor 3G or even 2G environment. Again, depending on your users, a mobile optimized website may be a better choice to avoid delays when accessing the website.
  • Cost
    RWD can be more expensive to develop than “regular”, fixed/flexible designs. This may be bad news if your budget is already stretched. However, not all websites would benefit from the additional investment in RWD. Consider if RWD will give you (or your customer) a good return on the investment.


Whether or not RWD is a good idea for your website depends on many things. There are obviously great advantages to using RWD, but also some disadvantages that you have to consider.

As always when developing a new website or updating your existing one, you need to analyze the needs of your customers/users in order to determine if RWD is the right choice for you. I think one of the most important questions you need to ask yourself is “do my website users have the same needs regardless of the device they use to browse the website?” If the answer to that question is “yes”, then you should most likely go with RWD. A responsive website will greatly increase the user experience for mobile users compared to not having a mobile/responsive website. Also, it will make the user experience consistent accross all platforms. Only if speed is major concerns, you should consider creating a mobile specific website (i.e. an m-dot website). However, bear in mind that while creating a seperate mobile website might help load time, it might also cost more than just developing one, good responsive website. If cost is the limiting factor, consider not designing for mobile users at all. Mobile browsers these days handle desktop websites quite well. Focus your efforts on creating the best website possible within your budget.

I hope this article helps you in your efforts to design for the present and the future.

Also, I would like to hear your thoughts on this matter. How did you make the choice between RWD or non-RWD. What things did you consider? Did you consult your website customer with regards to their needs, or did you make the choice for them?

Leave a Reply

Your email address will not be published. Required fields are marked *