*Update* Alright, web designers and coders come hither!

[jtusa]

*UPDATE 9/2/05*

Ok, I took a lot of the advice you guys gave me into consideration and did a complete rewrite. Got the doctype set right, redid all my CSS, tweaked the spacing and margins, organized the text in the home section to make title and dates easier to read, got rid of the pixel bar for the break and using an <hr>, moved title and menu over to the left so it's the first thing you see when it loads. Using H tags for text and the site is now very readable on browsers with no CSS support and at lower resolutions. The list goes on.

It's coming together better I think. Thanks a bunch for all the advice guys.

So I'm asking again to take a look and let me know what ya think.

Here it is

--------------------------------

Look at the design and the code. Tell me everything you think is wrong, should change, might want to change, you get the idea. Any suggestions, critiques, etc. I'm not the most creative person and I'm not well versed in web design, but I learn best from constructive criticism and seeing examples to help me out.

You should be able to the general idea of the design of the layout. It's a basic 3 column setup with a header and a footer.

Like I said, I'll take any input you have. Everything from the coloring, layout, code, etc.

 

[n0cmonkey]

Looks good to me.

 

[Rip the Jacker]

Less text.

Some pictures perhaps? A banner (and not just your site name, graphics?).

For some reason it's annoying reading text that's in the middle but with the same background color as the left and right.

Maybe divide it into 3 columns or something with different color? Or make it look blog-like by putting the updates on the left, nav on right and top, etc?

 

[jtusa]

Originally posted by: ItmPls
Less text.

Some pictures perhaps? A banner (and not just your site name, graphics?).

Yup, title and menu graphics are in the works. I'll be adding various graphics to each sidebar to balance the text out.

 

[Zugzwang152]

looks good for a basic site. easy to read, simple layout.

consider softer colors, to make your site look a little more "modern". take the AT forums as an example, note the soft blues, grays, and gradient fills. the banner doesn't necessarily need to be a fancy image, consider using a less common font or add a little frill. again you can take the AT forums banner as an example. it's just text with the orange paint brush effect. remember not to get too fancy.

 

[Barnaby W. Füi]

Black backgrounds are so "1998 geocities website." Black can be pulled off well, but it's kinda hard. Personally I like white or almost-white background for reading. The sidebars should be differentiated from the center stuff somehow. That one image is just scaled down by the browser, which makes it look all jagged and ugly. You should always generate thumbnail images so they don't look like that. And jpg is meant for photographs; for lower-color graphics like that, you should use png or gif. Notice how you have grey-ish "noise" around the black lines -- png or gif wouldn't. But I also realize that pic isn't exactly meant to be high quality.

 

[Kyteland]

Put all of your style stuff in to a .css file instead of embedding it in the page. Keeping content separate from presentation is generally a good idea.

 

[kamper]

Here's the official list of grievances : http://validator.w3.org/check?uri=http%...%29&doctype=Inline&ss=1&sp=1&verbose=1


And my personal opinion:
Usually white-on-black is pretty harsh, although yours doesn't hurt much.
Your "Home" link should be bigger. It's generally a good idea to have the big logo at the top, or even all the space across the top, be a link back to your default page.
The content of the center column is a little unorganized and can be hard to read when it gets long. Maybe some clearer way to seperate seperate items would be good.

 

[jtusa]

How about something more along the lines of this for coloring?

Still have to tweak the layout a bit.

 

[igowerf]

My only suggestion regards your coding. Good job with the tableless design, but tableless design is based on the ideas of separating style and content and also the proper use of HTML tags. For example, I noticed that you use br tags for spacing out things, but that should actually be done with padding and margins. If the viewer has his or her browser text size set to large, then your spacing could get screwed up.

Also, you should use the proper tags for the content. This way, when users with browsers that don't fully support CSS (mobile users mostly) visit your website, your page will default to the basic HTML styles and will still look right. For example, I noticed that your title is styled using a div tag with a class called "title," but if the user's browser doesn't support CSS, your title will look like plain text. If you use a header tag (h1, h2, h3, h4) instead, your title will still remain bold, even if CSS is disabled. You can change the styling of the header tags of course to match what you have now.

