Pros and Cons of Responsive Web Design
Tuesday, November 15th, 2011
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.
- One HTML page, which means less maintenance. Instead of having to update two pages with the same content, you only have to update one universal page.
- CSS code styles the same elements. Chances are, if you’re making a mobile site, you’ll use slightly different tags, IDs, and classes than you would when creating a desktop page. With media queries, you’re styling the same tags. You don’t need to remember which tags you used on the mobile site, and which ones you used on the desktop site; it’s all the same. Because of that, it will be easier to make edits to the CSS of both the main page and the mobile page.
- It isn’t just about what device the user is using. Not everyone always has their browser full-screen. A lot of the time, it is much smaller. With responsive design, you’ll never get a horizontal scrollbar.
- Different devices can use the same link. Chances are, you’ve sent a link to an awesome page to a friend at least once. Now, what if you were on your iPhone and they were on their computer? Your friend would get the mobile version of the site, which wouldn’t be optimized for their screen. Responsive web design avoids this wonderfully.
- 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.