Categories

Close

Design Lunatic

Pros and Cons of Responsive Web Design

I’ll go straight to the point: I haven’t posted in a while, and I’m sorry for that. I’ve decided to slightly change the types of posts here. Basically, I’ll write less often, but with higher quality. I also won’t have quite as many tutorials, but when I do have one, it will be very in-depth and explanatory. I’ll also write more thoughtful posts, which leads me to today’s article:  The pros and cons of responsive web design.

As I’m sure you all know, this amazing new thing is coming into use: media queries. These media queries allow the developer to specify which chunks of CSS code are applied to which situation. Take a look at the example, and resize the window. The layout will dynamically change depending on what size the browser viewport is. This allows the developer to optimize the layout for the display being used. In the example, there are three stages: a large one made for larger monitors, one for smaller displays such as tablets and laptops, and one for handheld devices, such as iPhones or Androids. Each stage has a block in the CSS code powering the page, and depending on the size of the browser viewport, a different block of code is applied. Now that we’ve gone over the basics behind media queries, we can move over to the pros and the cons about them.

Pros

Cons

  • Loading time is an issue.  A user with an iPhone would load your site and get all of the code behind it.  However, a lot of the things you have on the desktop site are set to “display: none” with the mobile media query.  In other words, the user loads unnecessary content.
  • Cross browser compatibility.  Internet Explorer 8 and below can’t work with media queries, and an unfortunate amount of people are still using these outdated browsers.  A lot of people are also using old versions of Firefox.
  • Images.  The mobile-optimized version of your site downloads the same size images as the desktop version does.  This prolongs the loading time, and can also create additional problems.
  • Development takes time and money.  Responsive web design is not easy, which means it takes longer and costs more.

Having said all this, I still love media queries and will continue to use them in my projects. What do you think? Leave your thoughts on responsive web design below.

  • Chandr123

    If clients never mind about loading time on mobile version sites, we will go for responsive. My personal thought is responsive site is better than bad mobile version site.

    • Andrey Dubovsky

      agreed.

  • James

    Content is in control on whether you decide to use these queries or not. If you’ll have imagery at the basis of your design then media queries may not be the answer. If you think your loading times will be drastically different on mobile compared to desktop then you shouldn’t use media queries.

    At the end of the day it’s all about content and the decisions you make based on them.

  • Pingback: Responsive Web Design Tools | Matt Eng