ennuigination

Higher Ed Institutional Blogging Server Usage Guidelines

2010-07-16T11:49:00.004-05:00

This was one of those projects that I thought would take half a day and ended up taking a week. If I’m going to sink that much work into it, I might as well share what I’ve learned.

I started out looking for lists of higher ed blogs. I didn’t realize at the time that I’d be documenting the process so I didn’t save the lists I ended up using. Those playing along at home can Google it. Once I found my lists, I looked for blogs that lived on a .edu top level domain. Then I looked for any links that mentioned usage guidelines or policies, went to the home page and performed site searches, played around with the wording, and whatever else I could come up with to locate the sort of info I was hunting for. Sometimes the leads I found would be walled up inside an intranet, which is understandable if not a little disappointing. I ended up with around a dozen promising leads.

From those links, I collected about 60 phrases from 7 different schools (in no particular order).

Brandeis
Stanford
Vanderbilt
Tufts
University of Florida
Yale
Harvard

I grouped those phrases under common themes and came up with these 9 common elements.

The stuff you publish here is visible to the entire internet and could be cached by search engines or archiving services for a very long time.
This server/service exists to support the mission of the institution, if your intended purpose is at odds with this then there are many freely available blogging services available to you elsewhere.
Content, including comment moderation, is your responsibility (and liability), not the institution’s.
Don’t do anything stupid or illegal.
We can re-purpose your content (from RSS feeds to marketing campaigns).
We can delete your stuff, up to and including your entire blog/account.
We provide a certain level of technical service/support but there are limits. (Varies widely from one institution to the next)
We can change our minds about any of this with or without notice.
Explanation of process for obtaining an account.

Not every school covered all those points. Not surprisingly, Harvard Law has one of the most thorough documents and they’ve been nice enough to license their terms under a Creative Commons Attribution-Share Alike 3.0 United States License. If you need to put together some guidelines in a hurry I recommend starting there and adjusting the wording to meet the needs of your particular institution.

Performance: Where Do We Draw the Line?

2010-07-07T14:38:00.008-05:00

I endorse the majority of the content of the following presentation:

The Top 5 Mistakes of Massive CSS

Dissension!

It’s not even so much that I disagree with what she’s saying up there. I just apparently have a slightly different comfort level than she does when it comes to altering my work flow for the sake of performance gains. The only point I really have exceptions to is the idea of avoiding IDs in CSS.

I think IDs make perfect sense for major page areas like #footer or for elements that are truly unique like #logo. But I’m not gonna throw the baby out with the bathwater. She’s right that there are trade offs in using IDs and we should be aware of them so that we can make informed decisions.

It only took me 159 lines of CSS to find a use of an ID that makes me question the sanity of my former self. Applying a class to objects using the same design pattern would be more elegant in that situation. I probably have a dozen or so more of those I can clean up when I find the time (HA!).

Case in Point: Facebook

The primary case study in the above presentation is Facebook. Here’s some CSS from Facebook. I see around 20 instances of IDs used in selectors; stuff like #content and #pageFooter. Even her primary example doesn’s practice what she’s preaching with full on zealotry.

We are quick to forget that presentations like this are designed for oral communication. Nicole wants the people in that room with her to leave the conference with a few big ideas stuck in their minds. But it gets recorded and published as a video. That changes the medium. The medium is the message. So the audience expectations change. We non-attendees fault the speaker for presenting things in absolute terms. We expect video content to at least pay lip service to the fairness doctrine. But that’s really not fair.

Presentational Class Names

Nicole doesn’t spend a lot of time on this, but she mentions it in passing, so I’ll take a moment to get up on this particular soap box. My biggest problem with stuff like object oriented CSS and YUI Grids is presentational class names. That clashes with philosophies like the separation of content, style, and behavior or progressive enhancement that I’m not willing to sacrifice. And not just because Zeldman told me so.

I honestly believe these ideals bring value to the work I do above and beyond simple efficiency. That probably has something to do with the fact that I work in-house. The few client based projects I’ve done over the years tend to get junked up with presentational markup a couple hours after the client takes over anyway. If that was the only sort of work I ever did, I’d probably be in love with Blueprint. I can see the value of such frameworks for quickly producing a high fidelity prototype. But just like a mechanical engineer wouldn’t put a part produced by a 3-D printer into a final product, I wouldn’t put a CSS framework into production.

But that’s an informed decision I’ve made for myself. Your millage will vary. Just try to keep yourself up to date and consider the trade offs so that you can make your own informed decisions.

White Space Matters

2010-07-06T12:55:00.006-05:00

So far today I’ve read two really good articles dealing with web analytics: Metrics and Dimensions and Reports — Oh My! from the Omniture blog and The Complete Beginner’s Guide to Web Analytics and Measurement from UX Booth.

But seeing these two articles open in adjacent tabs lead me to do some side by side comparisons. I noticed my gut reaction the the Omniture blog was “I don’t want to read all that!” The UX Booth article was considerably longer, but it didn’t illicit such a knee jerk reaction. I think the reason for this is white space. UX Booth gives their content a bit more room to breath.

Screen Shots

The following screen shots show the first 910-ish characters of content. I attempted to preserve the white space between this content and off screen elements. I’m using PNG-8 to avoid jpg compression making the text fuzzy. The downside is the photo from Oniture ends up looking a bit off. My fault, not theirs. Also, Blogger appears to be scaling these images to be the same width. The Omniture Blog screen shot is actually about 20px wider, for what that’s worth.

Omniture Blog

UX Booth

Counting Pixels

The textual content here are within 5 characters of each other, 912 characters for Omniture vs. 907 characters for UX Booth. Both spend some screen real estate on supplementary content, a photo or a table of contents. But I find the UX Booth content much more inviting. And by my count they use about a third more pixels to present their content.

What Do You Think?

Do you notice a difference anything like what I’m talking about? Or am I “putting the ‘anal’ in analytics” to borrow a phrase from the Omniture blog? Either way, the quality of the content in both cases is top notch. Definitely worth a read if you’re into that sort of thing.

Costs and Benefits of Website Performance Optimization

2010-06-18T14:37:00.003-05:00

My last post covered the how, and supplied just enough explanation of the benefits to keep people interested. Here I will try to go in depth with my analysis of the costs and benefits of the website performance optimization steps I have taken this week.

Costs

I spent the better part of 4 days this week focusing on site performance enhancements. Since we launched the new site in November of last year, I may have spent as much as another 4 days on similar tasks. That time would have been spread out an hour here and there rather than devoting most of a work week to it. Let’s say in total I’ve spent 2 work weeks setting up these various tweaks. Setup is a one time cost.

Some of the costs stretch back to developing the redesign. It took a lot more time to separate content, presentation, and behavior than it would have to just export from Photoshop to Dreamweaver and push the results up the server. At the time I was thinking more in terms of quality than performance. But it would paint an incomplete picture to ignore that end of the equation. There are benefits above and beyond performance for that sort of attention to detail as well. The overall code footprint for the new site is about 4% that of the old site, and normal site maintenance takes a fraction of the time it once did. I’ve blogged on that topic before, although that entry is on the WordPress server which is currently down for maintenance. (3.0 upgrade! w00t!)

My previous entry included a step by step altered workflow for doing something as simple as adding a new icon to our footer. But to be honest most of the extra steps are trivial. A couple of extra “Save As” in DreamWeaver and minifying the results. These things take seconds or even a fraction of a second. That’s nothing compared to the normal edit/test/debug/publish cycle. Occasionally we’ll hit an image sprite edit that will be complex. But most of those will be as simple as sticking the new element at the bottom of the existing file and saving under a new version number. I’d be hard pressed to assign a number to this cost. As a percentage of my time, it’s probably somewhere in the single digits, low single digits at that.

Costs in a Nutshell

Two weeks up front to set up. Another two to four weeks per year in recurring maintenance costs. And the human capital investment to have the people around to pull it off. (That means pay enough to hire someone who knows what they are doing, or put forth the time and effort to educate yourself.)

Benefits

To gauge our progress, I ran tests on WebPageTest.org as I completed each website performance optimization milestone. Full results for each test are publicly available and linked from a previous post.

As a sample, I selected 3 pages. The home page represents only itself, but alone it accounts for 35% of our page views. The Current Students page represents our role based navigation pages and the A to Z index. These are only 6 such pages, but together they account for another 28% of our page views. The Library home page represents around 250 department/office home pages which taken together account for about 21% of our page views. I didn’t worry about the remaining 16% of our traffic since it’s distributed across about 1,000 other pages.

Definitions

Start Render: The time it takes for the browser to receive enough information to start rendering the page. In other words, time our users spend staring at a blank screen.
Load Time: Time spent loading all requests, including AJAX calls made after onLoad (when the status bar says “Done”) For us this includes loading Google Analytics.
Total Requests: The number of calls between the browser and the web server. Think of the server as something like a switch board operator answering around 7 calls per second, non stop. Each request is one of these calls. Our server must get really annoyed with us.
Total kb: Total kilobytes transferred throughout the entire process. This should translate directly to bandwidth cost savings.

Estimates & Assumptions

Based on Google Analytics data collected over the past 7 months, we average around 3,000,000 page views per year. Traffic calculations for the pages represented by our test sample are outlined above. Approximately 25% of our page views are from first time visitors, placing the other 75% into the repeat views category.

Home Page

First Visit

3,000,000 total page views times 35% represented in sample times 25% first time visitors = 262,500 per year.

Metric	Monday’s Test	Thursday’s Test	Difference	Percent Change	Yearly Savings
Start Render	1.089s	0.854s	-0.235s	21.579% decrease	0.7 days
Load Time	6.350s	4.250s	-2.1s	33.071% decrease	6.4 days
Total Requests	41	26	-15	36.585% decrease
Total kb	524	389	-135	25.763 % decrease

Repeat Visit

3,000,000 total page views times 35% represented in sample times 75% repeat visitors = 787,500 per year.

Metric	Monday’s Test	Thursday’s Test	Difference	Percent Change	Yearly Savings
Start Render	0.920s	0.523s	-0.397s	43.152 % decrease	3.6 days
Load Time	2.572s	1.462s	-1.110s	43.157 % decrease	10.1 days
Total Requests	38	4	-34	89.474 % decrease
total kb	59	52	-7	11.864 % decrease

Current Students Page

First Visit

3,000,000 total page views times 28% represented in sample times 25% first time visitors = 210,000 per year.

Metric	Monday’s Test	Thursday’s Test	Difference	Percent Change	Yearly Savings
Start Render	1.075s	0.785s	-0.290s	26.977 % decrease	0.7 days
Load Time	7.162s	4.342s	-2.820s	39.374 % decrease	6.9 days
Total Requests	38	26	-12	31.579 % decrease
Total kb	521	382	-139	26.679 % decrease

Repeat Visit

3,000,000 total page views times 28% represented in sample times 75% repeat visitors = 630,000 per year.

Metric	Monday’s Test	Thursday’s Test	Difference	Percent Change	Yearly Savings
Start Render	1.222s	0.519s	-0.703s	57.529 % decrease	5.1 days
Load Time	2.625s	1.475s	-1.15s	43.81 % decrease	8.4 days
Total Requests	35	4	-31	88.571 % decrease
Total kb	66	63	-3	4.545 % decrease

Library Home Page

First Visit

3,000,000 total page views times 21% represented in sample times 25% first time visitors = 157,500 per year.

Metric	Monday’s Test	Thursday’s Test	Difference	Percent Change	Yearly Savings
Start Render	1.379s	0.943s	-0.436s	31.617 % decrease	0.8 days
Load Time	4.994s	4.983s	-0.011s	0.22 % decrease	0.02 days
Total Requests	33	22	-11	33.333 % decrease
Total kb	470	369	-101	21.489 % decrease

Repeat Visit

3,000,000 total page views times 21% represented in sample times 75% repeat visitors = 472,500 per year.

Metric	Monday’s Test	Thursday’s Test	Difference	Percent Change	Yearly Savings
Start Render	1.249s	0.515s	-0.734s	58.767 % decrease	4.0 days
Load Time	2.266s	1.472s	-0.794s	35.04 % decrease	4.3 days
Total Requests	30	3	-27	90.000 % decrease
Total kb	70	80	+10	14.286 % increase

Benefits in a Nutshell

Over the next year, visitors to our site will spend about 15 fewer days staring at a blank screen waiting for our server to respond and about 36 fewer days waiting for our pages to completely load.

Guide to Intermediate Website Performance Optimization

2010-06-18T09:56:00.005-05:00

If you need a primer on website performance optimization, check out these best practices from Google and these best practices from Yahoo.

The Easy Stuff

As long as we’re designing our sites with web standards some of these practices will already be familiar.

External CSS and JS files
Avoid CSS expressions and filters
Lighter markup compared to table based layouts (fewer DOM elements)
Specify a character set early
Avoid empty tags and duplicate scripts

Other best practices are super easy to implement given clean, efficient, and (mostly) standard coding practices.

Use <link> over @import
Put CSS at the top, scripts at the bottom
Combine external CSS and JS files

The Not-So-Easy Stuff

Image Optimization

Unfortunately this isn’t as simple as using “Save for Web” in Photoshop. To really squeeze every byte out of your image bandwidth without quality loss requires a little research into image formats and which one is appropriate for a given situation. Optimization tools like Smush.it are nice too. You can see Google’s suggestions and Yahoo’s suggestions but I’ll summarize my understanding below.

JPG and PNG files handle almost everything quite well
JPG for photos, PNG for everything else (icons, backgrounds, etc)
PNG-8 does everything GIF can do except for animations
The last browser support hurdle for PNG is alpha channel transparency, which is not possible with GIF anyway

Minification

Things start to get a bit more involved at this stage. Even “advanced” image optimization is a fire-and-forget sort of process. You do it right the first time and reap the benefits forever after. Minification effectively adds a compile step to our workflow and a lot of us webbies aren’t used to that sort of thing.

But it’s not as difficult as it may sound. I keep a non-minified version of code around to edit and test with, then minify it before putting it into production. I started out using Yahoo’s command line compressor. Since Google Page Speed is part of my standard testing routine, it’s trivial to save the minified version straight from its report once I’m satisfied with the changes.

Visitors to www.volstate.edu are served minified JavaScript (40% smaller) and CSS (19% smaller).

CSS Sprites

You can find a ton of resources on this topic with a quick Google search, but I prefer the classics. This technique can get quite confusing, and I recommend taking the time to really understand it before implementing it. That being said, we have many online sprite tools to make the job easier. I used SpriteMe and found it useful enough. Just make sure you create a test page to run it on that makes use of every image you plan to sprite, and you may want to adjust the suggested sprites to minimize white space.

The downside is a certain loss of agility when changing or adding images to the site. If we want to add LinkedIn to our social media icons in the footer of our site, we’ll have to edit the Icons sprite rather than just uploading a new icon to the server and linking it in separately. But there are also benefits.

Fewer HTTP requests (reduced by about a third on our site)
Sprites are often no bigger than the combined file size of the individual files, sometimes even smaller
Commonly used images are effectively preloaded even if not used on the initial page visited

Be warned that sprites aren’t appropriate for everything. I tried to combine our PNG logo with the JPG RODP logo and the resulting sprite was 27k larger than the individual files. I think that was due to things like gradients and shadows in the RODP logo greatly increasing the number of colors required. I stuck with jpg for that.

Compression

Now we’re moving to server configuration. I’m lucky enough to have access to and admin rights on the server, so I could do this stuff myself. In another organization I might have to rely on the server admin group for this.

I used a combination of blogs and official documentation to set this up on our IIS server. It seems to be easier on Apache. Since I’ve never set it up on Apache myself I can’t vouch for the quality of the available documentation, but once again a quick Google search should turn up a wealth of information. On either platform, the important things to remember are:

Static, plain text content (HTML, CSS, JavaScript, etc.) should be heavily compressed and the resulting file cached server side to save on CPU cycles
Dynamic content (PHP, ASP, etc.) should be freshly compressed with each request — no caching — and not quite as heavily compressed as static content
Compressing binary files such as images, PDFs, Word documents, etc. costs CPU cycles on the server with little to no benefit — in some cases compressing such files can even make them larger

Like image optimization, this is something you set up right the first time and reap the benefits with no repeating costs. It’s worth it to buddy up with the server admins to get this done. Compression has netted us around 70% reduction in transferred file size for both static and dynamic content and our hardware isn’t remotely taxed even when serving up around 10,000 visits per day.

Browser & Proxy Caching

I took this step only after some heavy thought. This involves more server configuration and has a dramatic impact on workflow. Essentially we set up the server to tell the browser to not even bother asking for new copies of static content until a given date or until after X time has passed. This content is loaded from the local cache. The benefit is nearly instant page renders for repeat visitors. Of course, that means if the file has changed since it was saved in the local cache, the user won’t see that change.

On the Server

After snooping around with HTTP Live Headers I determined that our server was already sending last-modified information, although our plain text documents seem to always use the create date. Could be because I edit on a Mac and upload to a Windows server. Binary files like images are fine. Setting up content expiration on IIS was pretty easy. Be mindful that all binary files will be cached. The browser won’t even request the file for however long you specify (or until after whatever date you specify). For us that was a problem because we have a lot of PDF newsletters that are updated by simply saving over the old file on the server. So rather than enabling content expiration on the entire site I did the CSS, JavaScript, and image directories. That covers that vast majority of the content that will benefit the most from client side caching.

Workflow Changes

To get users to updated content, we have to change the file name. That means we also have to change the markup, CSS, and/or JavaScript that references these files. HTML pages won’t be cached, so in the case of markup we just have the one extra step. Of course, if a link is hard coded into a few thousand pages, that one extra step can get pretty massive. Server side includes help us avoid those kinds of problems. CSS and JavaScript files themselves will be cached. That complicates things. To return to a previous example, let’s say we add a new social media icon to our footer. Here’s the process to do something like that.

Edit sprite image to incorporate the new icon
Save the updated sprite with a new file name — I recommend version numbering
Edit un-minified CSS to reference the new image and adjust other styles as appropirate
Save CSS with a new file name
Test and debug cycle
Minify CSS
Update <link> in universal header include to point to updated CSS file

That’s a bit more complex than uploading the new icon and editing the CSS file as needed. If I miss something in the test and debug cycle, I can’t just make a quick edit and call it a day. I have to start the whole process over again because anyone who hit the site in the meantime will be stuck with a cached copy of those files for the next 6 months. My CSS and JavaScript files now have a change log in the comments at the top, complete with file dependencies. These sorts of workflow changes are stuff we should be doing anyway but getting serious about website performance forces us to treat web development a bit more like software engineering.

Benefits

After incorporating all these changes, first time page loads for first time visitors are about 2 seconds faster. Subsequent page loads, even for first time visitors, are about 1 second faster. That means in a year’s time our users will spend about 1 month less time waiting for our pages to load. Plus the gains that brings to the user experience (a bit harder to quantify). Plus the associated reduction in bandwidth costs (a question for our IT department). Plus possibly gaining favor with search engines.

Optimizing Site Performance

2010-06-14T09:26:00.014-05:00

Purpose & Goal

Right now I’m running some tests through webpagetest.org to establish baselines for site performance. This week I hope to generate some CSS sprites for our common images and set up gzip and xpiration headers on the server. Those are the last 3 big things pointed out by YSlow (actually I’m using Google Page Speed, but YSlow is cool too). Hopefully soon I'll be able to run a new set of tests to compare to the baselines I'm running now.

Sampling

I'm trying to get a representative sample of of pages to test. The home page gets the most traffic, followed by the Current Students page. Pride Online has the most popular departmental home page, but it's utilitarian and not representative of other pages. That moves us down to the home page for the library.

Those 3 pages realistically represent only about 1/6 of our total pages, but it’s the most heavily visited 1/6. I could add one more test case and increase my representativeness to the majority of our pages, but we’d see diminishing returns in terms of traffic (only about 16% of total site traffic). Also, the remaining 5/6 of pages are mostly text heavy and image lite. The benefits to those pages will come from optimizing the overall site template, which will be partially reflected in the 3 chosen test cases.

Thanks to Google Analytics for the ability to access that info easily.

The Site Performance widget in Google Webmaster Tools says we gained nearly half a second in our rendering time around June 6th. That half second was enough to move us up from around the 73rd percentile to the 82nd percentile. I have no idea why we saw this jump in overall site performance but I'm glad to have it. Maybe we can even hold onto it.

The Results Are (Mostly) In

The 3rd and final test is still running as I type this. I’ll link out to the results as they become available.

Step 1: CSS Sprites

I'm using SpriteMe and my own best judgement to create some CSS sprites for commonly used background images. I'm assuming SpriteMe already has something like Smush.it built in.

