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!

 

May 2018 CMS update

Updates to CMS page editor

We recently upgraded to a new version of our page editor in the CMS. We wanted to update you on two changes that impact day-to-day page editing.

Copying and pasting  

The golden rule still applies: Do not copy or paste from Word.

You do not have to click the clipboard icons with the T or W anymore. You can skip this step and paste directly into the Page Body area.

You can paste your copy directly into the editor now.

Clipboard icons

  • Paste as Plain Text – CTRL/CMD+SHIFT+V
    The browser handles removing all formatting natively.
  • Paste from Word/HTML – CTRL/CMD+V
    This will paste with the text formatting (bold text, bullets, links, etc.) still intact.

If you happen to click one of those icons, you may see the following message: “Press CTRL/CMD+V to paste. Make sure your cursor is where you want your new copy and use CTRL/CMD+V to paste it inside the editor.” This is a note to let users know they can paste directly into the editor.

Blue alert message

You’re saving a step by not having to paste inside a box and click OK. This is a note about the change from the developers of the tool: “Ideally we’d like the browser to just paste and that’s it – however, due the security reasons, modern browsers do not expose any means to paste other than using native ways …”[Source.]

Posting an image

When you post an image, 10 pixels of padding is added automatically.

You’ll still need to add the image URL from the file manager, width/height and alignment.

CK editor example

There also is a new field that allows you to add a caption or cutline below your image.

CK editor image example

To utilize the caption, check this box and click OK.

Captioned image check box
Add your copy inside the page editor.

Image example with caption

Image example with caption

If you have any questions about these changes, feel free to reach us at web@wayne.edu. Remember we offer CMS training sessions on a regular basis if you think you need a refresher.

 

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!

Hiring: Full-time Frontend Web developer/UI designer

The central Marketing and Communications Office is looking for an individual who is driven to create Web user experiences that bring the university brand to life and encourage action.

We are looking for someone with solid website design and UX experience. The individual will need to have enough HTML/CSS/JS experience to develop the frontend HTML through an existing build process and tooling.

Ability to blend technical expertise with a design aesthetic that embraces the university identity guidelines and explores new creative executions incorporating the university’s brand campaign. The ability to juggle multiple projects to meet project deadlines.
Ability to work collaboratively across disciplines — design, digital execution, editorial, marketing, to come up with new solutions.

Background

The Web Communications team is located in the central university Marketing Office. We are set up like an internal agency and work with most areas of campus to create and maintain their public web presence.

We are a cross-functional team consisting of Web Content Administrators, Designers, Frontend Developers, Backend Developers and Multimedia support.

The mission of the central Marketing Office is to raise the stature of the university.

Primary responsibilities

  • Experience collaborating throughout the entire project cycle, from research, strategy, information architecture, visual design, front-end development and maintenance.
  • A solid grasp of modern front-end web development, such as HTML, CSS and JavaScript and their associated build components.
  • Experience using a front-end web framework such as Foundation or Bootstrap.
  • An understanding of back-end web development environments, including HTTP, web servers, load balancers, the interpretation layer, databases and associated web frameworks.
  • Considerable skill in writing web applications that retrieve and update information in relational web-centric databases (using WordPress or Laravel).
  • The ability to clearly communicate to project stakeholders and process feedback internally and externally.
  • The ability to troubleshoot website layout and web application performance issues and resolve issues independently or direct issues to the responsible party.
  • Provide direct supervision to internal website interns and guidance to unit website content authors.
  • Ability to work with accuracy and attention to detail to meet deadlines.
  • Ability to understand and execute oral and written instructions, policies, and procedures.
  • Considerable project management skills, including the ability to provide time estimates and prepare accurate records and reports.
  • Proficiency in the use of web applications programming languages, tools, and/or methodologies for developing integrated web applications typically acquired through formal education or equivalent experience in web application development.
  • Demonstrated ability in analyzing customer requirements and developing basic information systems solutions typically acquired through one to two years of directly related experience in web application development and support.
  • The ability to translate functional requirements into cross-browser WCAG 2.0 compliant websites.
  • Strong understanding of web technologies and related user device capabilities required to access the web.
  • Understanding of test driven development.

How to apply

Apply at jobs.wayne.edu. Posting #043169

How to make your cookie game #WarriorStrong

Ingredients and supplies:

  • 1 W shield cookie press (available at the WSU Bookstore)
  • Sugar cookie dough (store-bought or homemade)
  • Flour
  • Royal icing — see instructions below
  • Sprinkles
  • Parchment paper
  • Mini spatula (OK, you don’t really need this — but it is fun to use)
  • Toothpicks
  • Cookie sheet
  • Oven
  • Cooling rack (optional, because we didn’t have one)
  • Camera (because we want pictures!)

Step 1:

Cover your cookie sheet in parchment paper (not pictured because we forgot).

Step 2:

Roll out the dough until it is about a quarter-inch thick. 

Knead the dough Roll out the dough

Step 3:

Sprinkle flour on the cookie press and press it firmly into the dough. Repeat until you run out of space. If they don’t look like the picture, you did it wrong!

Press cookie into the dough

Step 4:

