Review my site

[Conor]

I know it needs plenty of work but id appreciate it if you could tell me some things i could do.

http://complexfellow.com/

[Conor]

is there anyway to get it to appear correctly in IE? Fixed link just realized it was wroing :p

Also how come my list image only works in opera nd not mozlla, IE,safari etc...

[zachzach]

pretty good....yeah u need to fix the ie thing

[Conor]

it now displays correctly in IE

[Jona]

Although very simple, I think you did a pretty good job. :)

I take it you're not a professional graphics designer, though. ;)

When I put my mouse over a link on the page, for example "Add/view comments," the text color seems to be too light and makes it difficult to read. I know that you'll be reading it before you put your mouse over it, in most cases, but I think it'd be a good idea to make it just a tad darker.

[Conor]

Although very simple, I think you did a pretty good job.
thank you :)

I take it you're not a professional graphics designer, though.

lol Im terrible with graphics

When I put my mouse over a link on the page, for example "Add/view comments," the text color seems to be too light and makes it difficult to read. I know that you'll be reading it before you put your mouse over it, in most cases, but I think it'd be a good idea to make it just a tad darker.:)

Yeah that definatley needs to be changed ill do it once i get a chance. Thanks for the feedback and for helping with the actual PHP coding a while back.

[Jona]

Also, check out Bobby (http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fconor-hastings.firewebx.com%2F&output=Submit&gl=wcag1-aaa&test=), because he mentions a few things. When I disable stylesheets, I can't see the logo graphic, because it's a background; use something like <span style="display: none;">The personal site of Conor Hastings</span> on top of your background image, so that without CSS the heading can still be seen. (In fact, you should use <h1> instead of <span> for that, as it is a heading.) You may also consider using the LONGDESC attribute in your footer images, to tell about what PHP is, and so on and so forth. It may be a good idea to say, "Add/view comments to entry number n," where n equals the current entry ID. Bobby says it's bad to use two links that have the same description, yet go to different addresses. I'm getting a little nit-picky here, though, I think you could figure out any other problems and try to see if you can convince Bobby to make you valid AA. ;)

[Conor]

yeah thanks for all the tips you have been a huge help! I will definately work to make myself more accessible

[Jona]

*Bows* :D

[Ben Rogers]

Lol... about your site, on an article you mention converting HTML 4.01 -> XHTML 1.1. For your answer, no, it won't be hard. All there is to be done is to change your doctype, and since it was already valid HTML strict, all you have to do is close empty tags (<br />, <meta />, <hr />).. and thats pretty much it for you.

[Conor]

^^and that would be easy since most of my stuff is manipulated server side so it only be editing a few output variables. anyway what do you think of the site?

[Jona]

Originally posted by omega
<b />

The B tag has no significance that way. :confused: Maybe you meant <br />?

[Daniel T]

Originally posted by Jona
When I disable stylesheets, I can't see the logo graphic, because it's a background; use something like <span style="display: none;">The personal site of Conor Hastings</span> on top of your background image
Actually, that still wouldn't show the text if stylesheets were disabled. Wouldn't you have to use something like this?

CSS (in a stylesheet, not on the page):

span.title {
display: none;
}
HTML:<span class="title">The personal site of Conor Hastings</span>

And I think your site looks very nice, Conor. Although a little simple, it is very easy on the eyes. I take it you like green ;)

From http://conor-hastings.firewebx.com/sites.php
Sites Worth Visiting

* Spymac
* Ryan Brill
* Mezzoblue
* CSS Zen Garden
* Daniel Tomasiewicz

I'm flattered, I truly am :)
-Dan

[Jona]

Originally posted by DanieLTomaS
Actually, that still wouldn't show the text if stylesheets were disabled.

Agree with me! :p
If a user has CSS disabled, he'll see it, but if you disable the stylesheet, you're right it won't be seen. Sorry 'bout that. Wasn't thinking... must clear head... :D

[Ben Rogers]

Yes, that is what I meant, it was a typo.

As for your site, I think a few things could be done to improve the look, but the colors give it a unique look, and I can't complain about the layout :).

The navigation could be centered, maybe the text for the headers could be darker, as well as the a:hover's, I would also suggest maybe simply using text for the header, not an image at all, and also coming up with a motto. And, even though you may not be good with graphics, even one or two simple graphics could help the look of a site.

