personal site review

[theEclipse]

Hello all.

if you could.... robertcarpentetr.net

Its my personal website. My design inspiration was to keep things simple. The website is going to be used mostly by friends and family to keep up with and contact me wherever I may be.

Now that I think about it, I cant say as that I have run it through a validator, but I try and write valid xhtml trans code....

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[johnwm]

Nice simple layout. A bit short on content. It definitely won't validate without a full and valid doctype.

Overall a nice start - but do run a spellchecker over it. Any site with several blatant spelling mistakes looks really amaterish, no matter how cool the graphics and layout are.

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first
'If we're supposed to work in Hex, why have we only got A fingers?'
Essex Steam UK for steam enthusiasts

 

[Foamcow]

Looks nice.

A few comments, nothing major, perhaps picky... but you seem to be going a certain way to making the pages conform to standards you may as well go the whole hog.

[ol]
[li]Use a doctype. The page will work without it, but it's better practice to include one and furthermore write your code accordingly.[/li]
[li]Have a think of what HTML element to use where. For instance, on your "about" page, you are using Blockquotes, when really the contained text isn't a quote at all. Don't use elements for style (i.e. don't use blockquotes because they get indented). Use the right tag and a corresponding CSS class to style it as you wish.[/li]
[li]Use alt attributes on your images. This is epecially important on the front page as there is no actual text. Since the navigation is images, if they cannot be seen then your site cannot be navigated.[/li]
[li]Add title attributes to your a tags. For the same reasons stated above.[/li]
[li]Look at using CSS for your rollovers. It's not hard to do and would remove the javascript from your pages. Imagine how much lighter your code would be without the Javascript![/li]
[li]The text in the tooltips on the photos thumbnails, and the descriptive text on the photo pages is truncated. Possibly because of the field length in your database?[/li]

[/ol]

You could really clean up your code with further use of CSS and semantic markup. But on the whole it looks nice and does it's job perfectly well.
Well done.


Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[theEclipse]

johnwm-
it is indeed short on content.....I have about three pages that are planned for the site. I just cant stand that whole "under construction" junk. Oh and every word is spelled according to my dictionary. Thanks for pointing that out. ;-)

Foamcow- (interesting handle, btw)
[ol][li]doctype....I have one of those. right. add that to the template.[/li]

[li]Do you have any suggestions on how to achieve the indented look without the blockquotes? I tried using <p> but I cant think of any styles that would make it indent in a way that is nice.[/li]

[li]alt & title tags.....I coulda swore ....[/li]

[li]The only thing that I can think of to use css to replace the effect on my images would be to use a filter (IE only) or to make it change the background of a link. I dont like either of these. Am I missing something?[/li]

[li]The popup descriptions are truncated, which is curious. I thought that the description was a blob, but I am not sure. I will look into that, thanks[/li][/ol]

Thanks for the tips guys. I will be making some changes today sometime.






Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[Foamcow]

Instead of blockquote you could use a <p> with a class....

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
<!--
	.indent {
		padding-left:20px;
	}
-->
</style>
</head>

<body>

<p>I am a Musician.</p>

<p class="indent">I have been playing percussion for about 8 years. I have recently decided to take up singing in choir and playing guitar.</p> 


</body>
</html>

Now, let's think about what type of information you are displaying here.
It's a list of facts about you.
It takes the form of: Statment-Qualifying paragraph.
You could say it's a Definition List.

Definition lists normally indent the definition part, and you could apply further styling if you wished. But imagine if the user didn't have a CSS enabled browser, the content would still make sense as it would be displayed in the browser's default layout for definition lists.

<dl>
<dt>I am a Musician.</dt>

<dd>I have been playing percussion for about 8 years. I have recently decided to take up singing in choir and playing guitar.</dd> 

<dt>I am a Scholar.</dt>

<dd>Learning is something that rings deep within my heart. I don't think that I have found a subject that I didn't want to learn. More than just learning I enjoy teaching people what I have learned and discussing the possibilities with people who disagree with me. I love a good debate, but I can't stand it when emotions get too involved.</dd> 

<dt>I am a Christian.</dt>

<dd>I choose not this path for happiness or some release from the day to day drone that occurs in society today. I don't believe in a fluffy religion that claims to take all problems away. But I do believe in an all powerful God. A God who died a horrible death for the forgiveness of sins.</dd>
</dl>

Ok.. the popups.
Why are you using a BLOB? Wouldn't a Text field be more appropriate? Are you storing binary data in there? BLOB (iirc) stands for Binary Long OBject.
BLOBs have a length defined for them, my guess is that the length of your BLOB field is too short. Try it with TEXT or VARCHAR, they are much more suitable.

You could use CSS by creating an invisible DIV located on top of each picture. Then when the user mouses over the image switch the DIV's visibility on.
There are a couple of ways I can think of to do this, but I've not tried either of them.
Have a Google for an answer. If I get time I will try and work up a cleanish (or as clean as I can) solution.

The CSS rollovers I was talking about are explained at

http://wellstyled.com/css-nopreload-rollovers.html

The basic premise is that you create an image that contains the off, on and rollover states of your button or whatever and use it as a background in, for example, a list item. Then using CSS :hover psuedo classes you shift the image. You may also need to apply some javascript to make it work in IE, but the principle is the same.
Read the article, and again Google around for more info on it, my description isn't quite right there.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[theEclipse]

thanks alot foamcow!

I did some revising to the site. I had to do abit of googling to remember how to vertically center with xhtml specs but thats what I get for coding without a doctype.

I will look into the css rollovers link that you provided.



Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net