Planning future website development

Zoltán and Zoltán over at UX Myths do an excellent job of summarizing the prevailing wisdom on how best to improve a website over time. (Emphasis below is mine.)

To many, a redesign means revamping the look of a website in the hope that it will increase conversions and attract new customers. In fact, such projects are often counterproductive as user feedbacks on numerous redesigns proved that users hate change, even if the new design is clearly superior to the original.

…In most cases, it is sufficient to make minor changes in the user interface. Google, Yahoo, Amazon and a bunch of others follow this strategy with great success: you can hardly see significant changes on their websites though they’re perfecting their design constantly.

From UX Myth #11: You need to redesign your website periodically

Identifying Areas for Improvement

I hope to avoid leaving our users feeling like I’ve jerked the rug out from under them again. But it’s vitally important that we develop new, effective content and retire older, less effective content in addition to iterative user interface tweaks. I think the mobile application development project provides us with an excellent opportunity to identify those sorts of improvements. There is an emerging trend in web development to design for mobile first because:

  1. Mobile is exploding — Smartphones projected to outsell PCs by next year, mobile internet adoption 8 times the rate of desktop internet adoption.
  2. Mobile forces you to focus — The end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites.
  3. Mobile extends your capabilities — Browsers on most mobile devices support more of the cool new stuff (HTML 5, CSS 3) and offer some features desktops simply can’t (location aware devices).

Separation of Content and Style Provides Agility

The old site mixed presentation with content. Every page contained about 32,000 characters of code that only defined the layout and stylistic template. I had to extract the content — the words that actually appear on the screen — out of that mess. Now that sort of “template” information is stored in a handful of CSS files. That sort of separation of content and style greatly increases our ability to make changes to the look and feel quickly.

The CSS Zen Garden is a gallery of designs — currently 210 of them — all applied to the same underlying HTML. This is done by changing the associated CSS file. Our site is a bit more complex than the single page, poster style Zen Garden. And again I’m not advocating changes to our site as radical as going from this to this. But the basic premise applies all the same and will allow us to make whatever level of change is necessary without having to perform major surgery on 1,000 different files.

Hopefully the site is now manageable and adaptable enough that we can run various projects in parallel, at various stages of development, all aiming to address a specific problem or need, and none of which are big enough on their own to trigger our users’ fear-of-change response.

Blogging is a Commitment

It’s not uncommon for me to have a project or two that drops into my lap at the last minute and has a tight deadline. But this time of year that’s typically all my projects. A similar thing happens leading up to the start of spring semester, but it’s much busier in the fall.

I won’t pretend to have any readers other than spam bots at the moment. So my relative silence isn’t disappointing anyone. But I don’t want to leave anyone with the impression that I plan to get the blog server back up and running only to abandon it. When I’m not spending so much of my time doing stuff and have more time to think about stuff I’ll spend a bit more time writing about stuff here. :)

It’s that time again

I think I just fixed the time zone issue. The time on the server is set properly, but there’s a blog specific setting for time zone. I’ve set all the currently existing blogs to Chicago. If that’s work, this entry should appear as being published shortly after 1:30 in the afternoon on August 4th.

White Space Matters

This is a post I put up over at my Blogger blog while this server was unavailable. I’m cross-posting it here in part to test the ability to upload images.

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

Screen shot from the Omniture blog

UX Booth

Screen shot from a UX Booth article

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.

Ok, the upload/insert media thing tries to default to a gallery view when you upload more than a single image. That can be a bit annoying at times but for what most people will be doing that will probably be fine.

Is this thing on?

A long time ago I posted about me and Mark spending an entire day tracking down mod_rewrite issues on a fresh install of multi-user WordPress. We lost this server about 4 months ago, and knowing the WordPress 3 would merge the multi user functionality into the core I made the call to just wait until it was released and start over from scratch. I spent the past 3 days getting everything squared up, and the past couple of hours have been a repeat of the mod_rewrite issues Mark and I tackled back in December.

I still can’t get the single button update to work. I intentionally installed 3.0 rather than 3.0.1 just so I could test that. Now that I’ve got this blog restored, I need to restore the Dr. Ramer memorial blog and see how involved a manual update is gonna be. I’ve probably sunk more hours into trying to fix the automatic update button than it’ll take to do a manual update.

After both the previously active blogs are restored and this server is updated, it’ll be time to start training and support for the folks who have been lining up for a blog account while this server has been unavailable. I’m honestly looking forward to it.

Uh oh. I just noticed the time is almost exactly 5 hours fast. That probably means we’re using GMT rather than Central for whatever reason. That too is a problem I’ve run into before.

Goolge PageRank among area .edu sites

Google’s PageRank is a complex algorithm for scoring web pages. The gist is pages gain credibility by having incoming links from influential pages and pages lend a bit of their own credibility to the pages they link out to. If you want to know more feel free to follow the link up there. Just be warned it gets complex quickly.

I think, but have no proof, that anyone with a .edu at the end of their domain name gets an instant boost to their Google Juice since not just anyone can buy such a domain name and in theory we’r all supposed to speak with relative authority within our academic domains. If you allow yours students to cite web resources at all you tend to trust a .edu or .gov site over Wikipedia, right?

