Media Queries

In today’s ‘mobile-first’ world, it is important to take advantage of the tools we are given to make our design’s responsive while keeping the code maintainable.

Responsive design has been one of the most important movements in web development. There are hundreds of different-sized devices that now have the capability of viewing any web page on the internet, and it is left to the developers to make sure we are keeping up with them all. Not only is it important for each device to be able to view a given web page, but we must also incorporate faster load times and overall efficiency.

Media Queries

So what is it? A media query includes a block of CSS properties only if a certain condition is met. Usually we define the query block by setting a specific min-width or max-width. For example:

@media only screen and (max-width: 600px) {
 body {
    background-color: pink;
 }
}

The above code would set the background color to pink ONLY for devices with a width smaller than 600 pixels.

If you wanted to specify a block of css for screens, say, between 600 and 1000 pixels your code will look more like this:

@media (min-width: 601px) and (max-width: 1000px) {
  body {
     background-color: green;
  }
}

Notice that I specified the min-width as 601px instead of 600. This is because if the two media query examples shown above were included in the website, we would want to ensure that only one is in effect at a time.

There is still much debate on how we should be designing for different devices, and whether or not media queries are the best solution, but they are commonly put into practice by the industry today.

Navigation

There are many reasons to use media queries. Navigation is a perfect example of a good use case for a media query.

With responsive design, it is important to keep buttons on small devices at a large enough size that they can be tapped without the possibility of tapping the wrong item. Desktop sized browser windows don’t struggle with this issue, which makes this a case for media queries.

Above is the header and navigation for a simple website I made. This navigation is meant to be used for larger devices.

Once the browser window shrinks small enough for most mobile devices (600 pixels or less), the navigation completely changes. While there is room for improvement on how this navigation could be showcased (a hamburger or expandable menu might help clean it up), the buttons are now clearly distinguished. They are large enough to be tapped by a finger, and have enough space in between to decrease the chance of user error.

Conclusion

Media queries are an effective way to tackle responsive design. I showcased one example, but there are many more design problems you can manage with media queries.

Ben Dixon is a student in the Web Design and Development program at Utah Valley University. The above article relates to a project in the DGM 2120 class and is representative of the skills learned therein. View the website showcased in the article here.