Menu Close

Responsive Design

For this post, we will be covering responsive design and media queries. To that end, three articles will be used as reference material: “Responsive Web Design“, by Ethan Marcotte, “Introduction to CSS Media Queries“, by Arpan Dhandhania, and “The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App,” by Armen Ghazarian. Let’s start with “responsive Web Design.”

 

Courtesy of Kevin Cornell
Courtesy of Kevin Cornell

“Responsive Web Design” begins by asking a simple question: how do we make the internet more accessible to more devices? With the advent of automated technology, it seems reasonable that a website should incorporate the same adaptability that humanity has used and continues to use with it’s machines and artwork. The answer, according to Marcotte, is “responsive web design,” a concept that, while still in its infancy, will likely revolutionize how we view and use the internet. Responsive web design accomplishes the needed adaptability by basing what is seen and how on the screen size of the device that is used to view it. Marcotte believes that this adaptability will become increasingly important as mobile devices become more common.

Moving on, we come to “Introduction to CSS Media Queries,” which goes a little more in-depth in explaining exactly how this adaptability is accomplished. The idea behind responsive web design is actually remarkably simple. Basically, a media query determines the size of the device used to access the page. Rather than having multiple pages coded for specific devices, it is now possible to have just one web page that accesses different sections of the style sheet for different resolutions. In Dhandhania’s example, he defines his alternate style sheet instructions by triggering it if the device has a width of 480 pixels or smaller. Amazingly, all this takes is a simple line of code at the top of the sheet, along with a section containing separate instructions.

“The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App” talks largely about the pros and cons of using different approaches to web content (surprise!). The article seems to be weighted slightly in favor of adaptive sites, especially if the website isn’t the main focal point of the entity that maintains it. However, Ghazarian does point out that some of these options will work better than others depending on its purpose and the type of user the site is intended to attract. In the end, it’s very important for the owner of the website to decide what kind of website he needs to use in order for it to fulfill its purpose.

3 Comments

  1. Zana Jones

    Css properties can be really tricky to configure, media queries and responsive design is the only way to show that your website is effective.

  2. Leslie Alonzo

    I read the alistapart article too! It was really interesting and informative and it broke down the media queries portion down so it was easy to understand.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.