Apple Store moves to Sass, drops XHTML

Yesterday, Apple updated their online Store with a brand new look and feel. I did some poking around in the source code and found some interesting things:

Apple store now uses Sass

The store uses uncompressed CSS files which offers us a glimpse of the front-end technology behind the revamp. Most notably, the Apple Store now makes heavy use of Sass to pre-process its CSS files. Somewhat strangely, Apple’s developers decided to ship the uncompressed, commented CSS in the final version. An example:

/* line 62, ../../sass/bento/_ipad.scss */
.bento .row .tiles .ipad-l-20130410 .hero {
    position: absolute;
    top: 30px;
    left: 45px;
}

The dates in the selector seem to indicate when the element — rather than the product itself — was created. A strange naming convention. Once rare exception is home.css which mentions both a “2012 iMac” and a “2013 iMac”. Interesting…

What else is new?

  • The new store uses standard HTML5 across all pages. Other pages on Apple.com use the HTML5 doctype as well, but with the html tag’s xmlns attribute referencing the XHTML spec. The new store drops this attribute altogether.
  • Apple still uses images for headlines, but this time with a twist. They have developed a server-side script that generates different images based on a few parameters like size and quality.
  • The new store makes use of the Schema.org specification. Products, organizations (“Apple”) and breadcrumbs are among the types found in the source code.

Find anything else? Let me know on Twitter.

UEFA Rips Off Apple’s iPod Shuffle Ad

In between the final games of the Euro 2012 championship, UEFA is running a short ad for their “Respect” campaign. Somehow, it seems familiar.

UEFA’s Respect Ad (2012)

Apple’s iPod Shuffle Ad (2006)

D&AD: 85% of the Winning Web Sites Use Flash

The winners of The D&AD Professional Awards have been announced. Below is a summary of the winners of the “Digital Design” category. 13 web sites are on the list, 11 of them require Flash.

It’s 2012. Mobile is about to overtake desktop. Every new Mac, iPhone and iPad is shipped without Flash support. And this is what the hacks of the advertising world recommend their clients to spend money on.

Web Sites in the Digital Design Category

Title Client Technology
3 Dreams of Black Rome WebGL
3LiveShop Tre Flash
Dig Deeper HBO Flash
The Museum of Me Intel Flash
MINI Maps MINI France Flash (on Facebook)
Uniqlo NYC Now Uniqlo Flash
A New Warrior Greenpeace Flash
Philips Obsessed with Sound Philips Flash
Dots Now Honda Motor Flash
Magic Menicon Flash
BBC Homepage BBC Web Standards
Spent Urban Ministries of Durham Flash
Wall of Fame Edding International GmbH Flash

Non-web site winners

Title Client Technology
Tram Sightseeing app Västtrafik iPhone App
Guardian iPad Edition The Guardian iPad App
Pearl GTL Interactive Model Imagination Other
Mill Touch The Mill Other
Connecting Lifelines Honda Motor Not found

Using the Device Orientation API to Guess Proximity

The Device Orientation API of HTML5 tells us the orientation of the user’s device at any given moment. However, in some controlled environments it can also be used to guess a device’s position in the room.

Upperdog was recently tasked with designing and developing an (iPad) web app for one of the big healthcare companies. It would be used as a sales tool at conventions and exhibitions and when not in the hand of a sales representative it would be mounted on the walls of the exhibition booth.

The idea was to turn the app’s own “screensaver” on as soon as the iPad was mounted on the wall, but since the iPad doesn’t have a RFID or NFC chip, how can we tell when it’s mounted on the wall? We used HTML5′s Device Orientation API.

The angle of the books differ slightly. Using the Device Orientation API we can tell which book the iPhone is lying on. The colors are pre-defined.

The solution is not perfect and it’s just qualified guessing, but it works remarkably well. By adding a slight delay to the screensaver we can make sure that it’s not turned on as part of a larger hand motion.

This is in no way a replacement to proper near field communication, but in our controlled environment — the exhibition booth — it was all we needed to tell if the iPad was mounted on the wall or not.