Mozi-Makeovers: The Results from our “Mozified” Newsletter are In!
Posted September 21, 2012 by Michelle Klann
Last Wednesday - September 12, 2012 to be exact, we sent out an email blast with more information about Mozify along with a crafty headline image demonstrating the capabilities of our new tool! Thanks to all of you who watched our introductory videos and shared your interest in using Mozify!
Once again, the number of requests to join our private beta has blown us away and the stats from our email campaign were even more amazing!
Several of you have asked how we pulled this off so let's dive into a brief tutorial which explains each of the steps we took in more detail.
First, let's take a look at our final newsletter.
|Before Images are Downloaded:||After Images are Downloaded:|
We designed our header so that it would display a different image before and after images are downloaded. See, that's the nifty thing about Mozify, you can create mosaics from one image and then display an entirely different image once images are downloaded.
We also used a different headline for each instance. Notice, both headlines can stand on their own. In other words, if someone doesn't download images, they still read "Say goodbye to image blocking." And, in the instance that they open this email in Apple Mail (which does not block images by default) they can still read "Say hello to Mozify." Each message is succinct - so it's not confusing to our readers if they see one, or both.
The nice thing about having two headlines is that we were able to incentivize our audience by luring them into downloading images.
We sliced the before and after graphics into 4 parts and created an HTML table to hold each of the images so they line up perfectly. Here's an example showing our Photoshop slices:
Note: Using a simple naming convention makes for a simple search and replace later on. For example:
before_1, before_2, before_3, before_4
after_1, after_2, after_3, after_4
As we mention at several points on our online demo, the goal is to keep the total file size of your email below 100K and the more conservative the better. By breaking up our image into 4 parts, it allowed us to create 4 different mosaics, each with a different addition to the total file size.
The left and right images don't have much detail so we set those up using 10 X 15 rows and columns and their total file size is around 5.5K each.
For the center image, we used a higher number of rows (50) and columns (45) so that we could get more detail in the man holding the sign. From there, we merged several rows and columns to save in total file size. Merging a large area in the middle also allowed us to insert the "?" using stylized text. The total for this came to 31K.
The bottom image was pretty straight forward. For this, we created a 60 X 10 table, merged several rows and columns and inserted our headline into the merged area. The total for this came to just under 5.8K.
From there we optimized several additional graphics such as our logo, the buttons to view the online demo, and the latest release headlines by using Mozify's "insert text only" option.
Here's step 3 from start to finish:
Next we downloaded the new source from Mozify, replaced all instances of "before_" to "after_" and voila!
We've had internal talks about allowing you to swap out the "downloaded" version within the Mozify application itself so that you don't have to run step 4 but this is dependent on application updates that might take a priority before our official release.
TEST!!! Last, but certainly not least, we sent our finished email from our sending email service provider to our Email on Acid account in order to preview our final newsletter with images blocked and with images downloaded. We even shared our test results with our entire team to make sure we didn't leave any stone unturned!
Thanks again to those of you who have participated in our private beta!