Newbie Site Comments/Criticisms

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
This is my first attempt at hand-coding a site (not using a WYSIWYG editor,
in other words). It's no great shakes, just some HTML markup and CSS.

My question is, will the fixed 700px body width be too large on
lower-resolution browsers? It is a non-fluid design horizontally because of
the design layout. Is this a potential problem to some users?

Anyhow, any comments appreciated. Be nice to the newbie!
-Tim Gill
The The Tim Gill Trio

Re: Newbie Site Comments/Criticisms

Quoted text here. Click to load it

It's pretty, I like it. =)

The Doormouse

The Doormouse cannot be reached by e-mail without her

Re: Newbie Site Comments/Criticisms

Quoted text here. Click to load it

resolution has nothing much to do with it, its the available canvas area
of the browser window which is the issue.

Quoted text here. Click to load it

i cant see for reason for the fixed design except for your lack of
knowledge (which is ok you're just starting).

Quoted text here. Click to load it

Quoted text here. Click to load it

you're no fun

b  r  u  c  i  e

Re: Newbie Site Comments/Criticisms

Quoted text here. Click to load it

Not too bad for a first try. At all.

I don't see why you couldn't do this fluid. Instead of an image for the
header, have the text floated ("the" floated left, "tim gill trio" floated
right, with margins set the way you like, and marked up as h1 - like this:

<div id="header">
<h1><span class="the">The </span><span>Tim Gill Trio</h1>

and style like this

#header {
background-image: url(squiggly.gif);
font-family: "whatever font you used", Arial, Helvetica, sans-serif;
font-size: 1.5em;
letter-spacing: .5em;
word-spacing: 1em;
#header h1 span {
display: block;
float: right;
width: 25em;
margin: 3em 0 0 0;
#header h1 span.the {
float: left;
width: 5em;
margin: 0 0 3em 0;
text-transform: lowercase;

Addust the distances in ems to make it look right. Your bg gif can be as
wide as you expect the widest viewport to be, I'd go 2000px. And a caveat
- I typed this all out of my head, I haven't tested any of it. I make
errors from time to time.

What the goal is, is that the width can change but the overall look of the
header is the same. It'll be squishable.

This will degrade for non-graphic browsers as a typical 1st level heading.
Make Welcome a second-level heading like the other. You can class it and
style it different if you like.

Make your alt text for the pic better. Like, "The Tim Gill Trio is Tim,
Biff and Guido" or something, where alt alone will be useful to no-image
browsers, and it explains the pic a bit too.

I've used XHTML for sites too. I now am using HTML 4.01 again because
since most browsers cannot read XML properly, and since my server cannot
serve XML properly, there's really no benefit. Might think about that.

CSS: Do the font-size in body as a percentage. I think .8em (80%) is too
small, go at least 95%. Yes, Verdana looks big, but the replacement fonts
look tiny.

Just for ha-has, I looked in Netscape Navigator 4.01. Screenshot at (Colors are whacked, sorry.) Avoid
this by importing the stylesheet, not linking.

(in the head)

@import url("tg3presentation.css")

Use less px and more % in your layout widths and stuff. You can make this

Very good for a beginner. You can do better. :)

Re: Newbie Site Comments/Criticisms

Quoted text here. Click to load it

Yikes! That doesn't look so great...thanks for the heads up.


Re: Newbie Site Comments/Criticisms

declared in alt.html:

Quoted text here. Click to load it

Scary-looking guys! ;-)

Your XHTML validates, which is good. Just one error in your CSS.

The white is very hard to read on the orange background. It's alright in
the menu, because it is bold, and there isn't as much text. Very hard in
the main body of the page, though.

Verdana isn't suitable for author stylesheets. Get rid of that, then you
can set the body text to my preferred size - 100%/1em, not 80% of it
like it is now.

BTW: IE has a bug with font sizes specified in ems. Either add
font-size: 100% to the body {} rule, or use all % instead of ems.

Quoted text here. Click to load it

Quoted text here. Click to load it

Browsers don't have a resolution. It will be too large on any browsers
with an available canvas width of less than 700px, yes. And it will be
too small on anything much higher than that.

Quoted text here. Click to load it

Then your layout is broken. Fix it. Actually, no. There is nothing in
that design that requires a fixed-width page, except maybe the header
graphic, but that would be fairly easy to work around.

Quoted text here. Click to load it

Yes - you are only using 2/3 of my available browser canvas width. I
like you to use pretty much all of it (a bit of padding on either side
is OK).

Quoted text here. Click to load it

Sorry, this is alt.html. No niceness allowed. Especially to newbies.
It's part of the initiation. You can have another smiley, though. :-)

Mark Parnell

Re: Newbie Site Comments/Criticisms

Gill"(swinger_oo6@h0tmail.c0m) dropped a +5 bundle of words...

Quoted text here. Click to load it

No obvious problems that I can see.

A couple of aesthetic things:

You might want to fill in that big orange space on every page with a pic
or something.

It's pretty bright. You have a light background with an orange style
sheet and a flourescent yellow header. It's hard to look at for too long.
You might want to soften the eyestrain a little.

mhm 31x9
Smeeter #28, 29, or 30
WSD #30
Skep-ti-cult ID# 365-12149-907
Alcatroll Labs Inc. (Division of Incendiary Devices)

"Technology is getting better and that's fine but most of the time,
all you need is a stick of gum, a pocketknife, and a smile."
-- Robert Redford "Spy Game"

"You can run but you'll just die tired and buttered."
-- Ryannosaurus

Re: Newbie Site Comments/Criticisms

Quoted text here. Click to load it

Thanks all for the helpful comments. Once I tweak the header a bit, I should
find a workaround for the fluid layout. That is, when I have some more free

To keep the structure, I would have to keep the div containing the pics to
the left of the menu a static size, and let the menu stretch/squish with the
viewing area- would this be the best way? Then I just define the body width
with %, so the menu doesn't look too funky...

Yeah, and the colors need tweaking/softening- they look fine on my monitor,
but I'm sure they may not come out as nice on others'...

The gears are turning. To the drawing board!

Re: Newbie Site Comments/Criticisms

Quoted text here. Click to load it


This is reasonable way, yes.

Quoted text here. Click to load it

Just a minor thingie: text saying "Pics from our recording session" (and
maybe some other smaller texts) uses serif fonts, while the rest of the page
is made using sans-serif fonts. I think it would look better if you hadn't
mixed the two.


Re: Newbie Site Comments/Criticisms

Quoted text here. Click to load it

That's strange, it should all be sans-serif. The stylesheet has all body
text defined as sans-serif. I'll have to check and see why it's doing that.

Site Timeline