I'm not saying that my own website is perfect (I cheat a bit out of laziness), but if you disable my stylesheets using the "css" menu, you'll see how my styles collapse into regular HTML.

 

[jtusa]

Originally posted by: igowerf
My only suggestion regards your coding. Good job with the tableless design, but tableless design is based on the ideas of separating style and content and also the proper use of HTML tags. For example, I noticed that you use br tags for spacing out things, but that should actually be done with padding and margins. If the viewer has his or her browser text size set to large, then your spacing could get screwed up.

Also, you should use the proper tags for the content. This way, when users with browsers that don't fully support CSS (mobile users mostly) visit your website, your page will default to the basic HTML styles and will still look right. For example, I noticed that your title is styled using a div tag with a class called "title," but if the user's browser doesn't support CSS, your title will look like plain text. If you use a header tag (h1, h2, h3, h4) instead, your title will still remain bold, even if CSS is disabled. You can change the styling of the header tags of course to match what you have now.

I'm not saying that my own website is perfect (I cheat a bit out of laziness), but if you disable my stylesheets using the "css" menu, you'll see how my styles collapse into regular HTML.

Thanks for the input. Learning tableless designs with CSS are a PITA because of how different browsers render things differently, but I'm getting there slowly but surely. I didn't even think about the br tags changing with the font size, thanks for pointing that out.

 

[igowerf]

Originally posted by: jtusa
Thanks for the input. Learning tableless designs with CSS are a PITA because of how different browsers render things differently, but I'm getting there slowly but surely. I didn't even think about the br tags changing with the font size, thanks for pointing that out.

Yep. It's pretty tough, but when you start getting the hang of it, it actually makes things a lot easier. All you have to do is get the HTML layed out, and most of your editing will be in the CSS files.

 

[kamper]

Originally posted by: igowerf
...

This man obviously took a thoughtful look at your code (much better than I did) and gives good advice :thumbsup:

 

[bob4432]

not trying to be a d!ck, but this content management system works excellent, that is unless you are doing this for knowledge....

 

[jtusa]

Originally posted by: bob4432
not trying to be a d!ck, but this content management system works excellent, that is unless you are doing this for knowledge....

Doing this pretty much for knowledge. I'm trying to avoid the use of templates, web apps, etc. so I can figure out how all this stuff works out of curiousity.
"I'm curious like a cat! That's why my friends call me whiskers!" cookie: to anyone who knows what that's from.)

 

[jtusa]

Came up with something completely different that I think I like better. Thoughts?

This one better? or the first one linked above?

 

[Winchester]

404 Design Not Found

 

[kamper]

Not bad, but I still think the items in the main column need better visual seperation. If you slap each entry in a div with a specific class then you can easily tweak it's apperance with borders, color and spacing...

Also, your whitepixel.jpg doesn't seem to be showing up (maybe that's part of my complaint above). But regardless, that sort of thing can be acheived much easier with the <hr> tag instead (and the <center> tag is nasty).

 

[Injury]

The most current (dev/redesign) looks much better.

I'm not going to comment on coding because 99 times out of 100 as long as a page loads for me I don't look at the code to judge a design. Just make sure to go through and make it standards compliant and use some of the previous suggestions before you build bad coding habits.

This is going to be purely from a graphic designer standpoint.

