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

• 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.

Cons

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.