Regardless of how it may or may not work, PageRank supplies a nice numerical score, from zero to 10, to the relative importance Google assigns to a given page. I took a moment to look up several area colleges and universities. This is what I found:

Google Page Rank = 7

  • Tennessee State University http://www.tnstate.edu/
  • Tennessee Technological University http://www.tntech.edu/
  • University of Memphis http://www.memphis.edu/
  • University of Tennessee Knoxville http://www.utk.edu/
  • Vanderbilt University http://www.vanderbilt.edu/

Google Page Rank = 6

  • Austin Peay State University http://www.apsu.edu/
  • Belmont University http://www.belmont.edu/
  • Chatanooga State Community College http://www.chattanoogastate.edu/
  • East Tennessee State University http://www.etsu.edu/
  • Middle Tennessee State University http://www.mtsu.edu/
  • Pellissippi State Community College http://www.pstcc.edu/
  • Roane State Community College http://www.roanestate.edu/
  • Tennessee Board of Regnets, “old” address http://www.tbr.state.tn.us/
  • University of Tennessee Chatanooga http://www.utc.edu/

Google Page Rank = 5

  • Cleveland State Community College http://www.clevelandstatecc.edu/
  • Collumbia State Community College http://www.columbiastate.edu/
  • Dyersburg State Community College http://www.dscc.edu/
  • Jackson State Community College http://www.jscc.edu/
  • Motlow State Community College http://www.mscc.edu/
  • Nashville State Community College http://www.nscc.edu/
  • Northeast State Community College http://www.northeaststate.edu/
  • Southwest Tennessee Community College http://www.southwest.tn.edu/
  • Tennessee Wesleyan College http://www.twcnet.edu/
  • Vol State’s Wikipedia entry http://en.wikipedia.org/wiki/Volunteer_State_Community_College
  • Volunteer State Community College http://www.volstate.edu/
  • Walters State Community College http://www.ws.edu/

Google Page Rank = 4

  • The Vol State Blog (hosted by Blogger) http://volunteerstatecommunitycollege.blogspot.com/

Google Page Rank = 0

  • Tennessee Board of Regents, “new” address http://www.tbr.edu/
  • This blog

Observations

Google sees the individual Wikipedia page about Vol State to be as important as our own home page. Our own official blog, which does not have a .edu in the address, is only 1 point lower than our own home page, and it’s had fewer years to build that reputation. However, a large part of that reputation could be built on the links published to the blog from our pages. Some of the bigger community colleges in the state rank up in the 6s (PageRank is actually a decimal number but I can only see it as a whole number) along with most of the universities. TTU (my alma mater) ranks up there with UTK (my wife’s alma mater). Finally, once TBR expires their old domain name, they need to make sure to set up proper 301 redirects to migrate the reputation from the old address to the new one.

Take the good, take the bad, take them both and there you have…

That last post, while all true, may make me sound a bit full of myself. I take great pride in my work but that doesn’t mean I’m blind to my own flaws. Right now we’ve got plenty of issues on the site.

  • I’ve apparently reintroduced an old bug into IE6 that I think I know how to fix.
  • Nearly 6 months after the launch of the new current site and I still haven’t restored all the contact us forms.
  • Even the old site had a lot of holes in the coverage of those forms, so just restoring what we used to have isn’t good enough.
  • I’m still sitting on content for a few projects that was delivered months ago.
  • At least a dozen different performance optimization tweaks are still on my to-do list.
  • I’d like to blog more but this feels less productive than addressing any of the issues above. :)

Hand crafted vs. machine generated code

In a Hurry? Here’s the Cool Stuff

  • The old site had a lot of junk code. The current site runs on about 4% as much code as the old site.
  • The code that runs our site contains roughly the same number of characters as the Complete Works of Shakespeare.
  • The junk code eliminated in the redesign equals about 24 copies of the Complete Works of Shakespeare!

Data

Site Version Files Size Copies of The Complete Works of Shakespeare
Pre-Redesign 6,978 139,106,100 bytes 24.91 copies
Post Redesign 983 5,485,441 bytes 0.98 copies
Difference 5,995 133,620,659 bytes 23.93 copies
Percent Change -85.91% -96.06%

If you Want the Details, Read On

Code as Text — An Apt Metaphor

Talking to real people about bits and bytes causes faces to go blank and eyes to go glassy real quick. Luckily I found a tool that makes sense to non-geeks (and makes a special kind of sense to literary geeks). A byte is essentially the storage space required for a single character of text. So when speaking of large numbers of bytes, up in the megabyte range, finding a sufficiently large work of literature as a plain text document gives us a very easy to grasp measuring stick. This is especially apt for my type of work because the vast majority of what I produce is written and stored as plain text files. HTML, CSS, JavaScript, XML, and even PHP are all written using glorified text editors. I could do most of my job using just Notepad were I so inclined. The College was nice enough to purchase a copy of Dreamweaver for me, so I use that instead. But even then I use it primarily as a text editor with a built in FTP client. Most of the “advanced features” go unused. I’ll explain why later.

