Www.humanetainit.com

Hello!

I've been busy creating a standards compliant site. There are some things I am somewhat uncertain about.

First of all, the design is simple, because I like simple, but is it aesthetically pleasing?

Secondly, it seems that IE6 supports :fixed, but my divs are only fixed in other browsers. I did a css-hack against my principles, now at least the design doesn't break, but the divs are now :absolute... I checked in IE6/win, IE7/win, FF2/win, Opera9/mac, FF2/mac, Safari, Camino and even IE5.2/mac. Except for the first (divs aren't fixed) and the latter (loses some functionality), all seems well.

Anyone having problems with the layout? Please let me know!

Thanks a lot in advance,

Marc

Ah, standards compliant... my two favourite words =) One tip though, your page doesn't seem to validate. The only fault is missing ALT attributes on the IMG tags. No biggy.

I wouldn't worry too much about IE/mac... but I'd fix any bugs with IE6/win. The page seems to have crashed my IE6 on first-attempt to open.

I urge you to remove all the inline styles and just use an external stylesheet. This will be cached by the browser and make loading theoretically faster in the future.

Is that a table-based layout?

You're right! A late-night addition causes this error: I added a favicon-retrieval system, but forgot the alt. Always on the move...

In-line styles need to go, you're right there too. And they will, I have been wanting to do this...

The layout is table-free, but I do use tables for navigation. Since they are structured I feel there is no harm in that. I've been toying with the classic ul, but IE6 didn't appreciate what I was trying to do. I hate wasting my time on IE just as much as the next guy.

I wonder what that crash was all about?

I'm updating a couple of things: I'm moving towards XHTML Strict, but I'm still debugging this. Most pages validate.

I already removed a lot of the in-line css, but can't remove all of it. Images sizes are impossible in my vision, so I'll leave those in-line. Colours are another story, I'll remove them later. Maybe.

**edit: hang on, everything's breaking up**

**edit: Sitescore says I'm in the clear (phew)**

Tip: Width and height are still valid IMG attributes... ;-)

Also, it's one thing to validate, but another to keep your code clean. I would advise putting actual text in all of your ALT and TITLE attributes as well.

What are all the empty DIVs for?

I still question that table for your article list.

"Width and height are still valid IMG attributes"

Are they? w3c validator didn't agree with them (although he did in Transitional).

"I would advise putting actual text in all of your ALT and TITLE attributes as well."

Can't agree with you there. If you check your site with a text-browser, you will see the alt text, unless you use an empty element. So, you should use useful alt texts. For an image with a quotation mark, it's more useful to do alt="\"" then alt="quotation mark". You'd something like:

quotation markThis is a brilliant quotequotation mark

I'd prefer "This is a brilliant quote".

The title element is just for a mouse-over text, why use is unnecessarily?

"What are all the empty DIVs for?"

I think they're already gone? They were for unused functions, and therefore useless.

"I still question that table for your article list."

As do I. Maybe it will be gone in in the near future.

I now fixed the external link icon. It turned out that you need to declare the .ico format in .htaccess to make them appear. Is anybody not seeing the social bookmarks on mouseover under Columns? I had one report, but can't reproduce it. IE6 might be the culprit.

I assure you, you can.
I don't think you can put "px"



I found the tag[s] code in your HTML:
<img src="http://www.humanetainit.com/custom/images/logo.jpg" alt="" title="" style="height:195px;width:225px;" />

It would be better written as:
<img src="http://www.humanetainit.com/custom/images/logo.jpg" alt="Humanetainit Logo" title="Humanetainit" height="195" width="225" />



I only mentioned TITLE because I saw it in your tags. Title has a more accessible use than just the tooltip, it's good to use them.



I still see a bunch:



If I have time, I can mock up an example of how I might do it... ;-)


I hope you don't think I'm cutting up your site... I appreciate that you're interested in working on improving things, and it feels like you're taking my criticism well. Most people just get mad at me =)

The "bookmark above with..." dialog scares me... it's so big! =)
Internet Explorer 6 does not work... Opera does.

Damn! You're right!



But what's wrong with declaring imagesizes with CSS? Isn't that the XML way to go?



What's the advantage in accessibility?



Hm. I'd forgotten about those. They are the divs for some adminfunctions (for which you need to be logged in). I'll move them out of harms way.



By all means... But remember I copycatted the original from Ruthsarian Layouts; but they have been mutilated beyond recognition by yours truly. The Ruthsarian version was, of course, table-free.



[seriously now]Mad? No. Delighted? Yes. If I couldn't take criticism, what's the point of posting it here? I'm here to learn from my mistakes. And maybe help out others in the process. How can I be mad at someone whose helping me out free?[/seriously now]

