Gradient dither in Photoshop and file size comparisons

Recently we were optimizing a header graphic in Photoshop and stumbled upon a larger than expected file size.

Wayne State University HTML email header

After further investigation of why the file was larger than usual, it came down to Photoshop setting called “dither” on the gradient background

What is dither?

With or without ditherAdobe explains dithering as:
“Computers use a technique called dithering to simulate colors they can’t display. Dithering uses adjacent pixels of different colors to give the appearance of a third color. ”
More about dither

Turning off dither basically saved 60k on this particular header image.  If you closely inspect the image on the right, (click to enlarge) you can see some slight banding, but you have to look very close and zoom it up.  For all intents and purposes on the web, the difference is so slight that we could most likely turn off dither for our gradient graphics.



How to turn off dither on gradients in Photoshop

  1. Click on the gradient layer thumbnail in Photoshop, a gradient fill dialog/settings box will pop up.
  2. Unselect the “Dither” checkbox

Dither selection in Photoshop

Overall this saved us about 60kb in file size, which is amazing considering we have over 100 different HTML email template headers!

Try it out for yourself and let me know your results in the comments below!


Making HTML email images look sharp on high-resolution screens

Fuzzy LogoDo you have “fuzzy” images when you test your HTML emails on “retina” or HiDPI devices and screens?

I did some HTML email testing in various optimized image file formats like jpg, gif, and png.

I was tasked with looking at graphics like the header and footer of the HTML email template. These are different from a jpg photo image and will talk more about that later.

The header was originally saved as a jpg at 600px wide and the file size was around 17kbs.
Not bad, but when I would preview it on my retina devices, it would look fuzzy. So I used the 2x image optimization method to see if we could make it look better while keeping it relatively close to the previous file size.

How to approach the image optimization of graphics in Photoshop

  1. Take the original image size and make a new document in Photoshop that is 2 times the size. (In this case, the original graphic was 600x100px, which would be sized up to 1200x200px)
  2. The new larger document must use vector or larger dpi images that won’t be fuzzy at that new larger size.  (You can’t just resize the original image up, stretching the pixels)
  3. Once you have the new artwork or bigger image you save it for web/optimize it so the file size won’t be huge.

Here are the results and file formats:

Wayne State University HTML email header graphic

So for a graphic with vector images, the best results are to save as a png-8 or gif.  You can adjust the amount of color to save more filesize to your liking.  As you can see png-8 actually saved a couple of kbs of size and this image is double the size of the original jpg!

We also resized and optimized the footer images:

Wayne State University HTML email footer images

In this case, we tested the png’s as transparent as well which came out slightly bigger.  So again either gif or png-8 format would work.

Final results

WSU HTML Email Template 2x

Speed test

3g speed origninal images at 1x
3g speed original images at 1x


3g speed new images at 2x
3g speed new images at 2x


Looking at the test results you can see there are not much different, although we did end up saving some filesize and load time on the new 2x images.  Along with saving some kbs, the ultimate goal of making it look sharp on “Retina” and HiDPI devices was accomplished.

For jpg photo images in HTML emails, you can do something similar to the method above by following the instructions on, “How to make jpg images 2x for “Retina” and HiDPI devices in Photoshop”.

View Post

That’s it! Pretty simple solutions to make our HTML email images crisp with keeping the file size low. Let me know if you have comments or questions below!

YouTube embeds just got a little more clear

A few years ago we added the ability to embed a screenshot from a YouTube video through the CMS editor. This alleviated the need to take a screenshot, edit with software to add the play button, and then finally uploading it to the web server to embed it into a page or an email. With one click, pasting the url of the video a screenshot of the video can automatically be generated and embedded into a page.

But there was a problem

YouTube play buttonThe default YouTube play button at the time was a red rectangle which does call a lot of attention and allows users to immediately identify what will happen when they click the image. It became a problem over time as more of our videos (especially now that we can upload a custom still photo as the default screenshot) became people with a YouTube play button head:


New YouTube play buttonWe are happy to announce the play button graphic has been swapped out with a more transparent version that equally emphasizes the screenshot and the fact that the image will link to a YouTube video.

Now at a glance you can see the details in screenshot while still still understanding the link will bring the you to a YouTube video.

How to use the YouTube screenshot button in the CMS:

YouTube Preview

So you want an HTML newsletter?

The types of projects our department takes on seem to go in waves. A bit of a history lesson takes us back to an abundance of websites which pushed us to build the CMS. The many events that followed gave us the idea to write and centralize them all in to a university events calendar. Then came the RSVP’s for those events. We got fed up creating hundreds of forms so we wrote an RSVP system for the events calendar. After that the campus community could maintain their own websites, and create events and RSVP’s by themselves. They then asked us to create pretty HTML emails to announce all of these components and we did that for a while before crafting the self- serve HTML email creator.

