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!

When less is more, A/B test insights

Last year we re-focused on the admissions area of to reduce the depth of the site (from five to two levels deep) and bring more resources to the front page. As a result the landing page highlights the six most popular audiences and their navigation items.

Each audience has its own landing page, with the same navigation and unique elements which speak to that audience. We found these audience landing pages were being visited less frequently than before the redesign.

Our theory

Initially, we thought users were clicking on a link below their audience heading and getting directly to their needed page. We decided to test this theory using a tool called Hotjar to record where users clicked on the page.

Admissions homepage clickmap

Although each audience listed their entire menu below the headings, the top three items were by far the most popular.

Revised hypothesis

We decided to test if removing the least popular items made it more clear to users that they could visit an audience landing page. If this is the case, are they more likely to visit these pages by clicking the audience heading or ellipse at the bottom of the link list?

“A” variant of the page

Admissions A variant

“B” variant of the page

Admissions B variant

Winner: Shorter list of links with the ellipses

After running the experiment for two weeks, Google found a statistically significant winning version.

Admissions experiment results

Headers or last item ellipse?

Admissions header vs. Ellipse

Of the clicks to the audience landing pages, the headers yielded ~2.5% of the clicks while the ellipses yield ~1%.


The takeaway from this experiment is it’s possible to go too far while reducing the depth of a website. Having everything accessible from the homepage may be good if you’re familiar with all the options, but it can be overwhelming for unfamiliar users.

Keeping a website as flat as possible while reducing the number of choices to entice users along yields the most interactions. It allows for the addition of refined and contextual content to reinforce a user’s decisions along each page of their journey.

Refresh Road Trip: Keep The Mobile Web Quick & Better Design with Reusable HTML & CSS – July 25, 2013

RSVPWhen: Thursday, July 25, 2013 at 6:30 PM

Where: The Qube 635 Woodward Ave., Detroit, MI

Cost: Free

Speed by Design – Keep The Mobile Web Quick

As attention spans are heading towards zero and more and more of the population is constantly on-the-go, optimizing your mobile websites to load quickly and efficiently can make an enormous difference in visitor engagement, and most importantly, your bottom-line. Designing for performance should be a top-priority in keeping your visitors happy and allowing them do what they need to do quickly.

You’ll learn a few techniques on how to keep your mobile websites lean and loading quickly, how page speed is actually a component of good UX, how to test and benchmark under various network conditions, and how slow loading times can turn away visitors and potential paying customers.

About Jon Buda

Jon Buda is web developer who loves to design, or a designer who loves to code – depending on the day. He enjoys solving problems holistically, thinking about back-end, front-end, and design all as equally important parts in crafting great experiences. He helps to organize Refresh Chicago and is currently working with Table XI.

Front End Legos – Better Design with Reusable HTML & CSS

There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.

In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible, and how it benefits your design. Writing code is the easy part, finding a modular practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice today.

About Shay Howe

As a designer and front end developer, Shay Howe has a passion for solving problems while building creative and intuitive applications. Shay specializes in product design and interface development, specialties in which he regularly writes and speaks about. Additionally, Shay helps co-organize Chicago Camps, Refresh Chicago, and UX Happy Hour. You can catch up with him on Twitter as @shayhowe or on his website at


Designing for next steps – A forward moving Web experience – #heweb12

This week I was in Milwaukee, Wis. with 700 other higher education Web professionals for the HighEdWeb 2012 national conference. The conference is known for gathering higher education Web leaders and the presentations are second to none and this year was no exception. I’ll post a full wrap-up in the next few days.

Designing for next steps – A forward moving Web experience

I was lucky enough to be invited back to speak about Web user experience. Through my experience hosting EDU Checkup, where I review higher education websites from the perspective of a first time visitor and my work here at Wayne State, the topic is near and dear to my heart.

The official description (below), pretty much sums up the talk but the slides only go so far. The discussion was centered around both the macro and micro experience that any website visitor has.

Getting a visitor to your website is only half the battle: how do you keep them? A lot of attention is put on the “action” items on a homepage but it’s more likely a visitor is landing on an interior page from a Web search or link. Every visual element, content or cue makes an impression with your visitor and influences what next step they take. The last thing you want to do is leave your visitor at a dead end or continuously force them to use the “back” button. With each page having a defined “next step” it gives your visitor a forward moving Web experience. The idea is more than just bigger and brighter action buttons. Your goal is to design an experience that make your visitors care. This session will walk through real life examples to identify common pitfalls and successful approaches, provide techniques to objectively look at your communications from your audience’s point of view and highlight tools to measure and track the success of your communications.

