The Staging Area

I know, amazing… we’re still here. A lot has changed since the last posts nearly six months ago. We (within IT) have seen some some big changes within our organization and even bigger changes regarding IT projects. Lots of exciting stuff so I hope that it all gets showcased for the campus community soon. I digress…

I wanted to take this opportunity to firstly, let you know we’re still here and making progress on the project and secondly, invite those on-campus to visit the staging area where the site will be built out into a “go-live” state. Access is currently restricted to the EWU campus network because the environment isn’t ready for public consumption and I really don’t want search engines crawling this area…if anyone really needs access and you can’t be on the EWU network, please contact me directly and we’ll work something out. The staging area can be seen by visiting http://redesign.ewu.edu. Please note that this is a staging area and may be subject to unannounced maintenance and changes. There will also be a lot of unstyled and completely made-up content while new pages are being built out.

A few facts about the staging environment:

• Everything you see is published through the Ingeniux CMS Version 6
• “Structured URLs” are being used instead of x numbers
• Nginx (“Engine-X”) is being used for both load balancing and serving static content. I could write a whole post on why nginx is cool but that would bore most of you so if you’re interested, check it out here: http://wiki.nginx.org/Main.
• Yslow rules are mostly implemented but there’s still work to be done

Please feel free to leave comments or questions!

does size matter?

In a design discussion I had with our new Web manager, Brent Schneider, a question was raised about the overall width of Eastern’s proposed new site design. The concern was that the proposed width of 980 pixels might be a little too wide. I must admit that in my own struggle to define a new layout and style for EWU’s Web presence (and, admittedly, in my utter hatred for the current site’s outdated 800×600 dimensional compliance) I neglected to consider the seemingly few individuals who might still prefer a skinny site. In a perfect world, we’d all have gloriously huge monitors, dual-monitors in fact… and of course we’d all be on Macs — or at least Linux (for Colin) — and the world would be a far better place. But I digress…

One good place to start in the search for something to back up the currently proposed width should be the Google Analytics data we’ve been collecting from Eastern’s new admissions-oriented microsite, startsomethingbig.org, which launched almost a year ago. The audience for this site is in many ways the same as the audience we want to aim Eastern’s redesigned site towards.

The screen resolution analytics collected shows us that the largest portion of our audience, nearly 30 percent, use a screen resolution of 1024×768. The redesigned site would show up fine at this resolution as long as the browser window is maximized. The only drawback would be that any side-background texture or imagery we use would not really be seen (which is usually built for those with larger monitors to take up some of that unused space anyway).

The second largest group (just over 20 percent) use a screen resolution of 1280×800, more than enough space to accommodate a 980 pixels-wide site with some bonus space left over for side-background imagery. The next most popular resolutions (1280×1024, 1680×1050, 1440×900, 1920×1200, 1280×768 etc.) account for more than 47.5 percent of our audience, all of which would beautifully display the newly redesigned site. This leaves us with less than 2.5 percent of our audience still using a screen resolution of 960×720, 800×600 or less.

Another good gauge for our audience and our industry’s take on this matter comes from looking at the widths of some other education sites, as well as some of the most popular and widely-used sites on the Web. Check out this nifty site width chart I created after looking at 17 other sites to see what they had already come up with. You’ll see that CWU is the most daring, with a homepage width of 1200 pixels. Both Virginia Tech and Amazon.com already use the same width we’re proposing, 980 pixels, while Facebook, Stanford, MySpace, Gonzaga, WSU and Appalachian all come in right around 960 pixels. (Maybe shaving off 10 pixels on each side of our layout would put us in a better range afterall.)

The rest (Biola, UW, Whitworth, CCS, our current site and WWU) all still appear to be trying to make the 2.5 percent happy. Fine for them, but I think our research shows that it’s going to be better to design to the future and get as much shelf life out of the new design as possible. That being said, there is a third option, an idea that comes from Yahoo!’s homepage that actually allows users to choose a more narrow layout if they prefer. Maybe this would be the best compromise for a site like ours that has to please so many people, but I’ll leave that little jewel up to Colin to figure out if it’s a CMS possibility. I did however just notice that Yahoo! seems to have a website redesign of their own in the works, and the new version eliminates the page width options. Oh well.

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.