Everything goes digital

Now we are on the age of transitioning traditional print newsletters to digital pieces. These are a little more complex than the standard email and sometimes connect to a broader website with more information. In the last four months we have literally transitioned more than ten complete print publications to online editions. I would love to say that in those four months we created a self-service system for the entire campus to create and maintain publications, but I can’t. They all seem to have some unique factor that required individual attention.

Multiple flavors

Requesting a new HTML newsletter can result in a 2 hour or up to a 40 hour project. It’s important to know what you need before starting the process. Let’s walk through the process of the newsletter request and I hope I’ll be able to shed some light on the reason for the complexity.

Simple single column email

The most basic email is just a single column with a single message and any action items go off to existing websites. The types of emails have a custom header that identifies your department or group and is reusable at your leisure.

Here are a few examples of single column emails we have done:

Multiple column email

Typically a multiple column email is required when there is a single message that needs to be communicated and the content warrants “action items” on the side. These can be: upcoming deadlines, buttons for next steps or just “for your information.” They’re a little more complex but offer some flexibility to highlight multiple items “above the fold”. (BTW, there is no fold on the Web.)

Here are a few examples of multiple column emails we have done:

Multiple column newsletter

Using the same format as the multiple column email the newsletter takes it one step further and keeps a consistent format but with categories and articles feeding in to compile a complete email. Typically the format is set up and each month/semester/year a new “publication” is created which consists of article titles, teaser descriptions and links off to more information.

If the links for each article go to existing stories already published on the Web it gets the user to interact with multiple areas of your website and possibly explore things they otherwise wouldn’t have without being prompted by the email.

Here are a few examples of multiple column newsletters we have done:

Newsletter Web page

Lastly the most complex and time consuming is the HTML newsletter that has a stand alone website which features the full text of each article and is organized like a newsletter with editions and archives. This approach is really driven by the print mentality of compiling an entire edition of articles and publishing the entire thing at once. It wraps up the email and website into a single package for the user to experience. One of the downsides, just like a printed newsletter/magazine is once the user receives it and browses through, they typically recycle it or close the window and never come back. Their only reason to come back in the future is when their next email comes in. It isn’t “sticky” and doesn’t build continuous engagement, but in the end it’s what most traditional writers are comfortable with.

Here are a few example of newsletter websites that we have done:

Thinking about requesting an HTML email?

Make sure you have thought through how you want it to work and be prepared to answer some tough questions by our team. Just because “email is free”, aka you don’t have to pay postage, it doesn’t mean that your audience will engage the same way they have in the past.

Email overload: Who is getting your attention?

Something that has been on my mind for a while is the massive amount of internal email we get and send at Wayne State. There have been countless articles written about the death of email but from the user’s point of view it has appeared to pick up faster than normal. We do have a proposed solution coming, but is it going to be our saving grace? Or just another piece of noise?

Hoarding emails

I have a special “_email” folder in my inbox where I place ALL internal bulk mail. My hope is one day I would analyze it for who is sending out the most, create a wordle of the subjects or body of the messages but I just have not had time. But I wanted to do something useful with them.

The 10 second test

Just like a website, email has the same “10 second test” factor. I would argue it is shorter and a message may not even make it to the test if the subject (or sender) isn’t appealing enough. Since creation is decentralized on campus it is impossible to have a consistent message through every email. Additionally, every email has a specific audience who has different tolerances to the information they are use to (willing to) receive.

Standing out

For those of you who don’t get as many emails as I do, I put together a representative sample of what is coming out of the university and going in to people’s inboxes. I am making no judgement about the content of the emails, purely looking at visuals in this case. Flip through the examples above as an end user. Some of which went out to lists with 50,000+ people on them, are they conveying the message you think they are trying to convey?

If you were trying to get your email read and have the recipient take action, how would you stand out? Which messages would you pay attention to? What catches your attention? Is it the images, colors, headings, links?

New Newsletters: Exemplar & Synergy

This last week we launched two newsletters. Over the last year or so schools and colleges across campus have been transitioning their traditional print publications to the web. Right now most are doing dual format but we expect them to go all digital over the next few years. This will not only allow them to save money (on postage and printing) but also get the word out to in a timely manor and start interacting with their audience.

College of Engineering – Exemplar

Traditionally a print magazine and will still be for some time but now they give their readers the option to read and subscribe online. The main audience is alumni and unfortunately they don’t have email addresses for them all. This is a slow transition by promoting the online version in print to get people to subscribe to the email and online version. It is still early so we don’t have statistics yet to show the conversion rate.

