Topic: 2004 redesign (Page 1 of 1)

The last time I revamped my personal fun/experimental site was Spring 2003, so it's been almost a year to the day.
http://www.schillmania.com

This uses XML/XSLT for the content storage and presentation in conjunction with PHP for a templating framework of sorts. The content has been broken up into structured paths, so "deep linking" is possible as well as search engine spidering. It's more dynamic though if you're in a newer browser, as content is loaded via XMLHTTP where supported.

There are some bugs, and not all of the content is finished yet - but enough should be there to keep the average person entertained for a little while at least!

I fully expected to be disappointed as I liked the other one, but man, this is great. A bit more waiting for things to respond, but overall impressive again. The last stylesheet is no stylesheet? If not, it's broken.

fantastic.

I can't find anything to complain about. Excellent visual appeal, very balanced, very smooth.

And it (almost) validates!

You have a link in which you have an "alt" specified - change that "alt" to "title" and you'll validate fully on the XHTML.

The CSS has a couple things that I don't know how to rectify. One is easy though - change your "cursor:hand;" to "curson ointer;" (the "hand" is an IE thing, but "pointer will work for everything).

Very nice work.

I'm not that much of a fan of the header image, but that is only a matter of taste. Except from that the page looks really good!

I really like the filter thing you added to the content menu, looks really nice and works in both Opera and Mozilla But on both the filter and the theme 'menu' I would add a closing bracket (so it says 'theme { ... }' instead of just 'theme { ...').



_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Thanks for the comments..

JKMabry: The last "theme" is "none", ie. disable all stylesheets - so it is working as expected. I'm using a stats counter (reinvigorate.net), which seems to be slow to load at times - it isn't a lot of data, just that the response time is quite high.

DL-44: I've fixed that "alt" issue, but it seems there's some server-side caching going on somewhere and the change hasn't taken effect yet. Need to do some investigating!