Results

Ok, maybe I need to smush my sprites after all. I've added about 60kb to each page load while freeing up about 15 http requests. Smush.it can’t find anything to optimize, but the image optimizer in YSlow can shave about 5k total from 2 of the sprites. SpriteMe makes some less than optimal choices, even occasionally introducing bugs. But like all software it has to make certain assumptions and those don’t always pan out. I need to improve upon the default sprites while I’m at it. With these newly optimized sprites, let’s look at the trade offs.

jQuery UI Theme Icons for Play Controls

The first sprite I made was actually already made for me thanks to the jQuery UI Theme Roller. I used the blue and red versions of the UI sprite to replace the play control icons under the featured stories on the home page. The bad news is that almost doubles raw file size. In exchange, I pre-load a lot of UI elements that we're not currently using anywhere else. But I plan to make more use of the jQuery UI in the future. So I think this is a worthwhile change.

	Baseline	With Sprites	Change
HTTP Requests	8	2	-6
Total Bytes	5,310	9,724	+4,414

Stripes Sprite

Both the header and the footer have background stripes that go all the way across the page. These were tiny, 1 pixel wide repeated images. But they were easy enough to combine.

	Baseline	With Sprites	Change
HTTP Requests	2	1	-1
Total Bytes	905	122	-783

Image & Badge Drop Shadows

Some day I’ll be able to pull this off with pure CSS but in the meantime I’m stuck with background images. The one for the standard large image gets used on most pages. The one for smaller images at the same aspect ratio and the badges gets used fairly often too. The other 2 don’t see as much use. Some pages don’t use any of these, but the majority of our high traffic pages do. The image produced by SpriteMe left extra white space to the right of the 16px icons screwing up the placement. I had to edit the sprite in Photoshop. After that Smush.it actually did a better job compressing the resulting image than YSlow.

	Baseline	With Sprites	Change
HTTP Requests	4	1	-3
Total Bytes	4,018	5,092	+1,074

Icons

The image produced by SpriteMe left extra white space to the right of the 16px icons screwing up the placement. I had to edit the sprite in Photoshop. After that Smush.it actually did a better job compressing the resulting image than YSlow.

	Baseline	With Sprites	Change
HTTP Requests	18	1	-17
Total Bytes	14,589	13,677	-912

Logos

I combined our logo with the RODP logo that’s featured on every page. But that only nets us 1 less HTTP request and as you’ll see below costs us significant bytes due to the differences between .jpg and .png image formats.

	Baseline	With Sprites	Change
HTTP Requests	2	1	-1
Total Bytes	12,270	39,876	+27,606

In a Nutshell

In a best case, a single page that references all these images (which is not terribly realistic), we’ve traded 28 fewer HTTP requests for 31,399 more bytes. That’s about 22 additional HTTP packets. Based on our test cases we’re realistically saving 12 – 15 HTTP requests per page. I know we’ll see a big pay off when we start effectively caching and gzipping this stuff, but I have to admit I’m disappointed with this first round of results.

Step 1.1: Learning from Mistakes

Ok, now I understand why the RODP logo was initially flagged as not to be included in a sprite due to being a jpg. I need to roll back the Logos sprite. I also need to alter the way we’re doing the random headers. We’ve been using something based on Dan Benjamin’s method from A List Apart but in terms of site performance it’s one of our slowest resources.

Results

We’re starting to see some minor pay off on the repeat viewing. Start render time on the current students page is now under 1 second. That’s pretty awesome, but we’ve still got work to do.

Step 2: GZip

I followed this guide as well as some official documentation from Microsoft. This online gzip test says we’re still not using compression but my web developer tool bar begs to differ.

Results

I just alphabetized the properties in each CSS declaration, primarily as a way to clean up my CSS and make it easier to manage. But Google’s Page Speed documentation points out the possibility of alphabetized CSS seeing more efficient gzip compression. Checking the alphabetized, minified, and gzipped version against the just minified and gzipped version with the Web Developer Toolbar (Information —> View Document Size) shows 8k either way. It doesn’t break it down into units any smaller than that. So maybe it saved me a few bytes, but not a kilobyte. So if we saw any gzip efficiency change from alphabetizing the CSS it’s less than 12.5%. If we assume rounding, then it’s less than 6.25%.

Step 3: Browser Cache

This one will be labor intensive. Before I put in the hours to set expiration dates and last modified dates for our various static resources I want to make sure they are properly optimized. We’ve covered CSS and JavaScript, but all the images that didn’t find their way into a sprite will need to be tested. I started this entry on Monday morning. It is now 1:30 on Wednesday. I this step will probably keep me busy the rest of today and a good chunk of tomorrow.

Ok, the clean up and optimization process has saved me about 10,000,000 bytes and 400 files. Gzip has been running for a full day and server’s resources don’t seem to be at all taxed. So far so good. Time to dive into Leverage Browser Caching.

I have a problem in that IIS reports the wrong last-modified date for certain files. Images seem fine. PHP files and other plain text files are not. Maybe I’m missing something in Dreamweaver. Our server also sends E-Tag hashes, which are newer than and in theory superior to last-modified headers. But they are also redundant together. E-Tags are apparently frowned upon when using multiple servers, such as a Content Delivery Network. All our content comes from just the one server so I don’t think it’s an issue with us. At worst we’s sending a single redundant HTTP response header.

So half the browser caching equation was essentially taken care of for us by IIS’s default settings. The other end of that equation is content expiration. I did not like that IIS just gave me a single check box to turn content expiration on. I wanted to be able to set it up by file extension. No such luck. I turned it on and did some testing with the Live HTTP Headers extension for Firefox. I was able to confirm that our php pages were not caching. Which is good. The last thing I want is someone to spend the next 6 months with an unchanging copy of our home page stuck in their browser cache. CSS and JavaScript files were caching, along with images. I already use version numbering on CSS, JavaScript, and image sprites. For the most part other images will have specific names anyway, so that’s good. Then I tested PDF files and did not like what I found.

I downloaded the PDF of our campus map and saw that the response headers told the browser to cache it for the next 6 months as well. We may need to update the map in the next 6 months. Maybe an office location changes to a new building or something. Worse still, many of our PDFs are newsletters. Monthly newsletters. Some offices have an archive listing years’ worth of issues while others just link to the most recent issue. In the latter case, I just save the new issue over the old issue on the server. With browsers caching these files, that wouldn’t work anymore. I’d have to give each issue a distinct name and adjust the HTML links to match, greatly complicating that process.

I rolled back those changes and tried setting up expiration on a directory by directory basis. So far I’ve only done /images/, /css/, and /js/. That covers the vast majority of our static files. Occasionally a directory off of root will have its own images directory. For now I’m leaving those alone. The handful of child directories inside /images/ also ~~apparently did not~~ did inherit the expiration settings of their parent folder.

The downside to all this experimenting is I have to bounce the IIS service for changes to take effect. That only takes about 8 seconds by my count, but I’t to think of someone submitting their final form for online orientation during that tiny window.

Page Speed still says we fail the browser cache check, but that’s due to the FEMA widget currently on our site. All resources being served from volstate.edu pass. So let’s run another batch of tests.

Results

Conclusion

This has been less a blog entry and more 4 days of notes to myself. Tomorrow I will try to recap the high points and present my data analysis.

Why I Became a Web Geek

2010-05-27T11:02:00.003-05:00

Amber asked for web dev origin stories. Here’s mine.

In the late 1940s, in the parts of the world that mattered, the end of WWII and the atomic bomb had brought the philosophical shift we now label post-modernism into the cultural mainstream. But in rural Tennessee, just down the road from the house I grew up in, my grandmother was being loaded onto a wagon to make the 5-mile trip “in to town.” My dad was a breech birth. Home birth had taken a turn for the worse and they needed to get a doctor involved. 40 years later my dad bought about 42 acres of farm land he occasionally plows with a team of mules just for the fun of it. This is just a hobby. He earned his living by dismantling nuclear weapons in the same facility that enriched the uranium for Fat Man and Little Boy.

This is the culture that produced me. About 5 years after I was born, satellite dishes cropped up like kudzu and started piping in the culture of the greater global village. It was amazing to watch the communication/information explosion transform this area.

For example, I found the CBC fascinating. I didn’t understand all the politics involved, but I knew they had a station that broadcast in French because that was the primary language in Quebec and that they had a station out of the North West Territories that featured a lot of content relevant to the First Peoples population there. I didn’t really see that same kind of diversity in American media. We had a lot of forced tolerance, but as we tried to blur lines based on gender and race we drew a greater distinction along class lines. The prevailing message was small towns and small people didn’t matter.

That could be do in part to the overall wealth worship fetish America had in the 80s. Compare Bill Cosby’s Dr. Cliff Huxtable to Fat Albert and the Cosby Kids from the decade before. I could (and still do) identify with the Cosby Kids despite geographic and racial boundaries. The Huxtable kids lived in a different world and that had very little to do with race. The Cosby Kids were a rare example of the not-rich and not-famous among pop culture characters; and closer to my day to day reality than Larry, Darryl and Darryl.

Getting rural areas and poor areas connected to the mass media grid gave these marginalized populations a window to the world. Getting connected to the internet would give us a voice. I wanted to be part of that.

Also, growing up on a “farm” affected my work ethic. I don’t miss manual labor under the blazing Tennessee sun. It was 80 degrees at 8 am today, and it’s not even truly summer yet. I feel most fulfilled if I can point to something at the end of the day and tell myself “I made that. That didn’t exist this morning and now it does.” Luckily I discovered that digital artifacts scratch that psychological itch just as effectively as a freshly planted row of crops. And with significantly less sun burn. If only typing code burned calories as effectively.

On top of that, I’ve been extremely lucky to be in the right place at the right time both educationally and professionally. Everything fell into place and I feel like I’ve found the perfect fit to do what I am.

My dad’s birth story sounds like a scene from a John Ford movie and I earn a living building communication systems out of ASCII characters. That’s a huge jump in just 2 generations. I have 2 kids of my own. I can’t imagine what their adult lives will be like.

Why I Stay Busy

2010-05-19T15:24:00.002-05:00

On Friday @kdc retweeted something from @eduguru that sent me to @educheckup where I watched several videos, including the one on Miami-Dade where he mentions one of the few things they did right was pausing the story rotation when you click on a particular number to view a particular story.

Hmm… Do we do that?

No. Crap!

Ok. We can fix this. Our front page story rotation is based on the jQuery Cycle plugin from @malsup. Let’s start there.

New version is out as of last month. Might as well update. Should probably update my version of jQuery while I’m at it. We were still running 1.3. Update both scripts, re-minify our local file (plug in collection and custom code), and make sure nothing breaks.

Background color change on pager links to indicate currently active slide no longer works. Fire up FireBug. Eventually figure out activeSlide class is being applied to the li tags rather than the a tags inside the list items. For our implementation, that means the buttons were being flagged as active rather than the actual pager links. Created a custom function for updateActivePagerLink and all was well again.

Pshew! We’re in the clear. Checking the docs for Cycle. Source code reveals some new stuff that hasn't made its way onto the web documentation yet. Luckily Mike does a good job of commenting his code. The functionality I need isn’t built in, but a couple of options get close, such as pause and pauseOnPagerHover. I didn’t have either of those enabled, and pause has been built-in forever. Learning about one usability gotcha lead me to discover another.

At this point the easy, built in stuff is fixed. I turn my attention back to the initial issue. Following the conventions set up by 2 existing options within the plugin (pauseOnPagerHover and onPagerEvent) I create a new option called pauseOnPagerEvent and insert 2 new lines of code: an if statement to check the state of the new option and code lifted from pauseOnPagerHover to actually trigger the pause. Amazingly, this works on the first try.

I’m still not happy with that solution because I think a more elegant way to do it would involve onPagerEvent. I just spent another hour trying to figure out how to write my own function for that callback and failed yet again.

Nashlantis

2010-05-02T12:26:00.003-05:00

13 inches of rain so far with another 4 or 5 on the way.

The first photo here is me mowing our lawn a couple of summers ago. I'm a tiny little dot way back there, but you can see me if you squint. Take note of the big maple tree in the left of that image, the square of concrete to the right, and the row of 2 chestnut trees further back from that.

The 2nd photo is taken from right next to the big maple tree. The 3rd photo was taken from the concrete pad. Norma was ankle deep taking that photo, even with 5 inches of concrete between her and the ground. I'm standing about 3 paces beyond the edge of the concrete. You can see how deep it is out there.

The water has actually receded since we took those photos, about a foot by depth, several yards by horizontal progress. The concrete is no longer covered, for example. But there's another storm coming and the big one that dumped all that on top of us is technically still in the watershed the feeds into the lake near here. I'm hoping the worst is past us but I'm not going to count on that.

Trusting Second Guessing My Gut

2010-04-22T12:21:00.006-05:00

Since December I've been blogging on the new multi-user WordPress server at work, but it's currently down. Once we get it back I need to figure out how to automate cross posting. This blog space belongs to me, Derek Pennycuff. The blog on the WordPress server technically belongs to the webmaster position at Vol State. If/When I leave Vol State this will still be mine. The other will not. Echos of the knowledge management course.

The Web as She Is Used

Anyway, right now I'm struggling with some stuff that my gut tells me is right but I have no evidence to support or refute it. I'll try to lay it out here and cite some specific examples.

Email Links

The default behavior of a mailto link is to launch your default email client. Here at work that means Outlook. On a default install of Windows it usually means Outlook Express. Our audience does not make heavy use of email. Most of them probably don't have a default email client. What email they use is probably web based. Some browsers let us set our web based email client of choice as the default, but how many users actually bother to do that? Personally, I tend to use Firefox's "copy email address" feature from the contextual menu when I right click a mailto link. But I've spent enough time working tech support to know that most people don't know much about advanced features such as right click menus.

So I prefer to use the actual email address as the link text for mailto links. In addition to all of the above, it's a nice visual cue to differentiate a mailto link from a standard hyperlink.

Telephone Numbers

Making that change introduced a new problem. The easiest way for me to make this change is to add a column at the end of the table and move the email addresses there. But that puts the telephone numbers in the middle of the table. A mailto link is designed to be used online. A telephone number is non-interactive.

