Virtual Prep Academy

Virtual Prep was looking into moving to the state of Georgia, but wanted to get some data on the interest of another choice for schools. We wanted to create a set of digital display ads with a built-in form to streamline the process of the user having to go to a landing page to get to the form. Our original plan was to use the Google Web Designer, but we learned that with its limitations we couldn't get it to do everything we needed. That was when we decided it would be best to build responsive HTML5 display ads.

This project certainly had its challenges which we learned and grew from. The most notable challenge that we overcame, was an issue where specifically on Google Chrome with the zoom set only at odd zoom levels (ie 125%) the layout become distorted. After determining that this was a Chrome browser issue only with zoom applied we began our investigation.

After taking a step back to analyze this issue we thought that perhaps there was a math rounding issue with how Chrome was determining the screen size with zoom applied. If that were the case we needed to know how far off its math was. So to test this theory we decreased the min-width and max-width, so that 10 pixel "buffer" was applied to each size constraint. Immediately that fixed the layout issues. We wanted to know exactly how far off the math was so we kept adjusting with the media queries until we found the minimum amount of buffer with the max amount of zoom applied so that the HTML5 Ads layout was correct. The optimum "buffer" we found was 2 pixels and that is for both the width and height. For example here is the media query that is being used on the 160x600 size ad: @media screen and (min-width:158px) and (max-width: 162px) and (min-height: 598px) and (max-height: 602px).