Today marks four years since Ethan Marcotte’s seminal piece on responsive web design. Since then user expectations have changed considerably with mobile compatibility being a standard feature rather than an optional extra.
Looking back at Ethan’s original article, how far have we come and how much has his original idea been diluted as it has been adopted into everyday use.
A Flexible Foundation
Responsive frameworks settled very quickly upon an adaptive rather than flexible model where a design is broken down into a number of fixed breakpoints that match more or less to the current range of device screen sizes. This works more or less for the current range of smartphone and tablet devices, but fails dismally when the user has a larger monitor as most frameworks become fixed at around 1,200 pixels. It’s also not future proof as different form factors are likely in future to use different pixel dimensions that don’t align to the current break points.
Media Queries
Everyone wants to see how their site looks at different screen sizes and as a result max-width has largely replaced max-device-width when defining media query breakpoints. At the moment most devices treat max-width to mean the same as max-device-width. While this makes it simpler in practice, it makes it hard to define “what is a pixel”. This could become problematic should devices in future allow split-screen applications rather than the limiting every app to use the full screen as screen resolutions continue to improve.
Adapt, respond, and overcome
In the original piece, Ethan advocated defining precise percentage widths to columns. To large degree this has been dropped in favour of simpler grid based solutions where the widths are pixel based fractions of the current fixed width. Similarly pixel based media queries are more common than ones using em breakpoints.
Responsive images are still problematic with various polyfills and hacks taking the place of a native HTML element that supports multiple image sizes or resolutions. The current use of data attributes seem to be the best fix with increasing support within popular content management systems. Unfortunately it will be years before the picture element and the srcset attributes becomes standard.
Looking back, the original concept of responsive design has lost some of its original message.Considering the alternative of non-responsive or separate user-agent driven m-dot designs, it is still the best solution for the future.