View the Exemplar Newsletter

College of Pharmacy – Synergy

Also started out as a print newsletter but this one has gone all digital, no more print. Traditionally they would publish a PDF of the print version online but not many people were reading them. The new site also includes an HTML email formatted specifically to promote the primary articles and upcoming events. Below is the preview of the email.

View the Synergy Newsletter

Overall this trend doesn’t look like it’s going to stop. Almost all the school and college sites we do have brought up bringing their newsletter online. Initially these were all custom but as we do more of them we noticed tons of similarities. We are building the tools to bring this capability into the CMS for anyone who hosts a site through us to use. We will keep you updated on these features as they become available in the CMS.

How we handle dozens of web requests per day without a ticket system

Because we oversee 350+ Web sites and get a large number of new requests, questions and maintenance requests each day it’s important we have an efficient way to manage them all while still getting other work done. I cannot be at my computer all day so most of the requests have to be read and assigned by the team itself.

How we do it

We have a central email address. web [at] wayne [dot] edu. That email goes into a central inbox. Inside that inbox everyone has a folder and there is an archive folder where every project we work on has it’s own box.

This inbox is mapped to everyone’s computer. Throughout the day different people check the box and scan to determine who is the most appropriate to take each request. They put the email in the person’s folder and move on. The inbox then syncs across everyone’s computer.

We use a plugin called TruePreview for OS X Mail that keeps email’s unread until they are double clicked or force marked. This makes it possible for each of us is scanning the folders to see how many new emails are waiting.

This process allows everyone to have a list of items to read and respond to. If it was assigned by accident they can just move it into someone else’s folder and move on.

Completed Tasks

Once an email or task is done the whole conversation get moved into the z_Archive folder. Every project has their own folder to things are kept nice and neat. The beauty of it is the folders automatically update and everyone has the same content on their computers. No conversations or files are lost.

Why not use a ticket system?

Over the past 6 years we have played with the idea of a true ticket system, and have even tested a few. The problem is a separate system brings a level of unnecessary overhead. We don’t really need to pull stats from all the tickets and our staff really isn’t that large. Everyone already knows how to use email and having a central single interface makes processing hundreds of emails quite easy. There are downsides to our system though, like if someone deletes something it will probably be overlooked or if someone is sick and no one looks in their folder to pick up tasks. But this is a risk we are willing to take and is inherit to any task based system.

Simple solutions

The solution to this tough problem doesn’t have to be a complex system. Our department strives to use existing tool and centralize and streamline as much as possible to get the most bang for the buck. We are use to working with limited resources and we apply this philosophy to everything we do. In this case a zero cost crowd sourced analyze and assign system was the best approach. I cannot be at my computer all day and I don’t want to be the one to have to  look at all the requests and assigning them. Everyone knows their capabilities and has the authority and position to act on them as they see necessary. It’s a beautiful system that just works.

Added: I’m in no way saying this system is going to work for everyone but it works great for us.

Testing HTML emails efficiently as possible

Recently, I talked about the pros and cons of sending HTML vs Text emails to your clients in this article “Filling your inboxes with visual appealing HTML emails”. Since HTML Emails are becoming increasingly more popular to send here at Wayne State, we are trying to come up with a system that makes this painstakingly clumsy process as streamlined as possible.

Third party testing

If you have one main template and don’t have to create new ones often, a pay email testing service might be for you. For a small fee you can use one of these services to send your HTML code to and then it will produce screenshots of how the email looks in the most popular email clients. In addition, some of these services will also test how your email will react with spam filters.

Pay for testing resources

screenshot inbox inspectorlitmus email screenshotscampaign monitor email screenshots

Testing in house

If you don’t have the resources or funding to go with one of the automated services, you can go the “old fashioned way” and set up a series of test email accounts on all the popular email clients. To begin with, set up accounts on Hotmail, Yahoo, Google, AOL and of course, Outlook 2000, 2003, 2007 and Outlook Express. Don’t forget to test Apple Mail 2 and 3 and to test on the iPhone as well. This will get you tested in over 80% of all the popular email clients, according to Campaign Monitor as of June 2009, in their article Email client popularity.


Don’t forget to test email in popular mobile environments as well, iPhone for example is now more popular than gmail in viewing email. Once you establish some main HTML email templates the testing will get easier. When designing email templates, keep it simple. Trying too much, is one of the biggest mistakes designers do when creating HTML emails.

Here are some more good resources for getting a professional and cross-platform HTML email below. Remember to test, test, test!

Free HTML testing resources

Other resources and HTML email information