Ingeniux CMS Version 6

Throughout the redesign process we have been getting a lot of questions about the CMS. As you may know, the “redesign” is a bit more than a site redesign because we are also moving to a new version of the Ingneiux CMS. The transition to a new CMS is a bit more than an upgrade…”reimplementation” might be a better term. The new version, Ingeniux CMS version 6, contains many new features that should greatly improve the user experience and aide us in the development of the new site. I’ll run down some of the new key features in my personal excitement order:

AJAX Web Client: Cross-browser, zero-install client based on the latest AJAX technology, runs on Mozilla Firefox, Microsoft Internet Explorer, and Apple Safari.

Say goodbye to ActiveX controls and good riddance to the Mac Client! In the new version there’s nothing to install, no separate versions for PC and Mac; just bring up the CMS in your favorite browser and off you go. Although Ingeniux lists Firefox, IE and Safari as their supported browsers, I have tested version 6 in a couple other browsers and it worked great (even in Linux for all 2 or 3 of us Linux users).

New WYSIWYG Edit Control: Provides robust content import configuration options, improved support for tables and XHTML compliance

Ingeniux has chosen TinyMCE as the new WYSIWYG editor for version 6. If you aren’t familiar with WYSIWYG editors, TinyMCE is one of the most popular and widely used editors. It’s commonly integrated with other web content management solutions like Mambo, Joomla, Drupal and WordPress. I would estimate that at least 90% of the issues users have with the current version of the CMS are directly related to the editors. I am extremely optimistic that we wont be experiencing any more disappearing content and IGXERROR issues with the new editor in place. Ingeniux has given us numerous configuration options for the new editor which should allow us to tailor it to our needs and better uphold content standards.

Enhanced Asset Management: Improved image and file management, including built-in image processing, group-level permissions and XML metadata support.

Asset management is referring to the management of documents, images and media. The new enhancements will give us an intuitive way manage files directly through the CMS instead of going through the “document server” process. We will be able to upload images, video, and documents directly through the CMS interface and delete those files when need be. All of the folders are secured using group permissions so we don’t have to worry about users managing files in a location that they shouldn’t have access to.

Another huge feature of the enhanced asset management interface is the ability to manipulate images. Currently, we have to use a third-party product like Photoshop to scale down images to a reasonable web-presentation size. Now we have the ability to scale images to size as part of the upload process.

Search Engine Friendly URL enhancements: Auto-generated search engine friendly URLs model site structure and page names

As part of the redesign we are focusing a lot of attention on Search Engine Optimization (SEO). This feature of the new CMS should immensely help our SEO effort. The URLs are generated by the naming and positioning of pages within the CMS tree structure. Here’s an example of how the friendly URLs work:

In the above site tree, friendly URLs would build out from from the home page, “EWU Home”. Folders can be used to organize the site tree but do not play into the structure of the URL. If the page name contains a space, the space is replaced by a dash (eg. Site Map would be Site-Map.xml). So the path to “Admissions” would be /Admissions.xml. The paths to “Path1″ and “Path2″ would be /Admissions/Path1.xml and /Admissions/Path2.xml. As you can imagine, page naming will become very important because there’s a definite line between search engine friendly URLs and user friendly URLs. http://www.ewu.edu/apply-for-admission-at-ewu.xml might be search engine friendly (good for SEO) but certainly not very user friendly. An example of an appropriate search engine friendly URL might be when publishing news or blog entries (eg. http://www.ewu.edu/News/ewu-launches-new-website.xml). The friendly URLs feature will be a very nice enhancement to our site but it will be important for users to understand how the URLs are constructed when using the new version of the CMS.

Multi-Format Output: Publish CMS content with any file extension and to any server technology; including Microsoft .NET, PHP, Java Server Pages, and Adobe Cold Fusion.

My mind begins to race when I start thinking of the possibilities using multi-format output. To explain how it works I would direct you back to a diagram I used in a previous post. The diagram showed how content is created using the Ingeniux CMS but specifically how XSL stylesheets can be applied to user supplied data to produce a desired document type. The same method applies here. A user could supply content (via CMS) to be inserted into a page containing a scripting language like PHP (via XSLT).

