One for the techies: Performance using Yslow

One of the side affects of developing a more robust, interactive and aesthetically pleasing website is the possibility of an adverse performance impact.  When considering all of our potential audiences, it’s very important that we try to maximize the performance of EWU’s future site. One of the ways we are doing this is by following some performance rules, called “YSlow”, developed by the performance gurus at Yahoo!. I need to credit Ryan for bringing YSlow to my attention back when he first started here. Since being introduced to it I’ve been on the verge of obsessing over how we can make the new site faster.

So what is YSlow? YSlow is a set of 13 rules that affect the performace of a web page. Following the rules can lead to performance improvements of 25-50%. That’s a major improvement especially considering the rules are quite simple:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags

I’m not going to expand on each rule here but I’ve linked to the explanation for each rule on Yahoo’s site if you’re interested. With the possible exception of rule 2, using  a CDN, we will be attempting to follow each of these basic rules when developing and deploying the new site.

Measuring page performance using YSlow has been made easy by means of a couple Firefox plugins. Yahoo has developed a Firefox plug-in for YSlow to use with the Firebug plugin (a must-have plug-in for web developers). The YSlow plug-in analyzes web page performance with respect to each of the 13 rules and then assigns a performace grade of A through F.

If these rules have the positive performance impact that we expect, my hope would be that we can apply the same rules to other web-based IT systems around campus.

Site map meeting coming your way

We’ve built a site map for the redesign using mindmeister.com. The goal behind the map is to represent how we propose reorganizing information on the new site so that it is more user friendly. So, the map doesn’t necessarily represent the back end architecture of the site, but it does represent what navigational options a user will be presented with at any given point. Now, in case you didn’t notice, there is a TON of information on the EWU website. Therefore we have undoubtedly missed some things on the map or – this may be hard to believe – even placed some things where they shouldn’t go. For this reason, we have grouped together areas of the map into several meetings with departments and colleges over the next three weeks (the first meeting was today with “Future Students”).

Below is a list of the meetings/groups and the lead staff member for each group. If you are a CMS web publisher or web developer for your area, please contact the lead staff member’s office to find out if you should attend.

• Future students (Admissions, Financial Aid, Registrar and more): Larry Briggs
• Current students (Student Affairs, Residential Life, Student Activities and more): Al Thompson
• Graduate Studies: Ron Dalla and Brian Donahue
• Academic resources (Academic Affairs, Academic Resources and more): Linda Kieffer
• DIEO: Doreen Timm
• Support EWU (Alumni, Development): Mike Westfall
• EWU Libraries: Dean Pat Kelley
• We’ll meet with all EWU Colleges individually, with the dean being the lead for each

In the meetings, we’ll focus on the following for each area:

• Goals for web pages
• Input and suggestions for site map
• What is your content wish list? What content can be removed? What new content do you need?
• Personnel resources for completing web pages

Most of these meetings will be led by either Michelle Hege or Lisa Cargill from Desautel Hege Communications. They will act as an extension of our staff to gather your input and report back to us. With this information, we can complete the site map. As this process is going on, the MarCom and IT staffs are working together to create all the new page types we’ll need in the new site. In addition, we are starting the programming work involved in building the new home page and navigation.

Once we complete the site map meetings, we should be at a point where we can start building the new site map into the CMS.

Web Manager, Where Art Thou?

As many of you know by now, our web manager in Marketing and Communications, Ryan Bentz, had to leave us. Sorry I’m a bit late in formal notification via this blog. Those of you who had the opportunity to work with Ryan and see his work know he was a very skilled developer, great communicator and a flat out excellent person to work with. He did a great job for us, helped us make great progress and he’ll be missed. While Ryan liked his job here and embraced our Eagle spirit, personal reasons forced his move back to Seattle where he’s found a new position doing none other than managing a website for an international company.

The good news here is that we have a solid, three-part plan for moving forward. (1) Thanks to Dr. Arevalo and our University leadership, we were granted the ability to replace Ryan. The application period closes this Friday (10/24) and we hope to start interviews late next week. (2) Again, thanks to recognition of the importance of this project, we were granted the ability to contract with Ryan to complete the site map and important pieces of programming work for the new site. (3) We are continuing our partnership with Desautel Hege Communications. They will act as an extention of our staff in conducting meetings with departments and colleges across the University to discuss the proposed site map (more on this in my next entry).

