« Republican War on Science seminar at Crooked Timber | Main | Lucifer # 16 on Scans_Daily »

ROCR website redesign

So I've redesigned the Rogues of Clwyd-Rhan website.
ffwebsite.png
It's really more of a re-skinning than a full redesign, to be honest: the design is still based on my old Movable Type templates, and even within those limitations, the changes mostly affect the area above the fold. Still, it took me quite a bit of time, simply because I haven't been doing this as my day job since 2001. Also, I had to create some custom artwork especially for the project and do endless cross-browser testing for every piddling change.

What I've done:

Well obviously I've created a large header banner and got rid of that awkwardly-positioned by-line that had been on the top of each page since October. For better or for worse, the byline is now integrated in the header graphic although it can also be found in the tags in the HTML headers. The header graphic is now served from within WillowCMS so I can change it for the entire site with just one change to the 'home' node.
I moved the button bar back into the sidebar again. It never aligned right and pushed the comic to the button. The header area is now a lot smaller vertically. From a code order point of view, moving those buttons to the end of the HTML source is less than ideal, but it does look a whole lot better, without the awkward positioning tricks involved in so-called "One True Layout" templates. Eventually I hope to return to this problem and recode the templates so they have both correct source code order and a pleasing visual appearance, but I don't consider this an urgent problem.
I've changed the body background colour to a dark green, to fit the theme of the banner. This won't be all that noticeable to people reading the comic at 1024*768 pixels, but the green becomes a bit dominant at larger screen sizes. New colour schemes always take some getting used to, so we'll see how everyone likes it in a few weeks.

I have cleaned up a lot of cruft from the CSS file. There was a lot of Movable Type-generated stuff in there that I no longer use. I've also cut some of the front page HTML to compensate for the larger file size of the header graphic.

ONR search box - this is not a real widget!I've added one new feature to the website: a search box. The fellow in the icon is the mascot of Oh No Robot engine, which is where the search gets delegated to. I can't believe ONR didn't have a miniature version of their mascot available, but I had to make the 32x32 version myself.

ONR transcribe button, not a real widget
Oh No Robot also turned out to be the biggest source of problems with the rollout of the new design. The "Transcribe this" buttons in the archive don't fit in their borders if left as part of the nav-links bar. I'll need to think about where else to put them. In the meantime, there are two ways readers can get rid of those unsightly things: you can transcribe the comics the buttons occur on, or if you have Firefox with the appropriate extentions, you can right-click and ad-block them. I'd prefer the first option, because right now the search box covers fewer than half of the published episodes, but the other option would not be any skin off my back.

top left in firefoxI normally prefer to stick to fairly standards-compliant HTML and CSS if only because workarounds always make my head hurt, but I did use one Mozilla-only CSS feature that doesn't do a lot of harm in other browsers but makes the design a little less clinical in Firefox: I sprinkled block-level elements with the -moz-corner-radius attribute to get rounded corners. There are other ways to get rounded corners but they tend to be javascript-heavy and complicated and I can't be bothered with them. These are an easy way to reward readers for not using Internet Explorer, without depriving them of my stuff entirely.

I expect I'll have to do some clean-up and fixing over the next few weeks, and I'm sure I'll find out what some of the downsides to the new design, for example the fact that it is a lot more bandwidth-intensive, mean in practice. But for now, I'm rather pleased with how it's turned out, and glad that it will be easier to adapt in the future.

About

This page contains a single entry from the blog posted on March 29, 2006 3:44 PM.

The previous post in this blog was Republican War on Science seminar at Crooked Timber.

The next post in this blog is Lucifer # 16 on Scans_Daily.

Many more can be found on the main index page or by looking through the archives.

Creative Commons License
This weblog is licensed under a Creative Commons License.
Powered by
Movable Type 3.34