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 “Retina” and HiDPI devices

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 a jpg photo images in HTML emails, you can do something similar to the method above.

Below are instructions on how to save images at 2x for retina displays in Photoshop for a 250x250px jpg image:

  1. Start with original document height and width dimension then times by two. These are your new height and width value. In this case, the new document size will be 500x500px.
    • Original height x 2 = new height for 2x image
    • Original width x 2 = new width for 2x image
  2. Import your higher dpi image or design as usual, but bigger version not the 250px
  3. When done, save for web at 5-10 quality.
  4. Make sure the width and height in the HTML email <img> tag is still the 1x size. In this case 250x250px.  Although the image jpg image size will be 500x500px,

Video jpg 2x retina tutorial

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!

Flickr slideshows now on digital signs

Flickr SlideshowAs you pass some of the Wayne State digital signs now on campus, you may notice some of the signs now display our Flickr “photostreams” and sets. Our new digital sign templates now have the ability to pull from our main Flickr photostream RSS or any set on Flickr.

We will be updating them according to audience and location.  Look out for more Flickr “slideshows” coming to a digital sign near you!

Flipboard app for iPhone = Social Media Swiss Army knife

FlipboardFirst, I want to say that I’ve have been using the Flipboard app for the iPad for some time now and love it. I was anticipating Flipboard coming to the iPhone and was very excited when it launched in early December of 2011. I have been using it exclusively for a month and must say it meets all my expectations of an “all in one” social media feeder.

Some of the social media apps and online tools it integrates with are: Facebook, Twitter, Flickr, Instagram, Google Reader (RSS), LinkedIn and Tumblr.  It’s very intuitive to use with your thumb, flipping through all my connected accounts, with easy export options to share any article your perusing, to your own social accounts.

The nice thing Flipboard does is bring a visual aspect to your social media channels. For instance on Twitter, it not only brings in the tweet, but the image, webpage or video that it is associated with so you can visually scan what the tweet is about.  I also love that it brings in my google reader feed or any blog exclusively, with a quick search.

What Flipboard isn’t for: This isn’t a business tool for someone that has 10 twitter accounts and wants to do mass sending, scheduling and searching for keywords. Although you can tweet, post to Facebook, Tumblr and LinkedIn from within Flipboard, which is a nice feature for the personal user like me.

If you haven’t downloaded it on your IOS device yet, I highly recommend you do so. It’s a timesaver, beautifully made and its free! Check it out: http://flipboard.com/

Future of Web Design – Responsive Web Design

I just recently went to Future of Web Design (FOWD)  in New York City for an amazing web conference. Besides the amazing speakers, friendly atmosphere and cool city life, the conference had a reoccurring theme: Responsive Web Design.

Now “Responsive Web Design” is by no means a new concept, but it has speedily becoming a web design standard.

Here are the basic premises behind the idea to achieve Responsive Web Design:

  • Design must be flexible to the users behavior and environment
  • Use flexible grids and layouts
  • Use flexible images that will adjust to each view
  • Use smart CSS media queries to adjust to the users resolution size
  • Just one URL, no more, m.mobilesite.com


Food Sense Example

Responsive Web Design - Foodsense

This is a great example of Responsive Web Design – http://foodsense.is/.
To see this in action open the link on a desktop browser and slowly drag the browser window size smaller. You will see the layout elements adjust on the page to the new width.

Other great of examples of Responsive Web Design:
http://thinkvitamin.com/
http://bostonglobe.com
http://earthhour.fr/

As web design and development evolves into the future, with multiple devices such as smaller laptops, tablets and smartphones, Responsive Web Design seems to be the best solution for the moment.  We can no longer just design for a couple of devices, we must accept that the amount of devices and resolutions are going up dramatically. I will leave you with one of my favorite quotes from the conference:

“If its not responsive design, its not web design” – Andy Clarke


Good Resources on this topic:
http://www.abookapart.com/products/responsive-web-design
http://www.alistapart.com/articles/responsive-web-design/

 

Captioned Videos playing on Digital Signs around Campus

 

Captioned WSU VideoYou may notice the use of some of Wayne State’s YouTube videos, come up on the digital signs around campus.  We are “peppering” them in, along side our default news, events and promos that run on the screens.  Most of the screens don’t have the capacity to play sound, so we have enabled captioning to play along with the video.  As of now, we are playing them in select buildings for faculty and staff.  Keep a look out for more videos to be put into the rotation in the future, on more of our signs.

 

Coffee Wars – The results are in!

