Required Info
Thanks for creating a History Commons account. After registering, you can begin contributing and editing entries. Also, after you create your account, you can create your User Profile.
Login Name:
Full Name (this will not be disclosed):
Password:
Password (check):
E-mail (this will not be disclosed)
  
close X

Page Listing

This page is not intended to be part of the final design. It's for our use only and will not be part of the site itself.


Notes on the redesign

Note: This is strictly a front-end redesign. I understand that incorporating the database elements will require a good amount of work, and may require some design adaptations.


Color scheme: The colors can be tweaked to whatever we like, but the color scheme is informed by the blues of the logo. Colors in the boxes can be changed to whatever we like with relative ease, to give some variety to the blue/tan green/tan theme being currently used. So can the colors of the columns. (Because of the way the columns are positioned, I can't make a gradient background work properly in all of them.) I'm told by those more color-savvy than me that the blue logo works with the green/tan, if we use some blue highlights, i.e. links and so forth.

Note: I can revert to the older, blue-based design simply by changing the CSS file referenced in the pages.

Header: I've used a fairly fancy header code structure to increase accessibility and SEO placement. It was a bit of a pain, but it works in all three major browsers.

And speaking of SEO, I've put some thought and effort into it. These pages hit most of the high marks on the SEOmoz checklist.

Because of the logo, the header has to be all white, no backgrounds, unless someone else can change the logo background color in Photoshop or Illustrator.

The three text links below the search box line up perfectly in Firefox, almost perfectly in Opera, and to the right in IE6. This was a major positioning issue; it took a lot of tweaking from the guys at Sitepoint to get it this far. I'm happy to leave it the way it is.

The "print this page" capability is an accessibility issue, though I consider it a minor one. I've looked up Javascript solutions for displaying a "print preview" page, and discussed it on SitePoint, and decided not to include one.

Check out the "Create an Account" link. I'm kinda pleased with this. The border color can be changed.

Login form: I don't provide a logout function. I don't know how to code it so that once you're in, the "Login" button becomes the "Logout" button. I'm not sure why anyone besides one of us would want to logout while still on the site, and if we code the cookie correctly, they will automatically logout once they close out of the site (or whenever we want to set the cookie).

Black rounded-corner boxes: This is one of the few things I can't change. To change these colors would take someone with more Photoshop skills than I have. I tried it once and the result was awful. The people at SitePoint who have contributed to, and reviewed, this design say they like the black. So do I, though it definitely needs to be used in moderation. I asked the designer, Scott Schiller, if he has other colors available; he was kind enough to send two new graphics that I can use -- gray and blue -- but unfortunately I will have to implement his other methodology to use either one of them, and I'm not sold on the gray or the blue. Thusly, I am hesitant to do so until if and when we decide the black doesn't work. Or, someone with more Photoshop skills than I can take a crack at redoing the black graphics.

Blue Brown rounded-corner boxes: There are two employed in the design: the darker ones in the Groups page, and the lighter ones on this and the Content page. I'm thinking we should go with just the one. Maybe the lighter one? I'm losing my liking for the darker one. As part of the switch to the green/brown scheme, I've replaced the blue boxes with a brown bronze-ish gradient.

Groups link(s): I renamed it from the original "timelines" and made it bold to stand out on the navbar. The mouseover text in the main navigation labels it "groups and timelines." The middle column on the index page features five projects, with appropriate images to illustrate. The ones currently in the column can be changed to whatever projects we want to emphasize. I think we ought to change them every few weeks, to emphasize whatever projects are particularly active -- maybe every time, or every other time, Kevin sends out a mailer?

We're going to have to make a decision as to terminology. In my understanding, "groups" and "projects" are essentially the same thing. "Timelines" are subsidiaries of groups; most time a group only has one timeline, but sometimes there are others. Is this right?

New and Updated Content: I've gone with five each, and left off the entity listings entirely. This is something worth discussing -- if we feel the need, we can add some of that back, though we want to avoid clutter and "too much information."

Icons: I think the icons add a lot of pizazz and a "Web 2.0" flavor. We can add Reddit, Furl, or whatever other social bookmarking/networking sites we like to this list.

Footer: I've chosen to go simple, with two text menus (one repeating the main navigation and the other giving the privacy, terms of use, and design notes info) and the Creative Commons acknowledgement. It uses a gradient background.

Typography: Right now I'm going with two Vista fonts for the main typography, Segoe UI and Constantia. If they look blurry on your Windows computer, you don't have ClearType enabled. I've noted that in the design notes. This is going to take some user testing -- we may decide to go with other fonts. I think they look very good as is, but if they don't look good on a significant number of other machines, we should switch them for other fonts -- I've chosen Helvetica/Arial and Georgia for the "secondary" fonts, though I can perhaps be talked into other fonts. We can't expect a large number of users to change their displays to suit our design. I've added fonts for Mac and Linux users so they won't be left out.

If you don't have the Segoe UI and Constantia fonts, let me know. I'd like you to see the site in them to get an idea of why I chose them. They look so good to my eye that I'm reluctant to change them out, even though we may choose to do just that.

Note: I like Trebuchet, the font we currently use, but I want to go in a different direction from where we're currently at.

FAQ Page: Much of that text is merely placeholder stuff. Some of it sounds like it was written by the Fabulous Furry Freak Brothers. We can definitely improve it.

Groups Page: The featured projects image collection is mainly eye candy. They are reduced versions of the same images used on the home page. They can also be swapped out as desired.

The projects are grouped by subject, and "subtimelines" are listed along with their main projects. Grouping them like this might be troublesome, as the database determines the order of the projects (newest ones on top, subtimelines not listed), but I see it as an essential element of the basic navigation structure. This one change will greatly improve our usability, even if we have to manually override the database output.

The design is deliberately simple -- blue light brown rounded-corner boxes with a simple horizontal gradient image used as a background (see above). We could use something a bit spiffier for the background, but considering the boxes are fluid (they will appear in different sizes in different monitor resolutions) we have to be careful as to what we use. I tried the black rounded-corner boxes from the front page, but I didn't like the way they looked. And because of the layout structure, it's difficult to use a gradient background in these columns.

The three main nav buttons for the page -- Groups, Topics, Date Added -- I've put in simple button links instead of trying to replicate the tabbed nav structure in the original. The older tabbed version is quite good, but it requires Javascript to function. Choosing the other buttons would, I envision, send the user to a similar page with the topics or the date-added information. I think it should be obvious to the user what to do to get back to the main Groups page. If we want the tabs, we can take a look at a very spiffy jQueryUI solution, or another, equally cool jQuery solution (I believe the tabs can be restyled not to look like this awful blocky b&w design).

The sidebar does not contain a number of elements that are present in the original design -- the ordering, time period, email updates, donate, volunteer, etc. Any or all of these can be incorporated, though I think too much of that is just information overload.

Demo Content Page: This is probably going to be the most troublesome page to implement, as there is so much to do in incorporating the database elements.

Again, I went simple, with the lighter blue light green rounded-corner boxes and a gradient background (again, see above).

The sidebar does not contain a number of elements that are present in the original design -- the ordering, time period, email updates, donate, volunteer, etc. Any or all of these can be incorporated, though as with the Groups page, I think too much of that is just information overload.

The demo page contains a (startlingly blue) banner graphic of a soldier better banner graphic of a tank. Such a graphic is more eye candy than anything else. The graphic is something of a placeholder, so if you don't like it, it certainly can be changed out. I think an appropriate graphic on each content page, different graphics for each group, would be a good thing. We may end up having to figure out how to make our own banners in Photoshop.

The JavaScript pullquote featured in the first two entries is more eye candy. If we can't implement it, then we won't, but damn, it's snazzy! It's very simple, requiring nothing more than a <span class="pullquote"></span> code wrapped around the desired text to be highlighted. We would use it only on a few entries — this is something that's easy to overdo. (It strikes me that it would work nicely on longer entries to break up the huge text blocks.) Not sure how it would work with an image...?

I'd definitely like to make it so headers would have padding on their bottoms to create some whitespace, sort of a de facto paragraph break.

Biographies Page: This is something different. I've created a "biography" page, perhaps a standalone page or perhaps to have its content incorporated into the About page. I think it increases our sense of community and gives the users some connection with the contributors and staff. I've used avatar icons for each person, selected pretty much at random -- of course, contributors could choose their own instead of the placeholder icons I've used, or we could not use them at all. The info would be generated by the contributors, to give as much or as little info as desired.

Breadcrumb Navigation: I didn't use it, for the simple reason that as it is currently employed, it's more of an annoyance than a help. Here's the breadcrumb trail for a typical Prisoner Abuse page:

Home » Timelines by Topic » Regions » Middle East » Iraq » Torture in Iraq, Afghanistan and elsewhere

No one came to that page by following those steps, and no one will use the breadcrumbs to retrace the steps they didn't take. I know the breadcrumbs are automatically (JS) generated, but if we can't get a system that makes it work properly: say,

Home » Timelines by Topic » Torture in Iraq, Afghanistan and elsewhere

then we shouldn't use it at all. Besides, with that simple of a navigation trail, and with the pagination, the navbar and footer links should suffice. But, you may disagree.

Show/Hide Content: Kevin had a very good idea about showing and hiding the bulk of the content in the entries, to be toggled on/off as a user desires. I tried several methods and abandoned them. Here's the reasoning:

1. I'm not a JavaScript guru, so I had to use cut-and-paste code freely available for downloading. None of them worked particularly well, and all broke the design in one sense or another. The best one was a jQuery effect, but it broke entirely in IE6. The writer insists that it works perfectly fine in that browser. I think it's probably clashing with some of the design elements, perhaps the rounded box...?

2. Adding 50 more JS commands to the page, as using this will do, will slow down load times tremendously.

If someone can find a workable solution, I'm all ears. One thing that comes to mind is selective JS popups -- either giving the entrant the option to use the show/hide protocol, or automatically triggering if the length exceeds X number of characters. But this might be troublesome to code into the database...?

Font Resizing: I've used ems for the majority of the header and text fonts in the pages, not pixels -- it doesn't make sense in a liquid layout to have absolute sized fonts. With some serious assistance, I've found and implemented a Javascript solution to resizing text. It works very well, though only for text in the <p></p> element. To get it back to the default size, simply refresh the page.

Entry Rating System: We talked about this -- a way for users to "rate" an entry, say 1-5, by clicking a star or a radio button or something -- a good bit, and I think it would be a good addition to the site (though I don't want to be the one to add that to every single entry). However, for it to work (i.e. not to be a fake CSS-only rating that doesn't add votes and actually mean anything), this would have to be set up using PHP, Ajax, and/or MySQL functions. That's above my pay grade. :) It would also need to look good, and be usable yet unobtrusive.