Reviewed: Raissa
Site URL: s-memories.net
First impression was something along the lines of “my, what a lot of blue”. Anyone who has visited my many and various sites over the years will tell you that I’m a big fan of blue and that if CSR had a scoring system, I’d probably give bonus points for it – but this is too much. The shades of blue are quite dark and they really don’t compliment each other enough to create a decent colour scheme; particularly the blue behind the navigation against the background blue.
I was about to say never use a dark background colour behind your text, but I guess that would be rather hypocritical when you consider the current layout of this site. I would suggest that a very pale blue, or even another colour from the top image might make the site easier to browse (which is the ultimate aim I think) and nicer to look at.
The image in the shape of the arrow contains what looks like lots of different parts of different images giving off a scattered impression, but I doubt that this is done intentionally as a “back up” to your site name. I’ve been on your website for a few moments now and I am yet to see anything that gives the top image any sort of reason. I wouldn’t say that reasoning for using an image is a necessity (I rarely have pictures that apply to my content), but it would be nice to see.
The bottom of your page looks—for lack of a better word—ugly. It ties in with the border around the content but it’s such a dull colour and really drags the whole website down. Bold italic text is never a good idea either; it’s barely readable. I would suggest making this footer text one size smaller than the rest, to take away the focus. You could also remove some of the useless lines like “HTML and CSS Valid” (which most people don’t care about) and “Part of the Happy Dagger Network”.
I was somewhat surprised to see the section supposedly dedicated to yourself containing just a poem. Don’t get me wrong, it’s a novel way to present this section and I do like the poem but it lacks a certain something. In places you seem to have forced it to rhyme; Wether it’s lights, music or ducks for example—”ducks” seems to have no relevance to the rest of the poem. Including music and to draw would be more appropriate as Including music and drawing.
As well as a few pointless words here and there you don’t seem to have any rhyming scheme at all. The first paragraph has syllables of 8, 5, 7, 7 and yet the second has 6, 8, 7 and 8. I’m not an expert in poetry and so I could be wrong here, but I’m sure that there’s supposed to be a structure of something like 8, 5, 8, 5. Not necessarily that amount of syllables, but that sort of alternating system. While we’re on the topic of structuring paragraphs – you shouldn’t be using line breaks to separate parts of your poem; <p> </p> would be more appropriate.
Because of the length of the word—”communicate” seems to be dominating the menu, so it was a surprise to see that all it contains is a crappy contact form. What feels like the main section of your site is a contact form? Talk about a put off! The link to the contact form needs to be made shorter to give the impression that it’s a less important page or it needs to be moved to after the other link menus. I really don’t want feel inspired enough by your website so far to contact you…
On your World page the first paragraph is all past tense except for the last sentence. It doesn’t read right and instead of That way, I can make my own layouts. you should try That way, I could make my own layouts.
Portal is the kind of word I expect to find describing a page with links to other sites that you own or update, yet I see link exchanges and “listings”. This would be better renamed to links, exists, anything that describes the page in a more appropriate way. After Echoia you’ve missed an apostrophe—the designs great should be the design’s great (or even better—the design is great).
Start should be the first item in the menu, not the last.
In terms of spelling/grammar errors I noticed that your She poem seems to lack any real punctuation (commas, full stops, etc). No—wait—you have two commas. I’m not sure what the standards for poetry are like over there and so I could be wrong, but I was taught in school to end lines in poems with the appropriate punctuation. For example I might write the first paragraph as:
She came in thirteen years ago,
Crying, cute and small .
Fast forward to the present;Stopped crying, not cute nor tall.
In the fifth paragraph, “Wether” should be “Whether”. On the World page, each reference of Livejournal should be capitalised as it’s the name of a website and “whats” in the last line of the second paragraph should be “what’s”. On Portal, next to Leiyla, “photoshop” should be “Photoshop” because it’s the name of a peice of software.
I don’t know where to begin with this coding. It’s not the worst I’ve seen but it’s been so long since I’ve coded HTML 4.01 it fries my brain. It’s not that different from XHTML either. Anyhow… for starters you seem to have an abundance of <div align="center"> and <center> tags. I remember when I was a coding newbie I thought that <div align="center"> was supposed to be used for centering elements but you’re coding your own PHP scripts for heavens sakes! I’d have thought you’d have grasped more complex HTML/CSS by now.
<table> is a block element, <div> is a block element. Block elements are supposed to be used as a container for content and/or inline elements, not to contain other block elements. If you’re adamant about using tables for presenting your layout (although if you ever decide to convert to XHTML, you will find it easier to validate if you use tableless CSS-based layouts) then you need to center your content with CSS. I have a tutorial on centering elements at tutorialtastic.
I noticed quite a few ampersands (&) written using the keyboard shortcut. Although I’m pretty sure these are ignored when validating with the HTML 4.01 doctype it is good practise to write out the full entity name (&) instead. The same goes for other HTML entities too; you can find a list of entity names and numbers at the w3 schools html help site.
Running your page through the validator I can see that your claims of validity at the bottom of each page are false. Unless you’re absolute sure your pages are valid, don’t include the link to the validator. People will mock you for it; trust me. Even I’ve stopped including the links on the majority of my pages. If nothing else, they’re pretty pointless for the average user. If it means that much to you, make a note on your World page that you’ve attempted to code to the HTML 4.01 standards.
Anyway… the majority of your problems seem to revolve around unclosed <div>s, most are which are there to center your content. Use my center cheat on the main <table> and you can get rid of all of the superfluous <div>s thus cleaning up your coding. There are other things you can do too; like using <p> tags properly instead of double line breaks (although I get the feeling these are generated by PHP using nl2br().
The link to the Happy Dagger Network at the bottom of the page has been coded incorrectly. You currently have:
<a href-http://happy-dagger.net target="_blank">
..which should be <a href="http://happy-dagger.net" target="_blank"> although most people dislike having new windows forced upon them, particularly in Firefox where tabs are more frequently used.
You’ve also used a pixel measurement to declare the widths of your tables in the HTML. When declaring width with the width attribute you do not need to use any form of measurement system. Each occurrence of width="330px" needs to be changed to width="330". Better still, declare the widths in your CSS and use a class to assign values to attributes which are repeated.
I guess there is more to your coding which I could critique but at the moment it’s a mess and is really hurting my eyes. Everything is squished up into a big ball which makes it virtually impossible to weed through, you seem to have that many sections to different tables I would swear you have some kind of addiction. I could so easily create your layout with three <div>s and a small chunk of CSS, and yet you have four tables all nested within each other. I would use this approach:
<DOCTYPE ... > title
<html>
<head>
<title></title>
</head>
<body>
<div id="container"> top half of top image
<div id="topimg"></div> content, bg set to no-repeat with other half of image
<div id="content"></div>
</div>
</body>
</html>
You could then assign the properties to each <div> using CSS. In your case, container would have the center ‘cheat’ assigned to it, topimg would contain the top half of your arrow image and content could be placed underneath. It’d be easier to assign the bottom half of the arrow to the content div and have it sit in place without repeating to have the same effect you’re using now with a fraction of the coding. Hey, if you want to stick to tables though…
In conclusion to my rather sporadic review (I started this weeks ago!) I think your site is lacking something at the moment. You seem reasonably intelligent and you have ideas which could make a good personal website great (like your approach to the She page) but all I can see is a lack of effort and a whole bucketload of crap coding. If you have a good enough grasp on PHP to be able to write your own blogging/update script, I am sure you can clean up your website and present it in a tidy and user-friendly manner. Oh, and stop murdering the colour blue!