- To the left I see a menu. This is the traditional place for a menu. It's the web standard for a menu. The problem with this is that I see a menu to the right at the top, too. Which one is the menu? Get rid of one, and make that one the one up top. That is a very, very bad place for a menu. If you insist on a top menu, add some space between the pipes so the menu doesn't look like a big blob, center it, and put it in the cell DIRECTLY ABOVE the content. Still a bad place to have a menu. (Yeah, but I'm guilty of it too.)

- The menu on the left looks very out of place because it's the same color as the background, but it looks like it's supposed to be part of the body. Make a seperate div/table/whatever for it, and make it NOT part of the body. Put it OUTSIDE of the body cell. This will also elimate the annoying blackish space to the left of the body.

- The human eye looks in a "z" motion from the top left of a page, to the top right, to the bottom left, bottom right before it starts reading content. Thus, you should put your site name on the left, because the first thing people see is NOTHING.

- You have a space clearly set aside for a header... but I see one right above it. Both of these headers are poor, although I'm assuming that's because you're working up something graphical for them.

- On IE 6.0, at 1152x864 reso, there is about an inch of blue background coming from the right, followed by an inch and a half of blackish body background which has the majority of your header over it. This just looks really messed up, it looks like the kind of mistake that someone makes when something looks good on their resolution, but not on others. I haven't looked at your code, but perhaps using some absolute values for your widths could make this look more uniform... then again, it may look better once the menu on the left is seperated. I dunno. We'll see what we have when you make bunches of changes.

- Make a better break between your news articles. You can use a classic HR, then add headings with a slightly bigger font, bolded. It will look much better. You could also even have seperate cells for each news article. It is also a standard to have a date before the content. This way, people don't read a bunch of stuff and THEN figure out it might be outdated. For a reference, you can see my site: http://www.renegadeonline.net (need to go through and re-work on some standards things since I made some changes. )

- Your colors, overall, aren't bad... there just aren't enough of them. The ones you do have are dull and depressing. The yellow in the links just isn't enough to brighten things up.

-In your body content, you mention that you want content, but you don't want a mindless drivel. Dude... it's your site, do whatever the hell you want to on it. Who are your trying to impress?

Hope that gives you a super-rocket boost to better designing.

 

[Mark R]

Visually:

Put site title on left - big empty hole at top left doesn't look good.

Left and right margins are too big and are fixed in size. The page is unreadable at 800x600 and below. Side bars waste a lot of space - if you have a lot of content a top menu may be better. But they have their own problems - see earlier posts. It's horses for courses really.

You need some brighter colours. Grey and black are suitable for a funeral parlour - probably not optimal for a blog.

I don't know which news item your dates belong to - put them at the beginning (top, left).

It's another site which seems to have done away with the convention of underlining links - oh well, at least they stand out as a different colour (most of them anyway). This is a debateable point as your site seems directed at techies - but having helped a lot of n00bs, a common theme is that many find it difficult to find links if they are not blue and underlined.

Technically:
You need to specify a doctype and character encoding. I always use Unicode on my sites - but then I develop with .NET so I know all my code is fully unicode compatible. The advantage of unicode is that all special symbols and characters are easily stored and transmitted (especially on windows which uses Unicode). I don't know how well PHP copes with Unicode, but I've seen a lot of PHP sites which have messed up character sets with weird blobs and ? marks all over the text - where something didn't get encoded right (usually caused by someone typing in word, and using 'smart quotes' which aren't tranmissible in the default character set.

Ideally, you should use either the strict HTML 4.01 doctype, or the strict XHTML 1.0 doctype. The compatability of HTML is slightly better - but all reasonably recent browsers handle both.

If you don't specify a doctype - browsers assume 'transitional' HTML which activates 'bugs' mode in several browsers. Bugs mode causes HTML to be displayed in a way compatible with certain obsolete browsers - however, different browsers have different interpretation. Because of variable support for this (some don't even have a bugs mode), it is best avoided. The same happens with 'transitional XHTML'.

I'm not a great fan of using images as content separators - options are use HR and apply a style class to it (you can apply an image, and margins) or seperate the items using paragraphs with CSS borders.

Put your CSS in a seperate file and use a <link> tag to load it - saves bandwidth for you and your users and means a style change needs changes to one file only.

Rather than define all your own styles - redefine existing markup (H1 through H6) for titles, subtitles, dates etc. This makes sure that old browsers and very limited modern browsers (e.g. smartphone) can still render your site legibly.

 