(Although I confirmed over the weekend that a Nexus One phone does recognize a well formed phone number on a web page and makes it behave a bit like a mailto link. Among our users that's an edge case and I have no confirmation of how other mobile devices treat phone numbers. [Several people have pointed out this is de facto standard behavior on smart phones.])

My gut tells me most people will either dial the number from the screen or write it down. Either will involve a bit of eye darting on and off the screen. Have you ever had to look away from one specific table cell and then locate it again quickly when you look back? Working in Excel can cause this just as much as tabular data on a website. It's not easy. I think putting the phone number at the end of the table helps with this a bit. This brings us to a 3rd iteration of a staff listing page.

Aesthetics vs. Usability

The list above shows a progression of what my gut tells me is increasing usability. However, my eye disagrees. Aesthetically I see each version as a step down from the previous. And without any real usability data I'm at a loss as to how to resolve this cognitive dissonance. I'm dealing with opinion either way. And since so much of the usability issue hinges on action taken off-line, picking up a phone and making a call, I can't think of a way to A/B test it.

I need to standardize these pages. Inconsistency kills both the usability and the aesthetics. All I've got to go by is my own conflicting opinions, so if you've got any ideas please share them.

Update

A strong preference for option #2 is already apparent among the people who have chimed in on this issue. Apparently I'm on to something with the email address as link text for mailto links but I'm probably over thinking the telephone number thing. I'm going to continue to mull this over mentally so feel free to continue to comment or email me if you're reading this now and have anything to share. But in the interest of productivity I'm going to make option #2 the standard format and get to work. :)

Badges, Banners, and Calls to Action

2009-12-16T13:24:00.002-06:00

The Problem

The folks in Admissions are getting phone calls from people who can’t find a link to the online application.

Probable Causes

Users can’t find content “below the fold”
General placement of call to action does not align with relative importance
Banner blindness

Data

When I have a problem, I like to ~~kill it with fire~~ attack it with data; Google Analytics to the rescue! As of today, we’ve got just over 6 weeks worth of data since launch. Here’s what the numbers tell us about this page:

How They Got There	How Many Times They Got There	Percentage of Total Traffic for This Page
Future Students Landing Page text link in content	3,314	65.2%
Home Page badge	518	10.2%
Admissions Home Page	299	5.9%
Future Students Landing Page badge	199	3.9%
External (usually Google or another search)	158	3.1%
A to Z Index	120	2.4%
Total	5,081	100.0%

That’s data pulled together from several different reports as interpreted by me. There could be some rounding on Google’s part and some fudging on mine. But the general trend we see is reliable.

What Does That Mean?

By far, the most effective way we’re sending people to this content is the link about 1/3 of the way down the Future Students landing page that clearly states “The first step is to fill out an application.” In fact, 9.66% of all the people who see this page follow that link. It’s the 3rd most popular link on that page after Programs of Study and the Current Students landing page.

Taken together, the 2 badges are the 2nd biggest traffic producer, but we have a big drop off between 65% of traffic at #1 and 14% combined for #2 and #4.

After that we get a noticeable long tail effect, but that's normal for this type of data.

Applying the Data to Possible Causes

Content Below the Fold

The problem does not seem to have anything to do with scrolling. A wealth of previous research shows that content “below the fold” doesn’t really suffer for it. But it’s nice to see confirmation of this in our own data. The most effective link to this page is only visible after a bit of scrolling even on my rather large monitor. Comparing the people who are getting to the page to those who are not getting there could be apples and oranges, right? But we know about the 2nd group because they are calling us. Both the main telephone number and the direct number to the Admissions Office require a bit of scrolling to find. These people are obviously finding that information, so scrolling isn’t presenting a significant hurdle to finding information among this population.

Sub-Optimal Placement on the Page

We could still have a misalignment of placement vs. purpose even if scrolling doesn’t enter into the equation. The purpose of the badges is to feature timely content. The application process should probably be permanently featured, but a permanent badge runs askew of the core purpose of being timely and changing often. The link to the schedule for next semester makes for an excellent badge because that content is in high demand right now but in a couple of months we should be able to safely replace it with something more timely, perhaps a badge for the Academic Calendar so that people can quickly and easily find the dates for Spring Break.

So what are some other ways we can permanently incorporate “Apply Now” into the overall site template?

The primary navigation is all user role based, so adding it there wouldn't make sense. Putting it below the primary navigation would make it look like secondary navigation. At one point the site template had a “default” secondary navigation for those pages that didn’t have such a menu. It muddied the waters as to the purpose of that area of the page and it was an early cut in the design process. The area at the top, with links for the People Finder and A – Z Index, could work, but it’s already full. We’d need to delete a link in order to make room for it and I’m not comfortable dropping anything currently there.

We could add it to the Help Center under the Registration heading. Right now everything in that category applies to students who are already admitted, but I doubt most incoming students have a clear understanding of that distinction. Ask the average senior at Gallatin High School what the difference is between applying for admissions to Vol State and registering for classes at Vol State and they’ll probably look at you like you’ve got 3 heads. I would have at 17.

We could also list it in the Help Center under the Students heading. Either of those options fail to put the link visible on the screen by default, but it is accessible from (almost) any page. The footer is also an option, although that would take a bit more work on my part. We’ve got space to spare down there, but I want each area to have a clearly defined purpose.

Banner Blindness

But I think a bigger issue has been brought to light here. I’ve just gone through the navigation summary for all 7 pages that feature badges. None of the badges appear in the list of top 10 links for those pages. That may not be a bad thing if it means people are finding what they are looking for in the actual content. But it could also indicate a bad case of banner blindness.

Or Is It?

But approaching it from the other side, 92% of the traffic coming into the Schedule of Classes page are getting there through one of the various badges. That 92% translates into about 1,225 total page views, which is so tiny in comparison to the traffic coming through the landing pages that it may not make a blip on the radar. Learning Help Centers gets about 75% of its traffic from badges. SEEK gets about 94% of its traffic from the badges. But again page views measured in the hundreds are so small in comparison to the total traffic pumping through the various landing pages it’s probably easy for those numbers to fall through the cracks.

Overall badges seem to channel a significant percentage of traffic for the sorts of things people would not otherwise be aware of, such as SEEK and the Learning Help Centers. They also seem to work well for new site content such as the dedicated page for class schedule information. Both SEEK and the Learning Help Centers are fairly recent additions to the site as well. Badges seem to preform less well for older content with high awareness and lots of paths of entry. But even in the case of the “Apply Now!” badge, 14% of total incoming traffic may not sound like a significant boost, but it still translates into 700 visits. That’s nothing to sneeze at.

Conclusions

Lots of people are eventually getting to the application page, but that doesn’t change the fact that some are not and this is driving a noticeable number of phone calls to the Admissions Office. Some of the people who are eventually getting there may not be getting their easily. Maybe 10% of them were 30 seconds away from calling us too. And for every person who calls, maybe 3 or 4 other people just give up without even calling us. We really have no way of knowing. So I’m not pulling out these numbers as a means to dismiss the problem as it was reported to me. I aim to use the data available to understand the scope and context of the problem in order to find effective solutions.

We can increase our link coverage by adding it to a few of the persistent template elements:

Help Center —> Registration
Quick Links —> Students
Footer, not sure exactly where yet

We can tag and measure the performance of these links over time to gauge their effectiveness. But ultimately more data is needed. And it’s the sort of data Google Analytics can’t really give us.

In the near future, I plan to do some usability testing with potential students. Locating the online application will be one of the primary tasks for that research. The results may help us arrive at a long term solution.

First month with the new site

2009-12-03T19:04:00.001-06:00

Yesterday was December 2nd. We launched the new site on November 2nd. So as of today, I have one solid month of data on the new site available in Google Analytics. Let’s take a look at how we’re doing compared to November 3rd through December 3rd of last year. The dates don’t match up exactly so that we start on a Monday and end on a Tuesday with both date ranges.

Visits up 27.53%
Unique Visitors up 89.16%
Page views up 38.51%
Average page views up 8.61%
Average time on site up 22.44%
Bounce rate down 46.09%
Percentage of new visits up 90.69%

These are all positive changes. Bounce rate is a bad thing, so seeing that number go down is good. We’re reaching more people, who are looking at more pages and spending longer stretches of time before leaving. But I’m not ready to say all this is due to the redesign. After all, we’ve seen a significant enrollment increase this semester, so all these numbers should be improved over a year ago.

So let’s also compare the first month with the new site to a similar date range the month previous; 11/02/2009 through 12/02/2009 compared to 9/28/2009 through 10/28/2009, again starting on a Monday and ending on a Tuesday.

Visits up 0.22%
Unique Visitors up 15.27%
Page views up 30.01%
Average page views up 29.72%
Average time on site up 41.74%
Bounce rate down 51.39%
Percentage of new visits up 35.89%

This comparison is less straight forward. The new site has Thanksgiving break in this data set where the old site has no breaks, which would seem to put the new site at a disadvantage. But the old site’s figures come before registration opened up for the Spring, so in other ways it’s at a disadvantage. In other words, don’t read too much into this comparison.

It does help make it clear that the sorts of metrics tied to raw traffic have little to do with the redesign. The percentage change in visits is virtually zero. But metrics that measure engagement, such as time on site and bounce rate, actually show more improvement against a month ago than they do against a year ago. This probably helps show the natural boost we get thanks to registration opening up this time of year. When we’re talking about aggregate data it’s important to keep in mind all the variables that have nothing to do with the design of the site.

I’m more comfortable attributing large shifts in metrics for specific sections of site content that have been significantly overhauled as part of the redesign. For example, the list of our programs of study saw an increase in visits of 502.65% and an increase in unique visitors of 290.45% compared to figures for October of this year. Compared to a year ago, the difference is 548.75% increase in visits, 333.29% increase in unique visitors. One of my primary goals with the redesign was to increase the visibility of this content because I think it’s an important part of the “shopping” process. I think we can safely call that a success.

Don't mind me

2009-11-01T17:01:00.004-06:00

I just need some links from a non Vol State domain to test the custom 404 page.

The Culture of Technological Abundance

2009-07-08T10:53:00.004-05:00

In one of my computer science courses the instructor asked if computing resources have reached the point where efficiency can safely be ignored. I responded with a resounding “No!” but some of the younger pups in the class disagreed. I'm begging to think I was showing my age, at least within certain contexts.

Something in my brain makes me love the idea of optimization. I actually police myself away from it, but I still find myself spending hours upon hours thinking about “better ways” to do things. I was recently debating with myself about storing telephone numbers in a database as integers vs. strings. I found the integer approach most appealing. It just felt right. But I quickly figured out that would require formatting the data to be human readable every time I needed to display it as well as a bit of trickery on the front end to get the form input (which would be in a human readable format) into a basic int structure. That consumes a lot of my time, and possibly a lot of time for the users who eventually put the collected data to use. In exchange, I save a little bit of hard drive space.

The new server has 500 gigs of RAIDed space. A formatted telephone number string, such as “(888) 555 - 1234” takes up 16 characters. That's a 17 byte VARCHAR. Even less if we default to something shorter for unrequired fields left blank by the user. But for the sake of argument let’s go with VARCHAR. Storing “8885551234” as a BIGINT requires 8 bytes, saving us 9 bytes. That’s 9 out of over 500 billion available. We’ll end up with a few hundred form fields that will see a few hundred hits per year. For the sake of argument let’s say 400 squared, or 160,000. If my attempts at optimization save an average of 9 bytes per field per record, we'll run out of space after about 350,000 years. I'm not sure what the clock cycles are involved in fetching or even comparing a 16 character string vs a 10 digit number, but probably even more negligible than the storage space. Obviously, server resources are abundant when compared to my time and the time of my users.

I’m about half way done building the forms on my to-do list and I just convinced myself to change the way I handle things. Oy vey.

If data is collected for the purpose of being later presented to humans, I will store it as a string, optimization be damned. I’ll use numeric types for data that is collected to be crunched, which in all honesty if rare right now. In situations where it could conceivably be used for both, such as dates, I’m probably better off storing both versions and fetching (or sorting by) whichever is most appropriate rather than running a timestamp through the date() function as needed or converting user input into the MySQL DATE format (which is both human readable and easily sortable).

2 years into this redesign project and I’m still not done. In hindsight, the biggest setback has been my own perfectionism. I have a hand crafted attitude towards my work. I take great pride in it. But at what cost? It feels great when I see something like Smashing Magazine’s list of current best practices in form validation and I realize I’m already doing the majority of those things simply because they “feel right”. But I spent all day yesterday working on a single form, stayed 45 minutes late, and still didn’t get it done. That felt anything but great. What’s the trade off? Where do I draw the line?

I’m even doing it now. I’m encoding my apostrophes and quote marks. Can anyone out there notice the difference between “this” and "this"? It's 12 extra key strokes for me to use the "proper" encoded characters. For all I know, Blogger auto-converts them for me anyway. (*EDIT* No, it doesn’t.) I've just developed the habit over the years of hand coding HTML. 12 keystrokes per quote pairs times 5 quotes per page times 3,000 pages at 400 characters per minute is 7.5 hours. That's a full workday over the past 2 years. Is that too high a price to pay for typographic correctness?

What's the cost of XHTML validation? Of ADA compliance? That last one could end up saving us a mint if lawsuits start getting tossed around. I know where my personal comfort level lies on most of these issues and I'm willing to re-evaluate in light of new information and fresh perspectives. As the only web guy around here I guess I get to make those judgement calls for the institution. But in a freelance situation my time is the client's money, which is definitely a scarce resource. A 0.2% markup cost for things like typographic correctness may not sit well with some clients, but there's plenty of designers out there who also don't care. Maybe they can service those clients.

New York Post op ed says degrees aren't worth it

2009-06-30T09:37:00.002-05:00

DON'T GET THAT COLLEGE DEGREE! INTELLECTUALLY AND FINANCIALLY, STUDIES SHOW IT'S NOT WORTH IT By JACK HOUGH

Not the most well reasoned or argued article I’ve ever read (I know it’s just the Post, but the blogs I read are typically better written than this) and I don’t agree with his prescribed fix, but he hits on 2 big issues I think are vital to the future of higher ed.

We're too slow.
We have no accountability.

We’re too slow.

Someone has to decide to go to college, then apply for admissions, then apply for financial aid (which may spoil the deal if not enough is available), then wait around for registration to open, then pray the classes they want/need get enough people to “make” but not enough people to fill up, then wait around for classes to start. It’s a lot of hoops for the students to jump through that have very little to do with the core value we offer them. Some of it is necessary, even beneficial, but the benefit isn't immediately apparent to the “end user”. I think in the next 10 years we'll be able to greatly streamline this process and make it much more student centered. If we don't, someone else will, and we may find ourselves obsolete.

Hough balances this with the abundance of cheap or even free quality educational resources available thanks to stuff like Open CourseWare and iTunes U. “Today's student who decides to learn at 1 a.m. should be doing it by 1:30. A process that makes him wait 18 months is not an education system. It's a barrier to education.” I don’t think it’s as bad as an 18 month wait, especially not here (we're a 2 year school were students can literally walk in the day before classes start and leave with a schedule for the coming semester, which I think is awesome), but I agree with the spirit of what he’s saying.

We have no accountability.

His focus is more on the ivy leagues, who seem to play a game of recruiting the brightest students who leave with a degree, still bright, but not much more so. Hough compares Harvard to a hospital who turns away the least healthy 92% of its patients and then takes credit for the health and longevity of the patients it treats. A degree is supposed to certify a graduate has met a certain standard of learning and competency, but everyone just has to take our word for it (“our” meaning the higher ed industry as a whole). Grade inflation and downright degree milling are eroding employers' faith in our authority to make such claims about our graduates.

He calls for government regulation enforced by standardized testing. I think that's horribly short sighted. But maybe we need something like the Bureau of Labor Statistics but for the long term impact of education. If longitudinal data was collected and made publically available in a standardized format, we’d have no choice but to get some accountability. Even with newspapers failing, there will always be someone out there willing to take us to task over statistics.

The hypothetical example Hough uses sets the groundwork for the type of data that could be collected. Median income 1 year after graduation, 5 years after, 10, 25, etc. Median education related debt at graduation with interest rates. We'd have to correct for outside influences such as social-economic status. Maybe comparing graduate incomes to the incomes of their own parents? Someone better at statistics than me could tackle that problem. Schools shouldn't be punished simply for servicing a poor area (although we all now they already are).

Other fuzzy areas would be attempt to collect data on productivity and employer satisfaction. Standardized testing could play a role in measuring things like value added. If there was a way to compare GRE scores to ACT/SAT scores, or maybe create a new test that's taken on the way in and on the way out to establish how much was actually learned. I think a large percentage of what is learned in a college or university experience would be hard to test for, so the results would have to be tampered with other data.

There's also the type of research that goes into works such as Colleges That Change Lives. That has very little to do with economic issues such as debt and income and much more to do with civic engagement and overall satisfaction with ones own life. Hough would probably disagree with me there, since colleges that change lives tend to spend a lot of time on “frivolous” but engaging topics like gender studies.

I also agree with Hough that we have an over reliance on the degree model. But Hough seems ready to completely abandon the degree model. I think it works quite well in some areas, but not as well in others. I think we're ready to see the rise of several different models, each suiting certain educational goals better than others. There will of course be a transitional period where square pegs are pounded into new round holes, but eventually each model will focus on its own strengths and attract students with the proper kind of attitudes and learning styles. I also think this will help us move away from viewing graduation as a culminating event and seek out models for life long learning.

That may be horribly idealistic of me, but I also realize this won't happen over night. My kids will probably be the square pegs being pounded into round holes. And by the time my grandkids are ready for college, there will be a fresh crop of issues to address. I expect evolution and improvement, not utopia.

.Edu websites and brand perception

2009-06-04T12:11:00.003-05:00

I’ve been a member of a site called EduStyle since right after I took this job. It’s a gallery site for higher ed redesigns. I’ve been consistently blown away by the innovations, both visually and technologically, coming out of small, private colleges and universities compared to the standard 4-years.

In regards to technology, Douglas Adams said:

Everything that's already in the world when you're born is just normal;
anything that gets invented between then and before you turn thirty is incredibly exciting and creative and with any luck you can make a career out of it;
anything that gets invented after you're thirty is against the natural order of things and the beginning of the end of civilization as we know it until it's been around for about ten years when it gradually turns out to be alright really.

The modern web was “born” in 1993. We can go with the release of Mosaic and say April 22, in which case the web is now old enough to drive. Or we can move a little later in the year with the Eternal September in which case the web is still stuck with a learner’s permit. Either way, it’s old enough to be shopping around online and planning for its academic future. Our personified web will be a traditional starting freshman come Fall 2011.

A .edu website communicates a lot about the brand of the institution. If we're horribly behind the times in technology that our primary recruiting demographic considers part of the natural order of things, we will suffer for it. I’ve observed a gap developing over the past couple of years, and I admit that our site is on the wrong end of that gap. But I'm trying to catch up.

Compare Yale and Columbia to Denver Seminary and Biola Undergraduate Admissions. I’m picking on the Ivy League and perhaps a bit unfairly. Cornell’s design is good enough that it’s inspired many other redesigns, including our own. But it’s possible that the University of Southern California inspired Cornell.

The reason I single out the Ivy Leagues is because today’s potential students have an innate, subconscious ability to judge us based on our web presence even if they lack the prior knowledge to understand things like published research and accreditation. Does anyone go to the University of Phoenix because of the great research they produce? I highly doubt it. But their website feels more up to date than MIT. We can delude ourselves and pretend that somehow our students are too smart to fall for such marketing gimmicks. But it ain’t just gimmicks to them.

I think it’s easy for us to forget what it’s like to be a teenager shopping for a school. We’ve turned academics into a career, so we forget how alien a world it can be to an outsiders. And let’s be honest, the vast majority of our potential students are outsiders.

I’ve been at the top of my class throughout my entire academic career. I was recommended for West Point and was encouraged to apply to lots of prestigious schools. I didn’t pursue those options because I wanted to stay in Tennessee and I didn’t think I could afford Vandy. I don’t regret those decisions, but I admit I may have chosen differently had I been equipped with a better understanding of financial aid. I didn’t know who SACS was until my alma mater went through their own accreditation review while I was a student. I still don’t know the exact different between a Bachelor of Arts and a Bachelor of Science. If I ever need to list my degrees, I’ve gotta go look that up. I didn’t know my degree from Pellisiippi was an Associates of Applied Science until I literally had the piece of paper in my hand. All I knew was that it was a degree that could advance my chosen career path. I had no reason to care about the academic nomenclature. I doubt today’s students are much different.

Managing and protecting our online brand perception is a big part of my job. As much as I loathe jargon, I can't really think of a better way to say it. I’m lucky to be working on a campus that understands that concept (if not in all the gory technical detail) in spite of the rarity of an administrator who was under 30 in 1993. :)

The Proper Care and Feeding of VolState.edu

2009-04-22T20:34:00.003-05:00

Most literature on user centered design (UCD) focuses on redesigning existing products or creating wholly new products. No literature I’ve found focuses on applying these ideas to established, mature products in the maintenance stage of their lifecycles. However, with an eye towards abstraction, I think we should be able to take the high-level concepts and apply them to any stage of a product’s lifecycle. My goal with this document is to establish some guidelines for making iterative improvements to VolState.edu using my current understanding of UCD practices, without having to shift into a full redesign.

There is a split among experts in the field of usability. Some strive for true science. Tests use many participants, drawn from the target audience, with tight statistical fit. Conditions are controlled and kept close to real-world environments. Participants use high fidelity prototypes that are functionally complete, or very nearly so. The data such tests produce is significant and reliable. But these tests also cost into the tens or even hundreds of thousands of dollars. Attempts have been made to codify formal systems for web site development, but these systems do little to address the practical concerns of time and money. (De Troyer & Leune, 1998)

In 1989, Jacob Nielsen introduced the concept of discount usability in a paper titled “Usability engineering at a discount”. The gist of the argument, to borrow a phrase from Steve Krug is “Testing with 1 user is 100% better than testing none.” Many people, Nielsen included, have tried to show statistically where the sweet spot for return on investment lies in conducting usability studies. Many other people, such as Jared Spool, have counter argued against such reasoning. Each side tends to rely on math supplemented with anecdotal evidence. This is all well and good as a distraction for academics. Personally, I’m much more interested in producing a better product for our users than in the math and science underlying the methodology.

I’m following Krug’s ideas most closely. He goes even beyond Nielsen’s discount usability into what he calls “lost our lease, going out of business sale usability testing”. Such testing can have value without the need for strict scientific validity. He’s even gone so far as to call himself a usability testing evangelist, actively encouraging people to integrate it into their workflow. In his book, Don’t Make Me Think, he addresses the top 5 excuses for not performing usability testing.

No time – Keep testing as small a deal as possible and you can fit it into one morning a month. The data produced will actually save time by pointing out obvious flaws in a way that sidesteps most possible internal politics and by catching these problems as early as possible, when they are most easily fixed.
No money – Testing can be performed for as little as $50-$100 per session. While that’s not free, it’s far from the $50,000+ price tag of big ticket professional testing. In terms of ROI, it’s one of the wisest investments you can make.
No expertise – Experts will be better at it, but virtually any human being of reasonable intelligence and patience can conduct basic testing that will produce valuable results.
No usability lab – You don’t need one. Since Krug first wrote his book, things have actually gotten even easier with software such as Silverback.
Can’t interpret results – You don’t have to use SPSS to mine for valuable data. The biggest problems will be the most obvious. Even if you only identify and fix the most obvious 3 problems, that’s 3 fewer problems in the final product.

Obviously if my goal were to get published, even as a case study, I would worry a bit more about scientific validity than Krug stresses. Although even among the academic literature some examples of successful case studies can be found where no attempt was made in recruiting beyond very broad user categories. (Bordac & Rainwater, 2008) But my goal in this document is to create a framework for usability testing that is simple and affordable enough to be actionable at Vol State. Ideally, it should be straightforward enough to persist beyond my tenure in this position. For those goals, Krug seems a perfect fit.

Involving Users Through the Development Process

Step 1: Identify a Problem or Unmet Need

Occasionally, users may volunteer information related to areas where improvements are possible or identify desired features not currently available. Anything we can do to encourage and facilitate this can only help.

Direct observation may also provide vital insight. Students may be observed unobtrusively in computer labs or in the library. Employees could be observed, with their permission, within their everyday work environment. Surveys and focus groups may also assist in identifying unmet needs at a high level of abstraction.

Problems exist within the context of users and goals. A proper definition of a problem should identify these contexts. Some possible examples:

Students wish they could perform a task online that currently requires a visit to an office on campus
Parents want easier access to a certain type of data
Faculty need a way to share educational resources
Sports fans need a better way of viewing or sorting our events listings

Understanding these contexts is vital to the success of a possible solution. If parents express a desire for easier access to student records, that may very well violate FERPA, in which case that problem is not actionable. Faculty looking for ways to share educational resources may be best served by training on Delicious. Even though we won’t stress a strict statistical fit with our test participants, understanding user groups in broad categories such as this allows for quick and easy targeting which should add value to the data collected via future testing.

Step 2: Establish Benchmark (Where Applicable)

Persistent, longitudinal data collected via survey could also apply at this step. Google Analytics is another powerful tool we have at our disposal. The type of benchmarking would depend greatly on the type of problem. For example, problems that require adding new pages to the site would have no data available in Google Analytics against which to establish benchmarking. But if those pages address an unmet need revealed via surveys that fail to turn up as an unmet need in a future survey, that could serve as a benchmark. (Comeaux, 2008) While I hope to incorporate this step as often as possible, I don’t want it to serve as justification for abandoning a project due to a lack of a method of establishing a proper benchmark.

Step 3: Wireframe Possible Solutions

Brainstorm for possible solutions to the problem. Produce low-fi wireframes such as semi-functional HTML prototypes or paper prototypes. Research seems to indicate that testing multiple prototypes produces more useful data (Tohidi et al, 2006). Test 3 or 4 users loosely recruited from the broad user category identified in step 1. Aim for 3 testable prototypes, but again don’t let this guideline derail an otherwise healthy project.

Step 4: Develop Solution Based on Wireframe Testing

Perhaps a clear winner will emerge from step 3, or perhaps the best possible solution will incorporate elements from multiple prototypes. Entering into the development phase with even a small dose of user involvement cuts down on costs and ensures that we “get the right design.” (Tohidi et al, 2006)

Step 5: Think-Aloud Usability Testing with Prototype

Construct a task list informed by the context and goal(s) identified in step 1. Recruit loosely from the broad user group as in step 3. Spend a morning walking 3 or 4 users through the task list. Record sessions using Silverback. Take quick notes between each session, recording the biggest issues while they are fresh in memory. Produce a single page list of issues, not a full report. Writing formal reports consume a lot of time better invested in fixing problems or further testing. Review session recordings with stakeholders as appropriate.

Step 6: Tweak Based on Testing

Fix the biggest 3 issues revealed in step 5. Avoid the temptation to go for the low hanging fruit until the truly catastrophic issues have been resolved. If something can be fixed with 15 minutes of work, by all means do so. But don’t count that as one of the big 3 unless it is also a major problem. After the big 3 and the easy fixes are addressed, act on any remaining issues as time permits.

Step 7: Launch & Evaluate

Put the solution into production. If benchmarks were established, collect data for a length of time allowing for a reasonable comparison up to a maximum of 1 year. If the data does not indicate improvement (and the criteria for judging this will be highly subjective and depend a great deal on context) consider returning to step 1 with an eye towards testing any assumptions in the original problem description.

Don’t Sweat the Details

Use the tools at our disposal to the best of their ability. Maybe a focus group would be the perfect tool for a given job. But we can pull that off because of finances or because it’s summer and campus is like a ghost town. Move on to a less than perfect solution, or plan to readdress that particular issue when the timing is right. But if we postpone one project, we should find something to keep us busy in the meantime. With a site as large and complex as VolState.edu, we should always be able to find something to improve.

The Tools of the Trade

In this section I will list some of the tools available to us. While I’ve made an honest effort to exhaust my knowledge on the subject, I make no claims to knowing every possible method. We should actively look for new tools and add them to this list as we become aware of them.

Card Sort Studies

These studies are often used for organization and naming conventions. There are 2 varieties. (a) Closed card sort studies involve asking participants to sort pre-determined items into pre-determined categories. (b) Open card sort studies involve asking participants to sort pre-determined items into groups which can then be labeled any way the participant chooses. Such studies are cheap and easy to conduct and provide valuable information within the limited context of language choices and organization schemes. Such problems are commonly reported in the literature involving case studies of university libraries. (Bordac & Rainwater, 2008; Proffitt, 2007; Shafikova, 2005)

Surveys

In the past we’ve had great luck with SurveyMonkey.com. Care should be taken in wording questions in such a way as to avoid biasing the answers. Surveys, particularly those delivered online, allow for a great number of participants from a wide range of our target audience. Smaller, more targeted surveys can also be conducted in person or on paper depending on the need. We also have access to data collected through marketing surveys conducted in 2003, 2008, and hopefully 2009.

Observation

Don’t underestimate the power of simply watching people using a system under normal conditions. Observation alone will often only produce hints or assumptions about possible problem areas. But that can be a great starting point from which to branch out into interviews or surveys. In the case of formal observations, such as with employees, a quick follow up interview can probe for more details immediately. (Pekkola et al, 2006)

Focus Groups

While there are dangers associated with relying too heavily on preference and opinion based data such as that produced by focus groups, they can provide data useful to our purposes. For example, it could be a great way to test assumptions arrived at through observing students using the website at the library. We’ve observed students doing X, which we assume is a way of working around problem Y. We could conduct a focus group to discover if Y really is a problem at all, or if students are engaging in behavior X for reasons we didn’t think of. Focus groups are most effective when drawn from within a single user category. For example, we probably would not want to mix students and faculty in the same focus group, nor faculty and administrators for that matter. (Kensing & Blomberg, 1998)

Interviews

Interviews could be paired with observations, helping to clarify and test assumptions much like a focus group. Or they could be used to help us construct personas. They would be most useful early on to help explain the context within which a given problem may be occurring.

Prototypes

Paper mock ups for a possible user interface can be produced quickly and cheaply. In a team environment, building such prototypes could even become a collaborative, iterative process. Some teams have reported success even with complex interactive paper prototypes. (Tohidi et al, 2006; see also i ♥ wireframes) Testing with such low-fi prototypes can lead to a greater willingness for participants to offer criticism since it’s obviously a work in progress.

HTML prototypes can range from semi-functional to fully functional. I’m personally much better at HTML wireframing than illustrating, so in the absence of outside assistance I will probably rely on HTML prototypes for both low-fi and high-fi testing.

Personas

Using demographic data, marketing research, and perhaps focus groups/interviews to construct an idealized but fictional user can help make user needs more personal and real (ironically enough) to a development team. Knowing that we have students with family and work obligations is important. But building a persona around that particular cluster of user attributes can make it easier to relate to and also give the development team a shorthand for addressing those issues.

For example, we could create a persona named Barbara who is a single mother of 2, working full time graveyard shift as a manager at a 24 hour restaurant, attending Vol State for 3-6 hours per semester working on a degree in Hospitality Management. She tries as often as possible to take classes on Tuesday/Thursday to minimize the burden of day time child care. She’s not technologically proficient, but she’s willing to learn. If given the choice between driving 45 minutes to campus or performing a task online, she prefers the online option in spite of her technological limitations.

That’s a very basic persona, but it still gives us enough detail to say “But what about Barbara?” rather than “But what about students who may have family or work obligations that prevent them from easily making an on campus visit on Mondays and Wednesdays?” Obviously personas could have applications outside of the realm of website development. Barbara could also provide insight into event planning, for example.

Think-Aloud Usability Study

This is the crown jewel in my usability toolbox. In a nutshell, it’s as simple as sitting a real human being in front of your product and watching them try to make sense of and use it. Ideally, you should have some specific tasks to ask them to perform and keep them talking about what they are looking at, what they think they should do next, what they expect to happen when they do it, their reaction to what actually happens when they do it, etc.

Full descriptions of the methodology can be found in lots of different places. I personally recommend Krug’s book. He’s even made the final 3 chapters of the first edition available on his website as a free download. Those chapters contain the bulk of the info on this sort of testing. There are other books, academic articles, and even blogs available, so pick your poison. Jakob Nielsen and Jared Spool have both written prolifically across many distribution channels.

Heuristic Study/Expert Review

My list would not be complete were I to leave this off, but personally I find this the most suspect. The general idea is you have an expert go over the interface and critique it based on a list of guidelines. This idea originated with Nielsen too and his list of guidelines can be found on his website. (Nielsen, 2005)

The highest value should be placed on methods that involve observations of real people interacting with some form of the interface in question. Preference and opinion based methods, such as surveys, focus groups, and interviews, can be quite effective for collecting marketing type data. But usability data relies too heavily on context for these methods to work alone. (Krug, 2008) However, any methods requiring direct human contact in the context of a college campus present a particular problem.

Sweat Some Details, but Document Them

One detail we have to sweat is the Institutional Review Board. All those highly valued methods that involve human interaction will require IRB approval. Even with approval, there’s no guarantee that a particular methodology will work. For example, I recently put together a proposal for a card sort study that failed to successfully recruit any participants. The good news is I’ve learned one method that does not work on this campus, so we can avoid any recruitment schemes that rely solely on face to face recruitment with no offers of compensation in the future. Eventually we will discover methods that both appease the IRB and meet with success out in the field. When that happens, we should save the IRB proposal, the information letter, the release forms, and all other deliverables. The next time the need for such a test comes up, we can build on the previous success. Many researchers, Krug among them, provide examples of their own materials that we can also integrate into our workflow.

Recommendations

Develop an easy to use feedback mechanism into VolState.edu such as a simple for to “Report a problem with this page” or an Amazon style “Was this page helpful to you?” tool. Possibly both.
Develop a standardized survey to be delivered via SurveyMonkey.com on an annual basis. Collecting standardized, longitudinal data will allow for some forms of benchmarking. Each iteration of the survey can include a handful of questions of a more timely nature in addition to the standard set. For example, a question about a specific change made in the past year.
Continue to develop our use of Google Analytics for statistical and possible benchmarking data. However, do so with the understanding that Jared Spool has called analytics “voodoo data” because they lack context. (Spool, 2009)
Integrate user testing to provide the context currently missing from our toolset as laid out in the 7 step model above.

Bibliography

Bordac, S, & Rainwater, J (2008). User-Centered Design in Practice: The Brown University Experience. Journal of Web Librarianship.
Comeaux, D.J. (2008). Usability Studies and User-Centered Design in Digital Libraries. Journal of Web Librarianship.
De Troyer, O, & Leune, C (1998). WSDM: a user centered design method for Web sites. Computer Networks and ISDN Systems.
Kensing, F, & Blomberg, J (1998). Participatory Design: Issues and Concerns. Computer Supported Cooperative Work.
Krug, S (2005). Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition. New Riders.
Krug, S (2008). Steve Krug on the least you can do about usability. Retrieved April 22, 2009, from blip.tv Web site: http://blip.tv/file/1557737/
Nielsen, J (2005). Heurisitics for User Interface Design . Retrieved April 22, 2009, from useit.com: usable information technology Web site: http://www.useit.com/papers/heuristic/heuristic_list.html
Pekkola, S, Kaarilahti, N, & Pohjola, P (2006). Towards formalised end-user participation in information systems development process: bridging the gap between participatory design and ISD methodologies. Proceedings of the ninth conference on Participatory design: Expanding boundaries in design. 1, 21-30.
Proffitt, M (2007). How and Why of User Studies: RLG's RedLightGreen as a Case Study. Journal of Archival Organization. 4
Spool, J Journey to the Center of Design. Retrieved April 22, 2009, from YouTube Web site: http://www.youtube.com/watch?v=WCLGnMdBeW8
Tohidi, M, Buxton, W, Baecker, R, & Sellen, A (2006). Getting the right design and the design right. Proceedings of the SIGCHI conference on Human Factors in computing systems

Version Control for the Web

2009-04-13T15:07:00.003-05:00

Does #lazyweb work on blogs?

So I've had an idea. And it may be what finally gets me to implement a version control system around here.

A little over a year ago, I did a survey with our website visitors (by “our website” I mean VolState.edu). I expected the biggest problem to be reported would be trouble locating information. I have full access to the server and have worked directly with the file structure for nearly 2 years now and I still have trouble finding stuff. I was surprised to see that problems with findability were the 2nd most commonly reported. #1 went to outdated info.

I assume the 2 problems feed off each other. You spend 15 minutes trying to find something, and then once you finally locate it, it's obviously out of date. I know I'd be upset if placed in the same situation. And unfortunately that's a situation we place our website visitors in every day.

I can publish content updates once they cross my desk, but I can't summon them from thin air. But I also realize we've got a lot of busy people on this campus who may not have the time to proofread their web content and alert me when updates are needed. I could use that as an excuse, pass the buck, and move on with my life. But I don't like that.

One thing I've done in the redesign is to link to content from a single authoritative source as often as possible. For example, the current site often lists course and curriculum info. (I'm using our Health Information Technology program as an example here, but most of our programs follow this model.) Now that's important info for both current and potential students, so I understand why we'd want to publish it. But that's redundant info that can quickly fall out of date. The catalog is the definitive source for course descriptions and curricula info. I can also count on that getting updated every year. Thankfully, Acalog, our 3rd party online catalog service, makes it possible to link to individual program descriptions. So the redesigned program pages send people there for the course and curriculum info.

That's one less point of possible failure. I know those pages will be kept up to date. I no longer have to worry about them, and neither do the deans and program directors.

Along the same lines, I'm thinking about a way to implement a reporting system that could alert me to each page that has gone X days without an update. I figure a good version control system would support this, but at this stage that's a big assumption on my part.

But if that's possible, I could create a system where the people responsible for providing content would be notified when a page could potentially be out of date. If nothing has changed in the past X days to render the content out of date, that's fine, but I'd like to be able to document that. I don't want to be seen as The Web Nazi, but if the first gentle reminder fails to get any feedback, I could follow up in a month or so including traffic figures from Google Analytics. “X people have viewed potentially out of date information on http://www.volstate.edu/YourDirectory/ since [date of initial notice]”

So my goals for this week are to generate a deliverable for my user centered design course (I tried a research project, but that failed to materalize once I hit the recruitment stage, still learned a lot though) and researching SVN, Git, CVS, etc.

An open letter to the University of Alberta

2009-04-02T09:59:00.002-05:00

Good morning everyone. I've got a bit of an odd situation, so let me start off with some background info.

I'm an international grad student enrolled in the MACT program. Since that program is offered primarily online, I'm still living at "home" in Gallatin Tennessee. I picked this program because it seemed more reputable than competing programs I found in the US, both those available within commuting distance and those offered online. The online nature of the program seemed to soften most of the hurdles traditionally associated with seeking a degree across international borders.

For the first year of the program, all those assumptions proved true and I was very happy with my overall experience with both the MACT program and the University of Alberta as a whole.

Then you stopped accepting credit cards.

Now the entire landscape has changed. Had my first few semesters gone like this, I would not have stuck with the program. By the time things took a turn for the worse, I was heavily invested in the program and hated to turn back. I can't say for certain that this move is costing you business, but I can state with authority that it has greatly tarnished my personal experience with and perception of the U of A brand.

As of right now, I still have a balance of $20.66 CAD. But on the day I made my international wire transfer payment, I printed the exchange rates published on the U of A website along with the info sheet for international wire transfers. I took this to my bank and paid a $45 USD fee for the wire transfer. Apparently in the 4 days or so it took the transfer to clear, the exchange rate was not kind to me, so my payment fell short by about 2.8%.

But how am I supposed to deal with this? I took the most up to date info available to me at the time, provided by you. I have no more control over the markets than you do. Last semester, the same thing happened, only I ended up over paying by about $25 CAD. That semester, I sent money orders via international post. That cost about $18 USD, required me to fill out customs forms, would not allow me to get any sort of delivery confirmation, and took several weeks for delivery. I had assumed it was the length of time that resulted in the imbalance, so this term I tried the faster yet more expensive method of international wire transfer. Although I must admit the relative speed is also much easier on my mind. Having no way to track or confirm delivery of something as important as payment for my education provided a very stressful couple of weeks last semester. That stress stems from a process over which you have no control, but the fact of the matter is I experienced that stress as a direct result of a change to your systems. So that experience tarnishes your brand perception anyway. I can avoid that stress in the future by disassociating myself with your brand.

With credit card payments, Visa or Mastercard took care of all the exchange rate madness instantly, so such discrepancies did not happen. Now, international wire transfer is the fastest method available to me, and that takes close to a full business week. It will be virtually impossible for me to make a payment that is correct to the penny. If I'm short, I can either spend $18 (USD) to send you $20 (CAD), and wait for several weeks. Or I can spend $45 (USD) to send you $20 (CAD) and wait about a week. Either way we can easily end up in a Zeno's Arrow situation where I'm faced with spending $18 or $45 (USD) to send you $0.60 (CAD) a month later. If I'm over, I'm sure your institution is placed in a similar situation. Only I lack the means or authority to state and enforce exchange rates past the initial transaction. And to tell the truth, I probably wouldn't worry about it even if I could. How much hassle justifies that last 3% lost to the market?

So to avoid all this, I've asked a classmate, an Edmonton native, to settle up my account as a personal favor to me. Given my options, being indebted to a classmate is the least ugly and gets around the volatility of the market.

Chances are, I'm an edge case. I doubt you have many, if any, other international students who are not actually living in Canada. Such students would have access to Canadian bank accounts and thus would be able to pay with "electronic checks" using native Canadian currency. But I would not be surprised to learn that the parents of international students have found themselves in situations similar to my own. If you've noticed a dip in the recruitment or retention rate of international students, the added red tape introduced by removing the option to pay with a credit card would be the first place to look.

This process costs me about an extra 3% per semester anyway. There's no quantitative measure for the added stress, and I have no means to track the time lost compared to the simplicity of the "old" credit card based payment system. If your institution offered an option to pay with a credit card given a ~3% markup to cover the added costs to you, I'd accept that offer in a heartbeat. And your brand perception could shrug off the layers of stress and aggravation I've come to associate with it over the past year.

Thank you for your time.
Derek Pennycuff

Javascript performance testing

2009-02-12T14:43:00.004-06:00

I've been horribly disappointed with IE's performance with some of my javascript, so the point that I've pretty much decided to simply hide the troublesome functions from IE users. That's nearly 85% of our audience who won't get to experience the work I've put in to some of this stuff. I thought I needed to get some actual figures on performance, so I took the worst offender and turned it into a test case. Then I thought while I'm doing that I might as well compare jQuery 1.2.6 to jQuery 1.3.1. So I made a 2nd test case.

First of all, you need to understand that I'm terribly abusing the plugin in question. I'm using treeview to do the online version of our organizational chart. There's a demo showing how it works with large lists. That demo has 290 total list items, 53 of which are expandable. Our org chart has 403 list items, 81 of which are expandable. It's large enough that I had to edit the default images to extend all the way down the fully expanded list.

I added a crude counter to the plugin. Here's the code. The lines involving Date() and getTime() and alert() functions are my additions (114 to 127 or so). It's far from perfect, but it should be equally imperfect for all browsers and therefore free of bias. What this does is whenever the expand all or collapse all function is triggered, it grabs the time early on in that process, then grabs the time again near the end of that process, computes the difference (in milliseconds) and alerts the value. In each browser I expanded the list, recorded the value, collapsed the list, recorded that value, and repeated the process until I had 15 measurements for both the expand and the collapse feature.

The Data

We'll do the Mac browsers first. I'm running on a 20 inch iMac with a 2.0 gHz Intel Core Duo processor and 4 gigs of RAM. I ran these tests under "normal" conditions. So I had other applications going and in the case of Firefox several other tabs open.

All figures are in milliseconds.

Firefox 3.0.6

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	838 840 847 826 827 821 839 835 827 827 825 839 824 816 845	1178 1184 1183 1188 1188 1184 1187 1205 1186 1190 1189 1182 1185 1182 1190	506 514 511 493 482 513 480 510 493 484 508 484 492 512 491	1006 1024 999 998 1011 998 1010 1003 1009 1008 1005 1002 1000 997 994
Min	816	1178	480	994
Max	847	1205	514	1024
Range	31	27	34	30
Median	827	1186	493	1003
Average	831.73	1186.73	498.2	1004.26

The most surprising thing here is that jQuery 1.2.6 is actually a bit faster than 1.3.1. Of course, 1.3.2 is supposed to release soon. And as we'll see that's not true for every browser. Collapsing takes longer than expanding. I'll leave explaining that to someone that knows more about jQuery DOM transversal.

Safari 3.2.1

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	262 256 267 269 264 269 266 267 270 270 267 269 292 267 267	161 159 164 163 167 164 169 165 163 164 165 164 164 166 166	311 311 326 316 314 311 311 319 312 314 310 316 318 318 317	147 146 149 151 148 148 146 149 149 149 149 151 148 152 150
Min	256	159	310	146
Max	292	169	326	152
Range	36	10	16	6
Median	267	164	314	149
Average	268.13	164.27	314.9	148.8

At first I thought the performance boost for 1.3.1 here was pretty small, but I think the fact that all the numbers involved is tiny threw me off. If you add up the median figures, you'll find a difference of about 7.5%. That's nothing compared to the relative advantage Safari already has over most of the other browsers, but I think it's still a decent speed boost for the new jQuery release.

Safri's js engine is awesome. :)

Can anyone explain why in Safari collapse is quicker than expand, but in Firefox it's the other way around?

Opera 9.63

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	692 690 737 667 711 703 715 703 704 692 719 680 731 695 682	698 709 721 709 715 730 697 695 692 696 705 704 697 713 696	875 944 904 875 872 869 864 929 905 910 891 885 926 857 918	691 711 692 692 684 692 741 688 652 687 674 707 701 692 690
Min	667	692	857	652
Max	737	730	944	741
Range	70	38	87	89
Median	703	698	891	692
Average	701.4	705.13	894.93	692.93

Opera seems slow compared to Safari, but it's on par with Firefox, and more than tolerable. We also see a decent speed boost with 1.3.1 here.

Windows Browsers

I'm running Windows XP via virtualization with 412 megs of RAM. These tests were run with no other running applications, so more "ideal" conditions than the Mac browsers got. Then again, the Macs get a ton more RAM and aren't running in a virtual machine. I tested both Firefox 2 and Firefox 3 because a decent portion of our Firefox using audience haven't upgraded yet.

Firefox 2.0.0.20

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	1018 1069 1019 1019 1019 1019 989 1049 1019 989 1029 1009 1029 999 969	1169 1109 1129 1129 1139 1159 1129 1189 1149 1129 1128 1129 1129 1189 1119	629 629 609 649 609 639 619 629 619 649 630 629 640 629 639	740 719 739 729 749 749 749 730 739 739 759 750 759 719 769
Min
Max
Range
Median
Average

Here we're starting to get slower than I'd like. A full second for anything to happen is a bit much. Then again, 403 list items in 81 lists is a lot of munch on. Once again we loose a little speed with the new jQuery release. Hmm.

Firefox 3.0.6

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	431 449 461 434 464 472 558 493 481 436 457 442 472 462 458	657 688 648 623 657 708 632 650 695 649 634 649 648 659 625	450 467 424 475 443 456 446 472 460 477 449 464 483 468 440	618 650 634 638 667 637 632 632 646 643 622 614 628 651 640
Min
Max
Range
Median
Average

Here we go! Come on Firefox users, update already!

Safari 3.2.1

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	253 326 277 257 268 288 278 269 244 271 264 281 284 281 293	141 171 148 160 147 143 147 150 151 171 163 158 154 142 147	303 300 324 327 313 312 283 297 355 332 367 332 360 317 307	130 133 129 134 135 134 129 130 132 130 133 135 148 133 129
Min
Max
Range
Median
Average

Safari continues to be awesome, even on Windows. :)

