The iPhone was a revolutionary device. Not only did it reinvent the mobile phone, but it kickstarted the responsive revolution. Although the iPhone supported the 'full web', we designers wanted to create experiences that were optimised for these smaller screens without redirecting the user to a completely different website.
Luckily, a solution came about quite quickly, in the form of media queries and the viewport meta tag (if you don't know what either of those things are, you should read this). At last we could create mobile-optimised websites with great ease! But with this great power came a great responsibility. One which many designers chose to ignore.
The iPhone monopoly
Not too much later, more and more websites were beginning to adopt the viewport meta tag and CSS media queries to reshuffle and optimise their content for smaller screens. There was, however, an unfortunate trend beginning to take shape. Designers were crafting their websites for the iPhone, and the iPhone alone, setting media queries at the familiar widths of 320px or 480px, leaving all other devices to make do with what they got.
Skip forward three years to 2010. By now, there are hundreds of websites with a media query just for viewports below 480px reshuffling the content around for optimal viewing. It gets worse, too. Many of those sites were tailor-made for the iPhone's exact dimensions, with fixed elements and backgrounds designed to fit snugly around the iPhone's screen. CSS prefixes aside, this was an iPhone world, and something had to be done. Then, along came the iPad! At last—developers would realise that they can't afford to keep designing for just one viewport, because even the Apple-crazy would have to design for at least three different layouts now! Finally. We would all stop this madness and build our media queries on a per-design basis, with no relation to any device.
If only it were so.
Won't somebody please think of the design?
Rather than do the sensible thing and design fluid layouts that would work on just about any screen size—from your iPhone to your iPad to your MacBook and beyond—it seemed like a better idea to the majority of designers to simply incorporate yet more device-based breakpoints into their media queries. So now designers were crafting websites around breakpoints at 320px, 480px, 768px, 960px, and 1024px—as well as those created to fit into the device's exact dimensions. I simply can't imagine the maintenance involved in a site as delicately designed as that.
What these designers failed to remember is that not every design is the same. Projects have different requirements and restraints. The 960 grid system won't always be a good fit, nor will the 1140 grid system, or any other responsive layout you used on a project. And not everyone has an iPhone. Android devices have a vast array of screen dimensions, and every one of them would pick up the viewport meta tag and media queries that you built specifically for the iPhone. Needless to say, some users would be surprised at what they find.
With any luck, the arrival of the iPhone 5 will help to get designers out of this one-breakpoint-fits-all mindset. The mistake that these designers have made in their approach to responsive design is device-based media queries instead of design-based media queries. They failed to remember that breakpoints are exactly that: points at which the design breaks and falls apart. When two columns become unreasonably small and the content becomes too cramped, the design breaks and you know there should be a media query there to fix it. Don't let device dimensions dictate the flow of the design.
And if the iPhone 5 doesn't get that message across, perhaps the iPad mini will.
