Hiring: Student Web Intake position (part-time)

The Web Assistant will report to the Web Content Administrators and will be the ‘front line’ contact for incoming Web requests through email and phone calls.

This person will take the initial request, respond and gather any additional information, complete the request (if small) or elevate it to a staff member when additional assistance is needed or it is a larger request.

The position does require some existing knowledge of how the Web works, basic HTML and familiarity with web-based content management systems.

The ideal candidate will have:

  • Good written and phone abilities
  • A basic understanding of HTML
  • A basic understanding of Web usability
  • Comfort editing pages in a web-based content management system
  • Experience resizing and optimizing images for the web
  • The ability to detect patterns of requests to create training material and document common responses to frequently asked questions
  • The ability to follow verbal and written directions with an eye for attention to detail

More about the position:

This is a part-time position, requiring 15-20 hours a week in the Marketing and Communications office, located in 3100 AAB.

The volume of requests varies per day, the average is 30-40 with most taking only a few minutes to complete.

The Web Assistant’s role in a request:

A request will come into the system and depending on the detail of the request:

You may need to follow up by email or by phone with additional questions

Once all information is available:

  • Determine which page(s) need editing.
  • Determine how these pages get edited (there may be multiple systems involved), which may require asking some questions internally about the page setup.
  • Ensure the primary contact is looped in on all changes.
  • Facilitate necessary changes (May take a few minutes to a few hours)
  • Gathering follow up questions/answers
  • After completion, follow up to let the requester know the change has been completed.
  • While completing requests it will also be required to document common responses for consistency and to speed up future requests. It will also be required to work closely with the Web Communications team.

How to apply

If this sounds like you, email your resume and a cover letter to web@wayne.edu with the subject “Interested in the Web Assistant position”.

July 2018 – CMS update

This month we want to highlight a few places to reference the overall style, techniques and the direction we are going with the university Base template.

The university CMS organizes the pages, files, promotions and assets without a website design. These assets are then implemented through a template that is unique to each area of campus while still fitting into the Wayne State’s identity. This “style” is what controls how elements look on Web pages.

Screenshot of the base website styleguide

Where our future style live and evolves

All new sites start from a ‘base style’ that is maintained and visible at https://base.wayne.edu/.

A living style guide of all starter templates and components can be found at https://base.wayne.edu/styleguide.

When each site is created, we take a ‘snapshot’ of the ‘base’ style guide. Which means as it evolves, new styles may not be usable on your website. It is used as a guide to show where university style is going and helps us plan for the future.

The style guide for your website

Most sites created in the last two years have their own style guide that you can view via Add/Edit Pages in the CMS at /styleguide. For example: https://clas.wayne.edu/styleguide

Each unique template is defined

Using the navigation in the style guide, it’s possible to see all variations of the website with fake text (lorem ipsum).

CLAS homepage layout

A few other examples:

Some areas have code examples

Mouse clicking button to expand code area

Areas that cannot be created directly in the CMS page editor require special HTML code that is specific to each site. That code is available in the style guide by clicking the corresponding “See code” buttons.

Some sites do not have a “style guide”

Sites originally created before 2016 do not have a /styleguide directory and unfortunately there is no “living style guide” for the site. The styles at the time they were built directly into the templates. If your site falls into this category and you have questions about possible styles, please email us at web@wayne.edu and include the URL of the page/site you’re looking to expand and what you’re looking to do with it.

The multiplying effect of shaving 600kb off wayne.edu ⚡️

We’re always looking for things that have a multiplying effect.

A little bit goes a long way

Wayne.edu is just one of those places. It gets ~700,000 page views per month so changes to the homepage impact a lot of people.

Webpagetest.org results for wayne.edu

Scroll map of wayne.eduOnly 25% of people scroll

Internally and externally the homepage is used as a primary resource for the Login, Search or Top menu (in order of interaction).

Because of that, only 25% of people scroll past the initial fold.

Studies show a fast webpage gets more interaction.

The bulk of the file size (and thus perceived speed) of wayne.edu is from images. Using the existing infrastructure, we already compress each image as far as possible. Taking the homepage down from historically ~3mb to ~1.1mb.

Deferred loading of images

Using the technique that Rob implemented on Base to detect if an image is on or near the screen to trigger actually loading it, this was then transitioned to the CLAS website by Tom and wayne.edu proper by Jenny.

The result is a ~600kb reduction in initial page load on wayne.edu, from ~1.1mb to ~600kb depending on the hero image.

Animation of wayne.edu content loading

This change at scale

75% of 700,000 visits = 525,000 pageviews do not scroll
525,000 times 600kb savings = 315gb savings per month!
10.5gb savings per day.