Veneficuz: Did you not like the particular banner shown at the time (it's random and changes as you view content that has related photos), or just don't like the idea of a big banner at the top? - I had never taken the "photo at the top of the site" route before, so I wanted to try something different.. and make it dynamic so it would stay relevant to the content being read.

I was trying to also use the curly brace { as a sort of "branch" to the image that sits beside it (as with the filters etc.) - I'm not sure if that makes much sense, but it's only on one side as the image butts up against the end of the content area it is nested within.

[This message has been edited by Scott (edited 03-03-2004).]

The thing I didn't like about the banner was the effect you have on the right hand side - the stretching of the right border. On some images it looks good, but on some it doesn't. But I've got to admit that it is a nice way to solve variable width problem...

Reason that I would prefere a closing bracket is that in Math something between two curly brackets defines a set of elements. And I think of the themes and filters as two sets that you chose an element from. So without the closing bracket 'the set' seems to be lacking. But if you're not used to seeing brackets used that way it will probably work the way you've used them as well.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

I agree with you on the one-pixel stretch - some of them look better than others. I still have to go through the banners and pick out the ones that really didn't work The whole point though (as you noted) was to have an image that could tile across a big range of screen resolutions (if only very simply.)

Your math logic makes sense as well, but this is the presentation layer.. I saved all the math (and it is somewhat limited even then) for the .js

I forgot to mention, it's really messed up in Safari on the Mac at the moment. It looks like the issues relate mostly to CSS, but I'm not sure exactly what's going on. That browser doesn't provide much in terms of Javascript debugging, although apparently the standards support (aside from a few bugs) is quite solid. If anyone sees some obvious gotchas with my code that apply to this browser, I'd appreciate any tips.

Thanks!

[This message has been edited by Scott (edited 03-04-2004).]

Very slick. I really like the work you've put into the CSS here. Oooh, and the slider widget for the paroramac header photos is super sweet.

Although, I think there are a couple of issues with the content navigation.

Firstly, the "select tab below" really isn't needed. They look like tabs, have different hover states and the cursor changes. If the use can't figure it out without the "select tab below" text then I'd be wondering how they managed to switch their computer on in the first place. That and witout the CSS is makes no sence, as there are no "tabs", just links.

Secondly, the list filtering has some issues. It's a nice feature, but IMO implemented in a horribly complicated way. Selecting what is and isn't filtered is fiddly (larger selectors would be nice) and seeing as you don't update often I'm guessing you'd only get casual visitors who aren't likely to remember your colour coding for the different content types. Perhaps, instead of using "bars" you could use squares big enough to fit a letter in there, like [J] for JavaScript/DHTML, [D] for Downloads, [U] for updates etc... as this, combined with a colour will be a lot easier to remember.

Lastly, white space, which for the most part is fine but you could do with some more padding inside the main content boxes, seeing as it's a liquid layout you'll like have ample room to spare so setting some generous amounts of padding to shift the text away from those borders will help a lot.

Apart from that I think it's super. =)

I would add some padding in between your different content boxes. It confuses me as to where one post ends and the next begins. The problem is that it looks like the design simply repeats vertically with no real break. Something needs to be in there to signify that "this is the end of the second of content." As it stands I am not sure if the separate posts are a continuation of the same idea or contain a completely different set of ideas. I have the same problem between entry's 2003 and 2004. I am not sure if they actually go together or are designed to be separate categorys completely. I know I am knit picking, but if it rattles my subconsious I am pretty sure it must rattle someone elses.

-Dan-

Very good feedback, thanks! I'll go through paraphrasing here.

"select tab below" really isn't needed:

I agree - this is a leftover from the design phase that I never removed, I kind of liked it there even though it's quite obvious. Kind of like the fact that the windows "Start" button is labeled. "Duh". haha
I'm debating whether to replace it with something more helpful or to remove it.

Without CSS: haven't fixed this yet either but that's another "to-do" item - place headers in for each tab section; then with CSS disabled it will be more clear as to where each content section starts.

List filtering:
This is probably the biggest single fault point with this design - the color coding doesn't really work, I wanted to put two or three category "indicators" for each entry in a small space, and I chose not to go with letters or icons because of the font size scaling. (Everything is in EMs.. try it. Works nicely IMO. Maybe you should just view it at a larger size! )

There are native browser tool tips provided also if you hover over the filter items (and over the entries), to clarify what a certain filter is (or what an entry is about).

I haven't updated the site yet this week, it just launched and I included some stuff from last year so there is some content to read under the "news" section. I seem to have a base of people that visit regularly, so familiarity is expected.. The filters were put in so entries can be narrowed down as the list grows. That's why they are also "out of the way", in a sense.

I figured most people won't use them at first, but shouldn't have much trouble figuring out how they work. The main problems are in remembering what a color means, and clicking on the fields in the small case - it's a compromise between usability and scalability for me.

Padding:
My personal preference is to have text fairly tight inside a box, but not right up against it.. I'll try playing around with the CSS and see how things look.

Warmage:

The idea was that each post is its own entity and statement/thought etc.. the nav is on the left, the related content is on the right. I'm not sure what you mean by signifying "this is the end of the second of content" - adding something to the right side to show the "end"? A footer?

The separation of 2004 and 2003 etc. under "news" are simply an indication of the time frame in which that entry etc. was written. It may seem odd to show this information, but I wanted to have a clear break between this year and last year.

I could see how the entries could be lumped together as one thought as I did not include dates (think "blog" style) on each entry - I wanted to avoid this as I thought it was redundant to have a date stamp on each item (hence the division by year, to show time frame.) The titles should indicate that the subject is different - under 2003 I have a bunch of "snowstorm"-related stuff, but putting those together is correct; they *are* related.

I see your point, but I think the nav does what it's supposed to - convey a list of items - and how those are interpreted is up to the user. Some are related and some aren't, but that goes back to the filters and color-coding.


[This message has been edited by Scott (edited 03-05-2004).]

Sorry, I knew that was not going to be clear enough. The problem is that the separation you have, does not separate the content enough. It is ambiguous what the separation you have signifies. It does not stand out enough.

Maybe someone wit better diction sees what I am trying to explain and can do a better job explaining than I can.

-Dan-

I think I get what you're saying.

Having a date separating groups of content doesn't really say much as far as what the content is actually *about*. It might make more sense to split it further up under "play" for example, sub-sections like programming, games, site archives, etc. etc.

Does that sound more along the lines of what you're getting at? I think I like that idea more than doing it chronologically.. something to fix!

em based designs...

Never really saw the fun in sacrficing so much control in order to acodomate the few people who don't bother to setup their computer so the default text sizes are actually readable. Although, in this case it does work quite well, but I've all too often ran into issues trying to design sites this way, which usually reuire me to sacrifice design elements I'd rather not have to. Maybe I just need to think differently.

ps. nice touch on the stripes in the background. I'm doing something very similar with my current site design .

Thanks again for the comments.

I was trying to do something new with the EM thing, particularly with the width of the columns - so people can see the layout adjust dynamically according to their browser's font size settings, not just the text.

The slashed background thing has been popular for the last year or so, it seems the "drip"-style (from logos, typeface etc.) is the hot item among the designers these days

scott- killer site man. I love the changing images at top. text is easy to read . . a lot of info but not too cluttered. me likes.