Using your mini spatula (or whatever you substitute for this — a knife will do), remove the extra dough from the shields and place your cutouts on the cookie sheet.

Place on cookie sheet

Step 5:

Bake cookies according to dough specifications. Pro tip: The cooler the dough, the less the cookies will spread in the oven.

Step 6:

Do some homework while you wait for your cookies to bake.

Step 7:

Remove cookies from oven and let cool for a few minutes. Then, carefully move the cookies to a cooling rack. Note: This is not a job for the mini spatula.

Allow cookies to cool

Step 8:

Make the royal icing.

  • Option A: Invite your most talented baking friend over and have them make it.
  • Option B: Google it — and know that it’s quite the process!

Step 9:

Decorate the cookies according to your icing preferences.

Decorate the cookies

Step 10:

Do more homework while you wait for your cookies to dry.

Step 11:

Arrange on a plate, and prepare to wow your friends!Arrange on the plate

Step 12:

Show off your #WarriorStrong baking skills and beam with #WarriorPride by posting your cookies on your favorite social media channel. Don’t forget to tag us so we can see your creations!

 

Facebook: @waynestateuniversity

Twitter: @waynestate

Instagram: @waynestate

Snapchat: @waynestateuniv

Why is Facebook boring all of a sudden?

Have you noticed that Facebook is incredibly dull lately? Well, it might be because you are not seeing the amazing content from Wayne State in your feed anymore.

The good news

You can easily tell Facebook you want to see more of our content.

The easiest way to get us back in your feed:

The bad news

You still won’t see everything, but some Warrior content is better than no Warrior content, right?!

2017 in pictures

As we get ready to say hello to 2018, a look back at 2017 Photo of the Day shows what an amazing year we had on campus and in the Detroit area!

2017 top five

Photo of Old Main
Photo of the Day for October 25, 2017: “Hogwarts in Detroit?” Submitted by Rasik Mostafa.

Photo of the Day for May 14, 2017: Happy Mother’s Day Photo by Selma Medic-Cufurovic.

Photo of the Day for October 26, 2017: Season of colors Submitted by Komal Parab.

Photo of the Day for April 19, 2017: “Sky has no limit. Follow your dreams.” Photo by Dawn Turchin.

Photo of the Day for February 6, 2017: “Life as a 3 year old when your Mom is a PhD Nursing Student.” Photo submitted by Amanda Deriemacker

Photo of the Day stats for 2017 (Jan. 1 – Dec. 15)

  • 894 photos were submitted
  • 838 pics were up for consideration (56 were deemed unusable, too small, broken link, etc…)
  • 456 individuals submitted photos
  • 239 pictures were selected (27% of all submissions)

Connor Ashley and Shreyash Khond were our top repeat submitters.

  • Connor submitted 30 entries and was featured 7 times.
  • Shreyash Khond submitted 30 entries and was featured 5 times.

Old Main was one of our most popular subjects. It was Photo of the Day 26 times.

Engagement by platform

  • Flickr – 48,856
  • Twitter – 56,213
  • Facebook – 37,245
  • Instagram – 94,560

Total – 236,874

2017 Editors’ picks

Photo of the Day for October 5, 2017: “WSU giving some serious Hogwarts feels” Photograph submitted by Aiman Hussain.

Photo of the Day for May 5, 2017: “Captured this walking to my chemistry final at DeRoy Auditorium” Photo by Luis Coronel-Machado.

Photo of the Day for July 4, 2017: “Detroit Fireworks 2017. Thank you #waynestatepolice #detroitpolice #detroit #detroitfireworks #wsu Photo by James Laginess.

Photo of the Day for October 16, 2017: Behind the scenes of the Warrior Strong campaign.

Photo of the Day for December 13, 2017: Mary Lou Lynch, Maria Giammara and Hariette Williams didn’t get to graduate from college but their granddaughters did! Submitted by Jacqueline Giammara and Sha’Ron Williams

Hiring: Full-time Web Content Administrator

The Office of Marketing and Communications is looking for a Web Content Administrator. This role is filling the spot left by Jenn Di Sano, who is moving West to Arizona with her family.

This role is central to the digital communications for the university. It is a cross between crafting the information architecture for most all public facing university sites, to overseeing the official social media presence for the university, to being an influential force in what is posted to the university homepage.

The ideal candidate will be able to blend writing, training, user experience and social interaction into a role that has a large impact on the university and the world.

Background

The Web Communications team is located in the central university Marketing Office. We are set up like an internal agency and work with most areas of campus to create and maintain their public web presence.

We are a cross-functional team consisting of Web Content Administrators, Designers, Frontend Developers, Backend Developers and Multimedia support.

The mission of the central Marketing Office is to raise the stature of the university.

Primary responsibilities

Serve as primary resource for units university-wide regarding the content and appearance of unit Web pages. Administer and provide training in content management tools, control access, review sites for adherence and conformity to editorial and design standards and resolve related problems.

Develop and edit central university website and pages. Identify, select and condense news and events for inclusion on the homepage, prepare communications designed to effectively position the University, and ensure the delivery of key University messages.

