Salesforce and other related technology. Estd. 2012
Why responsive design breakpoints aren't enough
29 Oct 2012
Responsive design as a concept has been around for a while now (a good couple of years in fact). Harnessing the power of CSS media queries and setting break points were the order of the day. Many of the awesome CSS frameworks that exist such as 320 and up, and Bootstrap are prime examples of responsive design frameworks that harness CSS media queries, setting logical break points to account for mobile phones, tablets, and ultimately desktop computers.
The problem faced by designers and developers nowadays is that with the sheer amount of devices coming to market, what can be defined as a logical break-point in CSS? 320 pixels is good for an iPhone in portrait mode. A problem with retina displays is that twice as many pixels are crammed into the same screen size. This is also true of other screen technology manufacturers. With an ever-increasing pixel density being put into a screen of the same size, a pixel-based break-point is no longer enough to work with in responsive design.
Content is now taking over as the medium in which to define breakpoints, not the screen size anymore. In conjunction with best practices (such as 80 characters for optimal line length for text), media queries will be influenced more and more by the content being served up. I can think of a dozen smart phones, with the same physical screen size, yet varying wildly in supported pixel density available.
We're entering a world of Responsible Responsive Web Design, where size doesn't matter.