Web Changelog – Week of December 2, 2013

It’s been a while since I have posted site launches or updates, and I’ve missed it. The primary reason is we have been heads down working on the completely revised version of wayne.edu. This last week I was inspired by ENTP‘s weekly ‘changelog‘ post and decided to try it out a bit. Instead of posting once and a while when major things happen, I’ll post an update each week with the large and small things that have impacted the Wayne State Web.

Next.wayne.edu progress published in Today@Wayne newsletter

It’s no secret that we have been reconstructing wayne.edu from the ground up the last five months, but it has finally reached a point where we are comfortable announcing it for secondary audience feedback.

The first few months were dedicated to discovery, the team focused on mining the data we’ve been collecting over the past ten years on the current site. Then doing passive and active user testing with our primary audience (prospective and enrolling students). We then completely re-engineered our internal development processes and went to work creating a site that would resonate with that primary audience. At this point we were comfortable getting feedback from our secondary and third audiences.

The story in Today@Wayne accomplished just that, hundreds of comments, questions and insights came in this week. With one week until launch, we are prioritizing, tackling and scheduling out this feedback.

nextwayne-todaywayne

 

New WSU Header based on Foundation 5 rolling out

We made an under the hood update to our global header/footer this week. This v5 version works with Foundation 5 and can be built right into the style of a site with SASS. This reduces the number of HTTP requests and ensures the standard look across all our sites. You can see it in production on our Virtual Tour.

fd5-small

fd5-medium

fd5-large

Virtual Tour moved to a new server

Another slightly under the hood update, we moved our Virtual Tour to a new server environment and rebuilt it completely on Foundation 5 with the new global header. It looks almost identical to the old site but it is now responsive, contains 50% less HTTP requests and is 60% smaller in file size.

virtualtour

vt-stats

 

Hosting a Google+ hangout for admitted students on December 12th

