Apple Storefronts Redux

Last year, I posted a gallery of every Apple Store ever. It was a quick and dirty project, made on a whim. But it eventually took on a life of its own, getting coverage from such heavyweights as MacRumors, Gizmodo, and Time (in that order).

If I knew so many eyeballs would be on it, I’d have spent more time getting things right. It looked nice enough, but I knew that it didn’t work right. After that initial wave of attention subsided however, I decided to leave well enough alone, apart from adding the odd new store. It was a side project after all.

And that went fine, until Apple revised their site with high-resolution images. Now the images were larger and cropped wider, meaning new stores no longer fit with the rest. So I started digging into Apple Storefronts again last week. At first, it was just to update it with the new images. But then I couldn’t help myself, and it snowballed into more.

More Changes

With the new, larger images, you see the trees more so than the forest. To address this, I added a toggle between two sizes, as well as a toggle for the labels.

In addition to the old country and state filters, you can filter by year now, and sort by oldest or newest. And these views are mapped to different URLs, meaning you can save and share them.

Then there’s the interface. I wanted the site to work better on mobile, so I adopted as my framework the tried-and-true Bootstrap. This also allowed me to use the Slate theme I created on Bootswatch for the visual design.

The new features forced other interface changes. The old navbar was overloaded with links, and now I needed to make room for more. Where to put it all, especially on mobile? My solution was to move primary filters to a drop-down menu, but keep secondary filters out. Instead, they can be accessed by clicking a particular state or year on a label.

Lastly, there’s been a host of performance improvements and a streamlined update process, thanks to Google App Engine and Django’s templating system.

So tweaked images… and then all this: version 2.0 of Apple Storefronts.

2 comments Write a comment

Leave a Reply


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>