Opera 9.63

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	470 480 469 480 480 499 490 580 469 519 460 470 479 563 480	399 410 429 409 419 399 419 409 400 400 400 430 410 399 399	949 989 949 929 939 939 939 929 939 939 959 949 958 1009 989	370 380 390 409 400 390 370 390 380 400 399 420 380 400 420
Min
Max
Range
Median
Average

With Opera on Windows, we see some pretty solid speed boosts with the 1.3.1 release of jQuery.

Chrome 1.0.154.48

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	229 203 191 195 158 208 201 188 204 244 360 327 307 305 178	88 77 119 88 79 106 84 86 95 158 116 145 135 61 81	512 598 546 607 607 640 526 674 545 631 549 635 581 616 531	111 112 133 115 109 105 103 103 105 106 133 112 109 110 114
Min
Max
Range
Median
Average

Chrome also sees some good boosts from 1.3.1 and manages to out awesome even Safari. When you look at the range as a percentage, it's all over the place. Sometimes the alert box would have a check box in it that would say something to the effect of "prevent this site from producing alert boxes" and I think those tended to take longer to generate. Maybe Chrome's doing other stuff behind the scenes. I'd need to do more specific research to figure this one out.

IE 7.0.5730.13

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	2990 2897 2867 2917 3016 2877 2877 2847 2907 2897 2877 2916 2897 2888 2848	1718 1738 1832 1718 1668 1708 1678 1678 1698 1709 1728 1738 1689 1688 1708	2538 2587 2557 2557 2577 2568 2567 2557 2548 2707 2548 2708 2558 2568 2568	1248 1219 1249 1248 1279 1249 1208 1228 1258 1229 1229 1239 1389 1229 1239
Min
Max
Range
Median
Average

