Newbie Site Comments/Criticisms

T

Tim Gill

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.

http://www.timgillmusic.com/trio

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!
 
B

brucie

in post: <
Tim Gill said:
http://www.timgillmusic.com/trio
My question is, will the fixed 700px body width be too large on
lower-resolution browsers?

resolution has nothing much to do with it, its the available canvas area
of the browser window which is the issue.
It is a non-fluid design horizontally because of the design layout.

i cant see for reason for the fixed design except for your lack of
knowledge (which is ok you're just starting).
Is this a potential problem to some users?
yes

Be nice to the newbie!

you're no fun
 
N

Neal

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.

http://www.timgillmusic.com/trio

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!


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>
</div>

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
http://users.rcn.com/neal413/tim.gif . (Colors are whacked, sorry.) Avoid
this by importing the stylesheet, not linking.

(in the head)

<style>
@import url("tg3presentation.css")
</style>

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

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

Mark Parnell


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.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

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.
My question is, will the fixed 700px body width
http://www.allmyfaqs.com/faq.pl?AnySizeDesign

be too large on lower-resolution browsers?

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.
It is a non-fluid design horizontally because of the design layout.

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.
Is this a potential problem to some users?

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).
Anyhow, any comments appreciated. Be nice to the newbie!

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

Starshine Moonbeam

"Tim said:
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.

http://www.timgillmusic.com/trio

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!

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)
StArSHiNe_MoOnbEAm aT HoTMaIL DoT cOM
http://www.geocities.com/tobydog9

"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
 
S

Starshine Moonbeam

"Starshine said:
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.
^^^^^^^^^^^
I meant to say after a while. Sorry.
 
T

Tim Gill

Tim Gill said:
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.

http://www.timgillmusic.com/trio

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!

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
time....

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!
-TG
 
M

Mitja

http://www.timgillmusic.com/trio
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
time....

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...

This is reasonable way, yes.
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!
-TG

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.

Mitja
 
T

Tim Gill

Mitja said:
This is reasonable way, yes.


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.

Mitja

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.
-TG
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top