Ugh, using this phrase makes me cringe! All too frequently, too many people come up with what they consider to be best practice when talking about subject X or topic Y.
This said, there are some useful tips we can use when creating media queries; they aren't just about following best practice, but equally making things easier for ourselves, so that we can display the right content on the right device at the right time:
- Always start small when designing media queries. This will avoid browsers downloading unnecessary elements that are only needed for larger screen sizes. Starting large is possible, but often requires some heavy reduction of content and is not likely to be as easy to manage.
- When designing queries, don't immediately think you have to include everything from the desktop site on a mobile device. Sometimes it doesn't make sense to do so. More often than not, there simply isn't space or bandwidth to do so! It's important to consider the context of the site you're building for, to ensure you include everything that is suitable or appropriate.
- Give plenty of thought to how content should be prioritized. For example, on a blog site, we frequently see images against article teasers. These won't transfer well to smaller screens, so consider removing these images and leave details of the article, when it was written, author's photo, and the likes. We can still get our message across, but this time just by making some simple tweaks to our design.
- Take care when using media queries with images. Page sizes are on the increase, so it is vitally important that we reference the right image in our queries. Equally, if we have effects such as carousels in place, then we should consider replacing it with a static image; this means we can significantly decrease the size of the page, as a large proportion of the images can be be removed.
- Don't even try to cater for every device available on the market; research in 2015 has shown there to be over 24,000 distinct Android devices, making for a highly fragmented market, which is difficult if not impossible to support in its entirety. Again, server logs will help identify devices being used to access your site. A check through these will identify your top mobile browsers, on which you should focus your efforts.
- When designing, consider using em (or better, rem) units. Pixel values work well for normal design, but do not operate so well when zooming in, which is frequently done with responsive sites. If we use em (or rem) values, this allows the browsers to automatically adjust the design of our site, based on the zoom level in use.
- Make your navigation scalable. Clarity and consistency should rule over similarity to the desktop site. Don't be afraid to use something that is entirely different to the desktop site; clarity and ease of navigation should rule over any other factor, such as color.
- Use icons and fonts where possible, or even SVG images. These scale much better than standard images, particularly if we are using media queries. We can even change the content of the latter using CSS, and still maintain clear images throughout.
- Pay attention to font sizes. We can absolutely use media queries to display larger or smaller fonts, depending on what screen estate is available to us. The key to note though is that if we use percentage values or em/rem units, then these will scale better, and may even remove the need for media queries to handle fonts.
- Watch out for users with visual impairments, such as deuteranopia or color blindness. The available screen viewport on a mobile device will already be smaller; your users will definitely not thank you if font sizes don't scale well, or you've chosen colors that clash, such as white text on a red background!
There is a lot we can accomplish by simply using a text editor, browser, and some careful planning. The great thing though is that we can use media queries to help with many of these tips. It's just a matter of planning so that we don't create more queries than are needed!
Let's move on. Throughout this chapter, we've focused on what is possible when simply using a browser and a text editor to create our queries. I strongly believe that too many simply resort to picking the nearest library to help with constructing our queries; time has come to get back to basics!
This said, there may be instances when we need to use jQuery or a specific library to help produce our queries. A classic example is to incorporate support for older browsers, although it has to be said that it is debatable as to whether we should still support old technology. Assuming though that we have a valid need to use a library, let's spend a moment or two to explore some of the options available to help with creating those queries, that can't be satisfied with simple CSS.