7 Habits of Highly Effective Media Queries

Last Updated on

Do you need a media query? When it comes to media queries, the first thing that you have to do is to ask yourself if you need to use a Media Query at all. When creating layouts using floats, what we do is we create a flexible grid by computing the size of the columns using percentages. However, if we want to change the size of these columns, then we have to add a breakpoint by using Media Query.

If you want to have a responsive design, then the key is media queries.  Here are some factors to consider when creating amazing media queries.

1. Breakpoints should be determined based on the content.

As much as possible, when determining breakpoints, you should avoid using those typical device dimensions, for instance, 480px is for iPhone landscape, 320px is for iPhone portrait, 768px is for iPad portrait, and so on. Keep in mind that the device landscape is not always constant, it will keep on evolving. Hence, even the current values that we have today will remain uncertain in the days ahead.

The Web keeps on changing, hence, you have to make sure that the interfaces that you create will match and can function excellently on any type of screen rather than in just a few ones. Designers should be encouraged to consider the whole resolution spectrum, not just the current device dimensions. The disco mode would be perfect if you would like to stress test your designs.

Consequently, what is the best location for these breakpoints? According to Stephen Hay, the best way is to start with a small screen afterwards you can expand it. Time for a breakpoint! So easy, right?

2. The layout should be considered as an enhancement.

According to Bryan Rieger, the lack of support for media queries will be your first media query. When it comes to a mobile-first responsive design method, it is essential that your style should be done in a mobile-first manner. So, rather than writing this:

/* Desktop-first styles: Avoid */
.column {
float: left;
width: 50%;
}

@media all and (max-width: 50em) {
.column {
float: none;
width: auto;
}
}

You should try to emphasise layout-specific rules whenever they are required, for instance:

/* Mobile-first styles FTW */
@media all and (min-width: 50em) {
.column {
float: left;
width: 50%;
}
}

By considering mobile-first styles, you can end up having a code that is simpler, smaller, and easy to maintain. This strategy offers better support for those who are using older mobile browsers that do not necessarily support media queries.

3. Both major and minor breakpoints should be used.

It is important to consider that not all aspects of your design should fit appropriately to small, medium or large breakpoints. Obviously, you can’t avoid dramatic things from happening when you are designing your site. For instance, when one column turns into two columns then turns into three columns. When these massive changes occur, then they will be considered as the major breakpoints.

In keeping track of your breakpoints, you can use Sass. Below is an example of major breakpoint variables, but most often it will depend on the design.

$bp-small : 25em;
$bp-med : 47.8em;
$bp-large : 51em;
$bp-xl : 74em;

However, there are instances between these values wherein one particular component requires modification. This change in style to a particular component is referred to as a minor breakpoint. Jeremy Keith usually called this as ” tweakpoint.” Going back to the Sass, you could consider inserting your minor breakpoints between those major breakpoints, see below:

$bp-small : 25em;
$bp-small-2 : 30.75em;
$bp-small-3 : 40.8em;
$bp-med : 48.8em;
$bp-med-2 : 49em;
$bp-large : 51em;
$bp-large-2 : 55.5em;
$bp-xl : 61em;
$bp-xl-2 : 68em;

It may not look neat, however, can it really work? In regards to how you are going to use major and minor breakpoints will entirely be up to you. However, it is important that you should use both of these breakpoints.

4. Consider using relative units.

Do you find yourself frequently pressing Cmd + to zoom in the text on several websites? This is what most people do when they lean back on their chair while using their computers. When pixels are used in declaring breakpoints, page zooming will result in a horizontal scrollbar and most likely things will not work well.

/* Abstain pixel-based media queries */
@media all and (min-width: 700px) {…}

So, rather than using pixels, why not use relative units for your media queries.

/* utilize ems for media queries */
@media all and (min-width: 40em) {…}

First of all, we are replacing pixels with rems, ems, and percentages in all aspects of your style, so why not continue using it to your media query values as well? Furthermore, using relative units in creating media queries will permit browsers to adjust the design according to the preferred zoom level of the users. As a result, you will enjoy a more comfortable, more accessible reading experience. It will look like you are having a Grandpa-vision!

5. Think beyond width.

Media queries can detect Viewport width. But aside from this, there are a lot of media features that it can detect such as the colour index, colour, device aspect ratio, aspect ratio, device height, height, device-width, monochrome, orientation, scan, resolution, pixel density, etc.

Perhaps you are not familiar with some of these, however, there are a few features that can really be helpful.

Using pixel-density for icon sprites and larger background images are ideal for Retina displays and other hi-res screens. You can use height in detecting the screen height that can be usable. So, you can change the styles accordingly. Also, orientation can be used in determining if a particular screen displays in landscape or portrait mode. Orientation can also be used to disable fixed positioning on screens so you can free up screen real estate.