Anyways, attached is (bad) example of a header I whipped up, to give you an idea of a possible header. The background image was gotten off a google search (http://images.google.com/images?hl=en&lr=&ie=UTF-8&oe=UTF-8&safe=off&q=waterfalls&btnG=Search), and the image itself is from Claymera (http://www.claymera.com/)

[Ben Rogers]

As for placing the header, I reccomned either the http://www.mezzoblue.com/tests/revised-image-replacement/#shea Shea method, or like I said just using text; and if you do use text, a fluid layout wouldn't hurt.

Also, although I may've not picked the colors, it is very easy on the eyes, and it makes for easy reading.

[Conor]

yeah i definately should center the links on the menu. I changed up the way links are displayed, set a title for the link to the comments so they and have it say Add/View Comments for entry (# here). I changed the links so it now gets a little darker and gets a top and bottom border. Im going to work on a new banner and do a few more of the things you guys have mentioned as well. Thanks for all the suggestions i really appreciate it.

[Jona]

Originally posted by RefreshF5
Thanks for all the suggestions i really appreciate it.

No problem. :)
By the way, you oughtta' put it as your "www" now. ;)

[Ben Rogers]

No problem... I'll try to find some more errors later. Aren't I so generous..? :D

EDIT: Why can't I spell today..? And how did I manage to misspell "errors"...?

[Conor]

By the way, you oughtta' put it as your "www" now.

:confused:

[Jona]

You know, the little button that says "www" for each person who has a "homepage" in their profile? Yeah, that little button there that goes to one's site... ;)

[Conor]

heh thats pretty cool i just did it.

[Jona]

Originally posted by RefreshF5
heh thats pretty cool i just did it.

There y'go, m'boy! :D

[Conor]

how does pyro get that glow around the edges of the left and the right of his site?

[Jona]

He uses a wrapper DIV. You should tell him to make a blog entry on it, since it's such a popular thing these days! :D

[Daniel T]

What you gotta do is make in image 1px high and in that image, there should be a gap the width of your page. Then add another 20px or so on each side and put the glow in there. Then, make a container DIV 40px wider than the page, and put that image as the background image.
-Dan

[Jona]

Originally posted by DanieLTomaS
What you gotta do is make in image 1px high and in that image, there should be a gap the width of your page. Then add another 20px or so on each side and put the glow in there. Then, make a container DIV 40px wider than the page, and put that image as the backlground image.

Now that's what I call a brief tutorial summary. :rolleyes: Very well explained, Dan. ;)

[Paul Jr]

Originally posted by DanieLTomaS
What you gotta do is make in image 1px high and in that image, there should be a gap the width of your page. Then add another 20px or so on each side and put the glow in there. Then, make a container DIV 40px wider than the page, and put that image as the background image.
-Dan
Ha ha! But what if you have a fluid or elastic design? :D :D :D

[Daniel T]

Originally posted by Paul Jr
Ha ha! But what if you have a fluid or elastic design? :D :D :D
Well, Conor has a fixed-width design. And with an elastic design, you'd do the same, only you'd make each side a seperate image and put it inside the 100% DIV and apply the appropriate amount of padding to clear the glow.
-Dan

[Conor]

thank you Daniel i will try that as soon as i can. :)

[Daniel T]

No problem. :)

[pyro]

I don't have time right now to really look at the site, so I'm not even going to look at the coding right now - I'll just go for aesthetics.

First, I would personally change the colors. It's a bit hard to read, and I can't say that I like the greens.

Next, I'd make the buttons at the top a little less tall, and don't have them spill into the content area on hover. Also, it wouldn't be a bad idea to center them. Those are the two things that really stick out to me - oh and the dashed border at the bottom. ;)

As for the faded edges, Dan Cederholm explains the technique that I use at ALA: http://www.alistapart.com/articles/fauxcolumns/. Basically what Dan said, but I would use an image with a height greater than 1px. Go with something like 16 or 20 px, as it will allow the browser to render your page quicker, and the bandwidth difference will be minimal.

[Conor]

First, I would personally change the colors. It's a bit hard to read, and I can't say that I like the greens.

Next, I'd make the buttons at the top a little less tall, and don't have them spill into the content area on hover. Also, it wouldn't be a bad idea to center them. Those are the two things that really stick out to me - oh and the dashed border at the bottom.

As for the faded edges, Dan Cederholm explains the technique that I use at ALA: http://www.alistapart.com/articles/fauxcolumns/. Basically what Dan said, but I would use an image with a height greater than 1px. Go with something like 16 or 20 px, as it will allow the browser to render your page quicker, and the bandwidth difference will be minimal.


Well personally I like the greens but will definately try to make it a bit easier to read.

I lowerd the button size on the top to 30px instead of 35. I also tried 25 but it was to small for my taste. I lowered the border size and dont believe it spills over anymorre.

Ill definately try the faded edges or drop shadow or something as soon as i get some time, thanks.

[Jona]

Originally posted by pyro
As for the faded edges, Dan Cederholm explains the technique that I use at ALA: http://www.alistapart.com/articles/fauxcolumns/. Basically what Dan said, but I would use an image with a height greater than 1px. Go with something like 16 or 20 px, as it will allow the browser to render your page quicker, and the bandwidth difference will be minimal.

<offtopic> What if I had a fluid layout? How would I add a top-background, left background, right background, and bottom background? I've tried some things (http://209.34.24.227/Jona/), but I don't think I'm doing it all right. Thanks if you have any suggestions. :) </offtopic>

[pyro]

