Am working on version 0.2 of my MT Courseware for next quarter. The drop-down "QuickLinks" menu didn't work from an interface standpoint, so I decided to add tabbed navigation elements at the top of the content area. Since I'm teaching web design next quarter, and one of the goals of the class is to get them to renounce table-based and non-standards-compliant authoring, I figured putting in a table-based, Fireworks-generated DHTML menu would be a bad example.
So instead I turned to the wonderful A List Apart, which has great articles on CSS-based navigation--and a great example in their own new design.
After a lot of css and xhtml tweaking, I finally got the effect that I wanted, which can be seen on the new course site. (Again, since it's a production course site, please don't leave comments there...)
The most frustrating part was getting it to work perfectly in Mozilla and Safari, only to find that in IE5/Mac instead of a horizontal navigation bar I suddenly had a vertical bar. I don't even want to tell you how many hours it took for me to discover that the problem was carriage returns in the html for my unordered list. Aaargh.
At the moment, I think it works cross-browser, cross-platform; I tested it in IE6/WinXP via Virtual PC, as well as my Mac browsers. If it's not working your configuration, let me know in the comments here.
Once I'm sure I've squashed the bugs, and cleaned up the categories and css a bit, I'll post the new templates.
Works fine in WinXP Pro w/ IE 6 (non-Virtual PC).
Carriage returns? How totally bizarre. Never seen that before.
Yeah, I've been bitten by the carriage return thing before. What gets me is that it's not carriage returns inside the <li> and </li> tags, but the ones between </li> and the next <li> in the list.
I'm also starting my list for redesigning my class website. I went with pMachine this past semester because of its secure areas, and I keep hoping that MT Pro will come out by the next semester with similar features. In any case, I've been considering going back to MT because I use it personally and like its features and the third-party support. I really like how you've used the rollover effect on your nav bar, and all of the content text is clean and easy to read.
And how did you get all of your semester's months to show up?!?
That is so cool looking! (Opera 7.something, W2K)
I've run into that bug too; it seems to happen almost at random.
Mariann, the templates from last quarter's courseware are here, and include the code for the calendar (in the sidebar file). I based it on the information provided by Sillybean's Various Tricks With Archive Calendars.
Like you, I'm hoping that MT Pro will have secure features, and that I can get our department to pony up for it so that we can all use it!
I'll post the templates for the new pages as soon as I'm sure I've squashed the bugs. Probably by Sunday.
I have a weird pet peeve about permalinks for posts which link the word "permalink." Google actually uses the text within the <a> tag to associate words with the document they link; so why not link the title of each post to it's permanent location? Beyond Google, it's just more meaningful that way.
I write about this in Help the Googlebot understand your web site.
Same goes for "click here" links - don't click here.
Usability folks argue that it's more intutive this way - "where's the permalink? oh there it is" or "where do i click? oh, click here." Frankly, though, I think that's backward-thinking. As people begin to understand the medium for what it is - a collection of cross-linked documents - they'll look to click on the relevant words, not instructions or "type of link" labels.
There are no clear conventions for permalinks on weblogs, which means that if you don't label them, people have to hover around and figure out where they are.
To me, the title is not (yet) an obvious place to click for a permalink. As a result, I'm with the usability folks. If I have to choose between designing pages for human users, and designing pages for Google, I pick the humans. :)
A good UI principle is 'enable all the things people try'. There's nothing to stop you making both the title a permalink as well as an explicitly labelled one at the bottom.
From the spider's point of view, having a consistently applied rel="bookmark" attribute for a permalink would be a real winner, but that isn't going to happen soon.
Point taken, Liz. :)
I've been considering Paul's approach on Ftrain for my redesign - linking the actual URL, and labelling it "Permanent URL" (as well as the title). It seems usable and semantic all at once.
It's such an interesting time, watching these types of things evolve.
Here's another question... how do you handle grades? If the website supports a traditional face to face course, grades can be returned in person, but a website that *is* the course is another story. I substituted grades for certain MySql fields in pMachine, but I'm not sure the same can be done with MT. I guess I could use MySql to store the grades, then issue a password to each student to access their profile with PHP displaying the information.
Hmm. It's a puzzling situation!
On my 6.0 version of IE the top half of your name is cut off (in the left side column above the calendar). It looks like the It looks great in Firebird 0.7, though.
Thanks for sharing all of this. I'm working on implementing your first version of MT Courseware, and I'm running into something odd.
If I make the code for the calendars a permanent part of the templates, they display fine. But if I try to use php includes, they look funky. Now, from experimenting with other things, I know that php includes work, but why would they misbehave on this particular application?
Also, any chance of seeing the templates for the new layout?
:-)
Ditto George, here. I'm on the verge of building the spring semester's course websites, and it'd be great to run them out of your MT Courseware templates, particularly if the new ones were available...