How does the new iPhone affect web designers and developers? It doesn't.

Seriously, it doesn't. The only change in recent devices to affect web designers and developers was the retina screen from Apple and subsequent hi-dpi screens from Samsung et al. This required designers and developers rely more on CSS and dynamic rendering.

We should be designing around content and developing around the natural breakpoints of the layout - neither of these should be based on device widths.

Responsive design is starting to emerge from its infancy and best practices are beginning to solidify. With this, the concept of setting 'tablet' and 'phone' breakpoints have begun to wither away, as they should, because maintenance of such techniques is time consuming and inefficient.

The iPhone 4, with its retina display, caused a great deal of change in the web world, but it wasn't dependent on the size of the screen but rather the pixel density. To respond, developers began using @2x images for web in combination with 'min-device-pixel-ratio' media queries so they could serve higher density images to those devices rather than sticking with pixelated images.

The iPhone 5, announced on the 12th, does not change this game for web designers & developers any more than the 4s did. The retina and hi-dpi display has become a part of most developers' accepted workflows for standard sites, as well as responsive sites. The taller screen doesn't change how one will design their pages because you can't design based on any single device, and the same will be true of developers building out interactive prototypes and final products.

Brad Frost and Mobile Devices

After all, you can't expect to set breakpoints to cover all of these screens. - bradfrostweb.com

The critical point here is that the release of the iPhone 5 with it's taller screen is just another nail in the coffin of device-based breakpoints. We should not be building our sites in the desktop/iPad/iPhone model anymore. It is an arguable point that we never should have done that. The idea was risky then and is downright terrible now.

Design around your content and build around the design's breakpoints - your work will look great on any screen regardless of the screen's pixel density and physical size.


*Note: Header image shows an iPhone 4s with the CATALYST iOS Theme.