Chris Caldwell

As Creative Director for gskinner, Chris constantly pushes the boundaries of technology and design. His innovation has allowed him to work with large brands such as Google, Atari and NASCAR, and earned him multiple international recognitions from the Webby’s, FWA’s and Pixel Awards. To learn more, connect with Chris online at CodePen.io/chriscaldwell or on Twitter @caldwellcreates.

A Mental Model for Media Queries

Handling layout changes across a broad landscape of devices and browsers typically involves the use of media queries, which enable layouts to bend and flex based on their viewing environment.

Most queries I see are built around the concept of width:

@media screen and (max-width: 640px) {
    body { background-color: blue; }
}

I love the simplicity of this methodology. It’s straightforward, easy to implement, and it works with content that comprises most websites. But what about web-based apps, the website’s younger cousin? Is this model the most effective media query strategy that can help us with the unique challenges of designing web applications? Continue reading →