Recently we were optimizing a header graphic in Photoshop and stumbled upon a larger than expected file size.
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?
Adobe 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
Click on the gradient layer thumbnail in Photoshop, a gradient fill dialog/settings box will pop up.
Unselect the “Dither” checkbox
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!
Do 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
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)
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)
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:
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:
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.
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:
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
Import your higher dpi image or design as usual, but bigger version not the 250px
When done, save for web at 5-10 quality.
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!
With the upgrade, the old method of using the documents copy/paste method is now obsolete. Below is the new method to send an HTML email from Wayne Connect, using our CMS email manager:
Once you have finalized and reviewed your HTML Email inside the CMS email manager, click the “View Preview” button in the lower-right area in edit mode to bring up the “Preview Screen.”
Once in “Preview Mode” make sure all the users with access, including yourself, have approved the final HTML email in order to view it.
Once approved, right click and do a “Select All” in the area next to the content body, within the preview box. (If “Select All” is not available in your browser with “Right Click”, you can alternatively use the keyboard shortcut combination of “Control A” keys after clicking next to the content body.)
Once everything is selected, right click again and “Copy.”
Make sure under “Options” your preference is set to “Format to HTML.”
Right click in the body/text area and hit “Paste.”
You should now see your HTML Email in graphic format with the header and footer. Enter the email/Listerv address in the “To:” field and a Subject in the “Subject:” field. Always TEST Your Email Before sending the final!
We have had the best success with using the Firefox browser, when sending out HTML emails via Wayne Connect.
TEST, TEST, TEST! Always perform a quick test email to yourself and inspect it before sending the final.
As 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!
First, 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/
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
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.
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
You 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.
Have 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.
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.
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, firstname.lastname@example.org 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.
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.
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:
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:
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!