Simple CSS hover effect using transition property for button with arrow

To create a simple button animation you can use the following code.  In this case we are using the Foundation framework to add simple style to the button.

Here are the results:

See the Pen Simple Button with arrow hover animation by Tom Krupka (@tomkrupka3) on CodePen.dark

Here is the code below:

// HTML Output
<a class="button arrow">Read More</a>
// Button CSS Code
a.button {
    margin: 20px;
    font-size: 20px;
}

.arrow {
    color: #0c5449;
    background-color: #f6f3ed;
    margin: 1em 0;

    &::after {
        display: inline-block;
        padding-left: 8px;
        content: "279E"; // arrow right unicode
        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -ms-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }

    &:hover {
        color: #0c5449;
        background-color: #f6f3ed;

        &::after {
            -webkit-transform: translateX(4px);
            -moz-transform: translateX(4px);
            -ms-transform: translateX(4px);
            -o-transform: translateX(4px);
            transform: translateX(4px);
        }
    }
}

The result is a very simple hover button, with a subtle animation to catch the users attention. This effect can be used with any Unicode character and don’t forget to add your vendor prefixes!

Optimizing jpg images at 2x in Photoshop for high-resolution screens

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:

Old Main at 1x and 2x

Instructions on how to “2x up” an image in Photoshop for a 250x250px jpg image:

  1. 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
  2. Import your higher dpi image or design as usual, but use the bigger version rather than the 250px image
  3. When done, save for web at around 10 quality in Photoshop

Photoshop save for web 10 quality

Video jpg 2x image Retina tutorial

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!

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.