Media Queries

Media queries are an obvious tool in designing the user interface. However, I believe there are very important, often overlooked ways to use media queries.

I believe media queries should be used to provide great experiences to most devices and delightful experiences to more capable devices—all in ways that fit a user's needs. The experience does not need to be the identical for all users, but they must all have the same access to the same information.

Don't provide all of the bells and whistles to everyone and then remove them with media queries. Do just the opposite—add enhancements if the user wants and can benefit from them.

Mobile First

Exactly what the name implies. Design for mobile first! I know that sounds obvious and repetitive, but it is often the secondary focus when building a website. How many times have you seen the CSS file of a site and they add media queries later in the code to accomodate smaller and smaller screens. That's doing it backwards! Code should be done first to look good on smaller screens, and then use media queries to enhance the layout of content as the screen size increases.

Touchscreen, Mouse or Trackpad?

Are you accomodating devices where the pointer is a finger instead of a mouse or trackpad? Are you using :hover to create unique effects that can't be easily seen on touchscreen devices? If you are, you should be accomodating those devices to present any information they might miss out on. For example, hovering over an image shows an overlay with text. On a touchscreen device, the user is less likely to be able to see that feature. Again, it comes back to Mobile First.

Accomodate ALL Users

Your interface might be awesome with cool effects, but please make sure you are sensitive to your users. Add motion effects only if the user hasn't set prefers-reduced-motion to reduce. Add transparency effects only for users that haven't set prefers-reduced-transparency to reduce. Do the same for prefers-contrast and prefers-color-scheme. And don't forget to adjust your layout for the ambient light level of the device.

In all cases listed above, you can link to external style sheets that add enhancements using media queries as they align with the user's preferences.