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.

YouTube embeds just got a little more clear

A few years ago we added the ability to embed a screenshot from a YouTube video through the CMS editor. This alleviated the need to take a screenshot, edit with software to add the play button, and then finally uploading it to the web server to embed it into a page or an email. With one click, pasting the url of the video a screenshot of the video can automatically be generated and embedded into a page.

But there was a problem

YouTube play buttonThe default YouTube play button at the time was a red rectangle which does call a lot of attention and allows users to immediately identify what will happen when they click the image. It became a problem over time as more of our videos (especially now that we can upload a custom still photo as the default screenshot) became people with a YouTube play button head:


New YouTube play buttonWe are happy to announce the play button graphic has been swapped out with a more transparent version that equally emphasizes the screenshot and the fact that the image will link to a YouTube video.

Now at a glance you can see the details in screenshot while still still understanding the link will bring the you to a YouTube video.

How to use the YouTube screenshot button in the CMS:

YouTube Preview

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.

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.

Formspring integration now available on Admissions website

Inspired by a recent episode of HigherEdLive with Mallory Wood on the topic of Engaging Prospective Students With Formspring, we decided to add the form to our Undergraduate Admissions homepage.

Gathering questions

As you can see from the screen shot above, we placed the widget on Undergraduate Admission’s homepage with the simple questions “In high school? Have a question?”. The goal is to get quick interactions from prospective students to start their connection with Wayne State.

In addition the questions allow us to get insight into what students cannot find on the website. At first this was great, we got multiple questions about the GPA requirements and tuition cost. So we are moving those to more prominent areas on the site. Currently we are averaging 4-5 question submissions per day.

Continue reading “Formspring integration now available on Admissions website”

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.

View by Audience

We recently updated the University calendar to handle viewing events by audience.  This was brought up by one of our clients and it made perfect sense for us to make this addition. Previously the only way to view events was by a particular calendar. It was helpful, but limited. We added this feature into the menu and it interacts the same way as viewing by a calendar.

We hope this new feature allows our users to interact with the calendar more often and find more relevant events.

Upcoming changes to the university events calendar


Something big is happening to the university Events Calendar.

A little bit ago Rob Vrabel mentioned we were working on the events calendar and I would like to confirm that we are and we have some great things in store.

We will be running down all the new features in detail closer to launch but here are just a few things to look forward to:

  • Completely new interface
  • Better listing and search for events by interests and audiences
  • Upcoming Deadlines and Reminders are broken out from main calendar
  • Images now supported for event promotion
  • Image and video gallery available for every event
  • RSVP’s to be created and managed by anyone
  • Ability to show interest or say you are attending an event even if there is no RSVP
  • Calendars will be better organized in the left menu
  • Featured event promotion
  • Addresses for location of off campus event
  • Subscribe by RSS to a category or audience
  • Email subscription for upcoming featured events each week

You can view the current calendar at: http://events.wayne.edu/

Web site request bookmarklet

All Web site requests come in through our wcs[at]wayne.edu email account. Recently we’ve been testing a ticket system called Tender to keep track of all these emails. It has worked well but still has not solved the true issue we are facing so we are not going to continue using it.

The issue comes down to lack of information in service request emails. We get on average 40 emails per day that range from changing a few words to a complete list of changes for a site. Sometimes tracking down what site, what page, what content needs to be updated and when it needs to be updated by can take more time than the update itself.

So we are trying something new, a bookmarklet that has some pre-defined fields which gives us the basic information for a request in a standard format. Below you can see what the base email looks like:


Filling out the email

Here is a filled out request, basically replacing the pre-defined labels with your site information.


Installing the Bookmarklet

  1. Make sure the “Bookmarks Toolbar” is visible. If it is not, go to menu View > Toolbars.
  2. Drag one of the links below into your Bookmarks Toolbar based on how you send email
    1. Using MS Outlook or OS X Mail: Send Web Update
    2. Using Wayne Connect Web site: Send Web Update


Customizing the Bookmarklet

If you only oversee one or two sites and would like to automatically have your site name in the subject of the email just let us know and we can send you a specific bookmarklet just for you.

Linking to buildings on the campus map just got easier


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.

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.


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.