What is Responsive Design?
We will discuss responsive design a lot in the weeks and months to come, so I decided to write up a short and (hopefully) clear explanation of what the phrase “Responsive Design” means.
Responsive Design is a paradigm of interface design that attempts to ensure that a website is functional and accessible on every device and screen size. For instance, if a website is designed to be 1200px wide, then on smaller screens the sides of the site will be cut off and the user will have to scroll horizontally to see all of the content.
To achieve this feat, Responsive Designs must employ three things:
- Fluid Grids
- Media Queries
- Flexible Media
This, of course, begs the question: “What are fluid grids, media queries, and flexible media?” So, lets answer that question now.
Fluid Grids
Fluid grids are fairly easy to employ in responsive design. Essentially, it means that when setting the widths of elements, you must use percentages instead of fixed values in your CSS. So, if you are setting the width of the main content of your site, instead of using width : 960px you should use something like width : 80%;.
By setting the widths of the site to a percentage, you will ensure that the sides of the site are never cut off and the user never experiences a horizontal scroll bar.
This site is a fairly good example of the “fluid layout”. If you resize your browser, you’ll see that the page stretches to fill the full width of the browser. You’ll see the page content reflow to fill the site and everything will work just fine.
Media Queries
Media queries are special CSS rules that allow you to redefine rules for different screen widths. For instance, if the screen is wide (like on a desktop) then you may want rules that give you a two column layout. If the screen is narrow (like on a phone) then you may want rules that reduce that two column layout to a one column layout. Media queries let you set up the conditions for when are CSS rule is used and when it is not. An example is as follows:
div{
width: 90%;
}
media screen and (min-width: 1000px){
div{
width: 60%
}
}
Lets break this down a bit. The first rule says that all divs will have a width of 90%. This is the default rule and will be applied all the time. The second rule is written nested inside a media query. That media query applies to screen-based devices and works when the screen is at least 1000px wide. The nested rule will only apply if those two conditions are met. So, if the screen is 900px wide then only the first div rule will work. If the site is 1100px wide then both will work and the nested rule will override the first rule.
We’ll go much further in depth about this subject later in class, but for now just know that media queries allow us to create conditional rules.
Responsive Media
By default images and videos are not responsive. They have native widths and require some special code. I won’t outline that code just yet but I will tell you what the code is doing.
The code and methods employed to create flexible images forces them to have percentage based widths. It ensures that they will size themselves properly to their parent container.
In addition to have them size themselves properly, many developers employ techniques to only load images of the proper size for a device. This is a much trickier proposition because determining a device’s capabilities is harder that you might think.
Again, we’ll discuss this at length in later class sessions, but for now I hope that this article has given you a little insight into the rules and goals of responsive design.
To see an example of very simple responsive design, look to the responsive demo that we created to show breakpoints and how they can be used to change the design properties of a site and it’s layout.
Further Reading
If you are feeling adventurous, read Ethan Marcotte’s article about responsive design. He outlines the process and rules in a very clear and comprehensive manner.
To learn about all the options for media queries read Mozilla’s Media Queries Guide.
My coworker Jay Barry also wrote a great article on how to work with min-based media queries.