So, while Ryan will be missed, it is onward and upward with the redesign.

New design sneak peek!

We’re continuing the site’s new design based on wireframe D now and it’s looking good!

I thought I’d link to the designs here so you get a sneak peek of the direction we’re heading. This is still quite early and we plan to do formal reviews of the design here on the blog to get feedback/suggestions/comments, but I know everyone is curious about the new direction, so why wait?

Here are a few samples of the homepage template (NOTE: the homepage content is yet to be discussed in great detail — we’ve been focusing on the “shell” of the new site’s design which includes the top navigation, surrounding background elements, footer, and initial typography and color ideas):

• Homepage: This is what the user will see when they first get to ewu.edu
• Main navigation mouseover state: When the user mouses over a main navigation button, they’ll see a slightly lighter gray background (see the Admissions button in the upper left)
• Audience navigation mouseover state: When a user mouses over one of the audience links in the upper right, this menu will slide down (only after a slight delay though lest we annoy users with random popping up of unrequested menus) NOTE: Which links we use in these menus are still being worked out.
• Quicklinks mouseover state: This is what the user will see when they mouse over the QuickLinks tab. Note the “Customize…” link at the bottom. This link will take users to a page where they can decide what QuickLinks they’d like to have in that menu. The list will be computer-specific so will be handy for faculty/staff here on campus who use the same computer to frequently access certain areas of the EWU site.
• Auxiliary message layer: This area will only appear if users click the overhead screen handle present directly below the main navigation. We haven’t decided how this will look yet, but this is an initial idea. It is just another way for us to present as complete of a picture as we can about EWU and its surroundings through current regional data, photos, videos and potentially other social networking widgets.

There you have it! An initial look at the new design. Depending on the feedback we get with it, the design will evolve and probably change over the coming weeks but this should get you thinking about it (and hopefully a little excited too!). We’re working on internal page look & feel now (left navigation, content headers, etc.) so we’ll post those when the dust clears a little bit on the design.

Please feel free to leave comments!

social networking

Just a little mini-plug here for some of our social networking efforts that will begin to tie in more directly to our University website. For those of you who haven’t seen them, I invite you to check out the following links to see other areas that EWU is beginning to maintain a presence.

• Facebook
• Flickr (check out the EWU Flickr group to join and contribute EWU photos to the pool!)
• YouTube
• MySpace
• Start Something Big (of course!)

Thanks to John Demke, Kit Frantzich and Sam Buzby for the hard work on getting these up and running and maintaining them. We’ve already had great successes with them and we’re still at the tip of the iceberg!

With the redesign, we’re planning on tying directly into these services to enhance the experience and increase effectiveness of the University website. The goal is to give external audiences (be they future/current students, potential faculty or staff, community members, alumni, etc.) a more holistic picture of the University and the people who make the EWU world go ’round. Look for some of the ideas on how we’ll accomplish this in upcoming posts….

Also, some of you who might be EWU Alumni should check out their new site. The social networking aspect of it is very strong and they have some great functionality around event registration/notification.

We’re also planning on infiltrating the worlds of Wikipedia and Zinch more effectively. We’re considering Twitter as a possibility but we’re not yet sure how effective that will be in this market. If you have any other ideas or suggestions, feel free to leave them in the comments!

user testing feedback!

EDIT: It came to my attention that nowhere in here did I reference what was Wireframe C and what was Wireframe D. Just to be totally clear –

• This is wireframe C
• This is wireframe D

Maybe I should do some user testing for this blog?

Today was our first day of user testing with the functional wireframes we created for the website redesign. I went up to Ferris High School this morning and sat down with a handful of students to go through the wireframes with some basic user tasks to see how the site organization and navigation worked for them.

Boy, was it awesome.

There’s a lot riding on these user tests. I’ve referenced on more than one occasion in my presentations that if these user tests don’t go well, we’ll go back to the drawing board and rethink our approach.

I’m pleased to announce that it looks like we can safely put the drawing board away! The functional wireframes were received very well. Here’s my bullet-pointed summary:

• Users preferred the functionality of wireframe D over wireframe C
• They hardly noticed (i.e., they effortlessly used them) the left nav, top nav and dropdowns — a sign of a strong user interface
• For tasks like finding tuition/fees, program information, majors/minors, financial aid, directions, etc. users looked in their logical buckets without using the dropdown audience-based navigation. This is a big point! If something didn’t fit as nicely into those categories (things like housing/dining info, clubs & activities, etc.) they went for the audience dropdowns. Otherwise, they used the main navigation bar — Academics, Admissions, Resources, etc. — or the footer for their primary information needs.
• Having the “Apply Now” link prominent in the masthead made it extremely easy for them to point to where they would go to Apply. A couple of students felt that the Future Students dropdown and then the Apply Now link was more comfortable for them but that it was just a matter of preference
• Users clicked on the logo in the upper left when told to go “Home.”
• When showed the initial two design concepts, users preferred the look of C over D, stating consistently that they felt there was too much “white” in design D. They liked the functionality of content and navigation in D better than C, but they felt that the lack of color was a drawback to D and still reminiscent of the current EWU site.
• When users did get lost (which happened rarely) it had to do with how content was laid out on what we call the “splash” pages — pages without the left navigation. This is good because those problems are easily remedied by improved design and/or seasonal updates.
• I heard at least 5 or 6 times, “Wow, that was easy!” with an almost surprised tone to it. I think these students have either A) tried to navigate our current site or B) had bad luck navigating other university sites!

There’s the synopsis! All in all, I’m very pleased with what we’ve put together and I think the fruits of the research and work we’ve all done up until this point is beginning to pay off! I’m planning to do another group of students this week or very early next week, but things are looking promising for a modified version of wireframe D! We’re now working on aesthetic design options of the D functionality.

Thanks to everyone who has been involved in this process so far! You are all fantastic to work with and I applaud you for your dedication and commitment to doing what is most right for EWU. In particular, I’d like to thank the following folks who have spent a great number of hours so far to get us to the point we’re currently at:

• The MarCom Web Team (Sam Buzby, Kit Frantzich, Sheila Wollweber)
• The IT Web Team (Alex Chernikov, Betsy Knox, Colin Turnbull)
• The EWU Web Community Leaders (Paul Merchant, Dana Simmelink, Scott Zinn)
• The rest of the MarCom team for their valued input and ideas (Dave Sonntag, Teresa Conway, Kandi Carper, John Demke, Dave Meany, Ryan Gaard, Matt Hepworth, Steve Bateman)
• Desautel Hege Communications (Michelle Hege, Kristen Paul, Lisa Cargill)
• Klundt-Hosmer Design (thanks Rick and Mastery!)

…forgive me if I’ve forgotten anyone!

So, onward and upward! We will continue to test and post more of our findings. Once we have the initial design concepts ready as well, those will go up for all to comment on.

a change in perspective

You’ve seen the optical illusion before. It’s interesting how, even though you’ve seen it so many times, you still feel that mental shift almost like shutters in a window when you adjust your mind to look at it from both perspectives.

There’s a great article on A List Apart from a couple days ago that is highly applicable to what we’re going through with the redesign. Titled “Look at it Another Way”, the article explains how critical it is to really put yourself in the place of the folks using your system in order to truly deliver something to them that is useful and effective.

This goes back to the discussion I brought up a while back on whether or not we call the housing here on campus “Dorms” or “Residence Halls” (out of curiosity, did anyone see all the back to school ads in the paper over the last month or two? how many of them referenced residence halls?). It’s easy for us to always come from the perspective of “us telling them” — as the “creator of the system.” It isn’t so easy to come from the opposite perspective of “us asking them.”

Fortunately for us, all of the research we did at the outset of this process has given us much insight into the needs of the people who will be using our site the most. Now we’re at a point where we’ll actually see if the ideas we’ve come up with to accommodate their needs actually work in practice. I’ll be going into a few high schools next week sitting down one on one with high school students to walk them through some user stories using the functional wireframes we’ve created. (NOTE: We’ve only created them to function correctly in Firefox 2 and 3 — they’ll work okay in IE and other browsers, I just can’t make any promises).

