Latest Comments
  1. Jaina

    Did not realise gifs weren’t used in this campaign – that is impressive! Overall thought this campaign was really nicely done, but if I were to nitpick, I just wish their interactive elements looked more like they were meant to be interacted with. When I first saw the email, the main action points blended in with everything else.

  2. Alexander Barber

    Really nice looking email and definitely a good first attempt, but it does seem to have a few problems.

    It doesn’t have the fix in place for rendering with the old Webkit bug that came from early webkit days. This effects android (not so much in this email) and has recently cropped up with iOS9 so it isn’t rendering correctly on iOS9 mobile devices.

    The file size is 166kb as just HTML so not taking Images into account which has caused gmail to crop the email.

    Pretty and as I said amazing first attempt but a lot of things that need cleaning up. Some rather old email HTML techniques in there that are pretty outdated now that could be removed to save some space.

    • Justin

      Interesting points. Are you referring to the general sibling selector (~) bug? I noticed there were two instances where ~ was used although I found that the email still worked on my iPhone 6 which is on iOS9.

      • Alexander Barber

        It’s mainly due to the complexity of the media queries, they are slightly too targeted for their own good I think, the iPhone six appears fine because of it’s screen resolution. iOS 9 on iPhone 5 range seems to not mobile optimize the whole email leaving the interactive area to be tiny. Essentially, like the sibling selector “bug” on old webkit you will also see a few more quirks brought over. The way media queries are handled is one of them.

        It’s best to keep media queries as tight and exact as possible:
        @media only screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 640px) and (-moz-images-in-menus:0){…}

        This would have achieved the exact same as their huge list of device widths, as you could just 100% the width and center contents. This may or may not render the “kinetic” version on AOL chrome though, depend on how you have setup your headers.

        • Alexander Barber

          Also just FYI you don’t always need that sibling selector fix you mentioned above, having something animated with keyframes is usually enough. The fix is a catch all.

          • Justin

            Thanks for the technical insights! Interesting to know that the animated bugfix isn’t required per-se for the sibling selector and its there as a catch-all.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">