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.

A/B Testing: Schedule a Campus Tour

We are always on the hunt to optimize our websites and making changes on a consistent basis. I like to call the process “Micro Redesigns” and I have been talking about it more and more this year. A lot of the examples I use are from Wayne State. We are lucky enough to control the complete user experience from the bottom up so we have a lot of opportunity to play. And by play I mean optimize, optimize, optimize.

What is a micro redesign?

It is taking small deliberate steps to reach a larger goal (which may be not 100 percent apparent at the time).

No perfect website

No matter how long you work on a site and the number of people you test it on there is always room for improvement. For example, our homepage has felt the same for the last few years but has actually changed a lot. Instead of doing a sweeping redesign every two years we decided to focus on one piece of the site every two months and optimize it. As of right now, two years after launch, only 20 percent of the homepage is the same as the original look. We have increased the usability of every piece of the site without interrupting any stakeholders use of the page. It isn’t just the homepage either, sub pages have been changing also. More about that in the next week or so.

Schedule a tour example

This last month we set out to try and improve the number of conversions to our “Schedule a Tour” link on the wayne.edu homepage. We knew the link was getting traffic but we tested our homepage with prospective students asking them to start on the homepage and schedule a tour and they would completely overlook it. We decided to test making it more visual. Below is a comparison between the initial and the proposed visual treatment.

The original (left) design features text and a link to schedule a tour now. The proposed (right) design features a map image with a marker similar to Google Maps with a smaller amount of text.

We decided to put the two versions up against each other for a month to see which one performed the best. We had our idea of which one would perform the best, but we had to have the data to back it up.

The results

Launched:  Jun 22, 2011 | Completed: August 9, 2011

After the first week it was pretty clear which version was performing the best. But we made sure to run the test for at least a month before making a final decision. Just over a month, 1 million visits and 1,000 clicks later, the results were pretty conclusive. The newer, more visual schedule a tour button resulted in a 67 percent increase in the number of click throughs to the schedule a tour form.

Completed a reservation

 

I try to follow my own advice as often as possible but sometimes for what ever reason it doesn’t happen. This was one of those times. I can’t stress enough to test your configuration to ensure you can follow a user through the complete funnel to determine exactly what changes you made resulted in the most overall impact.

Analysis

One could easily say that giving anything more color or space to click would yield more clicks. But we think these results show something deeper than that. I would agree in some sense that more color and space do yield more clicks but for this case I think it was what we added. The initial design didn’t connect the label with what the user was about to do. Adding a visual map and a marker that people were already familiar with (Google Maps), made a connection with an existing construct immediately.

If you look at the graph above you will see the goal to complete a visit is set up correctly and is recording but what isn’t recording is what page, or version of the “Schedule a Tour” button they came from that resulted in the goal completion. Google is just supplying “(entrance)” as the referral page and this isn’t helpful at all.

One note on the graph above, it is only the tours completed coming from our homepage, it is not a total of all the tours coming in from the entire website.

It’s important to have that source page to determine that although more people clicked on the more graphical version of the button, if they didn’t ultimately convert then it doesn’t matter how many people click it. We need to find which version produced the best ROI overall, not just in the micro sense.

Dream big, think small

In the end it comes down to the notion of improving the overall experience for your visitors. Don’t lose sight that those numbers are not a mass of people coming in hoards, but individuals coming one by one with a goal in mind with no tolerance for getting the run around.

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.

Events Calendar Update: Campus Calendars, Cross Promotion & more

Introducing Campus Calendars

Each school/college/department has their own calendar and it’s worked great until a few months ago. We realized a lot of activities were cross disciplinary and more than one department/group plans activities for the same event. Our solution was to introduce “campus calendars”. These are available to everyone to add events to regardless of what calendars you own. Some of these calendars will show up year-round while others will only show up at certain times of the year. It will help pull together events from around campus into larger event groupings.

View by Category

The left hand column now has a “View by Category” heading. This allows visitors to just see events in a certain category. It works great when browsing for something to do based on interest. For example you can view all the “Art Shows” around campus in one listing regardless of what department is hosting it.

Facebook and Twitter features

We realized a lot of events are being shared through our “Add This” plugin and we wanted to make it even easier to tell friends about events. So we added the native Tweet and Like buttons from Twitter and Facebook to hook directly into the visitor’s accounts and their friends’. We don’t have enough stats from these services just yet but I’m sure we’ll do a post about their use soon.

Removing the “I’m Interested” and “I’m Going” links

After optimizing the right-hand menu to hook directly into existing social services we realized the “I’m Interested” and “I’m Going” functionality were redundant and confusing. We looked at our statistics and realized they were not being used as much as we had hoped and the data wasn’t available to the event owner and frankly wasn’t helping anyone. We ended up removing them completely and rely only on existing services.

Cross Promote

Lastly over the last few months we have been battling with groups around campus wanting to promote events on their homepages and calendars from other areas around campus. The current calendar only allowed the event owner to add the event to different calendars. We decided to allow anyone to “pull” events into their calendar. These events will show up in the normal listing and display on their homepage but they won’t have access to make changes to the event. You have to be logged in to see this option and when selected you can select the calendars you want a certain event to show up in.

All of the changes above were inspired by every user of the calendar. Our goal is to make the most useful calendar possible for the campus community. If you have any suggestions to make it better just drop us a line at web@wayne.edu.

CMS page editor gets an update

