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.

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!

Pruning the Web tree, making room for new things

Hugh Macleod- All good ideas must dieOver the past dozen years a bit of dust has collected on the Web here at Wayne State. The end of the year is a good time to do some pruning and focus on the tools that will impact our students, community and alumni in 2013. Over 500 websites have been moved into the university CMS, each with a reduction of pages, files and images. In addition, we have been creating a number of centralized tools to assist with this transition. Some of these tools have had a great adoption and continue to be used and expanded today. But others haven’t had the same rate of adoption or the same result can be accomplished using a different tool.

What does this mean?

From time to time it’s necessary to prune the loose ends of a tree to allow the trunk and healthy branches to grow stronger. It’s these healthy branches that push the department higher, toward a more abundant sun, that helps everyone.

We’ll be pruning a few things in the Web Communications department:

Moving beyond physical Web servers.

We’ll be moving to a complete VM environment which can grow and shrink as needed.

Removing the domain silos.

We will no longer, for all practical purposes, be creating a new subdomain (http://*.wayne.edu/) for every site at the university. Instead we will be migrating almost all sites to the http://wayne.edu/* construct. Of course there will be exceptions, schools/colleges, centers/institutes and others may still be hosted off the main domain but all recruitment, retention and main university sites will eventually be part of one single university website. Existing subdomains will always work, we will create permanent redirects.

Deprecation of the wayne.edu/* URL shortener.

The go.wayne.edu URL shortener will be recommended and used long term. Because Twitter now wraps all URL’s in their t.co domain, we no longer need to be concerned about having the shortest URL possible. All old URL’s will still continue to function.

All photo galleries in the CMS will be migrated to Flickr.

There is no longer a need for us to maintain a photo upload and view service when the university is already using Flickr’s solid and far more supported platform.

All university videos will be hosted exclusively on YouTube.

We have a handful of locally hosted videos with custom Flash players embedded across the Web. It’s time to retire these and let YouTube handle the hosting and serving. Like Flickr, YouTube has a more robust toolset that will serve out users far better than we can.

Moving Today@Wayne website/email management to the Public Relations team.

The PR team is in a great position to take over the promotion and coordination of the university’s daily internal newsletter. It will be in good hands.

CD/DVD duplication no longer offered.

It’s a little known fact but the Web group has offered the service of printing on and duplicating CDs/DVDs. There is no need to worry if you’re just learning about it now because we will no longer be offering this service.

All forms we create will be through Formy.

Because we have created such a flexible self-service form creator, the need to hand create forms is reduced to almost nothing. All forms moving forward, with a few exceptions, will be created in and use Formy. C&IT will be introducing an extension to Formy, dubbed “Informy”, in the coming months which will greatly expand the power of these forms.

Why do this?

As Hugh MacLeod has illustrated above, these things are not being pruned because they aren’t good or don’t work, it’s because they’re not great.  With limited time and resources our group is always re-focusing to ensure we are making the largest possible impact on the university. To do this we need to spot spending time on the “good” in order to make “great” things.

This pruning lets in new light where it wasn’t able to shine before and opens up opportunities for us to work on:

  • Complete the re-structure of wayne.edu. Something we need dedicated time to do right.
  • Change how our Web projects are run. Our current process isn’t easily adapted for the responsive Web.
  • Change our social dashboard into a product called “Socialy” for the entire campus to use.

While it was a hard decision to cut things in the end this is the only way for us to explore uncharted territory.

User Testing: You are not your users

A majority of people assume a Web page is just a digital piece of paper, but in reality it is just a single step in an entire experience. I will use the illustration below to show how every page is connected to another. The illustration can be looked at in two ways. Most people within an organization tend to think a visitor travels from the inside (homepage) out to the edges. But in reality the visitor is more likely to start on a random spot within the system and then figure out what their next step should be. They don’t have a heads up display (like in a video game) that they can pull up at any time to see where they are in relation to everything else. It is up to the information architect and the designer to give the visitor visual cues and sign posts to orient them within the first ten seconds.

The MaRS website as a graph

Every site is unique

Since no two sites have the same goals and end user needs, the only way to optimize your site is to look through the eyes of your users. For us, we often find insights when we aren’t looking for them. We have been trying to optimize our current students page for some time now. It’s taken us a little longer to figure out than expected, but for a good reason.

I wanted to share our experience with everyone, not as a how to, but as an insight into a process that I think every Web worker should be aware of.

Passive user testing

There are two ways to test your site’s effectiveness. Formal user testing is when you recruit a specific type of user and have them complete pre-defined tasks or watch them use your site in a controlled environment. Passive user testing is when you watch the user in their native environment and they’re unaware their actions are being analyzed. Both have their pros and cons, but both are necessary for a well rounded analysis of a website. I am going to focus on passive testing for the purpose of this post because it’s something everyone should be doing all the time.

Everyone knows Google Analytics is the most popular way to analyze your users passively. But you shouldn’t stop there, GA can only tell you so much. Figuring out what your visitor’s motivations and goals are takes time and experience, being aware of where your users are going is just the first step. You can’t just look at one GA report and know what is right and wrong about your site, it takes analysis over the course of a few months with many different tools.

Motivations of a current student

We knew the “Current Students” menu item was the second most clicked menu item from our homepage, “Directory” is the most clicked. We had a hunch about the motivations of current students but we had to know for sure. We set up CrazyEgg on the current students page to see where they were clicking. CrazyEgg tracks both “active” clicks on links and clicks made on things that are not links. We knew they were looking to get to resources as quickly as possible, Pipeline, Calendar, Email, Blackboard and Course Schedule.

What we discovered is “Pipeline” was by far the most popular link. But it stumped us a little bit because we have a direct log in to Pipeline, Blackboard and Email right from the header of every page on wayne.edu so the user doesn’t have to click through to find the links. Obviously not enough students knew about it.

Give the user a hint

So we decided to give the current student a hint about the drawer and the log in ability to see if we could change behavior and drive more traffic through the form instead of clicking the link and waiting for the log in page. We changed the page to drop the drawer down for five seconds then back up to “preview” to the user what is hidden up in the header.

As you can see from the heat maps above the “hint” didn’t change the user’s behavior significantly. Only 3 percent of visitors changed their behavior and used the form once they knew it was there. We ran the tests for an equal amount of time on the same days of the week to ensure we were getting as close to the same population as possible.

Don’t hide important elements

Going back to the drawing board we decided to re-organize the entire page and just plop the log in form right in front of the user. We knew students wanted to log in to these services and we just hated the fact they were going through so many steps to do it.

Above is the re-aligned current students page. It has almost all the same information on it, just re-organized. We did drop the news and events because they were getting less than 1 percent of the clicks on the page and replaced it with some of our social media activity to make students aware where we were. All the links are in alpha order above the fold to allow for the easiest of access. Previously we had the links split up based on perceived importance.

We tested the page yet again with CrazyEgg. Success! 20 percent of visitors used the form to log in directly to the service of their choice. We were happy and were about to call it a day, but then we noticed something interesting. The “Current Students” menu item was being clicked by 5 percent (257 clicks) of visitors. Looking into it further we determined it was not only being clicked by users who entered directly on the current students page but also by people who came from our homepage.

Why would users click on a menu item right after they clicked on it to get to the page?

Orientating your visitors

Regardless where your visitors come from they should be able to orient themselves within two seconds of viewing a page. We noticed with the re-aligned page we had moved down the page title and the menu item wasn’t being highlighted to show the user a “state” of it being selected. So we decided to test making the menu item selected to see if it changed the user’s confidence and that they were on the page they expected to land on, the one specific to current students.

What do you know, it worked! I didn’t think it would have the impact it did but when the menu is selected only 1 percent (59 clicks) clicked on it. In addition the log in form gained another 1 percent of visitors using it.

You are not your users

Time and time again I have to remind everyone making Web decisions that they are not the primary user of their site. Like the illustration at the beginning of this post there are two ways to view the same information. Inside out or outside in. The more you can understand the way your users view your site the more you can understand their motivations and make it easier for them.

User testing isn’t an exact science nor is there a magic formula or tool to use. It takes persistence, patience and insight, but in the end the time spent is worth it.

Increased context on the site index

Something we have overlooked for a while is the site index on wayne.edu. We have been gathering sites and adding them to the list, but frankly it is something we don’t use on a daily basis. The list is used as a “suggested search” in the search box on the homepage. When we (internally) are looking for a website we just start typing in name and it quickly pulls it up and you have the ability to jump right to the site.

But others use the index

As we looked at our stats we realized just how many people use the site index. It is linked to from our global header and is the ninth visited page on our site.

Looking at the page and trying to use it a few times we realized it had some serious flaws. We had too many links on the page and there wasn’t enough context around them.

School of Medicine

The second largest set of sites were from the School of Medicine. The school is so large is basically has an entire copy of the main campus departments. This is what caused most of the confusion, two Admissions Office’s, Computing,  and Research departments to name a few.

Our solution

We decided to keep the full list but have the ability to filter to only the main campus or med campus sites. We also added “, School of Medicine” to the end of all the medicine sites. I have included an initial sketch of our idea on the right.

The site list does need some clean up and we are doing that slowly, it takes some time to go through the hundreds of links to determine which are no longer relevant.

One less feature going forward

The “Suggest a site” feature has hit the cutting room floor. It wasn’t hard for us to run a report and realize almost all the recent suggestions were spam. Almost all authoritative sites that have been added in the past year have been by us, only three have been from the campus community. It wasn’t worth the time to mark the spam to justify the feature.

Hopefully our users will find this new context and features useful. We are watching the stats and will be modifying the page even more based on how our visitors are using the page.  We hope you find this new layout just a little bit more useful if you do use it.

View the new site index at: http://wayne.edu/siteindex.php

Design Decisions: “Apply Now” button

Last week Wayne State was mentioned the in the Chronicle of Higher Education for our increased traffic to the admissions application from wayne.edu. I wanted to break down a little more about what we did and why.

We work very closely with the admissions office and talk regularly with some of the students who field the calls to our general phone number. This is something we do on a regular basis with any site we oversee, it is important for us to identify problems we can solve on the web before they get to a person and waste resource time. Something that came up was the question about application deadlines, prospective students would call and simply ask when they had to apply by. Wayne State has a rolling admissions schedule so a student can apply and get accepted at any time but each semester has a cut off date. In addition, since the schools/colleges/departments control the content on their websites the level of information can vary. We decided to tackle this challenge on the homepage.

First Try

We decided to play with a few options of adding the due date to the homepage. This would not only solve the prospective student issue but also give the visitor a sense of urgency if they were considering applying. What we came up with is shown on the right. It was a great first step but we got some great initial feedback, the graduate programs all have their own deadlines so we couldn’t publish just one date. We were okay at the time with just publishing the next upcoming semester for graduate.

Refinement

After seeing the page day in and day out for a few weeks we started to notice some redundancy with the “Application” and “Apply” labeling being right on top of each other. So we started to refine the style to put a little more emphasis on the upcoming semester and less on the actual due date.

We also noticed the “Giving” menu item was seriously getting overlooked. Although it was much larger the type and positioning didn’t look like it was clickable. Here is the break down of the click throughs year over year.

The 52% decrease had us worried so we knew we had to at least bring the link back up to it’s normal state. It gave us a chilling reminder that with A/B testing it is important to change only one thing at a time. Otherwise you don’t know what outside consequence you might have.

Current Design

The current design was meant to focus on the upcoming semester they would be applying for which leads to the apply wording visually. We also moved the “Giving” link back up to see if it made any difference. You can see the currently live design on the right. The results so far have been really good. The “Giving” menu item returned back to its normal click through rate. And overall we were seeing a 30% increase in the number of click throughs from the original design.

A breakdown of the clicks from Sept 13 – Dec 21, 2010 to Dec 22 – March 31, 2011 can be seen below. This is the previous 100 days and the 100 days before that.

Year over year increase

This change had us excited, it meant we were on the right path to entice visitors to take action and we had a way to track it. Looking deeper in to our analytics though we realized we were on to something even larger. Below is the year over year stats for the “Apply” link and the new style. It is a little harder because the single link was now split into two but what we found was in the same time period a year prior the “Apply” click through rate actually decreased 17%. What that means is from the previous year we were able to increase the click through rate by an astonishing 62%.

Below you can see a break down of the year over year change:

Looking to the future

We are now starting to plan our next revision of the “Apply Now” buttons to see if we can push that increase even further. Our next step is to clean up the information a little bit to make it even clearer. Here is an overview of the options we came up with. The left most image is the original version for reference, the second is the current and the rest are new.

We realized both undergrad and graduate admissions promote the same semester at the same time so we don’t need to display that label twice. Since we are combining the labels we probably need to remove the separator line so they can be in the same context. We still haven’t decided 100% on which to implement but we will be testing them when we do.

Lessons Learned

Making changes isn’t always going to improve results and improving one result isn’t necessarily going to impact the entire system. We learned that it is important to stick to one change at a time, measure and refine. Not all changes will be earth shattering and you have to accept you may be impacting the user experience for the wrong reason.

We also learned gathering proper results takes time, at least a month to see a clear picture. It may be tough to put up with the opinions of a few people if they don’t like what you are trying but in the end it is all about how it resonates with the end user. They are the only one that matters.

Lastly we learned it is important to try something, there are always opportunities for growth and far too often we hear “let’s tackle that in the next redesign”. Decide on a micro goal, figure out a way to measure it and implement. It is better to have tried and failed than to have never tried in the first place.

A more useful homepage search

We have been slowly rolling out a new search page from wayne.edu over the past few months. This search page not only looks far better than the old Google partner search that they have since discontinued but is far more functional.

Making search useful

Over the past year we have been doing some significant research with how people use the wayne.edu search box. Last year I did a presentation on analyzing the real time searches and the recent changes have been a result of that research.

We realized that visitors search because Google taught them to. I believe this because we see searches for simple things that are clearly on the page if the person just looked in the actual content area. Doing a search though personalizes what they are looking for the Google is so good that often the snippet of the page containing their answer gets called out as the description for the first or second result. Thus allowing them to get the information they are looking for without having to scan the page.

Types of searches

As we are watching the searches come in throughout the day we started to notice some patterns. The patterns centered around the categories of the things they were looking for. They centered around these topics (in no particular order):

  • Web pages
  • People (Faculty mainly, then staff)
  • Courses
  • Events
  • Buildings

Repurposing existing information

Google is great at searching full text documents especially when authority is important. But for our purposes we need a little more fine grained results specific to a few parameters. We were not at all interested in writing a search engine but felt that we could extract information in an effective way for our visitors. We know the structure of class numbers, building names and short names, faculty/staff usernames and phone numbers.

Lastly we were not happy with Google’s results for events. When visitors hear about an event and want to know more about it they search for it. Our university has a lot of events going on each day, 50+ typically and a lot of them a repeating, either each semester, year or at random dates. The way Google’s algorithm works it gives more prominence to pages that have more authority, to gain authority pages need to be linked to, visited and around for a while. Well the events the visitor are typically looking for occur in the future and have possibly not been linked to a lot thus older events will show up higher than newer events with the same title.

Breaking it apart

As you can see in the screen shot on the right we are now breaking apart the search page into organic results, matching buildings, people, classes and events. This brings this otherwise hidden information to the top where a visitor can get an overview of all the parts of the university that match their search. This not only gives the visitor more accurate results but also gives them additional information they may not have thought about. Opinions for students have been very well received most notably about the events being pulled in. It reduced frustration around older events showing up in the web results and increased their awareness of things happening on campus.

We are not excluding these events, classes, people and buildings from showing up in the natural search results because at times Google does a better job at filtering them and not all users notice the column on the right. Again this is a result of Google having ads on the right hand side of their results, they are training users to not look there for organic information.

Continuous improvement

This is just the first step into improving information retrieval for our visitors. We understand we will never have a navigation and architecture that will please everyone, but from insights into this we can improve the way visitors are actually using our site. We strive to build a user experience that not only gets out of the way but also enjoyable. We don’t have a long term goal for the site search but we know our next steps will be to integrate domain or site specific search right into this page with appropriate context on the right column. This will allow us to have one search results page for every site on campus that is well branded and scoped.

View the combined search page at: http://wayne.edu/search/

The birth of a new feature

We have been running into the same reoccurring issue with the digital signs and yesterday we just had enough.

We are pulling the news announcements from the CMS where the news is already being entered and scheduled for the departmental websites. The issue arises because it is the same information in two different contexts.

So we sketched out an idea of how we can allow content creators to modify the titles just for the digital signs. By default the sign would need to use the main title but if the department wants they can change it. The initial sketch is above.

Three hours later it was implemented into the CMS and pushed to production. The signs are now displaying the titles specified for the sign context.

Situations like this make us glad we maintain our own CMS and have the flexibility to accomplish the universities goals in a timely and cost effective manor.