[kamper]

Wow, you're getting a tonne of good advice here. I hope you're not innundated

Originally posted by: Mark R
Ideally, you should use either the strict HTML 4.01 doctype, or the strict XHTML 1.0 doctype. The compatability of HTML is slightly better - but all reasonably recent browsers handle both.

I just want to expand on the doctypes, as this was well explained to me here once. You should not use xhtml unless you are absolutely commited to passing validation. Right now, an xhtml document will probably not be handled properly, as xml, but will be given the "tag soup" treatment instead, which is much more forgiving. For instance, IE doesn't do xml and mozilla will only do it if you specify a mime type of "text/xml+xhtml".

If you use html 4.x you will continue to get tag soup treatment forever, which means that your small errors will be forgiven. But if you use xhtml, someday (and hopefully sooner rather than later) browsers will start to treat your page as xml where the rules are much stricter. If you do something small like leave a naked "&" in a url (which is common) or a "<" in javascript your page will simply fail to parse altogether. In short, don't use xhtml unless you know the rules of xml and are prepared to play by them.

 

[jtusa]

Originally posted by: kamper
Wow, you're getting a tonne of good advice here. I hope you're not innundated

Originally posted by: Mark R
Ideally, you should use either the strict HTML 4.01 doctype, or the strict XHTML 1.0 doctype. The compatability of HTML is slightly better - but all reasonably recent browsers handle both.

I just want to expand on the doctypes, as this was well explained to me here once. You should not use xhtml unless you are absolutely commited to passing validation. Right now, an xhtml document will probably not be handled properly, as xml, but will be given the "tag soup" treatment instead, which is much more forgiving. For instance, IE doesn't do xml and mozilla will only do it if you specify a mime type of "text/xml+xhtml".

If you use html 4.x you will continue to get tag soup treatment forever, which means that your small errors will be forgiven. But if you use xhtml, someday (and hopefully sooner rather than later) browsers will start to treat your page as xml where the rules are much stricter. If you do something small like leave a naked "&" in a url (which is common) or a "<" in javascript your page will simply fail to parse altogether. In short, don't use xhtml unless you know the rules of xml and are prepared to play by them.

Haha, yeah I am. My hardest thing is coloring. I don't think I'll ever make my mind on on that...

 

[igowerf]

Originally posted by: kamper
Wow, you're getting a tonne of good advice here. I hope you're not innundated

Originally posted by: Mark R
Ideally, you should use either the strict HTML 4.01 doctype, or the strict XHTML 1.0 doctype. The compatability of HTML is slightly better - but all reasonably recent browsers handle both.

I just want to expand on the doctypes, as this was well explained to me here once. You should not use xhtml unless you are absolutely commited to passing validation. Right now, an xhtml document will probably not be handled properly, as xml, but will be given the "tag soup" treatment instead, which is much more forgiving. For instance, IE doesn't do xml and mozilla will only do it if you specify a mime type of "text/xml+xhtml".

If you use html 4.x you will continue to get tag soup treatment forever, which means that your small errors will be forgiven. But if you use xhtml, someday (and hopefully sooner rather than later) browsers will start to treat your page as xml where the rules are much stricter. If you do something small like leave a naked "&" in a url (which is common) or a "<" in javascript your page will simply fail to parse altogether. In short, don't use xhtml unless you know the rules of xml and are prepared to play by them.

I would go with HTML 4.01 right now if you're worried about little details. I tried to make my site XHTML Strict, and it seems to work in most browsers. I found that in older Pocket PC browsers, the XML declaration is actually shown by the browser. I also heard that the < br / > tag isn't recognized by older browsers either but I've never really tested that.

 

[jtusa]

Update in OP!

 

[kamper]

Gettin' closer: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jtusa.net%2Fdev%2F

I'd suggest moving your <h3> tags to just outside your <a> tags.

Btw, putting this link: http://validator.w3.org/check?uri=referer on your pages is a great way to easily check up on your work.