Last year we hosted a live discussion about living on campus (#LifeintheD) which was very successful. Next week we’ll be hosting a Google+ Hangout for admitted students. We are calling this chat #AskaWarrior and inviting all prospective students who have been offered admission for any 2014 semesters. The plan is to have staff and students from various areas of campus to answer as many questions as possible.

#AskaWarrior Google+ Hangout

 

Student Service Center Live Chat now live

Another small but important update, we added “Live Chat” to the student service center homepage. The Student Service Center handles all requests for Admissions, Records and Registration, Financial Aid and Student Accounts Receivable. They are already advertising live chat on the undergraduate admissions homepage and as they add capacity to answer real time questions we will be introducing this live chat button across other Web properties where appropriate.

ssc-live-chat

Design Change: Event RSVP Template

Last week we launched a new design for RSVPs in the Special Events calendar. The ability to create RSVPs has been open to the campus community for a while now so we thought it was time to examine the process again.

Problem with the old design

Most RSVPs that went through Special Events had their own complete look that took over the page and matched the print or e-mail campaign for the event. Recently that has not been the case and we noticed a lot of events going out with the plain linear template. The template wasn’t very scannable and was frankly confusing to users at times because the form was below the fold.

Benefits of the new design

The new design has many benefits over the old, if you would even call the old template “designed”. The new template has two columns, one for the event description and the other for the form. We found that most often the description and form length are about even which results in a balanced page. The layout of the form is about the same except we styled a few default elements like the first and last name fields to make the form a little shorter. Lastly we changed the submit button to be green and larger. This created an anchor for the eyes at the bottom of the page and a defined call to action.

Benchmarking

There is no way to measure the success of the new design since the number of RSVPs that go out are variable and all have different audiences. Through a brief survey we have found that people using the new RSVP form find it more inviting and have a better overall experience.

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.

Changes to the wayne.edu footer and impact area

This morning we made a change to the WSU Impact area and footer on wayne.edu. I wanted to write a quick post to explain the change.

The Problem

The WSU Impact area was designed for items that are longer standing than regular news, often lasting a few months and impact the institution as a whole. Over the past year we’ve added things to that area because there was no other spot on the homepage for them. The items we added are forever standing and will not change over time. We filled up the WSU Impact area quickly and it made the page feel unbalanced.

The Solution

We ended up adding a second row to the footer for these forever standing items that will always be connected to the university and need a presence on the homepage. They include WDET, URC and the voluntary system of accountability. This now gives us enough room to promote things that impact the university every few months that regain the goal for the WSU Impact area.

In addition, we added a link to the “Accessibility” section of our site. Although this area is mainly related to physical building accessibility we will be expanding it in the coming months to include web and digital accessibility issues and resources.

With this change in place the bottom half of the homepage is now evenly balanced and whitespace is evenly distributed. Over time we will continue to evaluate the effectiveness of these links and the WSU Impact area.

Tweaks to the global header and footer

Yesterday we made some changes to the global header. The header looks almost identical, all the changes were under the hood. I have been meaning to make these changes for some time now. Luckily I used this week’s independent study time to get it accomplished. More about that later.

From an on screen perspective the header is now 5px shorter and 960px wide (our new standard) instead of 900. The code was simplified to reduce space and be more descriptive. Last but not least it now works fully in all A-grade browsers and IE all the way back to 5.5. I have also outlined a few other benefits below.

Better Print Support

At some point the print style for the global header just simply disappeared. Not sure what happened but it was just gone. This newest update fixes that. The print header is now black and white with our wordmark and Aim Higher fully readable on top of each page. The top tab doesn’t print and the bottom border is where it is suppose to be.

The only thing that changed in the footer was the removal of the copyright policy link and no longer underlining Wayne State University.

Better Mobile Support

Something completely left out of the old header was support for mobile or “handheld” style rendering. It doesn’t do any mobile detection just yet but any device that does pick up the handheld style will now get a header like the one on the right above.

Using Opera’s small screen rendering you can see a simulation of how it looks on a mobile device. The old header (left) doesn’t accomodate for the small width and forces the user to scroll left/right. The new version (right) linearizes the page, makes the skip links visible and the tab links are now visible by scrolling down.

Fewer HTTP Requests

We reduced the number of HTTP requests that it takes to build the header from 10 to just 5. We did this by creating a sprite of all the images that make up the header. We did have to add two new “real” images though for the wordmark and aim higher to print in black and white. Having fewer HTTP requests will allow the header to load faster on devices with higher latency and makes rendering quite a bit faster. Yahoo has a great explanation about the importance of fewer HTTP requests. As you can see from the graphs above although we increased the file size size overall (just a little) the total rendering time was reduced by almost half.

More technical graphs with the comparison: old header | new header

Using a Sprite

Above is the sprite we used to create the header. A List Apart has a great article explaining sprites. This single image is used to create all the background and styled images that make up the header. It just needs to load and position it in the right spot and the browser does the rest of the work.

Skip to Navigation and Content

Recently testing our site with a screen reader we found our skip links were not functioning correctly. WebAIM had a great article about making the skip links available to people using keyboard navigation so we decided to give it a shot. Above you will see what any of our sites look like if you press the “Tab” key to navigate your way through the page. The “Skip to Navigation” link will come up first, then the “Skip to Content” will show. Basically when the links have :focus they become visible, otherwise they are hidden.

Legacy Code

We tried to support as many legacy situations as possible and fix any issues before hand. But unfortunately we came up with two situations after the fact that we could not account for. The first was users who replicated the main header code but hotlinked to our style sheet. These sites will see an odd shaped header till they update their code. The second is customized headers, some sites used our original code but with overrides in their local css to change the header style. These sites will all be broken till the individual site administrators update their code, there is nothing we can do about custom overrides.

Using the New Header/Footer

If we don’t handle your web site and you want to use the new header/footer you can right away. The code and instrcutions can be found at: http://wcs.wayne.edu/style/

Additional Issues

If you happen to see a site that is looking funky with the new header please take a screen shot and send it to wcs@wayne.edu and we’ll look into it.

Virtual Tour Updated

Wayne State University Virtual Tour

We just posted some updates to the photos and content of our current Virtual Tour. The current site to be honest was just a jumping point to a larger tour but the larger tour site has yet to materialize.

Put together in a day (almost a year ago) the current Virtual Tour is more of a self-paced image gallery. It’s broken up into five sections, activities, our campus, our city, academics and research. Within each we highlight an image and a key fact. It’s not the most earth shattering tour but it works. Depending on what section you’re on the side bar adapts the content to the specific audience.

See the updated Virtual Tour.

Copying events on events.wayne.edu

Have you ever had to put multiple events in the calendar at events.wayne.edu that were so similar you wished there was a way to just copy your event instead of re-entering all that data? We’ve been working on an event copy feature and now it’s available for you to use.

Want to copy an event?

When you have a new event that closely resembles a previous event you can now use your previous event as a template for your new event. You’ll have to know where to look for the copy event link though. We decided to tuck the event management links away to clean up the page and make it a little easier to scan for your event. Mousing over the event with reveal the Copy Event link as well as any other event management links available on your event.

copy_link

Need to copy your RSVP too?

Event copying doesn’t stop at the event. If your event has an attached RSVP you can also choose to copy the RSVP along with your event. At the bottom of the copy event screen you’ll see a few extra fields (this will only display if your event has an attached RSVP). The only catch is that the short name has to be unique, so you’ll need to come up with a new short name for this rendition of your RSVP. If selected the entire RSVP will be copied and attached to your new event.

rsvp_info

Linking to buildings on the campus map just got easier

campus-map-oldcampus-man-new

If you use the online Campus Map to directly link to a building you will notice some changes today with the building and category list page. We added some additional information about every building on the map. Check out the old version (left) and the new version (right) above. Here is also run down of the features.

Full mailing addresses
Each building new has the full mailing address displayed. This information was not available at all before so we added it in.

Easy to read format
Instead of just listing the name and the full URL the names are now the links and the address is directly below it. Linking options are now to the right, there is room for multiple.

Links to campus and Google Maps
Some people don’t like our Flash based map and prefer Google so we included direct links to the locations on Google for those folks. We are in the process of moving away from Flash but don’t have a date when the new map will launch just yet.

Microformats
Each building is equipped with hCard microformat to increase the amount of structured data available for anyone who wants it.

Individual building pages
In addition to the listing page redesign each building or location now has its own page with unique URL to link directly to. It includes a photo and additional information about that building if available.

Upcoming events for each building
On the individual building page the next five events in the Events Calendar taking place at that building will be listed. A screen shot of that is below, click it to see the actual live page.

campus-map-events

Thank you everyone who has given us feedback on the campus map. It has all been incorporated in to this recent update and there is still more in the works. We will continue to adjust and tweak it as users needs change.

Publicizing our extended web presence

Social Networks on wayne.eduFor the past year we have been present on quite a few social networks. We started out with Twitter last year then moved to Facebook and beyond. We made it a point to not promote our presence on these sites and see how fast they grew organically.

Recently I have been going around campus talking with various groups and administration about new communication tools and how was are using them to reach further and more personal than ever before. These tools are key to that new communication strategy.

Why we decided to put them on the homepage

We decided to link to them from the homepage for two reasons.

  1. After a year we had a pretty constant growth rate and we wanted to start sharing this space with people who have not stumbled upon us yet.
  2. Second is that we now have an extended network of students who just started blogging for the university. We have not officially announced them yet but soon enough we will, we snuck them in on the homepage RSS button if you want to get a preview.

We didn’t want to give the buttons too much attention since they are not one of the primary goals of the homepage. We placed them in the bottom right corner and grayed them out. We also put a “What are these?” help link for someone who is not already familiar with these icons.

Go ahead and check them out and start following if you find us interesting. If you don’t like how we are promoting our extended web presence let us know why, we would love to hear about it.