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

Advertisement

Pin It on Pinterest

Share This