Hierarchical Taxonomy System: Import, build or manage taxonomies directly in Ingeniux CMS. Categorize content for re-use and then use the Taxonomy Navigation system to return content based on categories, create pivot filters and generate tag clouds

It’s still a bit unclear to me how we will utilize this very powerful feature but it does present us with a lot of options . It gives users the ability to categorize/classify all of their content using a set of pre-defined categories. Taxonomy navigation will likely be used for media (image/video) galleries and possibly to present tag clouds in a couple areas of the site.

Single Sign-On Authentication: Supports cascading authentication to LDAP, Active Directory and SQL data repositories

Admittedly, not too exciting for the average CMS user but its good to note that we will be ready for the Looking Glass project when the project is ready for us.

Well, that was quick overview of some of the key features and enhancements coming in the new version of the CMS. Personally, I’m very pleased with the direction Ingeniux is going with their new products. I think they’ve done an excellent job of filling any shortcomings of previous CMS versions. If you would like more details on any of the new features or have any questions about the CMS, please feel free to leave a comment here or shoot me an email.

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!

web stats for the masses

One our largest service gaps has been the inability to easily share page-specific stats with our content providers. For years now, the web server logs have been fed into a database so logs can be purged. So we’ve had the data, tons of it, but the problem has been just that… too much data and the lack of an interface to the data. Recently, Alex Chernikov built a robust front-end interface for the stats database but the current state of the database would still require lots time and server resources to produce the reports. We’ll likely revisit this solution down the road because it has great potential. But we need stats now, especially with the redesign…

Immediately, we started looking to Google Analytics. It’s widely used and even embedded in some of our current CMS pages. There were a few problems that were apparent from the start…

• Unlike so many of Google’s solutions, there’s currently no API provided so our only option would likely be to use a shared login into the GA site itself
• Reading the GA Terms of Service agreement can give anyone with a high-traffic site an uneasy feeling. Specifically #2 FEES AND SERVICES that says service is provided free up to 5 million pageviews per month. We’re not there but it’s certainly not out of range either.
• Third party content/cookies can be blocked so there’s probably some population that wouldn’t be accounted for in the stats. I’m not sure how big that population is at this point but personally I would expect it to grow as new browsers and plug-in provide additional privacy features.

I’m hopeful that we have found our solution in an open source project called “Piwik“. Piwik aims to be an open source alternative to Google Analytics. It’s main selling points are:

• Open API
• Plug in architecture
• Data abstraction layer
• Customizable dashboard

The plan is to embed the piwik code in every page we publish and use the “Custom Tab” feature of the Ingeniux CMS to display real-time stats for each page or group of pages.

Because Piwik has an open API and we can house the application and data locally, we should have lots of options for customization and further development. We have Piwik installed and we’ve done some preliminary testing. So far we are quite pleased with the results. When we have the custom tab developed a bit further I’ll post some screen shots here. We would really like to hear any thoughts you might have on this solution. If you have any other solutions in mind that might work for us, don’t hesitate to comment and we’ll take a look.

accessibility and syndication

As Ryan mentioned in an earlier post, we will be making the transition to a new version of the CMS along with the redesign. The new version has some really exciting features that we would like to start introducing here on the blog. Before we do, I thought it might be good to give a high-level view of some of the technology that will drive our new site.

One of our goals with the redesign is to produce a text-only and accessible (compliant with ADA, Section 508) version of nearly the entire site. The underlying technology of our site lends itself perfectly to accomplish this without the need for users maintain additional or separate data. With a single XML document produced by the Ingeniux CMS, we can dynamically present the document to the consumer based on their request (specifically, URL string match or browser user agent). So the consumer asks for a text-only version of x59375234203928.xml Admissions.xml and the XML document that was previously presented in its full html/css/js/ajax/flash is transformed into an accessible document by dynamically applying the appropriate XSL style sheet.

The text-only version of the site is just one example of how we can leverage this framework. We are using the same method to generate RSS feeds galore and a site map that renders both as html and as xml (our xml sitemap can be fed to google and follows the protocol from sitemap.org). Other possibilities include rendering multilingual pages, browser-specific content (eg. content for mobile devices) and multiple brandings. If you would like more info on the topic, Ingeniux has a good article on their site titled “Cobranding and Syndication“.

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!