Topic: Site update

Some of you have been here before.
I just updated the site, and would appriciate comments on it. http://www.naltabyte.se/liquid

Thanx.


(^-^)b

This should go in Site Reviews, but I'll get this rolling anyways...

Doctype - This is pretty much standard fare. Get it.

Encoding - You need this too. Get it.

Testing, testing, testing - Test your site in as many browsers as possible, but most importantly: IE6, Mozilla, and Opera. As it stands, a lot of things aren't showing up right in Mozilla. For example, when I mouse over the navigation links, I don't get the "hand" cursor, so the average user would be incredibly confused. Also, none of the hover effects are working.

Code - You're using a WYSIWYG editor, aren't you?

<div onmouseover="color(this,1)" onmouseout="color(this,2)" 

onclick='fetch("content","whyxml");adjust(this)' 

 style="filter:alpha(opacity=40);position:relative;left:1;cursor:hand;padding:2;width:100%;border:0">

<span style="text-align:center;color:white;background-color:blue;

border:white 1px solid;width:30;height:10">

>>

</span>

   <b style="color:blue">User scenarious.</b>

</div>



<br/>

The above code was repeated about 10 times throughout the page. And this:

<b>[<span style="cursor:hand;text-decoration:underline;font-weight:bold" 

onclick="treasurehunt()">Treasurehunt</span>]</b>.<br/>

    <b>[<span style="cursor:hand;text-decoration:underline;font-weight:bold" 

onclick="airbud2()">Airbud</span>]</b>.<br/>



    <b>[<span style="cursor:hand;text-decoration:underline;font-weight:bold" 

onclick="chess()">Chess</span>]</b>.<br/>

    <b>[<span style="cursor:hand;text-decoration:underline;font-weight:bold" 

onclick="airhockey()">Airhockey</span>]</b>.<br/>

    <b>[<span style="cursor:hand;text-decoration:underline;font-weight:bold" 

onclick="miocar()">Car</span>]</b>.<br/>

    <b>[<span style="cursor:hand;text-decoration:underline;font-weight:bold" 

onclick="spaceshuttle()">Spaceshuttle</span>]</b>.<br/>

This is the kind of redundancy that drags down otherwise simple, fast sites, and the kind of redundancy visual editors are so adept at producing. Either learn to use visual editors in a less destructive manner, or hand-code everything.

Visual Design - There's not too much to comment on, but... The text is a little too small for my liking. It's generally accepted that 9px is the minimum threshold of legibility, so you may wanna up the sizing a bit.

The header looks odd, the way it's chopped off at higher resolutions. If you had used a liquid layout that resizes to fit the screen, this would look a lot better.

I don't want to nag you, but the main issue here is to clean up your code. There's just way too much junk markup in there.




[This message has been edited by ozphactor (edited 10-06-2003).]

[This message has been edited by ozphactor (edited 10-06-2003).]

Thanx, I appriciate it. :-)
I think I got rid of most of the excess code.
Any other stuff I can get rid of?
- I will link the css and the scripts, as soon as I feel that I got it cleaned up enough.

And yeah, it's an editor... *sigh* - my illusions gone with the wind..




(^-^)b

quote:

---

I think I got rid of most of the excess code.
Any other stuff I can get rid of?

---

Yikes. There is a *ton* of code that code be pulled out. I honestly don't even know where to start.

The "links" are a mess. The lack of the usual hand cursor doesn't help, and the javascript pseudo link deal does nothing for your usability.

The visual design is very unappealing, and considering that you seem to be trying to sell a product related to visual design...that's not a good thing. The logo at the top of the page is almost unnoticable at first, and then when you do notice it, there's nothing but a couple cheap effects (lens flare, scanlines..... eck...).

The rest of the page is completely lacking in any sort of visual design at all. There is no visual structure to help show what is what, nothing interesting to move the eye from one area to another, no boundaries, no headers, no structure or interest at all.
The small over-compressed photo of the people standing in a group below the paragraphs serves no purpose whatsoever. It is poor quality, poorly placed, and seemingly completely unrelated to anything else on the page.

The navigation is a nightmare. Certain links seem to simply shift the visibility of the content. Certain other links switch to a totally different navigation menu, with no apparent way to get back.

The actual content on each "page" is difficult to follow, and seemingly unrelated to the title of the link that was clicked.
It is also a grammar teacher's worst nightmare. I am going to guess that English is not your first language. If that is the case, you may very well want to have someone who is a native English speaker translate your copy for you. If that's not that case, that's a totally different story...

There is- as Oz pointed out - no encoding or DOCTYPE specified. That can prove very problematic.

There are also a great deal of bizarrely complex nesting of <div>'s and <table>'s and <p>'s going on that is rather diificult to decipher, and completely unneccesary (in fact, in some cases, completely incorrect use of HTML that seem sure to cause problems).

I honestly can't find much of anything positive to say about this site.

>>The "links" are a mess. The lack of the usual hand cursor doesn't help, and the >>javascript pseudo link deal does nothing for your usability.

I removed those.

>>couple cheap effects (lens flare, scanlines..... eck...).

Nothing I can do about that.
I didn't design the logo.