Video of the talk

Next steps from this presentation

  • Take a step back and start discovering your users’ journey. Use a tool like Woopra or Clicktale to experience where and how your users are actually using your website.
  • Use those journeys to travel through your website as your user, experience the site through their eyes.
  • Use a “human proxy” to get insights about feelings as the visitor is moving through the page.
  • Make changes to help the user discover a next step on each page of their journey. Make sure you can track these in your analytics package so you know you’re actually helping your users.
  • Introduce little big details that make the user experience memberable.

A better “Return to top” experience

Sometimes long pages are unavoidable but adding pagination to certain content makes it more difficult to use. The types of pages I am talking about are FAQ’s, faculty lists, and course listings. It can often span up to twenty times the height of a standard browser.

Pagination sucks

Breaking this content up in to multiple does allow the visitor to see a fair amount of information on a single screen without scrolling. But if they want to explore more they have to take an action that isn’t natural to the Web and “page” through the content like a book. Book pages work great because they are natural, there are a lot of touch points where you can grab and make the transition back and forth easily. Pagination on the Web, though, is not so easy. Typically it involves very small numbers at the bottom of the content, a precise click on the next number, and waiting for a page to load.

“Back to top” is annoying

The solution most websites take is to put all the content on one page and at multiple places down the page add a link labeled “Back to Top”. This typically links to an anchor #top which is defined at the top of the page or content. This seems logical for the Web since scrolling is just a fingertip away, people often use the CMD+F to search page content and there is no reloading and waiting for the page.

But “Back to Top” still doesn’t get it right. The Web is used as a page of content to be consumed and to take a next step, ideally getting the visitor one step closer to their goal. “Back to Top” links introduce two obstacles to that goal. The first is clutter on the page that doesn’t relate to the content. The second is a link that unnaturally moves the user “backward” to where they came from.

The holy grail

We are not claiming to have invented this technique, just adopting it and embracing how more usable our pages are because of it. The technique is to omit the “Back to Top” links all together and force the user to scroll. Then use javascript to detect how far the visitor has scrolled and display a button (in a static location out of the content area) which scrolls the user back to the top of the page. It’s a technique that isn’t visible unless you see it in action. The video below shows how it works:

This solution solves the user experience issues introduced by pagination and the “Back to Top” links. It allows for all the content to be on a single page so the user can search and not have to reload and reorient themselves with each new set of content. It also doesn’t clutter the page with extra links that don’t bring the user closer to their next goal.

How it works

It progressively adds value to the page as the user scrolls down the page. The solution also introduces something else, a visual sign of what the action does. The default construct of a “link” is to move the visitor to another separate page, but in fact the “Back to Top” breaks that construct. The icon used to denote “scroll to top” visualizes exactly what the button will do once clicked, the user doesn’t have to guess or be surprised.

A little something extra

Lastly, a little something to pleasently surprise visitors is when they click to return to the top, the page doesn’t just jump up leaving the user to re-orient themselves with the page once again. It instead scrolls smoothly to the top passing by all the content they just viewed. Now at the top of the page again they just saw the journey they took down the page rewound and are at a familiar place with no need to re-orient themselves.

Some examples of it’s use:

Campus tour check-in form design process

Almost every day we have a flood of prospective students visit our Welcome Center ready to explore campus. Some of these students have signed up for a tour on our website, while others just drop in and decide that today is a great day to see campus. We are excited to show off our beautiful campus to anyone who is interested, so we don’t turn anyone away.

Our department is in charge of the Web experience for these prospective students and that has been working great. Campus tour signups have increased quite a bit because of our efforts. The arrival experience on the other hand needed some attention. With the introduction of the Student Service Center in the Welcome Center, it was a great opportunity to optimize that arrival experience.

On campus experience

We were tasked with created a “Campus Tour Check-In” form that would be set up on a computer as students came in. This form would allow the students to accomplish the following things:

  1. Sign up for an upcoming tour that day
  2. Find their name and sign in to tell the Admissions staff they were here for their tour
