Spotify Advert (NY Times demo)

A demo for the NY Times showing both responsive design using CSS Responsive Grid and showing digital advertisements at different stages of viewports.

In this mock up, I’ve taken the static ads of Spotify (that was currently running on NY Times) and animated one as a header advert using After Effects. The animated header will appear at top after it meets its designated viewport resolution for a desktop.

The animated header would disappear, leaving room for the New York Times logographic to stand on its own in mobile view. A static version of the Spotify advert would appear within the body content of the article.

 

Turned a static Spotify ad into a looping animated header ad.

 

 

 

Below is an animated GIF demo showing how the Spotify animated and static advertisements will display (and hide) based on different viewports.

 

Animated demo (GIF). (May need to reload page if you don’t see the animation.)