Why would I make a 2x images for my responsive site?
2x images are scaled-up and optimized for Retina/HiDPI screens. They’re scaled to twice the size of 1x images, but since retina screens have twice the pixel ratio of most other screens they output the same size visually as 1x.
If the jpg image is 1x, it can look “fuzzy” or “pixelated” on higher DPI screens. Here is an example:
Instructions on how to “2x up” an image in Photoshop for a 250x250px jpg image:
Start with original document height and width dimension then multiply by two. These are your new height and width values. 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 use the bigger version rather than the 250px image
When done, save for web at around 10 quality in Photoshop
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 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”.
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.