We just updated the page editor in the CMS. We use an open source editor called CKEditor which allows content contributors to update pages without having to know HTML. The version we were using was horribly out of date. We wrote a few additions and changes to it that we didn’t have time to migrate with each update. The time has finally come when the current release has those changes built in. We are happy to announce we have just deployed this new editor for everyone to use.

Old Editor

New Editor

You’re probably thinking they look exactly the same and you are right. There are a few minor visual tweaks but the entire back end of the editor has been rewritten and is quite a bit faster and more functional.

New Features

  • Cross browser inline spellchecking
  • Better paste from Word cleanup
  • Ability to add pre styled containers
  • Better find and replace functionality

We Removed

  • Predefined “Styles” – No one used them and they often didn’t function as expected
  • Font definition – Font styles are controlled by the site stylesheet and we want to keep it that way

This is your editor

Let us know what you think, we would love to hear your opinion. Does this add a feature you’ve been waiting for? Or did we miss something you always use? Just shoot an email to web[at]wayne.edu.

Creating a culture of community

My position at the university allows me to meet with just about anyone and everyone on campus. It also allows me and the Web Communications team to get a bird’s eye view of how everyone on campus works internally and externally.

I was thinking about our team culture this morning as I looked around the office. I do my best work early in the morning so I tend to get in before everyone else. The Web and print areas are slightly different than the rest of the marketing office. The first thing you’ll notice is we work in large open areas instead of individual offices. The more I thought about it the more I realized how much we really do as a group and how all our decisions are based on benefiting the most amount of people.

Group Culture

Some things you’ll notice while walking through the Web area is the lack of walls and the abundance of whiteboards. All content, programming, and design brainstorming happens for all to see and comment on. Just because we are making a decision about how to write a headline it doesn’t mean a designer or developer wouldn’t have some insight and add to the discussion.

Beyond that it’s the little things you probably won’t notice at first glance. Between ten of us we share four phones. I have one, Jenn, our Web content administrator has one, the designers share one and the developers share one. We used to have less but added one for the designers in the past year as they started to become primary contacts for our clients around campus.

You’ll also notice we don’t have a printer on everyone’s desk. We actually don’t have a printer at all, we got rid of it a few months ago. The decision to remove it was two fold, we didn’t see the need to have a printer running and purchase toner for it when there is already one in the center for the marketing office. On the web we don’t print very much and when we do it gives us an excuse to get away from our desk for a few minutes.

Lastly between us ten we only have three trash cans. This may sound unnecessary to think about but it comes down to needs. There’s no need for all of us to have a trash can with just one or two items in it each day. The custodians come by twice a day and picking up ten trash cans would add an extra 2-3 minutes just in our department. We can walk a few extra steps to throw our stuff away which in the end keeps the cleaning crew happy and us from being lazy.

Use only what you need

History should not be a motivation for doing something. Question what is actually required to accomplish a task. If it makes sense for everyone to work in separate offices or have their own phone that’s okay. But if you can get by with a smaller space or less office “things” it’s less you have to worry about on a day-to-day basis. In the end you will find more time to focus on actual work that makes a difference.

Final note, the pic above shows the office with the lights on, this is typically not the case if you come visit us.

Optimizing high traffic pages with web standards

Wayne.edu HitsThe first days of a semester are always big for students and for hits to the Wayne State Homepage. 40,500 visitors the first day and 36,500 the second.

We are lucky in the fact that our hosting environment is setup to regularly respond to this amount of bandwidth. That is not to say we don’t have to optimize the site, far from the truth. The inherited version of the homepage weighed in at 400k total, 25k just for the HTML and over 40 http requests, it was a bad situation.

Recently we moved the homepage to the main server and rebuilt the site from scratch. Giving us ~120k total weight, 6k in HTML and just 15 http requests (including google analytics). Making this optimization didn’t happen over night, it took some time to get the numbers down this low, here is what we did.

  1. Scrapped the original table based layout for CSS and XHTML.
    This took the site down by 70% right off the bat.

  2. Optimized all images and combined where necessary.
    Removed ~10 http requests and saved 50% in file size.

  3. Used Yahoo’s YSlow rules to have a goal to reach.
    We knew it was not possible to get an “A” grade since we do not have a CDN but we did our best in all other categories.
    YSlow wayne.edu

  4. Combined and Minified all Javascript and CSS.
    Saved ~5 http requests and 40% in file size.

  5. Configured far future expire tags and ETags.
    Making a second visitor with primed cache only need to grab ~50kb and 2-3 http request depending on the rotating panel.

Back end changes helped a lot on the server load also. A few things helped the processing time for each http request.

  1. Removed all DB connections.
    All the dynamic data is updated via a cron with static html, this reduced the impact on the server per page load dramatically.

  2. Reduced the number of PHP includes.
    Combined as many files as possible and used full paths for includes to reduce the number of files the server has to access per page load.

  3. Took the homepage out of a php framework and wrote custom functions.
    Further reducing the overhead of the page load to just the essentials.

Overall we have had great response from the decreased load times and the standardization of the page. Response time during high traffic times like the start of classes and early registration have been kept so low it has eliminated any complaints we received in the past about slow page loading.

It took about 2 months to get everything in place and tested but it was well worth it. We have a standard compliant site now with very little impact on the server environment. Keeping it simple, flawless and eliminating any wasteful overhead definitely attributed to the projects success.