During the test, I’ll ask them to perform some very basic actions using the site’s navigation structure. Examples would be:

• How much does it cost to attend EWU?
• What’s the housing like at EWU?
• How do you apply to attend EWU?
• How do you find financial aid info?
• What are the available majors and minors at EWU?

If they get hung up along the way or if they somehow get confused or lost, I’ll probe with other questions to find out where their difficulty is coming from — what the root of their confusion is. The feedback I get will be posted here for everyone to see.

If you have time, I’d suggest poking around in the wireframes yourself. Only some of the links are functional since we’re not spending the time here to create a completely functional site. We’re really interested in finding out if people are able to perform critical functions on the site easily. Feel free to test them out on friends and family too! I’d love to hear what others have to say about these new navigation paradigms.

today’s QSI presentation at eastern washington university

Today I gave a little diddy on the Eastern Washington University website overhaul at the 7th Annual QSI Conference. For those of you who don’t know, the QSI Conference at EWU is basically a two-day period where there are multiple sessions folks can attend that are lead by EWU faculty and staff on topics ranging from how to open jobs with the marketing department to assistive technology to maintaining a positive attitude.

For my presentation, I basically gave a quick update on how the website redesign project is going. The presentation is available here in PDF form (careful! it’s about a 9.5MB file) if you’d like to download a copy for yourself. It may seem a little odd without me talking about it, but I think you’ll get the idea. You’ll find links to our semi-functional wireframes within with which we’ll be conducting user testing as well as an initial look at some early look and feel concepts for the new website design.

Thanks to those of you who attended! I know we’ll be seeing more of each other sooner than later.

On the topic of Ingeniux CMS’ text (wysiwyg) editor

One of the many complaints/concerns/worries about CMS we’ve heard from folks who use CMS on a daily basis is the wonky editor for your content. I believe I’ve explained to a few folks who have asked that the current editor in CMS version 5.2 (what we’re using now) is going to be replaced in the upgraded CMS version 6. Hooraayyy!!

Ingeniux recently wrote a blog post about the editor and some of the theory behind WYSIWYG (“what you see is what you get”) editing on their site. In it, Nathan references the new editor version 6 of CMS will use, TinyMCE. Make sure you check out the demo of the application. Across the top of that page you’ll see other links to what it looks like with all the features enabled and also what it looks like with some skinning work done on it.

Anyway, here’s to the new content editor! We’re extremely excited about this upgrade in the new version of CMS. We foresee it making life much easier on all of us!

Left navigation, aka “whack-a-mole”

One of the things that makes ewu.edu so difficult to navigate is the fact that left navigation constantly changes. It can make for an interesting game of hunt-and-peck when you’re trying to find content on our site.

In some cases this style of navigation is okay — but on a site like ours where a sense of place/destination is critical for usability, it can create problems. I applaud Ingeniux for the clever way of auto-generating navigation in this manner. However, with the redesign we’ll be striving to adjust how our left navigation works.

As an example, here are a couple screen shots from our current site:

1.) Main academics page

2.) Undergraduate academics page

Notice how the left nav totally changes? If anyone wanted to look at the Programs A to Z Index from the Undergraduate page, they’d have a tough time doing so! In fact, they’d most likely have to leave the page and go back to the original academics landing page in order to get there.

Now check out a different left nav approach:
1.) Gap Women’s homepage

2.) Gap Women’s jeans page

Notice how the other left nav items are maintained even though the user has drilled down into Jeans? This allows the user to continue to freely navigate throughout the site without having to think hard about how to trace their steps back out of the path they chose.

In the redesign, one of the challenges we’re facing is to create a left nav much like what you see immediately above. Once you’ve navigated to a main topic on the site, that left nav should essentially remain the same. Organizing our site’s content into logical sections that the user can identify with rather than by the structure of the University is critical to the success of this tactic. This is a big challenge for a site like EWU’s (indeed, it’s one of the reasons this project is more than just a redesign and more like a reorganization) just because we have sooooo much content out there. But the fact that we have so much content should only reinforce the need for reliable navigation.

This strategy may require each unit in the university to think a little harder about the navigation on their site. But thinking a little harder about it so our website users are happier will make things easier on us all in the long run.