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.

 

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.

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.

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.

Testing Tender Support for Web site updates

If you interact with our department through the wcs[at]wayne.edu email address for requesting services or update your Web site you will notice a change in the responses over the next month.

We are testing a service called Tender Support to handle keeping track of updates and issues.

tenderapp

A single point of contact

It was important to us to keep the single email address we currently have. We wanted to stay far away from a “form” ticket system because people hate filling out forms and we did not want to add potential complication to update a web site.

Multiple support staff working on a single issue

In the past emails went out to everyone in the web department, it was setup this way so everyone knew what was going on. The issue was someone might start working a the task that someone else may have already started on. There was no way to tell everyone who was handling what without emailing everyone. Tender allows someone to add tasks right to their queue and/or someone else’s queue who will be assisting.

Clear and easy to use interface

The interface of Tender is great. It allows us to see at a glance how many open and new issues there are. It is easy to see who replied and even allows for private replies for us to keep notes or talk without the client being notified.

The only downside we have experienced is it would be great if the dashboard refreshed automatically in case we do not have our email open.

30 day trial period

We are just testing the system to see if it will work for our department, it is software as service so it does have a charge and we want to make sure it is actually making the web update process easier before we invest any money.

Feedback

We are looking for your feedback, if you work @waynestate and use us for your web services let us know how response time is and if you like the structure of the automated emails.

If you are not part of the university feel free to comment about your experience with ticket systems and/or support software. Have a suggestion or some tips for using Tender? We would love to hear about them.

Code Update: PHPSimpl 0.8.4

The newest version of PHPSimpl has been released and we have updated the code on the production web server. The release bring some much needed features to the framework and a few bug fixes.

We know this is not a widely used framework because we take an active role in its development and feature set. (We also track its download rate :-X) But we use it for a few specific reasons, knowing we are probably not the only ones in this situation we outlined them below.

  1. We work in a shared server environment where we don’t have root access to the server.
  2. We do not have direct control when the server software gets updated.
  3. We are called upon to produce sites or applications in a rapid manor.
  4. We control so many sites that having to install the framework for each would be a inefficient.
  5. We use the same functions and methods throughout many sites.
  6. We have more than one developer building and maintaining sites, consistency determines our efficiency.

The update notification can be found at the unofficial PHPSimpl site and we have included some useful URL’s below. We are always here to help so any question about the framework and its implementation just fire away.