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.
- 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