Menu Close

Responsive Design and Media Queries

Searching the web for articles about responsive design and media queries, I learned a lot about how designers are able to make websites flow seamlessly cross-platform.

Screen Shot 2015-10-12 at 10.22.33 PM

In the first article, I learned about the 3 basic layout types that you can achieve with responsive design.

  1. Basic Fluid Layout
  2. Adaptive Layout
  3. Responsive Layout

These are all different ways to make the layout of your website flow from one device to the next. The article also goes into detail about all the ways media queries are used by designers.

“Put in a simple way, media queries enables the web designer to create conditionals stylesheets based on width, height, but also orientation, color, etc.”

The second article I read was all about using Responsive Images. Screen Shot 2015-10-12 at 10.34.39 PM

The article explains how the “picture” element as well as new IMG attributes “srcset” and “sizes” are being slowly drafted into HTML5.1 to help with image sizing across different platforms.

“The point is, we now have the option of serving images of different quality or art direction depending on the user’s viewport, without some complicated server-side setup.”

The last article I read was all about media queries for standard devices. In the article the author included custom media queries with different devices such as android devices, all the iPhone products as well as different tablet dimensions.

Screen Shot 2015-10-12 at 10.43.22 PM

1 Comment

  1. Linsey Jones

    I love how you explained the websites, you were very clean and precise with the description of their content. it was almost like you wrote a quick review for a consumer so that they could move quickly through the websites and determine the information without having to read all through the article. In a 15 sec attention span society that is a very good thing.

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.