Apple Responsive Retrofit

Last week I helped out Ben Callahan of Sparkbox with a bit of an experiment with Responsive Design. Ben has created a clever system to illustrate the ease of retrofitting an older, or non-responsive, website to be responsive. With this experiment Ben asked me to take on Apple's website. To view the results of this experiment, check out the GitHub README.

Overall the project proved to be very educational. I clocked in about six hours to turn the Apple homepage responsive. Unfortunately this retrofit is specific to the MacBook Pro with Retina Display hero shot. The Apple website has several CSS files overwriting each other in some form or another. Globally this retrofit will work for the navigation and likely the footer. But to fully retrofit a site like Apple's could take a week or so.

I started small and reworked the navigation to fit within the width of my iPhone and worked my way up the original 990px fixed width. Most of Apple's shine and gloss on the nav are images, so that had to be stripped out. I replaced it with a simple linear gradient on each of the links.

The Apple website at a responsively mobile screen size.
See full page at 392px width

The two column nav worked well for smaller sizes and and as the screen size grew it made sense to progress to four columns. This is where it became apparent that Apple was using images for text in the nav items. This meant scaling the text was not an option without losing the integrity of the design. So the image text remained, as did the search bar under the nav items.

The Apple website at a responsively small tablet screen size.
See full page at 678px width

Apple built their website for 1024 × 768 screens, but not 768 × 1024. This is the point on Apple devices that Apple's own website begins to scale down. The fun fluid part of responsive though, needs to account for the sizes between 768px and 1024px. So, the next major breakpoint still leaves the navigation as two rows and it stays that way until we get back to Apple's original 990px width.

The Apple website at a responsively small tablet screen size.
See full page at 907px width

CSS is quite powerful. I have always approached CSS with my own designs, building from the ground up. Overwriting existing styles to make fixed widths fluid proved quite effective. I can see how an experiment like this can be used to show clients an effective way to take their website mobile without a complete overhaul from a visual or structural standpoint. Be sure to check the Responsive Retrofitting project on GitHub.