>>The navigation is a nightmare. Certain links seem to simply shift the visibility of the >>content. Certain other links switch to a totally different navigation menu, with no >>apparent way to get back.

That's one link, (1) and it's to another site.
You can get back using the back-button you know.
I'm a little doubtful regarding your objectivity here..

>>The actual content on each "page" is difficult to follow, and seemingly unrelated to >>the title of the link that was clicked.

??
I must be completely daft, but I can't for my life understand what you mean by that?
- I have asked around and they all wonder the same..

>>There is- as Oz pointed out - no encoding or DOCTYPE specified. That can prove very >>problematic.

Infact, I never see anyone use it, and in some builds of Mozilla, it actually makes it crash.
Especially if it's xhtml -strict, and I surf it offline.
Aside of that, I can't for my life imagine when or how it would ever cause problems.

>>There are also a great deal of bizarrely complex nesting of <div>'s and <table>'s and >><p>'s going on

Surely not.
The table is as simple as can be, and only lists some examples.
Then there's some divs being replaced on/off depending on what content I want to view.
Each block is hidden in a div until I want to show it.

I have tested the page both as xhtml using the right doctype, as well as an xml-file, and the coding 'survived' both tests.
Now I removed the doctype because both Mozilla and Opera flipped on me, and I dont trust them not to do that online, for others visiting the site.



(^-^)b

quote:

---

That's one link, (1) and it's to another site.
You can get back using the back-button you know.
I'm a little doubtful regarding your objectivity here..

---

No, I'm not talking about the link to the ther site.

I am talking about when the list of links changes. Trust me, it happens.
The user shouldn't have to use the bAck button to get back, a site should provide logical and orederly navigation.
My objectivity? I have no possible basis on which to be biased....?

quote:

---

I must be completely daft, but I can't for my life understand what you mean by that?
- I have asked around and they all wonder the same..

---

Quite simple - exactly what I said.
The content on each page (each visible div....) is hard to follow. It makes no sense. It's full of repetitive and uninformative phrases.
After reading each section, I still have very little idea what it's all about, and feel it took far too long to get the info I *did* get...

quote:

---

nfact, I never see anyone use it, and in some builds of Mozilla, it actually makes it crash.
Especially if it's xhtml -strict, and I surf it offline.
Aside of that, I can't for my life imagine when or how it would ever cause problems.

---

You never see anyone use it? Apparently you don't associate with Web Desingers then.
Any competent web designer will have both a Doctype and the encoding specified for their web page.
If it makes Mozilla crash, it is because you have coded things improperly, not because you added a doctype. The doctype is an extremely important part of a webpage that tells the browser exactly what it is looking at, and how to treat it. It is a vital part of cross-browser design.
The lack of encoding will turn the page into gibberish for some people.

quote:

---

Surely not.

---

Surely so =)
The code is simply piled up in a bizarre fashion that increases you file size, increase the likelyhood that with the proper doctype you will have problems, and makes troubleshooting more difficult.

quote:

---

Now I removed the doctype because both Mozilla and Opera flipped on me, and I dont trust them not to do that online, for others visiting the site.

---

With proper, standards compliant, coding, you won't have anything to worry about in that regard.

=)

You should listen to DLL, he knows what he speaks of..

Just a quick reply to 'optimize' the navigation. CSS is your friend, and you can replace the whole opacity thingy by a simple :hover pseudo classe

<html>

<head>

<style type="text/css">

a.navigation

{

    color:silver;

    text-decoration:none;

    line-height:1.5em;

}

a.navigation span

{

    background:lightblue;

    color:white;

    margin-right:4px;

}

a.navigation:hover, a.navigation_selected

{

    color:black;

    text-decoration:none;

    line-height:1.5em;

}

a.navigation:hover span, a.navigation_selected span

{

    background:blue;

    color:white;

    margin-right:4px;

}

</style>

</head>

<body>

<a rel="nofollow" href="#" class="navigation"><span>>></span>test 1</a><br />

<a rel="nofollow" href="#" class="navigation"><span>>></span>test 2</a><br />

<a rel="nofollow" href="#" class="navigation_selected"><span>>></span>test 3 ( selected )</a><br />

</body>

</html>

Though Liquid only work with IE, that way your navigation looks the same on browsers support the :hover pseudo class. And it also put your page on diet
I'm not really an XHTML advocate but I think you should even embed the items in some ULs and OLs.

Cheers,

Mathieu "POÏ" HENRI

If your markup is "crashing" in Mozilla, then use a transitional doctype until you fix the markup so it validates. I'd have thought that a company dealing with xml would have understood the importance of valid markup.

[This message has been edited by quisja (edited 10-07-2003).]

Ok, enough already with the doctype-debate.
Of course you are right - I just forgot it, because I had to do other stuff.
I had just uploaded it when I realised this, and decided to tease you a bit.
Sorry, sorry, sorry.. I'll add it later tonight..
Jezzzzzzus...

I dont usually do webpages or design, and I'm a really crappy designer, what else is new?

Infact, if anyone would like the challange of re-design it, what would it cost me?
Seriosly, and dont try to take advantage of me here..



(^-^)b