Menu Close

Responsive Web Design and Media Queries

– colton gabelmann –

 

Before reading these three articles, I was Very Confused as to what responsive web design actually meant and what media queries actually were– we had talked about them briefly in class, but both topics sailed over my head. Thankfully, the assigned reading cleared things up a bit, so here are my impressions from the articles:

 

Article 1 – Responsive Web Design (Ethan Marcotte)

This article is the one that really cleared up the definition of media queries for me. Like most people, I am an avid mobile internet user– I would estimate that up to 90% of my time on the web is done via my phone. However, most of my mobile browsing is done via apps designed to optimize the experience (Facebook, Twitter, Tumblr), so I never really considered what an actual website had to do to make sure its content was readable across the board. Media queries, I’ve learned, are a coder’s way of specifying how to display a website based on the TYPE and SIZE of device being used to view it. The example with the different displays of Sherlock Holmes character portraits really helped me out…

On narrower screens, the image was displayed as it appears above…

… but media queries can be used to recognize a wider display and show all the images in a straight line instead, as shown.

 

This article also contained an external link to a Wikipedia article about Fitt’s Law, which taught me the word “manipulanda”, which means “input devices” and sounds really cool when you say it out loud.

 

Article 2 – Introduction to CSS Media Queries (Arpan Dhandhania)

This article was a pretty much more of the same from the first article, but with more practical application and jargon to contrast the first article’s layman’s terms. The most useful part of this particular article were the plaintext examples inserted into the page, as well as the example page that loaded differently based on what device you were viewing it from. My biggest takeaway from this article, however, was the link to ProtoFluid.com, which renders webpages at several different resolutions, as if you were viewing them from a variety of devices. Quite useful for someone like me, who only owns a computer and a cell phone! I also enjoyed the tone of this article– the person writing it sounded like they were having a lot of fun talking about something they were knowledgeable in.

 

Article 3 – The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App (Armen Ghazarian)

This article was my favorite of the three because I am a grumpy old fogey at heart and I like to criticize things. Articles 1 and 2 went on and on about how great responsive design was, but, as I said before, I do most of my mobile browsing through apps, and this article talked about the pros and cons of not only responsive design BUT ALSO the creation of a separate mobile website AND apps. Through my reading, i have come to the personal conclusion that, while responsive web design is the cheapest option, not all websites can be optimized efficiently by those means. Despite the (relatively) high price for implementation, native apps appear to be the best means for getting a mobile version of your business’s website out into the world– it offers the most customization and the best user experience.

 

 

3 Comments

  1. Melanie Saucedo

    Same, I was really confused at the beginning of this project. I started working on a Responsive Website without knowing what it was. The second article did have a lot of jargon, but I am glad the other two were simple enough to help me understand the subject.

  2. Tania Hagedorn

    The Responsive Website article by Ethan Marcotte has some very useful information for the CSS media queries. Like most of us, I was confused about how to incorporate responsive design principles into my website project. This article has helped me to add the media queries to my CSS file and a flexible layout to my design.

Leave a Reply

Your email address will not be published.

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