We went to work sketching out what we thought the initial screen would look like.
This is what we came up with:

For us this made logical sense, one page, two options, the full sign up form ready to take any new submissions and a secondary sign-in form where the student could look up their name.

But something was wrong

After presenting this to some of the tour guides we realized we made some assumptions that were not consistent with how students interact with the tours. The majority of students pre-register for their tour and only a few drop in to take a tour without signing up.

So back to the drawing board. We simplified the page to a single search field, “last name”. This forces the student to check to see if they have already registered (avoiding duplicates), if they find themselves they can click the “Check In” button next to their name and are ready to go. If they don’t see their name in the list they can click the “Sign Up” button on the right and enter the rest of their information to sign up and sign in for a tour that day. More students than we thought ended up coming to take a tour on a different day than they signed up for, so the search results contain past and future tour registrations.


Above you will see the sketch of the initial screen (left) and once they type in their last name they are presented with the results (right) so they can decide to check in or sign up for a new tour.

The actual form

Above you will see what the live form looks like, there have been some graphical changes since the launch that are not reflected here but the user interaction is the same.

It is opportunities like this that get us excited to be able to impact and extend the Web experience to mirror how students actually interact with campus. The more natural we can make the experience the more we can get out of the students way and assist with their task. If we can make the experience “invisible”, the student then has time to focus on more important things.

User Testing: You are not your users

A majority of people assume a Web page is just a digital piece of paper, but in reality it is just a single step in an entire experience. I will use the illustration below to show how every page is connected to another. The illustration can be looked at in two ways. Most people within an organization tend to think a visitor travels from the inside (homepage) out to the edges. But in reality the visitor is more likely to start on a random spot within the system and then figure out what their next step should be. They don’t have a heads up display (like in a video game) that they can pull up at any time to see where they are in relation to everything else. It is up to the information architect and the designer to give the visitor visual cues and sign posts to orient them within the first ten seconds.

The MaRS website as a graph

Every site is unique

Since no two sites have the same goals and end user needs, the only way to optimize your site is to look through the eyes of your users. For us, we often find insights when we aren’t looking for them. We have been trying to optimize our current students page for some time now. It’s taken us a little longer to figure out than expected, but for a good reason.

I wanted to share our experience with everyone, not as a how to, but as an insight into a process that I think every Web worker should be aware of.

Passive user testing

There are two ways to test your site’s effectiveness. Formal user testing is when you recruit a specific type of user and have them complete pre-defined tasks or watch them use your site in a controlled environment. Passive user testing is when you watch the user in their native environment and they’re unaware their actions are being analyzed. Both have their pros and cons, but both are necessary for a well rounded analysis of a website. I am going to focus on passive testing for the purpose of this post because it’s something everyone should be doing all the time.

Everyone knows Google Analytics is the most popular way to analyze your users passively. But you shouldn’t stop there, GA can only tell you so much. Figuring out what your visitor’s motivations and goals are takes time and experience, being aware of where your users are going is just the first step. You can’t just look at one GA report and know what is right and wrong about your site, it takes analysis over the course of a few months with many different tools.

Motivations of a current student

We knew the “Current Students” menu item was the second most clicked menu item from our homepage, “Directory” is the most clicked. We had a hunch about the motivations of current students but we had to know for sure. We set up CrazyEgg on the current students page to see where they were clicking. CrazyEgg tracks both “active” clicks on links and clicks made on things that are not links. We knew they were looking to get to resources as quickly as possible, Pipeline, Calendar, Email, Blackboard and Course Schedule.

What we discovered is “Pipeline” was by far the most popular link. But it stumped us a little bit because we have a direct log in to Pipeline, Blackboard and Email right from the header of every page on so the user doesn’t have to click through to find the links. Obviously not enough students knew about it.

Give the user a hint

So we decided to give the current student a hint about the drawer and the log in ability to see if we could change behavior and drive more traffic through the form instead of clicking the link and waiting for the log in page. We changed the page to drop the drawer down for five seconds then back up to “preview” to the user what is hidden up in the header.

As you can see from the heat maps above the “hint” didn’t change the user’s behavior significantly. Only 3 percent of visitors changed their behavior and used the form once they knew it was there. We ran the tests for an equal amount of time on the same days of the week to ensure we were getting as close to the same population as possible.

