Over the past several years, web design principals and methods have been shifting very rapidly. One of the bigger revelations in web design and layout however has been the advent of responsive web design. You may be asking yourself, "So what is responsive web design?", and if so you're in good company. This is a question I am asked at least once a day by both current and prospective clients.
In short, responsive web design is the process of designing a website so that it will maintain the same aesthetics, elements, proportions and features, no matter the screen size or device that the user may be accessing your website through. For example, let's assume you have an area on your website that is meant to have a contact form and a map that will sit next to each other. A website that has been designed for responsive behavior would ensure that both the contact form and map will stay on the same row, as well as shrink or grow themselves proportionally as the screen grows or shrinks. So how is this achieved?
Using Percentages Instead of Fixed Widths
Before responsive web design was the standard, developers would used what are called fixed widths to define a certain elements size. For example, we may have given our contact form a fixed width of 350 pixels. Developers were able to get away with this previously by making sure their entire website content was within a container no larger than 800 pixels to 840 pixels, as this would ensure proper viewing on even the smallest screens. This code may look something like the code below:
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width:800px;
}
.contact-form{
width:350px;
}
.map{
width:450px;
}
</style>
</head>
<body>
<div class="container">
<div class="contact-form">
<form action="">
This Is Our Contact Form
</form>
</div>
<div class="map">
This Is Our Map
</div>
</div>
</body>
</html>
[/html]
However, as displays began to become larger and retina displays were introduced, it no longer became feasible to restrict your entire website's content to a mere 800 pixels wide.
So, in order to combat this issue, instead of fixed widths, we now use percentages to define our widths where every element is equal to a percentage of it's container. So, for instance, instead of defining our website container as 800 pixels wide, we may want to set the width to "90%" so that it fills up 90% of the browser window. We can then also set our elements within the container to use dynamic widths instead of fixed widths:
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width:90%;
}
.contact-form{
width:40%;
}
.map{
width:60%;
}
</style>
</head>
<body>
<div class="container">
<div class="contact-form">
<form action="">
This Is Our Contact Form
</form>
</div>
<div class="map">
This Is Our Map
</div>
</div>
</body>
</html>
[/html]
Keep in mind, we are able to give our container a width of 90% because it is an element that is only contained by the "body tag" and the browser already knows that the body should be equal to "100% of the window". So by telling your container you'd like it to have a width of 90%, you're actually saying that it should be equal to 90% of the actual full browser window. Now, since your container and it's elements are all using dynamic widths, whenever the website is viewed on a smaller or larger screen, everything will scale as needed to remain in the same proportions.
Working With Dynamic or Fluid Heights
Unfortunately, the height attribute is not as easy to work with as the width attribute as you wouldn't typically assign a fixed height to your website's body. This of course makes it difficult to make certain elements like squares responsive. In order to combat this, most modern browsers make both the 'viewport height (vh)' and 'viewport width (vw)' values available. These work very similarly to percentages, but they only use window size as the baseline, instead of being based on an elements container (which may not always be 100% of the window).
Using our example from above, we could set our container width to 90vw, or 90 percent of the full view width, which would be the same as 90% of the body. However, if we were to then set our contact form to 40vw, it would be equivalent to 40% of the view width, not 40% of the container, so it would likely be much larger than intended. Rule of thumb here is to use the VW value for your containers, but to then use percentages for all of the elements within the container.
At the same time, the VW and VH values can be used for height in any situation whereas percentages won't always be usable. For example, let's assume we'd like to make a square shape responsive and have assigned it a width of 20vw so we can make sure that it will shrink down width wise dependent upon the size of the screen. Now to ensure the height will also respond as needed, we can set that to 20vw as well so now both the height and width of the element will be the equivalent of 20 percent of the full view width.
When it comes to the height of elements however, every situation will be different, so just make sure to test out a couple of options in varying browser sizes before settling on one.
CSS Media Queries
In addition to using dynamic heights and widths in CSS to improve responsive behavior, designers and developers also use what are called "media queries" to define "break points" in their code. These points identify the point at which your current layout "breaks" from a look and feel standpoint. For instance, let's say your blog page lays out blog articles in rows of 4 where each article takes up 25% of the row. At a certain point, even though the four posts may still technically fit on the line, a width of 25% may only be the equivalent of 50px, which would mean all of the contents would be squished beyond recognition. So in this case, the point where the articles start to become too small for a positive user experience would be considered a "break point", and for the purposes of this example, we'll say that occurred at a screen width of 1200 pixels.
The first thing you will want to do to address this issue will be to first introduce a new media query into your stylesheet which would look like this:
[css]
.article{
width:25%;
}
@media screen and (max-width:1200px){
//This is where your code updates will go. For example:
.article{
width:33%;
}
}
[/css]
So what is happening here? In short, our "media query" is telling our stylesheet that even though normally the class article will have a width of 25%, whenever the window is smaller than 1200 pixels (or whenever the window is a maximum width of 1200 pixels) that it should then change the rule for the article class to be 33% wide. Media queries are unbelievably useful in creating these types of layouts that can adapt and modify themselves for peak performance and user experience on any screen size. Media queries are also useful for creating mobile and tablet optimized websites.
So What Is Responsive Design?
In summary, designing a website to be responsive means that it will be able to identify the size of whatever device you are using to access it, and that it will resize and reconfigure any or all of it's elements so that there is no compromise in user experience. If you would like any help in understanding responsive web design further, or assistance in updating your current website so that it is responsive, please feel free to reach out and one of our team members would be glad to help you reach your goals.