The CLAS homepage had similar results for end users, but with fewer page views per day, the impact is not as visible.

Bandwidth costs can get expensive for our users. This change not only helps locally but globally, the impact is great without impacting the user experience.

IGTV – InstagramTV – Photos, stories and now long form video

Another place to post content on Instagram?

Yep! We went from Feeds – to – Feeds and Stories – and now we have – Feeds, Stories and Channels!

Instagram Feed example
Instagram Feed
Instagram Story Example
Instagram Story
IGTV - Channel example
IGTV – Channel

 

 

 

 

 

 

 

 

Over the weekend Instagram rolled out IGTV — a new video channel to watch longer format video. Depending on your status within Instagram you will be able to upload video from 15 seconds to an hour long, but most accounts will be limited to 10 minutes max.

Why is this important?

With 10 minutes of uninterrupted storytelling time, the big picture is now an option. Microstories are great (don’t get me wrong) but sometimes a deep dive is what you need and telling that in one long segment as opposed to eight tiny ones is a better user experience.

What’s the downside?

With this being brand new, there might not be a downside but I do have two concerns.

You now have three content areas to create for one social platform.

  • It took users awhile to check both stories and their feed, will adding a third be an issue?

  • Facebook stories have not been adopted by users, could this be similar?

Shooting in vertical

  • That means what you create for IGTV won’t work well in YouTube and vice versa. Will this be a barrier to new content?

What’s the upside?

With this being brand new, there might not be an upside…but of course, there is an upside!

What users will do with their channels and their expanded time options will be exciting! I have a million ideas in my head from “Five minutes with our Faculty” to “Trips around the City.” Just the newness of the platform will spark creativity!

How to get started

Use the Instagram app or the IGTV standalone app. Both are available for IOS and Android.

IGTV

Instagram

Create the Channel using your Instagram account and you can start uploading video right away!

Selfish word of caution

I repeatedly say that Instagram is my happy place. It’s not a place for politics or news; for me, it’s been about the beauty I see around me and a reminder to not only see it but to stop and enjoy it, take a picture and share it with the world. I fear that  IGTV will change this platform. Although I also thought Stories would have ruined Instagram and it didn’t. I love scrolling through stories. Most accounts create stories that are on-brand, on-message and enhance the user experience. Fingers crossed IGTV goes in the same direction.

Instagram grid
Wayne State Instagram Feed

A journey from Foundation CSS to Tailwind CSS

All of our frontend websites start with this base repository which can be viewed at https://base.wayne.edu/styleguide/childpage. It has evolved in many ways since its closed source version to the new public version 5. One thing has remained the same, the whole time is being dependent on the Foundation CSS framework.

We used Foundation when we first started exploring responsive design in 2012 for these reasons:

  • The grid was easy to use and understand
  • Fast scaffolding for wireframes
  • Included many Javascript packages out of the box that we found useful (accordion, offcanvas, sticky header)
  • Ongoing support of bug fixes and new major versions
  • The framework didn’t have an opinionated style like Bootstrap

Why did we move away from Foundation?

The biggest drive for us to switch to a different framework was how hard it was for us to upgrade from even minor versions of the framework. It’s not a knock on Foundation as we consider it a wonderful framework. The custom CSS/JS we wrote on top of everything played a large role in making the upgrade a difficult task. The slightest changes to their default CSS or javascript components made it extremely time-consuming for us to realign base to accommodate for those changes. A related issue is the cascading part of CSS. While it’s extremely useful, it’s also a large hindrance to the maintenance of a project long term. Adam Wathan wrote a really good blog post explaining this very issue.

What did we move to?

Tailwind CSS. The concept of using a utility-based framework is having a class name that does one CSS property and value. You can think of it as doing inline styles on each element, but what makes it different is you control all the values of colors, sizes, widths, and heights in a single settings file. This creates more consistency, better naming conventions, and a pattern to your CSS names.

What it allowed us to change

Once we switched over to Tailwind CSS it allowed us to start looking at replacing other parts of Foundation that we relied on. Here is a list of changes:

What are the stats for the childpage template?

File Base 4 Base 5
requests 14 9
load time webpagetest.org 1.481s 1.117s
css 18.1 KB 10.4 KB
javascript 27.9 KB 21.2 KB
html 6.4 KB 8.4 KB
total size 133 KB 82 KB

We managed to lower the overall size by a 38% reduction! The only file that slightly increased is the html which was to be expected since we introduced a lot of new classes.

We’re excited for the future of our base site project knowing we can easily swap out any packages now or upgrade them without affecting the entire site.

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!

 

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 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!