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.

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.

 

Redesign: Computing & Information Technology website

Just in time for classes to start we’ve rolled out a new Computing & Information Technology (C&IT) website. The new site takes in to consideration all the feedback and analytics we’ve gathered since the last relaunch in 2010.

Information overload

C&IT offers a lot of services, and everyone at the institution has to interact with a handful of their services every day. We discovered that the needs of the site change based on time of year and audience. Faculty/staff are always in need of base services but often don’t realize the full breadth of what C&IT offers. Students who have just enrolled need to get connected to the network quickly and communicate with their professors. This website is key to making that a seamless process.

The previous homepage and directory of services put everything right out front in order to be “comprehensive”. But this approach suffered from information paralysis, lots of links, lots of text, and too much to scan. Visitors ended up clicking on the main menu item for “Services” instead of going to the category of service they needed. The “Services” pages did have the same information as the homepage but presented it in a slightly different way.

Service catalog before (left) vs. after (right)

Previous services pageNew services page

In conjunction with C&IT we tackled this information overload on two fronts. The first is a simplified list of services on the homepage organized by “category” which include a colored image. Less information + visual cues means it is easy to scan.

Diving deeper in to the services landing page shows even more optimization. Building on the idea of “discovery” we added a few options in addition to the simple A-Z list. This page now allows for organization by audience, category and built-in search. This method helps both the frequent and infrequent visitor find what they’re looking for with context about additional services they may not know about.

Building on consistency

The previous website had a large focus on getting out as much information about a service as possible which seemed very logical. But a consequence of having each department maintain their own pages led to inconsistency. Some areas had a lot of resources on their pages while others just had the bare minimum. We knew being able to compare services apples to apples would help visitors feel confident in their decision based on Web content instead of having to call and talk to someone.

Service information before (left) vs. after (right)

As you can see from the two screenshots above, the previous version on the left has a lot of information in a full paragraph, it takes time to scan and read it. The new website breaks content in to specific fields so they can be displayed under common headers and easy to scan formatting.

Extending the CMS

This consistency was accomplished by a small but powerful addition to our CMS, Custom Fields. Inspired by WordPress we had a need to attach structured information to each page. What we figured out after adding the ability for each site to have their own free form title and value pair is that we stumbled on something very powerful.

Below are some of the custom fields for the GroupID service. There is now basic structured information that we can use throughout the website. You can also notice that we allow for multiple fields, there are two “audiences” below.

Custom Fields in the CMS

Because the website content is always evolving and C&IT can add/remove services at any time we wanted to make sure they didn’t have to maintain the page content plus another service catalog database to organize it. We have a custom field called “Service Title” that we are able to use to pull all active pages with that field in to the service listing page. It allows the website to stay updated in multiple places simply by attaching the correct meta information to each page. It’s very natural.

A few other small gems

View the new Computing & Information Technology website at: http://computing.wayne.edu/

Introducing Formy – Our self-service form manager

Over the past seven years the Web Communications department has strived to not only give our end users the best experience but to also create tools that can be deployed across campus. We started with the CMS, then the Events Calendar, RSVP system, URL Shortener, Social Media Dashboard and more. Today we are introducing our newest self-service tool, a Web Form Manager which we have been calling Formy.

The problem

Without a way to get feedback or information from users, the Web would be a boring place. Typically a site has two or more forms: a request for information form, contact form, and possibly more. Every department has different requirements for what they need from the user and because of that each form has to be created by hand. Creating forms can be a pain: there are many requirements, a server with database and email capabilities and of course a programmer. Up until now we’ve charged our normal hourly rate to create forms. This can range from $150 – $750 per form, depending on how complex it is and what type of manager/approval system needs to be created. Although we could keep going this route forever and continue to spend hundreds of hours creating forms, we knew we had to make a change to focus on larger projects. After a few hundred  forms we started to develop a pattern, we knew we could solve 80 percent of all form needs on campus with a core set of features.

We realized we have been creating forms for the past two years in the events calendar RSVP system. So we took all the existing constructs (and codebase) and migrated it to a self-standing form creator.

Creating forms with Formy

To create a form visit forms.wayne.edu, sign in with your AccessID and you’ll see a list of forms that you have either created or have access to. Click “create a form” and the process is very similar to creating an RSVP in the events calendar. It’s a three step process starting with some basic information.

Basic information

The first step is to name your form and provide a description that the user will see no mater where the form is used. From there you can set the limits and the thank you page/email responses.

Choosing fields

The second step is where it starts to get fun. Every form starts out with the First Name, Last Name, and Email address fields. Almost every form in the system has these fields so we auto populate them. To add other fields simply click on the field type on the right. We have options for almost every form element type and if you don’t see something you’re looking for, just let us know and we can probably add it.

File uploads

We made two important additions to the forms creator, the first is the “upload file” field. We found that most of the forms we were asked to custom create involved some sort of file upload, so we built that right in. You can even add multiple file fields per form.

Reorder fields

The second is the ability to drag and drop the field order. Although it isn’t something the user will see, the previous way to reorder fields was clunky and at times would end in a phone call to our department for help.

Require authentication

A bonus addition: We also recognize that a lot of the forms we created need to first authenticate that the user has some sort of Wayne State affiliation. So we added the “Require Authentication” option which will first ask the user to log in before they can fill out the form. This also ties their AccessID and any information about them to the form so you don’t have to ask for information we as a university already know.

Submit for approval

