Redesigning site again... need comments

[mnkeybsness]

Well I've been at it again. This is the third major revision that I am doing to my site, and I really need some comments on the design and layout of what I have done. I know the code isn't completely valid and I will be fixing that soon, but I really need to know about the design before I get myself in too deep. Major concerns of mine are: is it too bright? is everything readable? does anything just not feel like it is in the right place? etc...

Thanks for your time, everyone.

LINK!
EDIT! the new design has been moved to the main site

[off-topic]
I know that I have been quite absent lately. With the birth of webkit message styles in Adium X, I became preoccupied with creating a couple message styles. Then the semester started coming to an end and I had a lot of homework to do, along with my actual job work. Then I promised myself that I wouldn't start redesigning my site until after finals week. Well I started at the beginning of finals week (last week) and I came out alright on my finals. So I'm sorry for my absence and lack of help around here. I will be attempting to make an effort to float around here more.

 

[Mitthrawnuruodo]

Nice...

I basically liked the design (I have to since my own homepage also has the same kind of tabs and the quite simple but cleancut design, that many sites have some variation of. Of course yours is a bit smoother than mine...

I write mine from scratch in php using bbedit, though. HTML-generators are for whooses...

Seriously, I think you're onto something with your site. Good luck finishing it. I'm don't think I ever going to find time to complete mine, it has been under construction for about two years now...

 

[the_wallcrawler]

off topic but...

do you go to school in minneapolis? a friend of mine went to Brainco, but quit. he has a bs in advertising and wasnt getting much out of school there.

edit: yea im a retard. i just saw your location...

 

[mnkeybsness]

off topic but...

do you go to school in minneapolis? a friend of mine went to Brainco, but quit. he has a bs in advertising and wasnt getting much out of school there.

edit: yea im a retard. i just saw your location...

i've never heard of "Brainco"... sounds like a made-up company. and yes, I go to the University of Minnesota, hence, why it is my location .

nobody really has anything to say about my site though?

 

[the_wallcrawler]

i've never heard of "Brainco"... sounds like a made-up company. and yes, I go to the University of Minnesota, hence, why it is my location .

nobody really has anything to say about my site though?

Brainco is also known as the Minneapolis School of Advertising Design

 

[superninjagoat]

Its beautiful

The page is beautiful. Very elegant.

My observations:

1. You may want to pre-load the roll-over tabs. They're disappearing when I first roll over them.

2. I don't particularly like the hover overline for images. I'd rather above and below to mirror you'r link style or none at all. I also find it confusing that the images are interactive, yet not actually links. IMO interactive items should be clickable.


3. If you'll refer to the attached image:
a. the left colum overlaps the right column in my browser (ie6, winXP).
b. in the calendar, the "s" tab for Sunday seems longer that the other tabs.

4. On some of the other pages (sorry, I wantonly clicked on some of the links ), you use a dotted line for content boxes. The solid line style exhibited on your front page is decidedly more elegant.

5. I love the grayscale approach. It allows the content to speak for itself. And when you do drop in an imave, boy does it pop!

 

[mnkeybsness]

superninjagoat: thanks for the reply...

I have posted the style to the main site: paularms.com... please use that for any comments. I am still looking for anything that anyone has to say

in response to your comments...
1: is there any way to preload rollovers defined in css?
2: removing underlines/overlines on images is on my list of things to do. images in entries are slowly being updated to work correctly...
3: another thing on my list to do. I don't know why it does this and haven't found a solution yet... if anyone has suggestions I would love to hear them!
4: i think that i've gotten rid of anything with dotted lines--am i wrong?

5: thank you for the kind words.

 

[superninjagoat]

superninjagoat: thanks for the reply...

I have posted the style to the main site: paularms.com... please use that for any comments. I am still looking for anything that anyone has to say

in response to your comments...
1: is there any way to preload rollovers defined in css?
2: removing underlines/overlines on images is on my list of things to do. images in entries are slowly being updated to work correctly...
3: another thing on my list to do. I don't know why it does this and haven't found a solution yet... if anyone has suggestions I would love to hear them!
4: i think that i've gotten rid of anything with dotted lines--am i wrong?

5: thank you for the kind words.

1. I don't know. Perhaps preloading the images in html before calling the style sheet would work. Perhaps someone else has some help on this.

2. I understand.

3. I'll bet its IE's box-model bug, 'cause it works fine in NS Google it. The gist of the bug is that in IE, the browser takes the width dictated in the style as the total width of the content, padding and margin combined instead of adding these three attributes together. The best work-around I've found is to shun margin and padding attributes, opting instead for absolutely and relatively positioned DIVs. There's a little code bloat, but the cross-browser compatibility is (IMHO) worth it.

Or, you could use separate style sheets or hacks to get around the problem.

Another partial solution (and I haven't checked your code, forgive me) is to write the page in strict xhtml. This will cause IE 6, which is the majority of your Win IE viewers, to render the page correctly. Google "quirks mode ie" for more information.

Again, I haven't checked your code, so my suggestions could be completely off base.

4. I don't see them in NS7 on Win; However, the dotted lines are there on IE6, but only in the "categories" boxes at the tops of pages. Do you have separate style sheets for each browser? If so, that could be your problem.

5.

 

[Mr. Anderson]

Nice and clean layout - I like that.

There seem to be a few issues with some of the photos - I got a couple 404 errors, one photo didn't fit in the frame (covered part of the column on the right - think it was the rose pic, and I'm using safari).

Something about the front page bothers me though. I understand the concept of keeping the top story on each of the sections there, but it makes the page a little long. Maybe just keep the top two or three new items and don't worry about having one of each category. If you add more categories this might be a problem.

Also, I'd reduce the number of photo categories, make it symmetric at least are consolidate the 10 to 9.

Nice so far

D

 

[mnkeybsness]

thanks guys...

Mr. Anderson: yeah like I said, the photos are slowly getting updated to match the new style. As for the index page, there would be a problem if I allowed only the top 3 entries or something because they would almost always be photos because that is the section that gets updated most often. I'm using just short excerpts for them to keep the page as short as I can, I would like to have a better way to do this, but I haven't found one yet. And as for the photo categories, I don't have a set number that there will be. Most likely over time there will be more added. Oh and one is missing at this time

I'll give the box-model hack a try... oh how I hate IE

 

[mnkeybsness]

I've got a problem trying to get rid of that underline when images are hovered over. Here's some CSS...

a:link {color: #888888;text-decoration: underline;}
a:link img {text-decoration: none;}
a:visited {color: #888888;text-decoration: underline;}
a:visited img {text-decoration: none;}
a:hover {color: #666666;border-top: 1px solid #666666;}
a:hover img {border: 0px; text-decoration: none;}
a:active {}

for some reason only the border: 0px works for the images while the text-decoration: none does not. Does anyone have any idea why or a way to fix this?

 

[Rower_CPU]

That's a really strange one, Paul - I'm tinkering away at it, but haven't found the solution yet. It doesn't look like it's the border at all, because if you add a border to a:hover img it shows up a few pixels below the image. This looks more like a text-decoration: underline...but without the text!

 

[Rower_CPU]

Got it! It was the border-top on the a:hover.

Make your a:hover text-decoration: overline underline; instead and you're set.

 

[mnkeybsness]

Yay! Thanks!

 

[mnkeybsness]

after testing, it seems that the box-model hack is not fixing that overlap issue. i guess i will just make another stylesheet for IE... argh

 

[Mr. Anderson]

all this fun with css and compatibility.....

that's why I'm going to stick with flash....

D

 

[kgarner]

Try this technique to kill that flashing problem on your rollovers. It is basically a more tuned version ofthe Fahrner Image Replacement technique. It works because the images for the roll over state and the regular state are the same image and are loaded together.

Also check out this and this for another method you could try.

Like the site by the way. Are you using a CMS (Movable Type, Word Press, etc.) or is that a home grown solution?

 

[Rower_CPU]

all this fun with css and compatibility.....

that's why I'm going to stick with flash....

D

Unfortunately, that's the decision a lot of people make, letting browser makers off the hook for full support of web standards - as long as they support a plug-in, people don't complain.

It's not a problem with CSS, it's the spotty implementation of it by certain browsers *cough* IE *cough*.

Flash has its drawbacks, too...

 

[Mr. Anderson]

It's not a problem with CSS, it's the spotty implementation of it by certain browsers *cough* IE *cough*.

Flash has its drawbacks, too...

I realize that - but even if the animation doesn't go as smoothly on some machines as on others, in most cases its going to look exactly the same. I also can get away with it since its a personal site. Not everyone wants/needs a flash only site.

D

 

[Rower_CPU]

I realize that - but even if the animation doesn't go as smoothly on some machines as on others, in most cases its going to look exactly the same. I also can get away with it since its a personal site. Not everyone wants/needs a flash only site.

D

I wasn't really referring to animation smoothness, but accessibility of content and download speed, in terms of drawbacks.

And you're absolutely right that it's a great option for some - I just don't think it's right to say "CSS is hard, Flash is easy".

 

[Mr. Anderson]

And you're absolutely right that it's a great option for some - I just don't think it's right to say "CSS is hard, Flash is easy".

damn, didn't think I said that

Flash isn't easy - especially if you're doing action scripting. No, I was just talking in terms of not worrying about browser compatibility in general. In the case of Flash, you're just dealing with the idiosyncrasy of one app, not worrying about the compatibility of different browsers. Now, whether or not the Flash plugin is available or not for a particular browser is not something I'm worrying about here. At some point you have to force some assumptions with any web layout/design regime.

D

 

[Rower_CPU]

That's where it gets tricky comparing a web standard system of presentational markup and a proprietary plug-in for animation/interactivity.

I'm not pointing most of this stuff at you, D, it's just a mindset that I see sometimes among web developers that "Flash = web design" or that it'll solve all your problems. We both know that's not true, but sometimes I feel I have to speak up to make sure people getting into web design get the message.

And you're right, it's all about tradeoffs, both on your end and on your visitors'.

 

[Benjamin]

*warning have not read the rest of this thread*

Paul looks good, I have done a site looking sorta like that and I really do like that look. Anyway I would consider looking at alistapart and try to fix the sizes of those fonts, your design is great but sizes are going to be hard to fit in the gfx spaces you have (i know this feeling). Also yeah like your site, my site hates IE, but oh well. Anyway again looks great.

 

[GorillaPaws]

I really like the greyscale look of the site, it's kinda like a white-wash aqua thing and it looks great, especially since it makes the colors of the art really punch (as someone else said). I noticed a couple of minor probs. The calendar on the right hand side has the Saturday column past the width of the rest of the main border, and I'd like to see the Tracback link at the bottom of each field moved a couple of millimeters to the left to give it a little room to breath if you know what I mean (real minor, and most probably won't notice it, but you have such a good looking site, I figure you'd want it to be as close to perfect as possible). Nice work!

 

[mnkeybsness]

Anyway I would consider looking at alistapart and try to fix the sizes of those fonts, your design is great but sizes are going to be hard to fit in the gfx spaces you have (i know this feeling).

What's wrong with the font-sizes? I'm confused.

GorillaPaws: What browser are you seeing that calendar problem in? And I agree with the trackback thing. It's on my list of things to do when I sit back down and work on the site again... after I finish a couple Adium Message Styles.