Serve as liaison with IT personnel campus-wide to identify and resolve Web page related problems. Work with clients, designers and vendors to ensure established standards and expectations are met.

Develop and implement mechanisms and processes designed to evaluate the effectiveness of university electronic communications. Provide analysis of collected data and submit reports and recommendations as requested.

Maintain and support the university’s social media presence with a cross-functional team of writers, designers and content strategists

Collaborate with writers, editors, social media coordinators, video producers and photographers both in University Communications and in communications units across campus.

Provide support to the schools, colleges and central marketing department on social media strategy and campaigns.

Use metrics to determine the most effective channels to deliver content to audiences, measure their behavior and attitudes in response to that content and make recommendations based on the results

Oversee the day-to-day project management of large website projects by tracking progress, ensuring timely delivery and keeping the project within scope.

How to apply

Apply at jobs.wayne.edu. Posting #043246

Hiring: Full-time Frontend Web developer/UI designer

The Central Marketing and Communications Office is looking for an individual who is driven to create Web user experiences that bring the university brand to life and encourage action.

We are looking for someone with solid website design and UX experience. The individual will need to have enough HTML/CSS/JS experience to develop the frontend HTML through an existing build process and tooling.

Ability to blend technical expertise with a design aesthetic that embraces the university identity guidelines and explores new creative executions incorporating the university’s brand campaign. The ability to juggle multiple projects to meet project deadlines.
Ability to work collaboratively across disciplines — design, digital execution, editorial, marketing, to come up with new solutions.

Background

The Web Communications team is located in the central university Marketing Office. We are set up like an internal agency and work with most areas of campus to create and maintain their public web presence.

We are a cross-functional team consisting of Web Content Administrators, Designers, Frontend Developers, Backend Developers and Multimedia support.

The mission of the central Marketing Office is to raise the stature of the university.

Primary responsibilities

  • Experience collaborating throughout the entire project cycle, from research, strategy, information architecture, visual design, front-end development and maintenance.
  • A solid grasp of modern front-end web development, such as HTML, CSS and JavaScript and their associated build components.
  • Experience using a front-end web framework such as Foundation or Bootstrap.
  • An understanding of back-end web development environments, including HTTP, web servers, load balancers, the interpretation layer, databases and associated web frameworks.
  • Considerable skill in writing web applications that retrieve and update information in relational web-centric databases (using WordPress or Laravel).
  • The ability to clearly communicate to project stakeholders and process feedback internally and externally.
  • The ability to troubleshoot website layout and web application performance issues and resolve issues independently or direct issues to the responsible party.
  • Provide direct supervision to internal website interns and guidance to unit website content authors.
  • Ability to work with accuracy and attention to detail to meet deadlines.
  • Ability to understand and execute oral and written instructions, policies, and procedures.
  • Considerable project management skills, including the ability to provide time estimates and prepare accurate records and reports.
  • Proficiency in the use of web applications programming languages, tools, and/or methodologies for developing integrated web applications typically acquired through formal education or equivalent experience in web application development.
  • Demonstrated ability in analyzing customer requirements and developing basic information systems solutions typically acquired through one to two years of directly related experience in web application development and support.
  • The ability to translate functional requirements into cross-browser WCAG 2.0 compliant websites.
  • Strong understanding of web technologies and related user device capabilities required to access the web.
  • Understanding of test driven development.

How to apply

Apply at jobs.wayne.edu. Posting #043169

A good week on the web

The Web Communications team has been busy making updates, launching sites and improving the web experience for its users. In case you missed it, here are some of the items we’ve been working on this week.

New string series launched on wayne.edu

https://wayne.edu/story/creative-warriors-in-the-community

String stories are a new feature on wayne.edu

Every two weeks the Marketing and Communications team launches a new page that includes curated condensed articles that are all related to one topic. These new pages are called “strings”. This weeks string is focused on Creative Warriors featuring stories on healing through the arts, Jazz musicians in Detroit and community art projects.

All of the string stories showcase the work that is being done by our faculty, students and alumni.

The next string launches on Monday, October 16.

Facebook Live event featuring WSU Press

https://www.facebook.com/waynestateuniversity/videos/10155244871307968/

Example of graphics used for promoting the WSU Press Live Event

The social media team took you behind the scenes of the WSU Press office. A guided tour from their staff takes you from the front office to the warehouse and all the steps in between in publishing a new book.

This Live event is the first of many to come. Future events will feature sneak peeks and behind the scenes looks at our Warriors in Action.

Follow us on Facebook for announcements of the next live event.

Older sites migrated to a new server

All summer and into the fall our developers have been migrating sites off of an older server onto a newer, faster, and more secure environment. At the start of the project, there were over 200 sites to move and now they are down about 20. This week they have migrated:

Big things to come…

If you’ve been by the Marketing and Communications office lately, you may have felt a buzz in the air or maybe you’ve seen many us running around campus with film crews, or outside measuring light poles or witnessed some other fairly odd behavior. Well soon all will be revealed, but until then, the entire Web Communications Team is busy making sure all the web assets are in order to support this great undertaking by Marketing and Communications. If you are dying to know what we’re up to, follow us on the University’s social channels and you’ll get an exclusive first look on October 15.