Rather than write up a big tutorial on how I did this (I needed to do for the form highlighting effect (http://www.ryanbrill.com/archives/form_highlighting_redux/) on my site), I'll just point you to an ALA article (http://www.alistapart.com/articles/customcorners/) that uses a similar technique. Not sure how close that actually is to what I did, but I'm guessing it's quite close.

[Sam]

you can do this pretty easily if you're willing to add an extra span (which you only have to do if you want a bottom fade)
EDIT:
I through together i quick demo: http://www.samingle.com/efe.htm
note, this is only left and right edges, but top and bottom can be added easy enough.

[Jona]

What's the difference between a fluid design and an elastic design? lol. Sorry, stupid question I know...

[Sam]

I think that they are either the same thing, or fluid means 100% while elastic means width dependent on font size. I know this is what elastic means, but not entirely sure on fluid

[pyro]

Yes, elastic design is a relative sizing method based on font size, while fluid design is a relative sizing method based on the size of the browser window.

[Jona]

Originally posted by samij586
note, this is only left and right edges, but top and bottom can be added easy enough.

I don't want to get off-topic, but Sam, think you could put top and bottom borders in your example as well -- fluidly? I'd like to see how you do it... (Still learning at this.)

[Sam]

Why not? (http://www.samingle.com/efe.htm)
Note, i did need to add 2 spans (one at the start of the container, one at the end)

[Jona]

Well that's easy enough, though there are no top-left, top-right, bottom-left, or bottom-right images, I'm sure there is a way to place those as well to get a rounded face effect -- I'll have to work on it, I've been busier (more busy :rolleyes: ) than I'd like to be lately.

[pyro]

Jona, the ALA article that I pointed you to should expain how to do this. Alternatly, just dissect the code I used for the form highlighting effect on my site, though that won't be as easy, as it is a cross between CSS and JavaScript...

[Daniel T]

Originally posted by Jona
Well that's easy enough, though there are no top-left, top-right, bottom-left, or bottom-right images, I'm sure there is a way to place those as well to get a rounded face effect That would be relatively simple. First, make a div with the length of your layout, and make the background-image the top-fade image, with no corners. Then, make 2 spans inside that div and apply float: left; to one, and float: right; to the other. In these divs, you will put your corner-fade images. :)
-Dan

[Jona]

Originally posted by DanieLTomaS
That would be relatively simple. First, make a div with the length of your layout, and make the background-image the top-fade image, with no corners. Then, make 2 spans inside that div and apply float: left; to one, and float: right; to the other. In these divs, you will put your corner-fade images. :)

Relatively simple? That's relative. :rolleyes:

I haven't tried it the way you described, but I do know that floats make the corner images go out of the document flow. What I've done (http://209.34.25.17/Jona/) works, but only in Mozilla...

Note: Thanks to Sam for the headstart. ;)

[Ben Rogers]

If I were you, I'd use multiple containers; if you wanted all 4 corners curved then 3 containers, and then something like

#topleft { background : url(topleft.png) top left no-repeat; }
#topright { background : url(topright.png) top right no-repeat; }
#bottomleft { background : url(bottomleft.png) bottom left no-repeat; }
#content { background : url(bottomright.png) bottom right no-repeat; }
...
<div id="topleft"><div id="topright"><div id="bottomleft">
<div id="content">
...
</div>
</div></div></div>

Not very efficient, but it gets the job done.

[Jona]

Edit: Holy (baseball) cap! I replied to the wrong post! ROTFLOL! ...Sorry guys. :D

[Conor]

what do you think of the minor adjustments

o yeah new addy

http://complexfellow.com/

[Sam]

on your nav hovers, apply a border for the non-hover state as well, that way the text doesn't jump when you hover

[Conor]

thank you ive been trying to figure out what caused it!

[Jona]

You could also add a negative margin the width of the border on hover.

[The Cheat]

i dont get it...

are you offering free hosting from a free hosting account on a free host? :confused:

[Conor]

^^^ I have no idea what you mean. Where does it say Im offering hosting

[Conor]

The site is now valid XHTML 1.1

[Sam]

nice work, now try passing it as application/xhtml+xml

[Conor]

^^^ I dont even know what that means

[Daniel T]

I believe that means validating it with this in your meta tags:
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
-Dan

[Paul Jr]

Originally posted by RefreshF5
^^^ I dont even know what that means
He means to send your page as an application of XML. This can be achieved with a bit of PHP:

header("content-type: application/xhtml+xml");

Now, that’s great, but IE screws it up, so you need something more along the lines of this:

if(stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml")) {
header("content-type: application/xhtml+xml");
}
else {
header("content-type: text/html");
}

So, if the browser can handle it, the page is sent with the header type of application/xhtml+xml, but if not (Bad IE!), then it’s sent as text/html.

[dera]

using k-meleon @ 800x600 the layout is all stuffed up on the sign up page. the index page should be viewable at 800x600 use '%' so its viewable with all resolutions. the page has a nice design. The forum page i dnt no if this is up for review doesnt match the other sites scheeme. u should make all pages look the same. when u go to the forum u cant navigate back to the home page. other then the page being wide with the scroll bars the site is fine.

[Conor]

^^^I dont have a forum, every page of the site does look the same..., did you note the change in address that I posted above

[dera]

^^^I dont have a forum, every page of the site does look the same..., did you note the change in address that I posted above

at the time i looked at the site i saw a hosting website, now its diffrent.