Ugh! I'm in browser hell! What's up with this? 2.5 to 3 seconds to expand the list? Come on!

IE6

I don't know the exact version number here because of the way the Multiple IE installer works.

jQuery:	1.3.1		1.2.6
	Expand	Collapse	Expand	Collapse
Tests	10779 12577 13060 14085 15034 16123 17272 19549 19859 21121 23080 23249 24961 24770 25953	4935 5165 5774 5964 6314 7032 7152 8021 8231 8611 9082 9402 9892 9959 10349	11078 12617 13167 14785 15684 16876 19643 21740 20642 21947 22726 23925 36235 28810 29422	3899 4005 4356 4715 5105 5534 6453 7366 6842 7453 7801 8241 9700 9364 9849
Min
Max
Range
Median
Average

No. I was wrong before. This is browser hell. Notice how each test gains about 1 full second? I think that means we've got memory leaks. I closed and relaunched the browser between test cases to avoid skewing the results between jQuery versions.

I'll complete the number crunching and do a bit more in depth analysis tomorrow. It's 5 o'clock and I'm heading home for the day.

Content! Third-hand content, but still, content!

2009-02-05T12:57:00.003-06:00

One of the people I encountered in all the discussion on higher ed in the web design industry is Kurt Schmidt. (ImTheSchmidt.com, isn't that one of the greatest domain names ever?)

Since then, I've been following his blog semi-daily. Earlier today he posted Make Your Site Faster - Or Else!, which is his take on info from Geeking with Greg. I started to reply to Kurt, but about the time I started my 3rd paragraph I figured I should just turn it into a blog post here. See what I mean about blogs and peer review?

The importance of speed and performance on the user experience is something that I'm currently struggling with. In the redesign I'm working on, I've made extensive use of jQuery. Everything runs super quick on all the Mac browsers. Chrome and Safari on Windows also blaze. Firefox on Windows is noticeably slower than the rest, but still tolerable. Who does that leave to drool on his shirt and crap his pants at the browser testing party?

Both IE6 and IE7 are intolerably slow. I've considered simply filtering out IE6 from all the js goodness. Since I've designed for progressive enhancement, everything will still function, just not the same way. But that still leaves IE7 users with a clunky and ungraceful experience. As much as I hate IE, I won't kid myself about it's market share.

The best solution from the users' point of view would be to test each jQuery implementation on the site separately and selectively enable/disable for IE based on performance in context. Some of the stuff I'm doing on the redesign works fine in IE. I know because I've been doing it on the current site for more than a year.

I also need to dig deeper into my jQuery-fu and make sure my calls are as efficient as possible. But some of it is straight up plug in functionality. I'm not too keen on rewriting other people's plug ins to increase efficiency. The next version of Firefox will probably incorporate ideas currently only available in Chrome's V8 js engine, making it's tolerable performance that much better. But that will probably just widen the gap between IE users and everyone else even more!

The ~~next~~ current version of jQuery (which I haven't updated to yet, oops) will also have a revamped selection engine that should boost performance across the board. But unless those changes impact performance in IE a hell of a lot more than everyone else, the gap will still be huge. It's the gap in the user experience that worries me.

What little testing I've done so far would seem to indicate that IE6 is bad at say 2000 milliseconds. IE7 is barely any better and a lot less consistent, with speeds ranging from 1500-2300ms. Firefox is around 700ms. Opera is 300-400ms. Safari is 200-300ms. Chrome is about 150ms (10 times better than IE7's best run!). I guess with those numbers, even if sizzle improves performance by 20% across the board, Chrome gains 30ms and IE7 gains at least 300ms. Maybe the gap will get smaller. But still, 1.2 seconds waiting for all the js to trigger is unacceptable from a user centered outlook. But why should I be punished as a designer and the 20% or so of our users who don't run IE miss out on those enhancements simply because IE can't get it's crap together? These sorts of situations are the only part of my job I hate. I'll stop there before this turns into a rant.

Well, now that I know the new version of jQuery is out, it's pointless to flap my jaw any more about this stuff until I've updated and retested. I've got work to do.

I've been neglecting all my imaginary readers

2009-02-05T08:54:00.002-06:00

Things have been crazy. Professionally, academically, personally; you name it. Chaos defines me. Even more than usual. I've had plenty of blog worthy thoughts in the past month, but this is the first chance I've had to sit down and actually blog, you know, as a verb.

There was an explosion of discussion over at A List Apart on higher ed and web design. And by explosion, I mean I posted a lot and the discussion was meaningful to me. I'm sure there are articles with a hell of a lot more discussion.

The articles in question are Elevate Web Design at the University Level by Leslie Jensen-Inman and Brighter Horizons for Web Education by Aarron Walter. Both are worth checking out if you haven't already.

I've tried, and failed, to articulate what my heart tells me about this issue. I've posted discussions for both those articles. I've posted to the University Web Devlopers group on Ning. I've posted on various blogs where the discussion has spilled over. I've carried on conversations via email with a few folks. The closest I've come to getting it right is probably this comment in response to Leslie's article.

I'm trying to make the case in favor of a new type of “digital apprenticeship” in the industry. I think a formal education can work in our field. No. I know it can. My bachelors was a great model and actually follows a lot of the suggestions that people have come up with in these ongoing discussions. But the shelf life of that program as I experienced it was limited to about 5 years. A change in leadership is all it took to bring it back to business as usual (in other words, the kind of troubled program Leslie was targeting with her research). I don't think our industry can afford to wait a generation for the top level of campus politics to embrace the educational philosophies required to produce marketable graduates. For the next 20 years we'll see a lot of hit or miss programs, and some campuses will be more progressive in that respect than others. There are probably half a dozen or so solid programs in existence right now that have the proper institutional support to remain viable and stable. But I don't think students should be required to seek out places like MIT to find a decent web design program. And I'm sure less prestigious/well known campuses are capable of fielding the sort of program I'm talking about, but we're still faced with the problem of how do students find out about them? I mean, the only reason I found the program at TTU is because I started out there as an engineering student.

So while I appreciate the efforts that are being made to entice higher ed to get with the program, I don't think that's a sphere where we have any real influence. A lack of solid educational material hasn't been a problem in this industry for at least a decade. The fact that most academics will pay no mind to such material until it's formalized in a book or an accepted peer reviewed journal is a failing on their part (within the context of our industry), not on our part. In my mind, the spirit of peer review is alive and well on prominent blogs. And the transparent nature of the comment and debate system removes a lot of the politics that can infect trade journals. Movements like open course ware seem to indicate that some academics understand this and are forging new educational models. But until that kind of thinking can emerge from the underground, it only serves as a further means of exclusion.

We can't make higher ed listen to us. And we can't force HR departments to not require a degree for a given position. But I don't think we have to. Before we can effectively maneuver around the momentum and bureaucracy of the old schools of thought, we may be able to build a better model ourselves. After a couple of hiring cycles of employees with graphic design or computer science degrees who can't address the full range of skills a web position requires, HR might learn to value portfolios and experience a bit more, at least for these positions. If universities start noticing problems with retention and the ability of their graduates to compete in the market, they'll come to use for a solution.

Right now I feel like we're trying to cook a more enticing meal for a man who doesn't even realize he's hungry. But he's not just hungry, he's starving. Things like the Opera Web Standards Curriculum are great. But in the mind of most academics, it's foistware. We're pitching a solution to a problem that isn't even on the radar yet.

But, I have a bit more hope now than a few weeks ago. Leslie's article on ALA was largely preaching to the choir. But she's an academic herself (and a fellow Tennessean). The research that lead her to produce the ALA article is also the sort of research that academics may be willing to pay attention to. In fact, she caught the attention of the Chronicle of Higher Education. Maybe academia is more willing to listen than I've assumed. Still, I'll believe it when I see it.

The fruits of my labor

2009-01-06T09:51:00.002-06:00

It's taken a year and a half, but I have reached a milestone here at work.

After 18 months of listening to iTunes and rating every song, I now have a library of nearly 3,500 songs that are all 4 or 5 stars in my not so humble opinion. I've culled the rest of the herd (from my work library anyway, I keep the 3 stars at home).

Of course, I complete this little project just as Genius becomes available and somewhat renders my library of nothing but awesome songs less relevant.

In the past I've tried Pandora and Last.fm. I like them both, a lot. It's a great way to discover new music. But they both tend to get a bit repetitive after a solid week or so of listening. That's not a viable long term solution for me. Also, I worry about bandwidth issues here at work. If I can create a “My Top Rated” playlist that's 11 days long, I probably should. If we get several people streaming Pandora on the campus network, it would probably start to present some congestion issues. So I'll do my part to conserve a limited resource. :)

Image Evolution

2008-12-17T10:32:00.003-06:00

Ten days ago... No, wait. That's something else.

Eight days ago, I stumbled onto Genetic Programming: Evolution of Mona Lisa. I thought it was pretty awesome. Today, I stumbled upon this simulation of the same idea you can run in your browser. Doesn't work in IE, but I really hope anyone reading this isn't using IE (any version) as your default browser anyway. Right now, mine is at 1,077/17,000. That means out of 17,000 “mutations” 1,077 have been an improvement over the previous best fit. I just hit 90% fit. Which looks like 005874.jpg on the example shots from the original post. That leads me to believe the offline version is a bit more efficient than the online version, since it's taken about 3 times the number of mutations to get there. But that's to be expected.

I think the ability to watch it develop over time in your own browser hammers home the idea a bit better than the static example provided in the first post from Roger Alsing. But I think there's still room for improvement. For one thing, Roger's program makes it look like it would take almost 1,000,000 generations to get a decent replication of the low res detail of the Mona Lisa he used as his example. That's a necessary abstraction to get this kind of simulation to run on a computer. In real evolution, each generation produces several nodes, each with their own mutations. The node tree would fork out to very huge, very quickly, due to exponential growth.

But applying survival of the fittest to the tree structure would get us to the best fit much more quickly. The version that runs in a browser addresses this somewhat with the x/y display. I'm currently at 91.10% with 1238/23000. On average so far, it's taken about 18.5 generations to find a better fit. If we could fork that into a node tree, even a simple node tree of 2 child nodes per parent node, we'd hit the first improvement in about 5 generations. Actually, we'd almost hit the first 2 improvements in 5 generations. After 5 more generations, we'd be hitting quantum leaps where over 2,000 mutations are tried. And that number doubles every generation.

Ok, I'm proving to not be a strong enough math geek to really get these thoughts out of my head in a way that makes sense. But the way these programs are running is a bit like selection sort whereas the node tree approach is more like heap sort. In another browser tab, I just hit ~94% fit after ~ 50,000 mutations (but only 1900 improvements). Selection sort has an efficiency rating of n². So if it's taken ~50,000 steps to reach ~94%, that means n is about 224. Heap sort runs at n(log n), so to reach ~94% using that method would only take about 527 steps rather than ~50,000. That's a closer fit to the number of true, natural generations it would take to get the same sort of results through evolution.

A better approach to visualizing this sort of thing would allow for multiple source images and create a node tree instead of using the linear approach. The multiple source images would allow for a simulation of speciesization. The node tree would be less of an abstraction from the natural processes (although still astronomically simplified in comparison) and give a more natural indication of true “generations” required to reach a goal. Ideally, the number of descendant nodes would depend on past history of improvements. So “blood lines” that have produced a high number of improvements in the past would be more fruitful. Those with poor histories would get fewer chances, and eventually die out. There would also need to be a threshold after which a given line is only compared to the source image it seems to be naturally drifting towards. This would simulate the migration into more specialized environments over time. It would also cut down on the processing power required to make it all run, but such a system would experience exponential growth and would quickly overrun any processor or pile of RAM currently available. As abstract as such a program would still be, it would require hardware we won't see until quantum computing becomes a reality.

The plan

2008-12-16T12:45:00.003-06:00

I probably won't have time to put this plan into action until I'm off for the holidays. Or maybe even until I'm back from the holiday break. I'm sure it will undergo some quick evolution once it's made contact with the enemy, so to speak.

Future KM entries

2008-12-15T15:59:00.003-06:00

Lately I've been on an tagging/organizing kick with my knowledge management posts. But there are other areas I need to explore too. As my post from earlier today pointed out, the lack of organizational structure behind the existing site (or at least the lack of documentation of any such structure, the difference between it existing with me failing to understand it vs simply failing to exist is effectively nothing) makes for a lot of unfun time. Once I eventually vacate this seat for whatever reason, I hope to leave my replacement in better shape than I currently find myself.

That means I need to work on documentation ranging from style guides to well documented, maintainable code to official policies and guidelines that better fit into the bureaucratic mindset of the campus than all that geeky stuff. (Both the resources I linked to there are written by women. I wonder if that is at all relevant or just a simple coincidence?)

In a time of economic crunch and budget cuts, many people would probably shy away from purposefully making themselves easier to replace. But if knowledge management is really about boosting the productivity of knowledge workers, isn't it possible that turning our backs on knowledge management now could very well extend the economic troubles? KM is about a lot more than just easing the transition for my eventual replacement. One thing I learned early on in my career about commenting my code, the person I'm communicating with in my comments may very well be my future self. Six months after I've written something, there's a good chance I won't be able to figure out what the hell was going on without at least a little guidance. It may be more important for someone who has never seen the code before, but that doesn't eliminate the very real (and almost immediate) benefits such documentation provides for me.

Bad tagging habits?

2008-12-15T14:29:00.003-06:00

In my last KM post, I hinted that SU's swelling user base may be a contributing factor in the rampant miscategorization of content. Of course, I'm really doing a lot of projecting. The tags that work best for me might not work at all for the majority of users. The act of tagging takes its meaning from the idiolect of the person writing the tags. It doesn't get much more personal than that.

But different people have different goals in mind with their tagging. I'm trying to come up with a manageable set of tags that can efficiently describe the majority of the work related online resources I make use of both now and in the future (and hopefully scale well for future growth). Essentially, I'm trying to do more with less when it comes to my tagging structure. Obviously, that's not everyone's goal. Even among my personal heroes, such as Jeffrey Zeldman, the tagging structures used by other people can be called “improper” for my purposes. Zeldman has less than 2000 bookmarks with over 5000 tags in his Ma.gnolia account. In fact, he's currently averaging 2.58 tags per entry. And that assumes that each tag is unique. Obviously that's not the case. He's currently got 62 items tagged with “iphone” and 259 items tagged with “webdesign”. I also see some redundancy at work. He's got items tagged with “palin”, “sarah palin”, and “sarahpalin”. This entry is tagged with “september11th”, “911”, “9-11”, & “9/11”. Since that's all on one entry I assume Zeldman's doing it on purpose and not just forgetting what his primary tag for that concept is from entry to entry. That's precisely the sort of redundancy I hope to avoid. But obviously it's working for him.

So in my previous entries I've said some things that could be taken as insulting my fellow users of social media. I should be more forgiving. If everyone used social media for the same ends, there wouldn't be much of a point, right? I guess just like any other social construct (democracy, economics, etc) simply by participating in it we take on the responsibility to be mindful of our own needs and tolerant of the needs of others.

I'm going to go find a drumming circle to join. More later.

Cleaning up the existing site

2008-12-15T13:13:00.003-06:00

At first I thought we'd be launching the redesign before our SACS review. The powers that be have other plans. At first I was happy to have a few extra months to work and test and debug prior to launch. But then it hit me. I was gonna need to clean up the site content for the review. That means I've got to deal with the pretty much total lack of any real information architecture on the existing site.

As a first pass, I ran a site wide link report. My first step was to get rid of the orphans. I quickly discovered 2 problems wit this idea.

The current site uses many JavaScript driven pop up windows using code generated by GoLive. DreamWeaver apparently doesn't know how to check these links. Therefore all such content shows up as orphaned.
Ditto for the Flash stuff. This is more surprising since Flash is also a Macromedia product from back in the day. This means the the thousands of photos we have in the various Flash driven galleries all show up as orphans.

The initial report said that out of 24,000+ files, 13,000+ were orphans. More than half the files on the server showed up as not being linked to at all. Of those 24,000-something files, 10,626 were HTML/ASP files. The rest were images, PDFs, and stuff like that. We're now down to a total of 19,957 files, 9,413 of which are HTML/ASP. But 6,138 still show up as orphaned. I bet a few of those really are orphans. Probably no more than 200. And most of those would be images. I'm primarily worried about indexable content that could turn up in a Google search but present horribly outdated information. The trouble there is not all of those files are orphaned. We're still linking to many of them. I guess the next step will be to search for obviously outdated files. Stuff with years in the file names, for example. Then I'll probably need to run another orphan check for freshly orphaned files once that content is cleaned up.

The good news is I've reduced the size of my local directory by 45%, from about 3.4 gigs to 1.9 gigs. The majority of that was the files we're still hosting from last year's CIT conference. But I never need to update those, so there's no need to store them locally. Some of those PowerPoint files got crazy big.

Of course, currently the beta site takes up a total of 339 megs. But it's not quite complete. Still, I'll be surprised if it grows to anywhere near 1.9 gigs before launch. Due to simple changes like getting rid of tables for layout and abandoning the <font> tag in favor of CSS we've shaved about 35k per page. We've also eliminated many pages. The beta site currently contains just 985 PHP files. That's about 10% of the files the current site contains, but we've migrated way more than 10% of the content. One of the big changes in that regard is that we now link to the online catalog for curriculum and course descriptions. There goes 2 pages per degree program plus at least a page per course offered. I think the current site has a lot of redundancy in course description pages among the various program directories. Most of the remaining content will be database driven.

The Social Side of Social Bookmarking

2008-12-14T13:27:00.003-06:00

There's a decent amount of discovery power available through Ma.gnolia as well. I still think Stumble Upon does it better. But it would be silly to not explore the 2nd best tool available for the job. Ironically, but doing so, I was quickly reminded of the problems with default tagging in SU. I pulled up a couple of recent bookmarks from Jeffry Zeldman.

The first is a blog post from Simon Clayson on feeding IE6 a basic style sheet using the sort of techniques that were once common for targeting Netscape Navigator 4 with a set of specific, dumbed down styles while simultaneously protecting NN4 users from that browsers botched implementation of the majority of CSS which was safe to show to less craptastic browsers. Now NN4 is little but a ghost to haunt the nightmares of us old school CSS scribes and IE6 is now the crappiest browser still in common usage. I'll probably spend the rest of December debugging the redesign in IE6. Had I found this idea a year ago, I probably would have served IE6 a very simple style sheet and skipped the debugging. In all honesty, even at this stage it may be less work to implement these ideas rather than try to “fix” IE6.

So anyway, I thought this was a potentially useful technique, so I thumbed it up. This didn't pull up the form for submitting new content to SU, so I knew someone else had already submitted this particular link. This gave me a great opportunity to see what the default tag would be. jackosborne says this page is primarily about “graphic-design”. It deals exclusively with serving specific CSS code targeted at a specific web browser. I can think of at least half a dozen tags more useful for this content than “graphic-design”. But the current SU system gives too much power to the person submitting the content. Jack's actually got more stumbles tagged “web-design” (54) than “graphic-design” (45), but apparently that's due to other people's default tags on the pages he is thumbing up. Looking at his discoveries, he's also submitted this article on Five CSS Design Browser Differences I Can Live With by Andy Clarke and Using jQuery for Background Image Animations from Snook.ca as “graphic-design”. Maybe that tagging scheme server Jack well. It makes SU virtually worthless for me when it comes to organizing and retrieving the resources I discover through it.

The other page I discovered via Zeldman is Western Civ's guide to CSS browser support. Again, this page deals exclusively with CSS and web browsers, so for my purposes it would be pretty easy to tag. It was submitted by SU user kancerman uh...wow, 3 years ago. If I'm reading this right, I'm only the 10th person to thumb this up in those 3 years. That could be because it was submitted into the category “internet-tools”. For me, that category is better suited for things like online mortgage calculators or WriteBoard. But due to the way kancerman submitted this page, “internet-tools” is the default tag. Now I can look at his entry for this page and see that his 2nd tag is in fact “CSS”, but since that's the 2nd tag on his entry, it holds no bearing for how it is tagged by default when I thumb up the page.

Maybe this problem in the design of SU is worse than I thought. Not only does the default tagging scheme make it harder for me to go back and look up stuff I have previously thumbed up without bothering to write a review and/or manually tag myself. But it also seems to have a negative impact on the effectiveness of SU to function as a discovery engine. How many times have I found a page via means other than SU, thumbed it up, didn't see the new content submission form pop up, assumed whoever beat me to the punch on submitting the content at least submitted it properly, and went on my way? How often does the average SU user do that? One thing I've noticed since I started paying attention to the default tagging scheme in SU is how often I see content that is submitted into the wrong category. If I have found this content via SU, then I can use the “report last stumble” feature. But that only works if I stumble into something in one of my defined interests that really should be tagged as some other of my defined interest. If someone submits a CSS gallery as “photography” for example. But if I get to that page without being referred there by SU, there's no way for me to bring the miscategorization to the attention of whoever addresses such things. That is most likely to happen if someone submits content that should fall within one of my defined interests as pertaining to a topic of interest that isn't on my list.

Oh look, this jQuery plug-in has been submitted under “alternative-medicine”

There's no way I can do anything about that. All I can do is tag it properly within my own account. But since very few web designers are going to be stumbling through the alternative medicine category (then again, maybe I assume too much), and very few people looking for alternative medicine information will give a rat's ass about a jQuery plug-in, very few people who care about that content will ever stumble into that content. I can't even resubmit it. Once a page is submitted, all I can do is tag and review it myself. In effect, such content is quarantined, cut off from it's true target audience. I've got to think there are ways for SU to address this. If Mac OS X can have a pretty effective summarize tool built in, can't a similar algorithm be run against the content of new submissions to SU in an attempt to verify the categorization of that content? Couldn't meta tags, key words, or the sort of tricks search engines use to categorize content be applied? I know these things aren't cheap, but they are possible, and SU has a larger user base than delicious (which may actually be a big part of the problem).

Getting organized with tags and Ma.gnolia

2008-12-12T14:55:00.003-06:00

I've been mulling over how to approach planning out my tags for using Ma.gnolia (M) to store and organize the work related resources I find via Stumble Upon (SU). At first I thought about a matrix of some sort allowing me to drill down within a topic. But how would I share that here? An HTML table won't work without getting really nasty with the colspan attribute. Mind mapping software could work, but the image it would produce would to far too huge to post here. I even tried to think of it in terms of XML and custom Doctypes where I could use “web design” like a root element and have a bunch of descendant tags from there. That lead me to two realizations:

Only someone at least as geeky as me would have any chance of understanding such a system
I was ultimately still thinking in hierarchies

The philosophy behind tagging is to address areas where hierarchies break down. For example, as I explored such a matrix, I found myself coming up with compound tags like “javascript-framework” and “php-framework”. Part of the reason for this line of thinking is due to the structure of SU, where such compound tags would be useful. But M allows to search and sort based on a combination of tags. Resources on Cake PHP, Zend, Ruby on Rails, and jQuery could all take the tag “framework”. I could also tag such resources with their associated language: “php”, “php”, “ruby”, and “javascript” respectively.

Simply typing this out here has lead to another discovery. Typing out “javascript” sucks. I don't plan on tagging stuff with “cascading style sheets” either, so I'll steal an idea I've been using in my directory structures for years and shorten “javascript” to “js”. That will be clear to me and should be clear to any other web professional who happens to browse through my links in Ma.gnolia. In theory, that should also apply to anyone taking over this position in the future.

I also realized that trying to use a root tag such as “web design” is short sighted. Not everything I do is related to design. Some of the server administration or SEO stuff I do would stretch the common definition of design.

Leaving behind the idea of a hierarchy should also allow me more freedom for future growth. If I'm simply tagging resources with an associated language (“css”, “js”, “php”) it becomes much easier to just add a new tag for any new languages I start to use or learn (“perl”, “ruby”, “lolcode”). This industry evolves so quickly, that sort of scalability will likely pay off in ways I currently can't even predict. Five years from now my job may require as much understanding of psychology as it currently does programming and design. I'm pretty sure we're one high profile lawsuit away from moving a solid understanding of the legal implications of accessibility from the “recommended skills” to the “required skills” section of job descriptions such as mine.

I'm going to give some thought to classification of tags I will need. Languages are an obvious example of what I'm talking about. Maybe I should add a class of tags for software, Dreamweaver, Photoshop, etc. I try to keep what I do tool-neutral, but I'd be lying if I said I never use Photoshop tutorials from the internet. If the Adobe Creative Suite was not already bought and paid for, I could get buy using free text editors and open source programs like the GIMP. But the reality of my job is that I spend a lot of time working with Adobe software so it's probably a good idea to reflect that in my tag structure. I'll also put some thought towards the need for consistency. Luckily, Ma.gnolia offers an auto-complete function based on previously used tags. SU offers no such feature. I just realized Blogger has the same sort of auto-complete function in the tag field for my blog entries. That should at least keep me from forking my tags due to a common misspelling or something silly like that. I'll continue to think things over and share my thoughts over the weekend.

Does anyone actually read this?

2008-12-11T10:16:00.003-06:00

I've been emailing some of my designer/developer heroes asking for opinions on CSS frameworks. Not sure if those efforts will bear any fruit, but in the past even the rock stars of the industry have been pretty approachable.

I thought I might as well try to get the conversation going here as well. (Assuming anyone is actually out there with whom to converse.)

My thoughts on what I've seen so far have not been good. ~~Even Google, who usually awakens my inner fan boy, seems to miss the boat on this one.~~ (Just got confirmation from John Resig [I told you even the rock stars are approachable] that Blueprint is hosted by Google Code but isn't itself a Google product. Apparently I'm not alone in my confusion. Still, it's the de facto king of CSS frameworks so I'll continue to pick on it anyway.) Blueprint strikes me as a tangled mess of presentational class names. Actually, forms.css isn't so bad. It's got .title, .text, .error, .notice, and .success. Those classes make semantic sense. I can see myself actually using the core ideas behind that style sheet if not the actual framework code itself. And it's things like that which give me hope for the general idea of a CSS framework. tyopgraphy.css starts to get a bit more iffy. As much as I hate the idea of classes like .left and .right for floating images within text, I have to admit I often use them myself. So I can't point too many fingers there. Classes like .added and .removed have obvious uses for AJAX-y goodness. And I can see uses for classes such as .first and .last assuming they are applied dynamically (by jQuery, for example). I can even imagine common uses for classes like .small & .large and .quiet & .loud, but those start to fall outside my personal comfort level when it comes to putting non-semantic, presentational classes into my markup.

The deal killer for me is grid.css, which is really the main selling point of the idea of a CSS framework. Almost everything in that style sheet is purely presentational.

Let's say I'm building a site using Blueprint to do a basic 3 column layout. I start out with 6-12-6 and put the needed classes into the markup to accomplish that. I build a couple hundred pages and put it into production. A few months later I realize that the sort of content I've got going down the right hand side (AdSense, social bookmarking feeds, etc) is not coequal with the primary navigation in the left column and I want to shift things a bit to say 7-13-4. Now I have to alter class names on a few hundred pages worth of markup rather than making these presentational edits to the CSS where they really belong.

“But you could easily do that with a find/replace. Quit yer bitchin'.”

Ok, that's true. I see your find/replace and raise you a redesign requiring a horizontal primary navigation menu. If you're keeping your markup all Zen-like, you edit one file and the changes magically appear site wide. You might still conceivably be able to pull off such a change with a few find/replace operations using Blueprint (or any other grid based CSS framework using presentational class names, I'm using Blueprint as an example but just about everything I've seen suffers the same flaws). But it would take some pretty complex work. And even running find/replace across hundreds of pages of markup is more work than changing a couple of rules in a centrally located CSS file.

But this is a lot like how I felt about js frameworks vs. rolling my own unobtrusive DOM scripting before I found jQuery. I knew there was potential there, but I just wasn't seeing enough trade off in benefit offered in exchange for giving up so much control of my code. It helped the jQuery applies CSS style selector logic to scripting and thus meshed well with the way my brain already thinks about these things. I imagine if I had both the time and talent required to build my own js framework, it would end up working a lot like jQuery. I have yet to experience that with a CSS framework.

Exploring the Potential

I haven't taken an in depth look at everything yet, but there are two CSS frameworks that managed to not send me running away screaming after mere moments of peaking at the source code of the available demos.

The language used to introduce the concept on the home page for Boilerplate is enough to get me findin' religion.

As one of the original authors of Blueprint CSS I've decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You're the designer and your craft is important.
If you prefer:
 { float: left; width: 240px; margin-right: 110px; }
over
class="column span-2 append-1"
then you're in the right place my friend.

Yes! But wait, it's only at version number 0.3 and it looks like that version is nearly a year old. Is my best lead effectively abandonware? That makes me a sad panda. Still, it may give me a good place from which to start future projects. Let's download this bad boy and take a look under the hood.

Not significantly different from Blueprint. I see an almost identical typography.css file, down to the somewhat uncomfortable .small & .large. There's also .quite, but no .loud. I'm also seeing a pretty basic reset.css (I personal prefer to slightly modified version of Eric Meyer's Reset Reloaded), a small collection of basic IE hacks in ie.css, and a few form styles that aren't really enough to save me significant time vs. writing my own from scratch or cannibalizing my own back catalog.

While Boilerplate avoids going deeply enough into the realm of presentational class names to catch my ire, I'm not seeing much in the way of benefit here either. At least with Blueprint I could wireframe something up in a day to show to a client, even if it's not the sort of thing I would want to put into production. I see nothing mind blowing here. Maybe if it ever hits version 1.0 I'll take another look. :(

Moving on to Content with Style. Yes, this is better. But it seems more like a philosophy more so than a true framework. Maybe I'll feel different after checking out the source code. This also hasn't been updated in just over a year (and then only once, and that wasn't really a change to the code at all, just a license addition). That also contributes to an overall feeling that I'm better off applying the underlying ideas to my own design work rather than using these exact files. But that's pretty much how I feel about Blueprint. I can figure out which classes would apply to a given element in the design I aim to achieve and rather than apply those class names to the element I could simply apply the styles for that class to whatever semantic class or ID I use for that element. The philosophy is sound. It's just the execution that leaves a bad taste in my mouth.

Looking at the code feels a lot like looking at my own code. But rather than feeling like the epiphany behind jQuery, this just feels like a slightly more systematic method of reusing the code snippets I've been using for years. It's far from bad. It's quite good in fact. But it's nothing I couldn't do myself. And by doing it myself it will mesh better with the way I approach things and thus be more usable and useful.

Why I Care

My biggest concern is that those currently learning CSS will fall back on these frameworks to save time for things like class projects or one off work for portfolio fodder. In those situations, giving up the separation of content and style to gain a bit of agility is probably justified. But I fear that in the process the vast majority of the next generation of web developers will miss out on the philosophical core of web standards. I think it could set back the industry, right at the time when I was finally starting to feel that education (both formal and informal) was starting to get things right in this industry.

Or maybe I'm chicken little and the sky isn't really falling.

My personal knowledge management problem

2008-12-10T15:00:00.003-06:00

Full Disclosure:

This post and probably a couple of future posts will serve to fulfill a requirement in my graduate course on knowledge management. But I'm trying hard to approach this in such a way that such requirements are totally transparent asside from this note. Maybe I'll pull it off and this will bear some interest for folks other than my proff. Or maybe I'll totally drop the ball and not engage anyone with this content and totally screw up the assignment to boot. If so, maybe I'll at least fail spectacularly enough to get some good schadenfreude going.

I tried going through the exercises Kirby put together. The basic goal is to figure out which tasks I perform as a knowledge worker bring the most value to my organization, then figure out how much of my time I spend on those tasks vs. less valuable tasks, then try to maximize the time I can devote to the valuable stuff and minimize the time wasted (although that's a slightly harsher term than it needs to be in this context) on less valuable tasks.

I'll be honest, I don't think those exercises work for me right now. There's a couple of reasons for this.

I'm 18 months in to this job and the task that has dominated my time thus far, redesigning the website (we launched the beta by the way, I don't think I took the time to announce that officially here, although I did on the Vol State blog), is not typical of the work someone in this position would be doing otherwise. Once the redesign launches, the way I work will shift, rather radically. It's hard if not impossible for me to look at the last 18 months and make conjectures for the next 18 months.
The biggest drain on my productivity falls outside of my realm of influence; IE it's a trend I am powerless to address. I won't go into detail here but Kirby if you want specifics just email me and I'll fill you in.

So I've been looking at the way Kirby breaks down his model of personal knowledge management and one area I see a lot of room for improvement in the way I currently handle things is with information organization and retrieval. The sad part is I've been sitting on the tools to address this issue for years. I just need to be mindful of how I use them.

I signed up for a Ma.gnolia account back when they were still in beta. I used it for a while, then I found Stumble Upon (hereafter: SU). My thoughts at the time were that SU did all the social bookmarking stuff I had been using Ma.gnolia for with the added element of discovery of new content at the push of a button. That's true in theory. 2 years later, it's obvious that it falls apart in practice.

SU does the whole discovery thing very well. I don't think I ever would have found jQuery without SU. I had been underwhelmed by the JavaScript libraries I had seen during the first few months of that whole buzz and had pretty much written off the whole idea. I was just gonna stick to writing my own custom unobtrusive JavaScript using the Document Object Model. Now I literally use jQuery every day. My job would not be the same without it.

But I discovered jQuery at a time when I actually had the time to take on the learning curve, as gentle as it may be. The official documentation is complete enough that managing access to the information I needed to direct my own learning wasn't an issue either. The only exception I could find to that would be the plug ins, but truth be told if the plug in doesn't make intuitive sense and isn't well documented, I don't use it.

Compare that to some things I hope to learn more about in the near future, such as Drupal and Cake PHP or Perl. Or even compare it to some of the stuff I'm already using but need to reference source material rather than working from the top of my head, like regular expressions and PEAR or Active Directory. Now we're talking about steeper learning curves just as what little time to learning new skills is shaved away as I try to push the redesign through the beta testing phase and into launch. I keep stumbling onto sources for these topics, but lacking the time to fully digest them, I thumb them up and move on.

Ok, that last statement begs the question, if I don't have time to digest this stuff how do I have time to keep stumbling onto new content? First of all, SU is addictive. On top of that, it's so easy to just click the stumble button (with or without specifying a topic to stumble through, such as web design) that I can click through a fresh page or two while I'm checking in the files I just completed working on in Dreamweaver (hereafter: DW). Or while I wait for DW to generate the broken link reports I've been running lately. Actually, now that I bring that up, I really hope DW performs better on the redesigned site. The current site is such a mess of spaghetti code that DW is prone to take its sweet time or even crash when I ask it to perform a site wide action. The redesign is much leaner. Based on the work done so far, the code we shave off should be equivelant to about 68 copies of the complete works of Shakespeare. No, really. Project Gutenberg has the complete works of Shakespeare as a plain text file. I've done the math. :)

This is where the problem comes in. I find these great resources, or at least potentially great, but going back to find them later gets to be a real pain. Sometimes I don't take the time to write my own tags for a page. I just thumb it up and switch back to DW or click the stumble button again. But SU being socially driven, the tags default to the category chosen by the person submitting the site. I currently have 143 stumbles tagged with “graphic-design”. I'm not a graphic designer. I don't really even consider myself a web designer. If you want to split hairs, I consider myself more of a web developer. When I tag an article relating to design, I use “web-design”. I've got 418 of those. But it's possible I didn't personally tag all of them. If the person submitting them tagged it as “web-design” and I just thumbed it up and moved on without bothering to apply my own tags to it, then that's how it would default. It's obvious that graphic design is a pretty popular tag in the wild and the zeitgeist is polluting my tag cloud.

An Example

Over a year ago (November 1st of 2007 according to my SU history), I stumbled upon Scott Jehl's StyleMap script. At the time I thought, “This is how we need to do the org charts.”. Previously we had done the org charts in Microsoft Viso and then those files were exported to HTML. But that produces a tangled mess of frames and images. It's hard to navigate, hard to maintain, and doesn't even work on my Mac (thanks Microsoft). I thumbed it up and moved on.

In October of this year, I finally turned my attention to the org charts for the redesign. I remembered stumbling upon this script a long time ago that would be perfect. But I couldn't find it in my SU history. I tried Google searching every combination I could think of. I literally wasted an entire day trying to find this script.

The problem was the default tag the page was assigned had nothing to do with how I conceptualized the content of the page. I don't even remember what it was now and I have since gone back and edited the entry with my own tags. Google wasn't working because I had forgotten that it was written as a script to do site maps rather than org charts. To add insult to injury, when I finally dug up the article and tried to put the script into use, our org chart proved to be way too complex. But I could have discovered that in an hour had I not wasted an entire day (and part of the following morning) digging up the script.

The Problem

Partly due to flaws in the way I use it, and partly due to flaws in the way it's designed, SU is failing me as a means of efficient information organization and retrieval. In defense of the development team behind SU, it is designed more as a discovery engine than as an organization tool. And I can't sing enough praises as to how well it performs its core function.

The Solution?

So I turn my attention to my neglected Ma.gnolia account. If I start using both these tools to perform the tasks for wich they were designed, and approach my use of these tools in a mindful way, I think I can milk a lot more productivity out of my days. I'll map out that plan in a future entry. Stay tuned.

When it rains it pours

2008-12-05T13:17:00.003-06:00

Getting caught up on my blog reading, which always gets me thinking, and once my comments to the entries of others grow longer than the entry to which I am replying, I figure I'm better off putting it here.

I have both a 2 year and a 4 year degree in web design. As in, the word “web” is actually printed somewhere on my physical degrees. One says “Web Development Technology” and the other says “Web Design”. I got a lot out of my education because the timing and my mindset were right for it. I had a few years of field work under my belt, so even when the course work did a crappy job of tying the concepts to real world examples I was able to fill in those gaps.

The downside is at the undergraduate level classes have to assume no prior knowledge on the part of the student, at least nothing above and beyond what is taught in high school. In other words, the first few classes assume you can type and that's about it. The problem there is some of the most promising students will be turned off early on in such a program, say to hell with it, and go get a job with the basic skills they already have. The other edge of that particular sword is you quickly go from the early hand holding courses to being expected to understand stuff like the OSI Model or object oriented programming in detail. If I were playing a video game with a learning curve that steep, controllers would be bouncing off walls, likely in multiple pieces. But my prior experiences made things more manageable and I was mentally prepared for the challenges that came up.

A lot of people would not be. That doesn't make them bad people or somehow less intelligent than me. If anything it indicates that the traditional academic model is poorly suited to cover highly technical disciplines like web design.

I say the timing was right because the 2 year program had just entered a stage of growth and was updating its curriculum to be more relevant. The first semester I was in that program the textbooks and course materials were very 1996. Browser sniffing, tables for layout, optimizing animated gifs; scary stuff. By the time I graduated they were offering classes on CSS and XML. Still far from cutting edge, but they managed to advance their curriculum about 7-8 years in the 3 semesters I was there. The problem is the nature of most colleges and universities make it very hard to do such changes more often than once a decade or so.

The 4 year program was brand new. I'm the 6th person to graduate with that degree. Since it was so new, the curriculum had not yet had time to get stale. The director of the program was also both knowledgeable and passionate, and he personally taught most of the core classes in the program.

In a single lecture we might start out talking about the Iliad and how it's an example of an epic, then move in to how the structure of an epic is guided by oral traditions. And just when you're starting to wonder why the hell we're talking about this stuff in a class on web design, we shift to talk about how communication on the web shares a lot of characteristics with oral communications (you and I are having a type of conversation right now). From there we talk about how the structure of an epic poem can be seen as an early prototype of hypertext with the various ways the narrative loops back on itself and includes passing references to other epics from the same cannon. And I use phrases like "we talk" for a reason; the courses were very much structured around discussion and team work. I learned more from my fellow students than from the professor and that was by design. My current graduate program hasn't managed to pull together ideas as seemingly disparate in 2 years as Bob routinely did over the course of an hour.

But literally the day I graduated the director of the program packed his bags and drove several hours north to become the new Director of Graduate Studies at Empire State College in Saratoga Springs, NY. Without his leadership, I don't know how well the content of the courses will be kept up to date or how well the structure of the courses will translate to new professors covering that material. I'm very lucky to have gone through the program when I did.

Antique Browser

2008-12-05T12:16:00.003-06:00

What reminded me to come back and complete that last post is a response I wrote in yet another design blog. The thoughts that lead to that reply were obviously inspired by the ideas that have been kicking around in my head for the past month while my last post was locked in draft stasis. I'll go ahead and share those thoughts here as well, slightly more detailed than in my reply to Raymond's entry on hating IE6 (I took the time to do the math).

I was thinking just last night that an appropriate metaphor to explain to non-techies why IE6 sucks would be to compare it to an antique car.

The Model T was not the first car, and Mosiac was not the first browser, but both brought those particular products into the main stream an birthed industries to support them. So we’ll use those are our anchor points for comparison.

The first Model T rolled off the assembly line in 1908. So the automobile as we know it is 100 years old this year. Mosaic was released on April 22, 1993. Today being December 5th, 2008, that makes the modern web browser 15.6226243 years old. IE6 came out August 27, 2001, so it is 7.274739 years old. That means IE6 is 46.5654096% as old as the modern web.

If you were driving a car manufactured in 1963, would you expect to meet modern safety standards? Would you expect to pass modern emissions testing? You couldn’t use a modern gas pump without using an artificial additive to replace the lead that was commonly added to fuels 46 years ago. There’s a reason most people who own antique cars usually drive them only to auto shows or for the occasional pleasure cruise and don’t use them for every day driving. If you drove such a car the typical 1,000 miles or so a month, you would expect to pay much more in maintenance costs than someone driving a newer model.

The primary appeal of an antique car is the cool factor. They offer styles not available in the modern market and you just look cooler behind the wheel of a cherry antique than just about any modern automobile. No one is impressed by your antique browser. So why are you still using it?

Charging more to support craptastic and/or old browsers

2008-11-13T12:46:00.007-06:00

Good God. I literally started writing this entry a month ago, got busy, and left it suspended in draft mode for ages. Let me brush off the dust and get this bad boy ready for publication...

This started as a reply to a post from Philip Beel, which was in turn explaining his thoughts in response to item #10 on Ten Web Development Tips I Wish I'd Known Two Years Ago over at hackification. By the time my comment hit it's 6th paragraph, I figured I'd be better off just putting my thoughts into my own blog post. Ain't the web grand?

Philip says in part:

Consider that you were sold a car, but told you could only drive it on motorways, as the wheels may fall off if you drove it on any other roads.

But I think that's the wrong way to look at the situation. My thinking is a bit closer to the hackification article, which states in part:

Explain to the client that since older browsers work in a different way to modern ones (which they do), that’s extra work and hence extra cost. (I’d suggest approximately 10% on top). Explain that IE6 has approximately 25-30% market share, and let them make the cost/benefit call. Money has an amazing focusing effect: it forces people to really think about what they want and need. (emphasis added)

As designers, we're concerned with stuff like use experience, so we tend to think of things in terms of the end user/consumer. But our clients are often business people, so I think it's more effective to talk to them in the language of business people.

I think the “buying a car that only works on motorways” example wouldn't work well on most clients. The situation is more akin to opening a new convenience store 7 years after the last gasoline powered car has rolled off the assembly line. Would you want to take on the cost of installing and maintaining a gas pump for a market segment that is no longer in the majority and will be forever dwindling? Even installing just a single pump alongside the hydrogen system (or quick charge stations or whatever the new technology happens to be) would require redoing a lot of the same type of work. The systems aren't interchangeable or compatible. There would be redundant systems; more things to build and eventually need repair.

I think most clients would understand that analogy. It probably would not be hard to come up with one more targeted towards their own business model.

But another problem is that consumers are better informed as to the cars they drive than the browsers they use. The owner and employees of the hypothetical fueling station above would probably never have to deal with an irate customer who doesn't understand why the hydrogen hose or quick charge plug won't fit into his gas tank. Sites like Browse Happy can come in handy for educating consumers, but the kind of people who are the most problematic (don't even realize browsers and other software are entities separate from “the computer”, never update whatever shipped with their operating system, etc) are the least likely to go there or truly understand the content once they get there. So the ethical considerations are still not dodged.

But I think the ethical issues are drastically different from the issues involved in getting clients to understand the cost associated with “supporting” old browsers. And a lot depends on how you define “support” as well.

If you want the 0.1% (or hopefully even lower than that) of folks still surfing on Netscape 4 to be able to use some Ajax based enhancement, that's gonna take a heck of a lot more work. What's the return on investment of that work? Expecting the 21.53% (and dropping) of IE6 users to see rounded corners exactly like what someone on Safari 3 sees is like expecting a 1993 Geo Metro to handle and perform just like a Tesla Roadster.

In my current work with jQuery, I'm noticing drastic performance difference even between IE6 and IE7. The features work in IE6, but it's not as smooth nor as quick. With the move towards just in time scripting execution in Google Chrome and future browsers, such performance differences will become even more noticeable. So what's the acceptable level of differences in appearance and performance from browser to browser? That will change from project to project, but the price tag for the work we do needs to also change to reflect the shift in work load (be it up or down).

Let's hear it for the girls

2008-09-23T10:49:00.002-05:00

In the past 10 issues of A List Apart, 17 authors have been featured (not counting 2 articles penned by “ALA Staff”). Of these, 8 have been women. I'm not sure if that's due to a conscience effort on the part of ALA to pick up the slack on the (perceived) gender bias in the industry or not. Either way, I think it's pretty cool. I know some of these ladies better than others, but they seem just as knowledgeable and respectable as their male counterparts and I'm glad to see them getting some exposure.

Not like that. Get your mind out of the gutter. And hand mine up to me while you're down there.

In mildly related news, Happy Cog, the design firm founded in part by ALA founder Jeffrey Zeldman, recently launched a redesign for Books-A-Million. I was a lowly cashier / customer service agent at a Books-A-Million store for about a year following my marriage and move to Knoxville (now one of my least favorite places on Earth). This was 2001-2002 and even by the standards of the day their site had some issues, particularly in usability. At the time, it seemed the corporate culture was pretty clueless about technology. Everything from the way inventory was managed to the point of sale system to the tech books we carried on the shelves seemed to showcase this. Maybe that culture has shifted in the past 7 years. Then again, somewhere between delivery (at which point design studios lose control of their creations) and launch on the BAM servers, over 800 markup errors have cropped up in the home page alone. So maybe they're still just throwing money at their problems without taking the time to understand them. However, Happy Cog's case study of the work makes it sound like BAM had a lot more of the legwork done than most client would on a project like this. Obviously a few people in the organization “get it”. Here's hoping they can lead the company in the proper direction.

The joys of debugging

2008-09-12T07:41:00.004-05:00

Looking at other people's code can be enlightening. I've been looking for an excuse to try out Benjamin Keen's smartlist plugin for jQuery for a while now. (The jQuery website was recently redesigned and is even more awesome now.)

One of the most important questions a potential student may hope to answer on our website is “Can I get the degree I want?” Actually, it's probably a bit more abstract than that. I know when I evaluate schools, from my own time at a community college to my undergrad days to my current graduate program, I care less about the degree than I do about the topics covered and the skills developed. I care about the topics because if I'm going to devote a couple years of my life to a program, I want to make sure it will hold my interest. The skills are important because ultimately that's what gives me an edge in my chosen job market. I doubt anyone surfs over to our website specifically looking for a degree in biotechnology, but s/he may have an interest in chemistry and biology already and may be considering a career path where such a degree offers a competitive edge.

In it's simplest form, this question could be written as “What do you have to offer me?” (The only question more important than this one is probably “How much will it cost me?”) Each student evaluates that question through criteria specific to his or her needs, wants, and experiences. The form of this evaluation follows traditional models of interpersonal communication (that is, a spoken conversation) more so than print materials. We really need a new model for a new communications medium, but I'll leave that for this generation's Peirce or McLuhan or Leary. (No, really. Leary wrote and lectured on cyberspace and virtual reality after the whole LSD thing blew over.) In the mean time, the idea of a conversation fits better than the idea of a book or newspaper article.

If you've taken a look at the smarlists demo you may see where I'm going with this.

The ability to tag (or flag, as Ben calls it) the items in a smartlist can foster the sort of back and forth communication that the web thrives on. This is something that will need a lot of testing, of course, because the initial set of tags may not fit the words in the minds of our students. There's also a careful line to walk between providing enough tags to make the ability to sort through the data useful vs. introducing a new flavor of information overload. It's very experimental, but I think it can be done right and I think it can be a great help to our students, both current and potential.

So yesterday I actually started building this new application for the redesigned site (still only available via IP from on campus, I'll link it here once we publicly release the beta). The first thing I notice is the demo uses a table. I furrow my brow, thinking a table isn't necessarily the best way to approach this as far as semantics go. I look a bit closer and realize the plugin is written in such a way to allow me to use any html tags I want. I just need to apply the right classes to those elements so the script knows what everything means. Ideally, I'd like to use a definition list. But that would require me to wrap each <dt> / <dd> set in a <div> since the script expects the list of tags (or flags) to be a child element of (that is, contained completely inside) the element defined as an “item”. I don't think a <dl> likes being filled with block level elements like <div>s between itself and its children. I could do a definition list per item, but that seems like over kill. Eventually, I settled on an unordered list with a few paragraph tags inside the list items and appropriate classes scattered throughout.

I build enough of the list that I feel it's testable. In hindsight, I should have built the smallest possible test case, something like 3 items and 4 tags. Everything worked fine as long as you clicked links. Pagination worked. Filtering by clicking on the tags worked. Resetting the list by choosing the default option on the drop down list also worked. Selecting a tag from the drop down resulted in all items being hidden. Strangely, the pagination still worked. In other words, if the list is showing 10 items per page, and you select a tag with 25 items, you get the links for 3 pages just like you should. But all 3 pages are blank. I run in to this particular error around lunch time yesterday. I pour over the code for about 3 hours looking for differences between my local, broken code and the functioning code published with the demo. It appears to be exactly the same, and it should be, I downloaded from the source, right?

Eventually, I check the jQuery code on the demo. That's version 1.2.3. I'm running 1.2.6 (actually just one revision removed, 1.2.4 and 1.2.5 were skipped for various reasons). I ran into a similar problem with a plug in when 1.2.3 was new. Back then I found a page in the documentation that explained exactly what functions were changed and how. That made it very easy to discover a couple of functions were being called that were no longer available. I replaced those 2 functions with the new single function that supersedes them in the new version and was back up and running in less than an hour. This time around, I the documentation on the changes (short version, full version) between versions was less helpful. :(

But at least now I know it's a problem due to changes in the most recent version of jQuery. Now I feel justified in contacting the author directly. I use the form on Ben's site to contact him, explaining what I've found so far so at least he knows I tried to fix the problem myself, and ask if he has put any work into updating the plugin that just haven't been published to the site yet. I go back to troubleshooting for about half an hour before I bother checking for a reply. Turns out that was a mistake because he replied almost immediately. He said I was the 3rd person to write him on the same issue and it seems to be a change to the inArray() function but he hasn't tracked down the exact nature yet.

I start to reply talking about how that doesn't seem to make sense because I had just read over that bit of code in the half hour since I first wrote him and the inArray() function is called the same way no matter which event triggers the action. Since it works fine when clicking a link but fails when selecting from the drop down menu, the problem has to be related to the triggering event. But the only place I can find where that makes a difference is the way a specific variable is set. I checked the state of that variable after it's set using either method and it contains the proper value. These are the thoughts going through my head as I begin to type my reply, but I don't quite make it that far. If you've got any experience debugging JavaScript or any other loosely typed language you may have figured this out already too.

The problem was the variable was a number when set by the click event, and a string when set from the drop down menu. The default value worked because it's a string rather than an index number.

You know what? I just realized that the fix I made last night introduces a new bug. I was just casting the value via the Number() function, but that screws up the default string value. Crap. So the full fix is an if statement checking for the default value and casting if it's not found. I'm off to make that change and then hopefully I'll be done.

Look for updated code to hit Ben's site in the not too distant future. :)

One Week Only!

2008-07-17T11:44:00.002-05:00

Do you like...

Neil Patrick Harris?
Nathan Fillion?
Joss Whedon?
comic books?
musicals?

Personally, I hate musicals, but I still love Dr. Horrible's Sing Along Blog. Maybe you will too.

But you'd better hurry, it's only available online (for free) through Sunday.

Google is so awesome

2008-06-23T17:07:00.004-05:00

Seriously. I keep waiting for the other shoe to drop. How can a company be this cool, constantly, at no immediate cost to me? Have you seen the Google AJAX Libraries API? Nothing I can say here can do it justice. Just follow the link. I'm gonna try using this to load jQuery in the redesign.

ARGH!

2008-06-05T14:46:00.003-05:00

Ok, I make an honest effort to keep this blog as positive as possible since it's my professional / educational blog. I have other haunts I frequent in order to discuss things like sex, politics, and religion. Here, I try to stick to the sort of thing that I don't mind someone reading before they call me in for a job interview (or chose to not call me). But sometimes things happen that are related to the topics I try to cover here that I feel justified in sharing here. Today, such a thing happened. I got to see some of my previous work butchered.

This has actually happened before, on the same project. Of course, I should know once the product is delivered to the client all bets are off. I should know better than to even go look. It can't possibly end positively. But like rubberneckers at a train wreck, I just keep going back to look again.

Let me give you a little background. When I went back to TTU for my degree in web design (oh crap, that page has been ruined since I left too), I had a job at The Technology Institute. I don't think they do it anymore, but back then they'd actually take on programming projects either for the TTU campus or for our sister schools or for the Tennessee Board of Regents. TBR governs both the 4 year state schools like TTU and the community colleges, like Vol State, where I currently work. They also just launched a redesign, and it's decent. A vast improvement over their old site. I don't care for nested drop down menus though...usability and accessibility nightmare.

When I first started the job, we had one major project that had been in process for nearly a year. It was for TBR. The idea was sound. They wanted a site where prospective students could research what degrees are available at TBR schools and what jobs are associated with those degrees. So if you know which school you want to go to, you can browse their degrees and plan for your future career based on that. Or, if you have a career in mind but don't know which schools you should apply to, you can navigate the system based on jobs and work in the other direction. Or, if you just know what you want to major in, you can find schools and / or future careers. It's a pretty simple relational database issue and it makes intuitive sense to the target audience.

When I came on to the project:

The database was built but sparesly populated
Accounts were funtional, but most were inactive.
Account management and data entry forms were built and functioning.
The front end interface was built.
The lead PHP developer had just dropped out of school to take a job in Nashville.

We had a pretty good LAMP project going. It was built by students, and it showed. But we fixed our mistakes. We got to learn about the importance of normalizing a database the hard way. That probably took the most time. :)

The role I took was largely adding performance enhancements. I replaced the tables with a pure CSS layout. I wrote my first unobtrusive javascript, replacing literally several hundred lines of Dreamweaver generated scripts with about a dozen lines of code. I assisted with some MySQL and PHP clean up. I added a couple of functions that required creating new admin forms. I performed final testing (unfortunately, not with “real” users) and delivered the product to the client. By the end I was pretty comfortable with the project aside from the icon based navigation.

There are 16 job categories, each with a few sub categories. I think there was something like 83 in total. Rather than expressing these as text, each category and subcategory had an icon associated with it. I knew that introduced a high probability of misinterpretation of the navigation, adding to the learning curve. How do you communicate an idea like “Construction Plumbing” in an 80 x 80 pixel icon? But I also knew how much work went into those icons and didn't want to deny the graphic artist her moment in the sun.

About a year after we delivered, I surfed over to take a look. I had just taken my current job and was reviewing the examples of my work cited on my resume. The front end was completely different. All my CSS and javascript work was gone. The graphic designer's icons were gone. But functionally it was all still there. So I could at least tell myself I still contributed to a site whose purpose I believe in. Even if it was all back end stuff that no employer could look at in any meaningful way, some of my work was still there.

Today I'm looking for broken links in our “helpful links” page maintained by our career placement office. One of the links goes to The Tennessee Career Information Delivery System. The project I worked on lives on a different sub-domain of that same server farm, so I replaced “tcids” with “pathways” to check it out again.

Apparently the table that stores the 16 job categories and the table that stores the sub-categories still exists. The rest is gone. The Admin link doesn't even go anywhere. Once you get to the level of sub-categories, a whopping 1 click into the system, rather than being able to drill down any further and get info on degrees and / or the schools offering those degrees in your browser, you are prompted to download a .xls file. The meat of the database has been replaced with flat Microsoft Excel files. This pains me greatly.

The only surviving evidence of my involvement in this application is the HTML comment found on line #23, in reference to the IE whitespace bug.

I pretty obviously wrote that. I'm not sure if the placement on line #23 was intentional.

Looking for Applications of Social Capital

2008-05-26T21:23:00.002-05:00

I could talk about how I hope to launch the redesign at work and then start making my rounds on the conference circuit. But that seems a bit obvious, and also doesn't do much with the technology side of the equation of the course material.

So instead I've been thinking about what I can do at work to help incorporate these ideas into our own website, either as part of the redesign or as an area of further growth after the redesign is over. I'm not really sure if there's much point in trying to build a custom application. There's no sense in trying to out-Facebook Facebook. But maybe just getting some of our offices such as Career Placement, Cooperative Education, and the Small Business Development Center active on a site like LinkedIn and offering training to their “customers” (that seems to be a dirty word in higher ed, but I think to deny that side of our relationship with the study body leads us to mentally separate the connection between us meeting their needs and us getting a pay check).

I've worked this job long enough to know where the technophiles are, and in this situation they're not where I need them to be. This line of reason my get derailed before it even has a chance to leave the station. I guess I could try to subvert the system and take things straight to the students. But how? I mean, if there's any sort of training I want to offer to employees I've got professional development day at least once a semester. There's nothing like that for the students. There's no way to work this into the syllabus of a pre-existing class and without a PhD I won't be able to create a new class of my own. What we really need is to incorporate some basic digital humanities ideas into courses like English 101 and 102. That's something Dr. Clougherty tried to pitch back at TTU but it wasn't very well received. He was extremely lucky to get the web design program passed all the bureaucracy, but ultimately I think it was the constant fight to get even that much innovation introduced on campus that lead to his seeking greener pastures. Vol State might not be quite so resistant to change as TTU simply by virtue of being a 2 year school, but exactly how much is it worth to purposefully swim against the current in an educational institution? Ultimately, I love my job and I'm quite happy here. But couldn't picking the wrong battles do a lot of damage to my quality of life and job satisfaction without adding any real value to the students?

So I think the first step is to look up data on the rate at which our graduates find jobs. I may be dreaming up solutions for problems that don't even exist. I'll try to get my hands on some figures for both graduate employment and retention rates. Maybe I can find a couple of academic departments who would be willing to pilot a program using social media to keep their students connected on and off campus and on into their careers. I think the secret to success in organizations traditionally resistant to change is to not just tell them a better way to do thing, but to actually show them a better way. The down side is you end up often asking for forgiveness after the fact, rather than for permission before hand. Then again, is that really such a bad thing?

Social Capital and the Cohort Model in the MACT Program

2008-05-20T18:26:00.004-05:00

I've been thinking about social capital and how it applies to our cohort. More than a few people have observed that for many of us out of towners, the end of this year's Spring Institute could very well be the last time we see each other face to face. There's even been half-joking suggestions of doing our own Spring Institute in Las Vegas in 2009, although probably not the full 3 weeks. :)

We talk about these things and we worry about these things because the cohort model allows us to make meaningful connections with each other. I think that's an important element of education in general. My undergrad program didn't exactly have a cohort model, but at the time I graduated there were only 60 or so of us in the major so I had shared classes with the few people who graduated before me and just about everyone with 2 or fewer years left to go. Many of us stay connected via Facebook or what not, even pointing out job listings to each other. We're in the same industry so that sort of things is easy.

But, that's where the social capital of the MACT program starts to break down. We're not all in the same industry or discipline. I assume, and this may be naive of me, that in most masters programs, with or without the cohort model, students can expect a good chance of crossing paths after graduation simply because everyone will run in the same professional or academic circles. Students getting a masters in Digital Humanities will probably frequent the same conferences for years to come. I don't see that happening with MACT students (or at least not in my cohort).

We've got people working in higher ed, civil service, banking, project management, IT, mass media, public relations, web development, law, graphic design...

The nature of our research projects seems to reveal the same trends. I won't know for sure until I see all the posters on Friday. In fact, that may not be enough either since we're able to change what we're doing after the poster presentation session. But based on what I've seen so far, we get a few similar groupings. I can think of at least 3 people who are looking at millennials in the work place. But they've got different approaches and varying research methods. There's a couple people using content analysis, but they're looking at radically different research questions in largely unrelated contexts. Even those of us focusing on web technologies are employing different research and philosophical lenses.

I think educationally this is one of the strengths of the MACT program. Discussions tend to be rich with idea generation as we bring our various backgrounds and understanding to the table and bounce ideas around. But this same multi-disciplinary approach robs us of a certain level of long term social capital. I wonder if the stronger ties facilitated by the cohort model will stand the test of time without the occasional reenforcement of weak ties found in chance encounters “in the field”.

Das Sozial Kapital

2008-05-12T19:02:00.003-05:00

First of all, on the off chance that anyone reading this isn't currently in the MACT program at the University of Alberta, you may need to spend a little time on this site or maybe Wikipedia entry on social capital to follow this. I'm using this blog to meet course requirements, because I am both innovative and lame, the two great tastes that taste great together.

I'm still confused as to exactly what social capital is and what it is not, but looking at the literature it seems I'm not alone. Just about everything we've read in class, and some of the stuff I've read outside of class on this topic, include some sort of definition for the term. Often they go back and cite Bourdieu or Coleman or Putnam.

I understand the arguments against Putnam's definition as inviting circular reasoning. His proof-is-in-the-pudding approach seems to equate social capital with success, then cites that success as evidence of social capital. Being a southerner, I've seen such ideas used to justify “New South” racism. This is particularly true when a few examples of “successful” minorities can be cited as “proof” that racial inequality no longer exists, therefore anyone “playing the race card” is just making up excuses. Their lack of success is evidence of some sort of character flaw because framing it in those terms means it's not racist, even if those terms are being applied to the majority of the members of that race. Not to imply that Putnam himself is racist, just that I've seen similar lines of thought abused for such purposes.

Portes seems to be the only one to call shenanigans on Coleman for his definition. Maybe I'm the dense one here, but this is so close to meaningless as to be functionally worthless to me:

[Social capital is] “a variety of entities with two elements in common:

They all consist of some aspect of social structures, and

They facilitate certain action of actors – whether persons or corporate actors – within the structure.

Aren't we dealing with “social structures” any time we're dealing with 2 or more people? And since we're all people, doesn't that mean that we're dealing with social structures anytime we're dealing with even 1 other person? Some would even make the argument that social structures exist among various elements of ourselves either because our sense of identity itself is a social construct and/or the social elements of language that permeates our inner dialog and idiolect. And what the hell are “some aspects”? Can we be more vague there? And they “facilitate certain action of actors”? Really? Reminds me of “certain substances”:

That leaves us with Bourdieu's definition, which I'm still not completely clear on. I know he differentiates between the resources and the access granted to them, which helps steer clear of some of Putnam's circular reasoning. For example, say I'm a white male from a prominent family in a small town and I know that if I attempt to start my own business and fail, my family won't let me starve. This knowledge encourages me to take more risks than I otherwise would and luckily for me those risks pan out, making me quite successful. I never had to tap into the social capital afforded me by my family's status, but there mere knowledge that I could contributed to my success in significant ways. I think that's an instance of social capital that Bourdieu's definition covers but Putnam's does not. Coleman's definition seems to cover just about anything I can imagine.

But I could be mistaken. The biggest part of Bourdieu's definition that I'm left unclear about is do you have to access some more traditional forms of capital via social ties for it to count? Obviously, if the same guy in the hypothetical situation above got an interest free start up loan from a family member, that would be social capital, even under Putnam's definition. Also, when I was looking for my first job after I got my undergrad degree, I turned down some higher paying positions because I knew I would be less happy in those environments. Is such at-work happiness social capital even if it doesn't necessarily lead to increased productivity? It's a boost to my quality of life, but is that alone enough? Things that are hard to put into monetary terms are equally as hard, in my mind, to judge as social capital (or not).

Got 16 Minutes?

2008-05-01T08:54:00.001-05:00

Watch this:

Don't have the patience? Read the gist of it here.

Are we as a society slowly awakening from a TV induced stupor?

Why jQuery Rocks

2008-04-29T13:11:00.004-05:00

As a lazy developer, I love jQuery. I'll try to enumerate my top reasons:

It's among the smallest of the full featured javascript libraries. So I don't have to worry about adding a lot of overhead to my pages to use it. For example, minified and gzipped, jQuery is about 15k. Dojo is about 24k, which, I admit, it still pretty impressive.
jQuery does tons of cool stuff out of the box and doesn't require me to understand complex extension packages (moo tools and the Yahoo! User Interface Library are the most extreme examples I can think of).
I can call functions as soon as the DOM is ready. (What's the DOM?)
Simple, CSS style syntax for selecting elements combined with chainable functions allow me to write in 1 to 5 lines what used to take 12 to 50.
jQuery's also got some great plug ins.

Of course, not every plug in available is amazingly awesome or even a good fit for every project. In fact, some of the best, in my opinion, have a very narrow, targeted application. Today I was asked to create an image gallery from a collection of 50 shots taken at the graduate awards ceremony Friday night. In the past, we've used Flash to make our image galleries. I suck at Flash, so I'm sure it would take me all week to recreate something like that, even if I had a basic template to go by. I have no idea how long it took Ken (former webmaster, current director of public relations and therefore my boss) to generate something like that. But I figured I could whip up something similar in jQuery in an afternoon.

There are lots of image gallery plug ins for jQuery. I wanted one that looked impressive while being easy to navigate and not so flashy as to distract from the images themselves. I also wanted something that required nothing but a list of images identified by an ID or class. The idea there is, if someday move to a CMS, the end users could build a gallery by simply adding the class (or ID) to a list of images. That's the sort of thing we could easily cover in training. It helps that as of right now my favorite CMS is Drupal, which comes pre-packaged with jQuery.

I looked at slideViewer, but I like thumbnails. I looked at jqGalViewII but for this particular application I don't want to spend time generating my own thumbnails. Then I looked at Galleria and this seemed to be the best fit for my immediate needs.

It took about 15 minutes of code work to repurpose the key elements from the demo page for our needs. That includes time spent minifying the javascript and uploading the external files to the server. I changed a few color values in the CSS, altered the fonts slightly, linked in our images, and had a fully functional image gallery in less time than it took to crop the images. The only snag I ran into was the preloading function wasn't working properly in IE (curse you IE!). But updating the core jQuery library to the latest version fixed this bug pretty quickly. I should have done that earlier, but I've been focusing on the development server, not the “live” server.

I hope to incorporate some standard implementations of things like this into the redesign. I'm keeping the possibility of a future move to a CMS in mind, but there's plenty of other benefits to having a few well documented solutions like this. It saves me time. That's a good start. I also occasionally take a vacation or occasionally get sick. If something comes up and I'm unavailable, a quick HowTo on implementing a cookie cutter image gallery like this could be a real life saver. I need to experiment with managing a mix of image sizes and maybe port the auto-thumbnail feature from Galleria into jqGalViewII and then offer up both options in a tidy package. Since it's all open source, I can easily do that.

Here's hopin' I don't automate myself out of a job some day. :)

Random stuff collected on the net

2008-04-25T11:45:00.003-05:00

First, a couple of new heroes.

This guy is so awesome. He's the antithesis of what the media tells us a “rock star” should be. But he doesn't care. His joy and enthusiasm about, not just his music, but the whole concept of music, is downright infectious.

Here in the south, religion tends to earn itself a reputation for discouraging critical thinking. But I know it doesn't have to be that way. I've met a few true religious scholars for whom I have great respect, even when we (often) disagree. I love seeing stuff like this, not because it's putting a Faux News reporter in his place, but because this guy's firm in his convictions, can back them up quite reasonably (with or without scripture), does not push his beliefs, but does call shenanigans on the reporter for trying to use the power of his position to distort reality. “Just because you say he is a racist doesn't make it so.” I'm paraphrasing there, but that's the gist of it.

Speaking of the social construction of race, I found a very cool quote from Tay Zonday (the Chocolate Rain guy):

I live in Minneapolis. I'm 25 years old. I'm not sure what you mean by "background." Is that a code word for "race?" The straight-faced answer is that I'm Martian. They don't have a box for me on the census form. I'm the write-in candidate that the government leaves no space for when you have to choose your race.

Seriously, is race something you choose? The whole point is that I don't choose it. It is somebody else's shortcut to my soul. So journalists ask "what's your background?" like I'm supposed to retell someone else's story about me as though it's a fact of who I am and where I come from. As long as I talk about myself in fiction that someone else wrote, I might as well write my own fiction: I'm from Mars. Most believe the story that I'm a black mulatto.

That's from this interview by way of Tay's Wikipedia entry. From that, I also learned that he's a graduate of The Evergreen State College. Evergreen is one of my favorite schools ever. Their curriculum overview page explains why I feel that way better than I can myself.

I discovered Evergreen in the book “Colleges That Change Lives”. Out of the 40 or so schools in that book, Evergreen and The New College of Florida were my favorites. At various points in my academic path, I've considered attending both. If I have any academic passions left after I'm done with MACT and move on to doctorate level work (my only current lead is the PhD in Digital Media from Georgia Tech), I think I'd be pretty happy teaching at one of those schools since I never got a chance to attend.

Curse my Lack of Focus

2008-04-18T11:57:00.004-05:00

Quite a while back, I took a couple of days to play with the Google Maps API. I knew things were getting dangerous when I discovered the ability to add custom overlays to the map and immediately started imagining all the cool stuff that could be done with that. With all the redesign work that still needs to be done, I just can't spare the time to essentially play with a new toy, no matter how work related that toy may be. I experimented just enough to produce a sort of proof of concept and then moved on to other things.

But now I'm kicking myself 'cos at least 3 other schools have explored just how much awesome can be distilled from these tools:

Oregon State is using the Jquery Google Maps plug-in, or at the very least they're using Jquery with Google Maps, with or without the plug-in. I'm interested in that 'cos I'm already using Jquery. The coolest thing I've found so far digging around in the source code is from Boston U. It doesn't seem to have anything to do with the map function specifically, but there's a function that sets all external links to open in a new window/tab and it's declared like this:

function l337() {
  if (document.getElementsByTagName) {
    var elements = document.getElementsByTagName('a');
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].getAttribute('rel') == 'external') {
        elements[i].target = '_blank';
      }
    }
  }
}

How cool is a function called l337()? I don't even care what it does at that point.

And just so you know, FF3 has no problems rendering form elements within the baseline grid, so I can not worry about it and eventually that particular problem will take care of itself. Pixel perfection through apathy. Gotta love it.

Yesterday I got <sup> and <sub> tags working without screwing up the baseline grid too. It even seems to work cross browser. That's got just about everything I can think of except for images, and I know how that should work in pseudo code. Javascript has a MOD function, right? Right.

Damn, It Feels Good to be a Gangsta

2008-04-17T13:31:00.003-05:00

But not so good to be a web developer working on a major rebuild. At least not right this moment.

I want to launch this summer, so incoming freshman get a fresh start (HA!) on our website. But that apparently worries the faculty and staff, who rely on the website to find answers to the various questions these same freshman bring with them. In my mind, the needs of the many outweigh the needs of the few. Students outnumber employees by about 10 to 1. Realistically, this problem is as much political in nature as anything else.

Another problem I'm having is the unstable landscape of browser releases. Safari 3 just came out. Opera 9.5 should be out soon, followed by Opera 10 in the not too distant future. The Firefox team is making sure not to name specific dates, officially stating Firefox 3 will be out “When it's ready”. I've been looking at the minutes from the status meetings and it's obvious the “blockers” (bugs that need to be fixed before the beta can be considered a release candidate) are on a pronounced downward trend. But is that trend linear, meaning the remaining 52 blockers (looks like 62 is the current number of official bugs as of today at 11:28AM PDT) will be out of the way in 2 or 3 short weeks? Or are we in a Zeno's arrow (as opposed to Xenu's arrow) sort of situation where the last few remaining blockers take up more and more time as we near the finish line? There's even talk of seeing IE8 by the end of this year. The IE8 Beta is Vista only, does that mean the final release will be Vista only? And how quickly will people “upgrade”?

I can't really do much but speculate on the future. Maybe the code I write today will continue to work, maybe it won't. Maybe a feature I spend hours implementing in my design will be rendered obsolete with a new browser feature (like Opera's awesome zoom feature, a less awesome version of which made its way into IE7)?

IE6 was an alright browser for its time (a definite improvement over IE5.5), but that was August of 2001. I'm glad it's finally falling off the browser support radar, but it's still there. And chances are it'll still be there when IE8 comes along. I'm not looking forward to attempting to support 3 different versions of IE. At least the users of other browsers can be relied on to update their browser on a fairly regular basis. I got the Firefox 2.0.0.14 update last night at home and it was waiting for me this morning here at work. In a week, it'll be interesting to check how our Firefox version numbers break down in Google Analytics. Currently, all versions of Firefox prior to 2.x makes up less than 2% of total Firefox usage. And Firefox is just 8.17% of all usage, so 2% of that is hardly noticeable in the grand scheme of things.

But ultimately I have to worry about these things. Right now I've got a problem in FF2 where I can't get my input fields in a form to align along a baseline grid. There's an odd 2 pixel increase in height that doesn't seem to be coming from borders or padding or margin and I'm even using Eric Meyer's CSS Reset Reloaded which, in theory, greatly reduces the occurrences of such cross browser oddities. I haven't downloaded the FF3 beta yet to know if the “bug” is still present there...

Ok, I just downloaded it and tried to set it up to allow the beta to run in parallel with this install, but it says only one instance can be running at a time. So I'll have to quit this instance before I can check.

Anyway, my point is, I'm not sure that a 2 pixel difference from the baseline grid is worth taking the time to troubleshoot if, by the time we launch, Firefox 2 will make up a tiny percentage of our user base. It's not mission critical in any way. I doubt anyone but me will EVER take a pixel ruler to this layout and check for things like a baseline grid anyway.

In which I explore the depths of my own geekiness

2008-04-14T13:29:00.000-05:00

So I've been thinking a lot lately about how video game control schemes relate to basic usability, and how that can be applied to website usability.

For example, I've been playing Zack and Wiki lately. In case you haven't played it, a major game mechanic is you can turn these various animals into various tools, then you use the tools to solve puzzles. The controls for each tool is different and not spelled out for you. You can examine the tools and look for clues as to how to use it. For example, the umbrella has a button with a 2 on it, and if you push the 2 button on the wii-mote the umbrella will open. Some of them are pretty simple, like you just make a forward / back sawing motion with the wii-mote to use the saw. I haven't made it very far in the game yet, maybe half way, but so far the controls are smooth and intuitive for just about everything.

They're so good, in fact, it makes the occasional problem very noticeable. So far I've encountered two rhythm based mini-games that are terrible. I can't do them at all. My wife managed to get through one of them. There's a skeleton with a music box and you use the wii-mote to ring a bell in time with the music he plays. It should be dead simple, but apparently I swing my wii-mote too hard, or too soft, or something because he's never happy with my performance.

Seeing what I'm talking about may work much better. Behold the power of the internets:

Do you want to know something sad? Just hearing that music right now grates on my nerves. That's how scared I am by my poor user experience.

There's another point where you have to try to catch this huge fish. The controls for the fishing pole were easy enough, but I kept thinking I was screwing up 'cos I'd get the fish about half caught and the fish would spit out the bait. It turns out this is just part of the game and you're supposed to go get another worm and try again. It generally takes 2 or 3 attempts to catch the fish (maybe it's possible to do it on the first try, but I certainly couldn't do it). The problem here was there was no feedback mechanism to let me know that my progress on my first attempt would be saved for subsequent attempts. Considering the other times Wiki interjects an inane comment to point the player in the right direction, this would have been an excellent opportunity to offer some encouragement to try it again. In the absence of any encouragement or feedback that I was at least on the right track, I found myself feeling cheated. How could this not be what I'm supposed to do? Even the first time I got a 2nd worm and gave it another try, the fish's energy bar wasn't emphasized in a way that made it obvious to me that he was still tired from my 1st attempt. I eventually figured it out, and I guess that's part of the point of the game, but for a while my experience was flipped from quite fun to very frustrating.

I can't find a video with just the fishing part, but here's the whole puzzle. The fishing bit starts around 2:30 and at around 3:45 this guy fails at his first attempt too. The little grumble and black squiggles in a thought balloon is the same feedback you get when you do something wrong.

Apparenty you can also just blow him up, which is something I tried but I was attempting to lure the frog the wrong direction.

This all just serves to remind me how important user feedback is to a positive user experience. Even the most intuitive of interfaces involves a certain level of uncertainty, particularly in complex, multi-step processes. Providing a means of letting the user know s/he is on the right track can really help. In the mini-game, the example in the top right corner of the screen could show how to swing the wii-mote rather than just how to hold it (although some may argue this gives too much away) and that would save me a lot of grief on the mini-games. Since the mini-games are option, I really don't have an interest in "discovering" the proper method through experimentation. I'll quickly get frustrated and move on to more fun elements of the game (which includes virtually everything else). When the fish spits out my first worm, Wiki could easily offer some sort of feedback along the lines of "Aww, he got away! But he looks pretty tired." Instead, we get Zack giving us the same reaction we get when we do something totally off track.

Then I found this blog entry: Ramblings of a Colorblind Gamer. And now I'm thinking about how all these things tie back into web accessibility as well as usability.

Browser Upgrade Campaign

2008-04-09T17:00:00.000-05:00

As I move into the redesign of VolState.edu redesign, I'm using Dean Edwards IE7.js to get older versions of IE to behave almost like IE7. This means people using older versions of IE with scripting disabled will get a sub-par experience. I'll do my best to allow for graceful degradation, but things will probably look noticeably "off".

I'd like to offer a quick paragraph explaining why things look odd and take the opportunity to gently encourage them to upgrade to a modern browser, displayed only for those users who need to see it, like the old WASP Browser Upgrade Campaign. If that modern browser happens to be IE7, at least that's an improvement over previous versions of IE. I figure not providing a plug for IE7 in some way will result in an overall lower conversion rate. We're also dealing with a population that already use Microsoft products and may be paranoid about security (if you'll allow me the luxury of stereotyping people based on their browser settings). Sending them somewhere like GetFirefox.com may just get me dismissed as a “fanboy” or “cultist”.

I figure my options are:

Link to the IE7 download page and be done with it.
Link to both the IE7 download page and Browse Happy.
Link to Save the Developers and let the various browsers fight it out there.

It may be useful to look at some recent browser info for our site in Google Analytics. IE users make up 89.57% of our visitors over the past month. Of those, 57.59% are using IE7. That leaves 42.41% using some other version of IE (including 17 visitors using IE8 somehow, but we can ignore numbers that small at the percentage level). That means that roughly 38% of our visitors are using older versions of IE. Getting accurate figures on people with scripting disabled because by definition these folks don't show up for javascript based analysis tools (like Google Analytics). Other sites report this info based on server log analysis but have skewed audiences and probably don't reflect a representative sample.

In the absence of any scientifically reliable data, let's make something up!

Ok, let's at least make something up in a range. We'll use 2% as our lower bound and 35% (the highest claim I've found so far) as our upper bound. That would mean somewhere between 0.8% and 13.3% of our visitors fall into the category I'm dealing with. Anything below 1% might not be worth troubling myself over, but anything that exceeds 10% certain is. I have now used fuzzy math to justify taking the time to write this post.