Looking Beyond Common Media Query Breakpoints

With all the talk about responsive Web design, designers and coders are moving even further from the fixed pixel layouts of design’s print-based history. We’re finally thinking in terms of fluid layouts and expandable, interactive content. But when you get down to it, we’re still thinking of the fluidity in terms of desktop, tablet and mobile sizes.

Chances are that your responsive websites have media query breakpoints at precisely the tablet and mobile widths, essentially creating three different versions of a website with the same code. While this is much more ideal than what we’ve all done until now, it’s not always the best way to approach things. Often, our content breakpoints (the viewport widths where content should be reformatted) are different from common device breakpoints (the viewport widths that reflect physical devices).

When we code for only a general desktop size, a general tablet size and a general mobile size, we are forgetting about the infinite other shapes and sizes that our devices are and will be in the future (especially as TV becomes a more popular medium for Web content). We’re not truly utilizing the full potential of responsive design. We’re not truly coding for any device.