Apple’s “Vertically Responsive” Website Design

I’ve often wondered why Apple doesn’t make their website responsive. After all, they make the devices I tend to target when I’m making websites responsive, so it seems logical that they would be at the forefront of responsive design. At the same time, I’m not terribly surprised. The work to keep their site looking perfectly appropriate at every device size would be significant.

However, I’ve lately noticed that some of their pages have been “vertically responsive.” Usually, when building a responsive design, you think about the device width. In fact, that’s all I’ve ever seen the popular responsive frameworks do. Apple seems to be paying more attention to the height.

Look at a page from the iPhone 5 slide show. Each frame of the slide show looks different depending on the height of your web browser window. It’s designed to ensure that you see the best possible slide layout, while making it clear that there’s more content below it.

In the first (taller) browser window, you see the whole shape of the phones. As it gets shorter, you get a view like the second screen shot, with the phones cropped. Every slide in the deck has similar responsive tweaks.

For another example, let’s look at their current home page on my iPhone.

In portrait, the iPad mini shown here has nothing beside it, for a greater impact. Since they have the vertical space to work with, this makes sense. But the arrangement is different if you rotate the device:

Now you have a layout that makes a lot more sense, and it’s still apparent that there’s more content when you scroll.

Apple goes out of their way to employ subtle vertically responsive design that makes their site not just more visually interesting, but more usable as well. And it’s proof that you can find an intelligent middle ground with a new technology like this.

Raymond Brigleb

Creative Director, dreamer, partner, father, musician, photographer. Has been known to ride the rails. Pulls one heck of a shot.