Jeremy Smith's blog

Entry Is Labelled

Improving Wiki@Case

There are several things that need to be done to improve the overall feel of the Case Wiki System (and probably more things that I haven't thought of yet), but there is one large-ish one that is bothering me... the templates.

Our first thoughts were that we would use the standard branded Case templates. MediaWiki skins of these were very nicely done for us by the ITG group in the College of Arts and Sciences. There were a lot of reasons for choosing these; most namely, that the wiki pages would be easily identifiable as Case web pages.

Unfortunately, my experience (and other's) has shown that the branded Case templates are too limiting in this aspect. Quite frankly, 750px (or so) is just too small of a width to contain a wiki page that has a lot of content – pictures and graphs, headings and sub-headings, etc. It just won't fit in the page nicely.

So, I started thinking about ways we could retain the branding but make it more flexible so all of the different types of content would fit more nicely. Wacky ideas ensued such as having the "main" wiki pages follow the branding to the letter but other pages could have per-page or per-category skins that allowed them to be more flexible. Luckily, that idea existed in my head for all of three seconds before I realized how hokey that would be.

The first "spoken aloud" idea was to change the Case branded templates ever so slightly to be a liquid layout. Remove the overall fixed width and let the page expand as necessary. This would retain the visual of the Case brand but allow for greater flexibility.

But, I started thinking that could do more harm than good. It could dilute the branding... murky the waters, so to speak, of the Case templates.

Now, I am thinking it is just time to change. What I would really like to see is something very, very similar to mock-ups Heidi Cool did for a new set of default Blog@Case templates. I really like that look and the colors, and do have plans to switch Blog@Case over to them. Plus, it gives a consistent look to the directory. I think that those pages could easily be modified to give us a flexible liquid layout; one that would work very well for Wiki@Case.

Comments

  1. gravatar

    Jeremy, I am glad to hear the limited width has been frustrating to others too. It feels restrictive, no?

    I am in favor of a liquid layout, but understand where the static branding people are coming from too. Best of luck with what you decide to try.

  2. gravatar

    Jeremy,

    Using something similar to my blog templates sounds good to me. Also note there is a version at http://www.cwru.edu/webdev/hactest/blogtests/indexc.html which includes the larger logo in the upper left. Let me know if you need me to provide you with anything extra for the Wiki. Perhaps we should change the color pallette as well. If the blog is navy and lime, perhaps the Wiki could be navy and rust, or some other combo just to differentiate between the two.

    I've always considered that we have more leeway with things like the blog and Wiki because they are different from the regular web pages. And personal blogs need not, in fact should not, be branded anyway as they are a reflection of the individual rather than the university. Of course department blogs are another story, but I've found it fairly simple to brand them. I'm still finetuning the code I've used for http://blog.case.edu/webdev and http://blog.case.edu/quality/ but found (particularly with the latter) that they can blend seemlessly into a web presence when that is desired. (The templates are functional I just need to add some styles and makes sure I have stylesheets in place for each color for both the basic and advanced versions.)

  3. gravatar

    I too would very much prefer a variable width template. Fixed width designs just feel so kludgy to me, they're either too big and require horizontal scrolling (though rare, that's a *horrible* side effect for the user interface), too small and leaving vast amounts of white space in the browser window (can look okay, but can also be quite annoying for the sake of wasted screen real estate), or they're exactly the right size (also rare).

  4. gravatar

    Hi Jeremy,
    One thing before I get started on the 'fixed width' subject: The Art's & Sciences example you link to is broken in IE. There is a white line under the top left logo that extends half way across the page. Renders OK in Mozilla though.
    Now, regarding the 'branded' templates, it'd probably be a big surprise to a lot of people out there that I think rigidly adopting the Case branded template look for the personal blogs would be a big mistake! I say that not for personal reasons necessarily, but for a practical one; in the current template design the original intent was that nothing ever would be in the right handed column.
    This is intended (always was) to be whitespace. I've seen some of the attempts at using 100 percent width and it almost always looks better left alone. In fact those that prefer the 100 percent width and have tried to use it with the current templates usually bump the font size up a bit. Leaving it at it's current size makes the page harder to read, well... that is, unless you put some content in the right column!
    Early on, I hated the fixed width design and fought it to the death. I lost, but I have come to appreciate it now for what it is, and what it was intended to do.
    The blog format on the other hand, lends itself well to 100 percent for a practical reason as Heidi's sample shows. When you put that right column in there (which is wider than the left nav bar was by the way) it fills out the page with navigational items, yet doesn't affect the readability of the content area. Not only a good use of space, but a look that is I think, familiar to bloggers.
    Heidi goes even further than I have here by saying that personal blogs 'should not' be branded. I agree at least with regard to strict adherance to the current template. Which by the way for Departments is still fixed width...

Post a comment