Don’t hide important elements

Going back to the drawing board we decided to re-organize the entire page and just plop the log in form right in front of the user. We knew students wanted to log in to these services and we just hated the fact they were going through so many steps to do it.

Above is the re-aligned current students page. It has almost all the same information on it, just re-organized. We did drop the news and events because they were getting less than 1 percent of the clicks on the page and replaced it with some of our social media activity to make students aware where we were. All the links are in alpha order above the fold to allow for the easiest of access. Previously we had the links split up based on perceived importance.

We tested the page yet again with CrazyEgg. Success! 20 percent of visitors used the form to log in directly to the service of their choice. We were happy and were about to call it a day, but then we noticed something interesting. The “Current Students” menu item was being clicked by 5 percent (257 clicks) of visitors. Looking into it further we determined it was not only being clicked by users who entered directly on the current students page but also by people who came from our homepage.

Why would users click on a menu item right after they clicked on it to get to the page?

Orientating your visitors

Regardless where your visitors come from they should be able to orient themselves within two seconds of viewing a page. We noticed with the re-aligned page we had moved down the page title and the menu item wasn’t being highlighted to show the user a “state” of it being selected. So we decided to test making the menu item selected to see if it changed the user’s confidence and that they were on the page they expected to land on, the one specific to current students.

What do you know, it worked! I didn’t think it would have the impact it did but when the menu is selected only 1 percent (59 clicks) clicked on it. In addition the log in form gained another 1 percent of visitors using it.

You are not your users

Time and time again I have to remind everyone making Web decisions that they are not the primary user of their site. Like the illustration at the beginning of this post there are two ways to view the same information. Inside out or outside in. The more you can understand the way your users view your site the more you can understand their motivations and make it easier for them.

User testing isn’t an exact science nor is there a magic formula or tool to use. It takes persistence, patience and insight, but in the end the time spent is worth it.

Events Calendar Update: Campus Calendars, Cross Promotion & more

Introducing Campus Calendars

Each school/college/department has their own calendar and it’s worked great until a few months ago. We realized a lot of activities were cross disciplinary and more than one department/group plans activities for the same event. Our solution was to introduce “campus calendars”. These are available to everyone to add events to regardless of what calendars you own. Some of these calendars will show up year-round while others will only show up at certain times of the year. It will help pull together events from around campus into larger event groupings.

View by Category

The left hand column now has a “View by Category” heading. This allows visitors to just see events in a certain category. It works great when browsing for something to do based on interest. For example you can view all the “Art Shows” around campus in one listing regardless of what department is hosting it.

Facebook and Twitter features

We realized a lot of events are being shared through our “Add This” plugin and we wanted to make it even easier to tell friends about events. So we added the native Tweet and Like buttons from Twitter and Facebook to hook directly into the visitor’s accounts and their friends’. We don’t have enough stats from these services just yet but I’m sure we’ll do a post about their use soon.

Removing the “I’m Interested” and “I’m Going” links

After optimizing the right-hand menu to hook directly into existing social services we realized the “I’m Interested” and “I’m Going” functionality were redundant and confusing. We looked at our statistics and realized they were not being used as much as we had hoped and the data wasn’t available to the event owner and frankly wasn’t helping anyone. We ended up removing them completely and rely only on existing services.

Cross Promote

Lastly over the last few months we have been battling with groups around campus wanting to promote events on their homepages and calendars from other areas around campus. The current calendar only allowed the event owner to add the event to different calendars. We decided to allow anyone to “pull” events into their calendar. These events will show up in the normal listing and display on their homepage but they won’t have access to make changes to the event. You have to be logged in to see this option and when selected you can select the calendars you want a certain event to show up in.

All of the changes above were inspired by every user of the calendar. Our goal is to make the most useful calendar possible for the campus community. If you have any suggestions to make it better just drop us a line at

Anatomy of a Higher Ed Homepage

The university homepage (not just Wayne State’s) has been in a tug of war since the advent of the web. At some point administration lost sight of their users needs. This is where we come in, web workers know to focus on the visitors’ needs. Take a look at the right side, things people are looking for, I bet there is at least one item you never thought about. (For me, it was the campus police phone number.)

I’m thinking of recording focus groups and usability tests for at least the university community. They might even make their way on to this blog.