ABA Responsive Web Banner

General Description

This was an exercise in developing a responsive web banner template in HTML5 to replace an outdated static banner template.

At the ABA, a standard web banner project consisted of laying out multiple marketing ads on pre-defined sized artboards in InDesign and then exporting all ads as JPEGS to ensure that the client would have a choice of ads for use at the appropriate size and orientation for upload.

My banner method involves defining a series of standard web banner heights; and through the use of an iframe, import a single html file that adjusts to the widths of any viewport.

Custom Features

  • Variable-width banner ads are more conducive to responsive layouts
  • Can be tracked with Google Analytics
  • Sharp type and small overall file size
  • Easy to modify after deployment
  • Can incorporate dynamic server-side scripting if necessary