Too much? I was afraid of that... I'll need to cut down on links...

IE again... might be the z-index bug?

XHTML & CSS are used to separate the presentation code from the structural code. An image's dimensions are structural. (I've heard debates otherwise, but I disagree). One of the benefits of CSS is the fact that it's external and cache'd... Similarly, the simplicity of changes. To change the colour of all links on the entire site, you change one line in your CSS. That's awesome! This is why I discourage inline CSS because the benefits jsut aren't there.

Besides, height & width are valid attributes of the IMG tag... enough said



I'm paraphrasing, but "accessibility" is ensuring your page can be read by as many internet users as possible, regardless of their browser, browsing device, or browsing abilities. Most people consider accessibility when presenting their site to a vision-impaired user.

Basically, how can someone use your page if they cannot see the screen?

Due to low-visibility, colour-blindness, legal blindness, etc, some internet users use screen readers which read web pages aloud. Doing your best to keep your page "accessible" will ease their use of your site.

ALT text and TITLE attributes are one easy way to do it... there are a tonne of other tips.

I'm in doubt. There something to for both. I'll sleep on it.



I'm aware of WAI and the like, and I try to live up to them, but what I meant was: What's the advantage in accessibility terms? I don't see that.

I just wasted a perfectly good afternoon on trying to get the :hover effect working in IE6. Works in any browser but IE6 and earlier and Avant.

It's just silly, but I can't figure it out. If you hover over a category, you see a preview of its subcategories. But if you click it, and then hover, it's gone! But sub-subcategories do work... Drivin' me crazy.

Anyone a tip?

The only thing I might change is the fixed scrolling.

That's all? Great!

However, I'm kinda keen on the idea. It rescues me from a lot of navigational nightmares, but it does give me some headaches. I'm still not able to put a YouTube video on our site, because it moves in front of the banners. The YouTube code isn't xhtml compliant, but that can be tweaked. It's a shame the flash YouTube uses want to stay in front of all layers, regardless of z-index.

Thanks for the feedback!

I think if you shrunk the top banner and let it scroll (didn't keep it static), you could solve your YouTube issue and address the "i don't like the scrolling" concern.

The ads are a little big. They might prove more useful as a side-bar.

Thanks... I'll take it into consideration.

1 - i think you could change logo's size to be aligned with the left menu;
2 - top menu could fit the entire screen, it would look better to me;
3 - scrolling... it looks like a frameset, i hate the frameset layout;
4 - and the tables, sure. get rid of them

Finally! I can reply! I was locked out for some reason.

3 - scrolling... it looks like a frameset, i hate the frameset layout;

Okay, I agree, I hate framesets too... But can't we leave these grudges in the past? I like the idea of being able to keep navigation in view at all times. And thanks to CSS, I can. But why does everybody else hate it so much? I can see problems for small screen sizes, but maybe there should be a fixed/relative switch to accommodate everybody. It's just that there are so many opinions, you start wondering what is best and if there even is such a thing as best.

Thanks for the feedback; I will seriously reconsider the fixed divs.

You were locked out due to a switch in the URL/spam blocking functionality... not to call your thread spam.. the issue was fixed (well, duh).

I understand your point of view regarding the frameset-look and navigation on your page... but I also see this as a slightly old-school way of designing webpages. Your visitors aren't going to be confused when they're half way down a page and can't find your navigation bar.

I could live with it if the top part weren't fixed... otherwise, the actual content portion of the view is quite small. It feels like a lot of scrolling for very little content.

Also, I tend to not look in the bottom of my screen... to read the content of your site I feel like I'm straining my eyes to look there... I acknowledge that this point sounds lame, but it's true.

Well, that counts for something

I'm not afraid of that; I enjoy being able to go quickly between pages. But that is something our visitors care less about.

Yes, it's less lame than it sounds. Do you think it's within the realm of possibilities to leave the vertical nav and the logo fixed while setting the rest to relative? Or would that be odd? Sam Ruby does something like it, but he has no horizontal nav.

Edit: I removed the fixed bits. I would pass on some reputation, but that doesn't work. Something about an invalid URL. Bugger. Well, you'll have make do with a pat on the back.

I guess I shouldn't have mentioned that. Now no-one will talk with me . MadCowDzz, can you fix that? Thanks a zillion.

Ah, well, I'll just talk to myself a bit. I removed the table from the content part; but I feel I suffer from divitus. I'll try cutting down on them later.

Now a nice solution for my nav. I know it is the way to go to use <ul>. I had this once, but decided against in favour of my good friend IE6 (it behaved strangely, I couldn't fix it, so I gave up). I'll check ul's out once more.