Coffee WarsHave you ever had interoffice debates to what coffee tastes the best?  Well, we do and we finally decided to hold an office blind coffee taste testing and find out, which coffee is the best!

We wanted to get a blend of both popular “home brews” and retail chain coffees to see which actually tasted better.  We had everything from Starbucks coffee all the way to the basic canned coffee like Maxwell House.

Here were the specifics of the tasting:
We decided to taste-test it black, to keep a consistency across all the coffees.  Each taste cup was 1 oz and there was a total of 11 coffees being represented. We rated each coffee on a 1-10 rating scale and left a quick description of each coffee’s flavor. After it was all said and done, we were very surprised with the results. For you Dunkin Donuts fans, you might want to hide your eyes.

Results:
Rank 1 – Kirkland – Overall 87 – Average 6.21
Rank 2 – Panera – Overall 77 – Average 5.50
Rank 3 – Biggby – Overall 70 – Average 5
Rank 4 – Gevalia – Overall 68 – Average 4.86
Rank 5 – Folgers – Overall 65 – Average 4.64
Rank 6 – Caribou – Overall 63 – Average 4.50
Rank 7 – Starbucks – Overall 60 – Average 4.29
Rank 8 – Guatemala – Overall 53 – Average 3.79
Rank 9 – Einstein – Overall 52 – Average 3.71
Rank 10 – Maxwell – Overall 49 – Average 3.50
Rank 11 – Dunkin – Overall 40 – Average 2.86

Costco’s Kirkland ground coffee came in as the commanding champ, with Panera and Biggby following close behind. Next time your at the market you might think twice about buying that expensive, popular coffee!! Let us know your favorite coffee in the comments below and maybe there will be a second tasting in the near future.

Digital Signage: Spotlight On

You may have noticed walking throughout campus recently and noticed the digital signs have a new content on it, a highlighted faculty member. We started rolling out what we are calling “Spotlight On” slowly throughout the signs on campus.

What is Spotlight on?

Every day our faculty are discovering new things, helping the community and making an impact on the world. We know this because we spread it through press releases and news items. To us this used to be great but it wasn’t good enough, only a small amount of our campus community read the releases or visit these random websites. Our solution is to bring these faculty members to the masses.

Since the signs are already in high traffic areas it is almost the perfect spot to make campus aware of their accomplishments. Above is an actual sign and what the spotlight looks like. It features a photo, impacting statement, name, title and a call to action to get more information. The goal was to make the signs impact the person walking by it enough to take a second and read or at least recognize the faculty member they may see walking around campus every day.

How to get spotlighted?

Are you doing something great or know someone that is on campus? Just send us an email, web@wayne.edu and we can get the ball rolling. We have found most spotlighted faculty have been nominated by others on campus. This is probably the best way to get someone highlighted.

We aren’t limiting the spotlight to faculty members only, we are open to highlighting anyone in the campus community who is making an impact on the world. Students and alumni are the next group to be featured.

What is that silly looking image?

That square image is a QR code.

QR code (short for Quick Response) is a specific matrix barcode (or two-dimensional code), readable by dedicated QR barcode readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL or other data.

The barcode can be scanned with a number of mobile barcode scanners, the most popular is Google Goggles. Once scanned the codes we are producing are combine with a “go.wayne.edu” URL (more on that later) which take the user to the faculty member’s profile. The plan down the road is to direct the user to a video or audio interview with the faculty member to give them even more of a reason to scan or type in the URL. It is our way of yet again extending the content beyond its original intent.

Wayne State University digital signage – Phase 2

We have made a lot of progress since our “First Look” at the implementation of the digital signage all over Wayne State’s campus. Wayne State now has more than 25 digital signs mounted on walls in at least 16 buildings on campus.  So far the feedback has been all positive and we are implementing different templates to fit the different need of each individual sign.

From our feedback, we recognized that weather, date and time should be on every sign somewhere within the display’s real estate.  We have fed in Wayne State’s main news and events to the main WSU template via RSS.  The last feature on the template we now have up and running is a place to promote Wayne State campus wide events and campaigns.

Check out the new design below:

WSU Main 1UP Digital Design Template

The latest template we’ve completed is for the School of Business on a 2 x 2 digital television array.  It also successfully feeds an HD steam of CNN and displays main campus and School of Business news and events.  This set of 4 displays is broken up into 4 sections, containing the elements to keep a consistent look across the screens.

Here is the result:

WSU School of Business 2 x 2 display

The next steps after implementing the remaining main signage templates is to explore how to make our signs much more dynamic.  We hope the newest designs are aesthetically pleasing to the eye and bring pertinent information to the campus wide community!