Once the form is up to your standards the next step is to submit it for approval. This process is the exact same as the Events Calendar. It comes into our queue and we check it over just to make sure the flow of the form makes sense to the intended audience and that you’re going to get the information you need. We typically approve forms within the same day.

The third step is optional, but it allows you to setup access to the form submissions and get alerts when someone completes the form. This is nice if you are creating a “Request for Information” form for example and you want the admissions counselor to have access to the submissions and/or you want a group email address like “askcoe@wayne.edu” to get alerted immediately.

Sharing and embedding forms

Now that your form is done the next step is to direct people to fill it out. There are two ways to do this.

Every form that is approved will have a forms.wayne.edu/1234567 URL associated with it. This URL will not change and you can direct users to fill out your form at that basic Wayne State page.

To embed the form on an existing Web page just visit “Step 1” of the form and you will notice a “CMS Embed” area right below the description. This line, which looks like “[form id=”1234567″]” is what you can copy & paste in to any CMS page and your form will automatically be embedded in that spot.

Tip: You can change the label on the submission button from “Save” by adding it to the embed code. For example if you wanted it to say “Request Information” you would simply add it like this:

[form id="1234567" button="Request Information"]

Getting submissions

Once your form is promoted and users fill it out, submissions will start to come in to forms.wayne.edu and you may be alerted by email if you have that set up. Every submission will have it’s own row in the list and you can click on the first field to see all the information about the submission including downloading of any files.

We have a few things in place to prevent duplicate submissions (often users click the submit button multiple times quickly) or spam submissions but sometimes they do come through. We allow you to delete any individual submission but instead of removing the data completely we just strike it out and don’t count it against the total number of entries. You can always view and undelete it at any time.

Lastly, if you need to export the submissions the process is the same as the Events Calendar. You can choose the fields and order, then click the “Export to Excel” button.

Data and statistics

The centralized form idea is something we have been thinking about for a few years. The data structure was actually created years ago when we added RSVP’s to the events calendar. What this means is all the forms and information are stored in one spot. To date we have ~1,700 forms in the system with more than ~100,000 total submissions. It also means that over the next few months we will be migrating all regular forms over to Formy forms. This will ensure there is one location for all user-submitted data. We can ensure the security of that data and push it to other systems as needed.

Feedback

Like all the tools we create they come out of university need with the goal of empowering the campus community. With that comes ever evolving changes as the campus needs change. We are always open to feedback and you can send it to web@wayne.edu. Often there may be existing ways to accomplish your needs.

Redesign: College of Nursing

Another major milestone at the university was reached recently with the launch of the new College of Nursing website. It is one of the last few school/colleges to be integrated into the main university Web environment. The College of Nursing is now taking advantage of all the central news, events, content and profile resources to increase their visibility and usability.

Design

The previous Nursing website had not changed in the past few years. Items were continuously being added to the homepage and menu which resulted in an overgrown and cluttered site. We set out to change all that with a clean look that focused the visitor’s eyes.

Since the primary audience for the homepage is prospective students we highlighted the main action items we think they should take in a left side menu right on the homepage. In addition a large centerpiece area gives the college a place to showcase students, faculty and alumni in an open ended fashion.

Bringing the resources of the college to the homepage, like the simulation lab, were important because they were differentiators from other nursing programs in the state.

The child pages get right to the point and focus on the content without a lot of extra images.

Information

We ended up re-organizing every page on the site and reduced the total number of pages by ~40%. Luckily we were able to get access to the analytics of the site during the project which helped us decide on the new architecture.

The main menu items were reduced to seven clear items with specific audiences and one level of sub menu items. The site was flattened down to three levels compared to the previous version. Each program now has the same information so a prospective student can compare requirements and outcomes apples to apples.

Looking Forward

It’s still too early to tell if visitors are getting to the destination pages quicker than before but we are keeping an eye on the analytics. We try to do an analytics review one month after the launch of each site to see if we notice anything odd or interesting. So far the visits to the site and average time are up 10 percent and 17 percent respectively year over year. That looks good on paper but doesn’t mean visitors are accomplishing their goals. Only time will tell, we will be sure to keep everyone updated.

View the new College of Nursing website at: http://nursing.wayne.edu/

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.

Preview early, preview often.

This is just a friendly reminder that we offer a “Preview” button in the CMS on purpose. Although we do our best to scrub the HTML in the editor and make it valid and the correct character set a few pages slip through the cracks. But as we discover them we change and make the CMS even better. This mainly happens when copy and pasting from Word, it is a long standing issue on the web.

The page above was actually published by us and it only hit the development server luckily. But it allowed us to detect a problem and fix it before it hit the campus community. It was a reminder to me to preview early and preview often. It will save you in the long run.

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.

CMS sheds its baggage

For some time we have been moving our sites to a new enterprise level server environment. Transitioning sites between servers meant keeping our CMS in two environments and bounce between depending on which site was being edited. This became quite a task to keep both CMS’s up to date since one was php4 and the other php5.

The site transitions completed two weeks ago and we made some modifications to the CMS so it was not dependent on the old server. This weekend we made the switch and shed the php4 baggage and old server.

Working with such a large system can be difficult, especially since it has been coded over many years and still some legacy code exists. Having it in one environment will allow us to refactor that code quickly and get it into production.

First order of business is to update our WYSIWYG editor, this will allow us to support Safari and Opera finally.

Having the system just in one environment will also improve performance since it will not have to contact the slower server for information.

Happy editing.