Project Gutenberg hosts a plain text version of the Complete Works of Shakespeare. It’s 5,582,655 bytes in size. In other words, it contains about 5,582,655 characters of text. If I combine all the code used to run our site; ignoring Word documents, PDF files, images, and other “non-code” files, I come up with 5,485,441 bytes of code (or characters of text). So all the code that runs our site is roughly equivalent to 1 copy of the Complete Works of Shakespeare. The code that ran the old site would take up close to 25 copies. So the redesign effectively eliminated 24 copies of the Complete Works of Shakespeare worth of code!

What Happened to Those 5,995 Missing Files?

Most were obviously out dated. Several were orphan files that we no longer actively linked in to the “live” site and should have been removed from the server at the time the links were removed. Some were redundant and could be easily merged. For example, the old site contained around 100 contact us forms needing 8 files (and a database, which isn’t counted in my comparisons) each to run. The new site takes a different philosophy. In function we still have several contact us forms but that functionality is fueled by a single file (and a database, also not included in my comparisons). 1 file replaced around 800. Finally, we’ve got 50 or so pages of actual missing content that has been on my to-do list since before the redesign launched. I whittle away at that pile as time and priorities permit.

What Do You Mean by “Machine Generated Code”?

Tools like Dreamweaver can produce all the code for you. I could work all day in “design view” rather than “code view” and if I needed something more advanced that the drag and drop sort of interface of the design view I could probably find a Wizard to run that would spit out the code for me. In theory that saves time. I think that’s debatable.

Maintaining the redesigned site takes about 1/8th the time it took to maintain the old site. That’s a big reason the redesign took so long, the majority of my day went into keeping the existing site standing. Part of that increased efficiency is because I wrote most of the code in the new site so I’m very familiar with it. But if I get hit by a bus tomorrow I think my replacement would have an easier time maintaining the site post-redesign as well…provided my replacement has a basic grasp of the code s/he’d be inheriting.

I think of it as the difference between a craftsman and a tool user. When a book makes a claim like Teach Yourself Dreamweaver 8 in 24 Hours what the author/publisher actually means is teaching you to use a tool. Push these buttons to get this sort of result. You can do that in 24 hours. 3 years later Dreamweaver 10 comes out and half the buttons have moved and you have to retrain. You’re a tool user. Your abilities are tool dependent. A craftsman knows how to use a tool appropriately, but also understands the underlying technical details well enough to be largely tool independent.

The old site had a bunch of photo galleries that were produced with some sort of Wizard interface. Much like the contact us forms I mentioned earlier, these galleries were independent and self-standing even though the functionality was identical across the board. Essentially the only thing that changed was the folder full of images fed to the Wizard to produce the gallery. Someone with a craftsman’s approach sees that and realizes that by converting the location of such a folder to a variable, all the duplicate code can be shared across all the various galleries. Multiply that sort of optimization times several thousand pages and you’re left with roughly equivelant content running on 4% as much code.

But Does That Really Matter?

So I’m essentially bragging about saving 128 megs of hard drive space by optimizing some code. Big whoop. Hard drive space is down to something like 30 cents a gig. So the spaced saved is worth a few pennies, right? This is how I explain spending 2 years on a redesign and justifying my value to the organization? Couldn’t everything I’ve said so far be restated as I’ve painted the College into a corner and set it up so that I can’t easily be replaced by a “tool user” who would probably work for a lot cheaper than me?

That really all boils down to a difference in attitude and perspective.

It’s not just about saving hard drive space. With around 10,000 unique visitors a day that’s also less bandwidth used to serve up each page and less code to be processed by the server to process each request. More importantly, it’s also less code to be processed by search engines like Google. In short, efficiently coded sites perform better.

We’re still talking about the Complete Works of Shakespeare 400 years later because those 5 and a half million characters of text were carefully crafted. Anyone could use a tool like The Post-Modernism Generator to churn out 5.5 million characters in a matter of minutes. Maybe we could even get such a text published. But it wouldn’t be the same as such a text crafted with care over a lifetime. I’m no Shakespeare, and I didn’t spend a lifetime crafting the redesign of VolState.edu, but I believe quality of my work exceeds that produced when we surrender our code to the minds of machines. I think that quality was a worthy investment of my time. And I think the College deserves such quality.

Inconsistency

This blog works fine. But we built this blog very early on. The Athletics blog throws 404 errors when you click on a specific entry. We made that one more recently. Maybe the issue has to do with when we created the blog, right? But we created the blog in honor of Dr. Ramer even more recently than that, and it works fine. So maybe it has something to do with when the individual entry was published? I’m testing that now.

Top content

Over the past month (January 24 through February 23), if you ignore the areas of our site that primarily serve to get people to the content they are looking for (such as the home page and the A – Z Index), our top 5 most popular site areas have been:

  1. Programs of Study
  2. Thigpen Library
  3. Baseball
  4. Local Job Listings
  5. Text Alert Sign Up

So pick your major, study hard, root for the home team, find a job, and keep up to date on snow closings. :)