The Pros & Cons of Responsive Web Design

Responsive web design is the new concept which is creating a lot of buzz in the web community. So, what is responsive web design? It is a new approach to web designing, where a website is designed to accommodate optimal viewing for different screen sizes.

These days, mobile internet contributes to the majority of internet traffic. Therefore, it has become essential to create mobile versions of the website. Initially, companies and web designers would construct a stripped down version the website. When someone accesses a site through the mobile browser, it was redirected to the stripped down version. However, now with Responsive Web Design, a page is constructed in a way that it automatically adapts to the device’s screen size. Although, there are many advantages to Responsive web design, there are few disadvantages as well.

Responsive Web Design

RWD or Responsive web design uses flexible images, CSS3 media queries  and fluid based grids to bring out this new technology of adapting to any screen size. HTML5 is largely used in Responsive web design. These tools not only help you create and maintain web pages, it also helps you to optimize the page. Responsive web design also helps a page load faster on a mobile device and increases the efficiency. There is greater need for a responsive website is more in today’s world. Statistics shows that more people access the Internet via their phones and it is frustrating when a particular site does not fit the screen size or not legible on their phone. To satisfy your readers and to make them more engaging, a group of web designers derived this new RWD.

[css]
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

[/css]

Above is a snippet from CSS-Tricks, that shows how you can target specific devices in CSS3. Within each rule, you add css properties to specify colors, show or hide certain contents and so on.

As any new technology, responsive web designing too has its own pros and cons. Let’s take a look at them in brief:

Pros of Responsive Web Design

Responsive web design example

  • Designing a page is economical and it costs less to maintain. You do not have to create separate websites for multiple devices which in turn brings down the cost in production.
  • Maintaining the site is easy and there are tools that will help you to manage in an efficient manner.
  • Tweaking your site for SEO purpose is simplified as you will be optimizing a single site. Paying attention to URL, Page Authority, Page Rank and other SEO techniques is going to be easy.
  • RWD sites are user-friendly, automatically adjusting to any screen size.
  • A single URL is sufficient to collect all the social data including shares, tweets, inbound links and the like.
  • A single site can be updated so that it reflects on multiple devices in which it is accessed.
  • You now will have to host only one website which reduces the chances of errors which are prone to occur if you have different versions of the same site.
  • RWD sites do not require redirects. Doesn’t this reduce a big task for you?
  • Conversion increases as you have widened your audience. You will definitely experience an increase in revenue as your viewers not matter what device they visit your website from they will still get the same experience.
  • You can avoid login problems and prevent several issues related to duplicate content and others.

Cons of Responsive Web Design

Can I use CSS3

  • RWD relies on “CSS media queries” to stay compatible on all kind of devices. Unfortunately, not all devices support “CSS media queries.” It will take a little while before all the smartphones, tablets and web browsers can provide support for CSS media queries.
  • Image resizing consumes a lot of RAM and CPU.
    Browser Resizing Can Be CPU and Memory Intensive
    For example: when you open a site on a mobile device, the image that is downloaded is resized to accommodate the screen. At this stage, RAM and CPU are used to its maximum.
  • Since the HTML and Javascript code are not removed, an RWD site when downloaded on a mobile can make it a bit slower.
  • Considering, it is new concept, lot of clients do not understand what is responsive web design are how it works. As a result, the merely do not want adopt it.

When analyzing the pros and cons of Responsive web design, the pros outweigh the cons. Apart from making your phone a little slow, the advantages that RWD offers is mind-blowing.  Hence, if you are a retailer looking out for solutions based on cost, flexibility and support options, RWD is the best solution.

Recommended Reading

Responsive web design tool

RWD is a concept that is growing everyday in the web design community. There is always a new technique or snippet available online. As a web designer, you have to keep yourself updated with these knowledge. Following are few articles/websites that we recommend :

Here at Desizn Tech, we love responsive web design as it makes a web designer’s life a lot a easier. Everybody should jump on the Responsive web design bandwagon so we can make the web more beautiful and optimized.

Feature image : Shutterstock


Author:

Samantha Kirk is a writer for Centurylink Internet. Samantha provides up to date content and information for high-speed internet, phone services, bundles and other Centurylink offers.


  • http://www.facebook.com/lauryn77 Laura Gargiulo

    IE7 and IE8 are trouble for webdesign in general, so if responsive is not supported, the hell of them XD

  • http://twitter.com/toasterdroid Jedediah White

    I’d have to say that a con for me personally is the time that needs to be devoted to coding and testing for RWD. Making a website responsive means a lot of extra work – totally worth it though.

  • Erik

    I think RWD is way overrated, in most cases i’d rather pan and zoom than scroll all the way to the bottom of the page to get some information. People act like a website is completely falling apart on mobile devices while in 99% of cases you just have to side scroll a bit. Mobile devices have to adapt to the web, not the other way around.

    • Kawsar Ali

      You have some points, but I think browsing experience depends on individuals. mobile devices are already adapted to web but the screens are much smaller than a regular screen and a regular browser on a computer has more functionality. Therefore, you can never experience a website on a mobile device as you would do on a regular computer. RWD ensures no matter what size is screen the usability and legibility is optimal.

    • http://www.mark-making.com/ Shannon Young

      This comment made me exhale large amounts of wind through my nose.

      To say RWD is overrated is absurd. It may not be the right solution but ‘overated’, no.

      Because your preference is to ‘side scroll a bit’ and use the pinch and zoom that’s up to you, but if the information is offered to you in a more optimised and considered fashion, without the need to pinch and zoom etc, that is a better user experience.

      “Mobile devices have to adapt to the web, not the other way around.” – Just no.

  • Drupaljungle

    In today’s world where people are becoming Internet savvy, Responsive Web Design has become the need of the hour. People use different devices like tablets, computers, mobiles, etc to use Internet, here the role of Responsiveness comes into play. A responsive website automatically fits itself into different screen sizes unlike the non- responsive sites. Nice post though!

  • anushbmx

    Samantha Kirk i don’t think RWD is a new concept, since web originally is fluid by default and it became static due to us, so RWD is just the process of restoring the Fluidity right.

  • http://www.facebook.com/maha.rawj Maha Rawj

    I don’t agree with the cons(except for the second last one). Especially when responsive design is being used for mobile devices the question of IE 8 and previous versions does not arise. Android supports all.
    The Chinese mobile phones and their Indigenous Java based OSes support Opera mini and everyone I know at some points becomes aware that opera mini is the best browser for browsing through a mobile otherwise they are going to get their websites messed.
    Each and every websites is messed up on such phones they are mostly used only to connect to social media and emails via apps.
    Clients not wanting to adopt it is not even a con.
    I think you can load different images for different viewports if one is concerned about file size. It makes sense especially if its a huge image and in the 300 pixel width you can’t even see it well. Maybe you can load a different cropped image.

  • http://twitter.com/NIMSRULES Nirmal Shah

    Great roundup on RWD, I agree with the cons too. You might want to check how this tutorial too.