Certainly, there are still lots of excellent uses for these various media features. So, it’s best that you should understand how these things can be helpful to your designs.

6. Media queries are perfect for conditional loading.

In Web pages, you can find “The Thing” but there are also other staff that are not “The Thing.” For instance, if you have a friend who shares a link with you on your wall and it says, “Check out these pictures of cute puppies!” then you promptly click the link, what will you find? Obviously, you are expecting that you will be seeing the pictures of cute puppies, well, this is actually “The Thing.”

However, it could be possible that there are other things on this page that are not “The Thing.” Perhaps it could be a few social widgets for sharing the pictures of the puppies or perhaps a feature for adding a comment on the pictures of the puppies. Or maybe you could find other related pictures of the cute puppies. Maybe you already have an idea on what these other things are.

Although these features can make the page more valuable yet they are not actually “The Thing.” What you can do is to give more priority to the main content, but at the same time, you could also provide access to the other related content and functionality.

The best thing to do is to chunk out these things that are not “The Thing” and place them on their own HTML chunks. Most often, these are third party chunks which are composed of shared widgets and comment. This secondary content should only be pulled when the condition is already appropriate.

This can be made possible by using matchMedia. With matchMedia, Javascript can take advantage of every media query goodness. This is how it would look like:

if (window.matchMedia(“(min-width: 45em)”).matches) {
/*secondary things */
}

When the appropriate conditions are met, the secondary content can then be loaded. matchMedia is a great option since it is well supported and a polyfill is also possible. One of the most powerful tools that you can use is the Conditional Loading. It gives priority to core content and performance but at the same time, it can also provide a satisfying experience to environments that can manage it.

7. Avoid Going Overboard

Sometimes using responsive design can easily get you excited with all the wonders that media query can do. It can get you crazy. Although media queries can be fun, yet if you introduce some complexity into your designs, then you might encounter some trouble.

First of all, we are already dealing with numerous complexities including device and browser support, the device landscape, the endless amount of inputs, ensuring the satisfaction of clients and teammates, and a lot more. The best recommendation is to do as little as possible.

The more complicated our interfaces are, the more we need to think about how we can accurately maintain them. Surely, it is our best interest to aim for simplicity most especially when we are confronted with such complicated Web landscape.

Well, that’s it! Now, it’s time for you to go out there and begin your media queries.

Media Queries Best Practices

Media queries have definitely gone a long way, but sometimes we are not making the most of it. Here are some helpful tips that can help you in making use of media queries effectively.

Avoid Using Target Devices

When media queries were first used, we only need to think about a few devices. Typically, a lot of people were worried about the iPhone. However, as time passed by, lots of new devices and device sizes emerged. That is why it does not make sense anymore to target individual devices.

Add Breakpoints When The Design Breaks

Since targeting individual devices is not practical anymore, then the best thing to do is add breakpoints when your design breaks. If your design is intended for the smallest device and you begin dragging your browser window to make it wider, how long should the lines be so it remains readable? Can you make better use of the screen? This is the perfect time to add a Media Query and create some additional CSS.

This method allows any device coming in below that breakpoint to obtain a narrow layout. Additionally, anything that comes in over that breakpoint will get a layout that makes more use of horizontal screen space. In fact, this is applicable, no matter if the device is a Samsung phone, a Nokia phone, or even an iPhone. This is also useful for web designers who are simply playing with their browser window.

It’s Never All About The Pixels

When making your breakpoints, it is recommended that you should move away from pixels. When line lengths are getting too long then this is a good sign that the design is already breaking and it requires a breakpoint. The best indication would be the “em” unit since this will give you a constant result in case the user obtains a larger text than expected.

Be Careful When Reordering Flex and Grid Items

It would be great if you can rearrange the layout at various breakpoints. Although this can provide a great experience for the users who are navigating through their desktop with mouse and keyboard as well as those who are navigating through the phone using their finger, it can be very confusing to some users. Particularly, those users who are having poor vision and uses a screen reader but at the same time can see what is on the screen. Also for those users who navigate by using a keyboard or other device instead of a mouse or use their finger on a screen.

Most likely, these users will skip link to link or from heading to heading since their devices will follow the items that are included in the document source and not the ones that are displayed on the screen. Hence, if you are doing content reordering at various breakpoints, then you should do some testing in order to ensure that it will not affect the users who are using the keyboard for navigation.

Bottom Line

Media queries are very useful, most especially when you are trying to create responsive layouts. Although, there are some people who are skipping through hoops with Grid in order to prevent using one. But actually, there is no reason for avoiding these useful media queries. It is expected that there will be new and useful features coming in to help us in improving our user interfaces.

Lydia

About Lydia

A keen money saver and online digital marketer. I love all things online from a good deal to the conversion rates of an email marketing campaign :).