Reviewed: Irene
Site URL: sonata.sacred-scars.org
Quickly just want to add an apology for not getting your review done sooner. I’ve recently started a full time job and had to put things on hold while I got sorted out. I greatly appreciate your patience and the fact that you didn’t change your layout mid-review.
First things first — loading time. While my browser (Firefox) rendered your images it suffered from severe lag. The overall size (total images add up to about 100Kb) is not as much as some websites but because of the dimensions of the images it causes the browser to stop and think. This could be changed by removing all of the ‘white’ space on the right hand side of the image — specify the background colour with CSS instead (background-color: #F6F1DD;). The background image can also be trimmed down in a similar way. This would have the added benefit of removing the horizontal scrollbar.
Your colour scheme is quite dull. It’s all that pale nappy-brown/cream colour. I personally would have used more colours from the top image; dragged blue in from their ties for example. When designing a layout around an image, you don’t need to focus on just the main colour in the image.
In terms of functionality I’m having a difficult time reading your text. Your font is quite flat which makes me want to squint my eyes to see it. Serif fonts are rarely practical on a website and the font you’ve picked is a classic example of that. Something like Verdana or Arial would be a better choice as they’re a lot more common than Bookman Old Style and a lot easier to read too.
Your links need some sort of emphasis or change when they’re hovered over. Get rid of the cursor change and think about adding something like an underline or a new colour.
I was on your website for approximately 28 minutes before I realised that there was more to the site than this one page of content. Because you’ve used text to fancy-up the layout graphic, the navigation is easily missed and accepted as just another effect. In your next layout, consider using plain ol’ links for navigation instead of an image map.
Onto the content. For starters, your introduction is far too brief and doesn’t really give any sort of insight into what I’m going to find on your website. I do like the fact that it’s positive (at first) with the word “Congratulations!” — if you are positive about your website, people are more likely to enjoy the visit. Following on this line of thought, you should remove the sarcasm about how exciting your life is. If you tell people that your content is not worth reading before they’ve even started, they might quite possibly leave within a few seconds.
I had a quick flick through your blog entries and you seem to present yourself in a generally positive and interesting manner — always a plus. I do think there needs to be more separation between your entries to stop them from looking like one long page though. Either a bigger more defined header with a larger top margin, or some sort of divider. I think that you’d find installing WordPress (as mentioned in one of your entries) a breeze and would probably increase the usability of your website as well as improve the coding (more on that shortly.)
Your sidebar is not the worst I’ve seen but there are elements to it which could be removed. For example, the domain/layout information would be better suited on a ’site’ page. Talking of which (other pages) — how am I supposed to distinguish between each page using the navigation? You’ve fallen under the common trap of specifying tooltip text using the alt attribute. The alt attribute should be used to specify alternate text (usually for when an image doesn’t load) and not to give some sort of groovy text tooltip. title="" should be used for this function, although it could be avoided altogether if you used clear link text.
Extra super duper imaginary bonus points for you for liking Shrek 1 and 2.
Under Autobiography on the me.php page, the following line: “First things first, I’m far by a special person” would read better as “First things first, I’m by far a special person” — just a quick swap of a couple of words. Also, “do not live a wild and deadly interesting life, far from” would be better as “do not live a wild and deadly interesting life, far from it”. Generally though, you have a good grasp of English for someone who is not from an English speaking country.
The award at the bottom of the page (still me.php) is far too big and add that to the size of the layout images would basically cripple anyone using dial-up. If I were you I’d drag it into Paint Shop Pro (or whichever equivalent you use) and make a much smaller copy — a thumbnail.
Your Reads were mostly interesting but the description at the top needn’t be bold. This actually makes it look like you’ve forgotten to close your header tag and doesn’t add any extra quality to the page. I didn’t spot any spelling errors on these pages, hoorah.
I worry somewhat that the icons you’re redistributing are infringing on someone else’s rights. I don’t agree with using celebrity/other photographs/images to make layouts (unless you have written permission) or to make redistributable images as the original images do not belong to the person offering them. Unfortunately not many people share this view, but bear in mind as you do not legally own the images you can not legally ask for credit for them.
On the Blends page you’ve misspelled portfolio (”portofolio”) and again the description needn’t be bold. I think you need some sort of separation between the link and the description as they tend to run into each other. (· or a dash would be sufficient.)
I am somewhat dreading reviewing your coding. I seem to remember this is actually why you submitted for a review — as you’ve probably noticed I’ve been putting this section off for as long as possible by going on about presentation and content. Waffle no more, I have to do this.
Don’t get me wrong, somehow your coding is controlling your layout in an adequate manner for it to work in Mozilla Firefox and Internet Explorer and some may argue that this is sufficient but I like to think that if you can tidy up your coding and get it to the best it can be at an early stage, it’ll be easier to troubleshoot larger, more advanced layouts later on. It will also make your pages load faster and be more efficient overall.
First things first you need a doctype. This will tell the validator what type of standards to validate against and will put any modern browser into Strict Mode (quirks mode, which is what the browser reverts to when you have no doctype, often displays elements with different default values and can effect how you design a page). The doctype I would recommend for you is the HTML 4.01 Transitional doctype — it’s not the most recent or bleeding edge (if you will) of doctypes but I think it is sufficient for your level of coding. The coding for that is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
…and should be placed at the very top of every page. If you’re using generic PHP includes this can be placed above all of the other coding at the top of the header include.
Next step should be making all of your code lowercase. This is not a requirement for HTML 4.01 but I recommend it to everyone. It makes your website what I consider “future proof”. Although that’s not exactly true because there’s more to coding than that, it is a big help when moving over to XHTML in the future.
I-spy with my little eye a completely redundant block of styling. You have the same style coding inside the <head> that you have in your stylesheet – why? Get rid of the all of the CSS you have in the <head> of your document and from now on make changes in your stylesheet. Talking of which — open it up and remove <style type="text/css">. Stylesheets are for style coding only — no HTML allowed.
While I’m on the topic of your CSS – did you get your style coding from a template? It seems so incredibly neat compared to your HTML and certain parts are lacking real values — font-family: FONT; for example. I would recommend writing your own coding from scratch using websites such as w3schools.com to help, as other people’s coding may have errors which you may in turn pick up and implement.
There’s an entire section of your CSS which is proprietary to one browser (Internet Explorer). What this basically means is that it only works in that browser, and therefore is pretty pointless to be honest. I’m talking about your coloured scrollbars:
scrollbar-face-color:F4F1DB;scrollbar-shadow-color:F4F1DB;
scrollbar-3dlight-color:F4F1DB;
scrollbar-arrow-color:E5DA92;
scrollbar-base-color:E5DA92;
scrollbar-track-color:B4B429;
scrollbar-darkshadow-color:B4B429;scrollbar-highlight-color:B4B429;
scrollbar-shadow-color:B4B429;
…I bet if you removed that coding, thus helping to validate your CSS (if you’re into that sort of thing) you’d forget all about coloured scrollbars within a week. Even when I switch into Internet Explorer now I don’t notice the changes and thus in my opinion this renders the changes useless.
Still in your stylesheet, font-size:8pt;, font-family:Bookman old style; and line-height: 15px; can be combined to save your time and space, like so: font: 11px/15px 'Bookman Old Style', serif; however you may notice a few changes here. Firstly, I’ve changed 8pt to 11px (the rough equivalent). Point font sizes are reserved for printing (don’t worry if you didn’t know this, I only found out recently). Also, I’ve added serif to the end of the declared fonts – this tells the browser that if Bookman Old Style cannot be found, another serif font should be used as an alternative.
Your link psuedo-elements (a:etc) are in the wrong order. These should be listed a:link, a:visited, a:hover, a:active to work properly. Also, as these have identical properties you could define them all in one go, like so:
a:link, a:visited, a:hover, a:active {
color:B4B429;
text-decoration:none;
font-weight:bold;
cursor: w-resize;
}
…although I highly recommend using separate colours/properties to highlight links when they’re hovered over/visited. I would also recommend getting rid of the cursor change, as mentioned above. This tends to frustrate people more than amuse them and is not seen as a positive change to a websites appearance or usability.
One last suggestion for your CSS — you don’t need to repeat properties. For example, you have color: black; specified in the body { } selector therefore you don’t need to repeat it under textarea, input { } because it will be inherited by the browser. However, under the same selector textarea, input { } you will need to redefine the font as that isn’t inherited — instead of specifying everything all over again a simple font: inherit; will work.
Back to your HTML. You should start by removing all of those properties from your <body> tag — these things can be re-assigned using CSS. Add the following to your stylesheet:
background-color: #ffffff;
margin: 0;
Next is the image slices table. I don’t think you need to slice your images but in case you do it again (for future reference) all attribute properties should be surrounded by quotation marks. For example, border="0" instead of BORDER=0. This doesn’t just apply to the attributes in the image slices table either — to validate your coding, and to add to that future-proofing business I discussed earlier you need to surround all properties in quotation marks.
Oops. Just spotted the second </HEAD> and an additional <BODY> after the image map — get rid of those.
The <div> that controls the sidebar has a superfluous id. Not only does it contain a space which makes it invalid, you’re not actually using the id to your advantage. My suggestion is either get rid of it, or move the style coding to your stylesheet using the id to tell the browser which style coding to reference. By that I mean you should reduce your <div> down to <div id="menu"> and put the rest in your stylesheet like so:
#menu {
position: absolute;
top: 394px;
left: 506px;
width: 172px;
}
Next thing I spot is an empty <H5> <H5>. Firstly, headers should start at h1 and work down gradually, and secondly, if a tag is empty you might as well ditch it. I’m assuming you’ve picked <H5> <H5> because it’s the same size as the rest of your text? Either way, this can be controlled in your stylesheet in a similar way to body { } etc, like so:
h1 {
font: put your font properties here;
}
Get rid of all of the <BR>s underneath the headers — headers are assigned a sufficient bottom margin by default. At the same time, be sure to wrap all text (not just the introduction) in paragraph tags in suitable places. For example, the block of coding/text that controls your introduction looks like this at the moment:
<H5><H5>
<BR>Congratulations! You managed to tumble into my little personal blog site.
I hope you’ll enjoy your stay, yes I know, my life is ever so interesting *grin*.
I personally would set it out like this (don’t forget to close the paragraph tags like I have — this is another “not a requirement” for HTML 4.01 but is good practise):
<p>Congratulations! You managed to tumble into my little personal blog site. I hope you’ll enjoy your stay, yes I know, my life is ever so interesting *grin*. </p>
It makes logical sense to wrap a paragraph in paragraph tags. If you wish to see a successful implementation of that just look at the coding of any of my web pages.
Moving further down I noticed <OL type="I">. Never in my 4 or so years of creating web pages have I seen that before, so either you’ve made that up or I’m missing some incredible piece of magic coding that no one has told me about? Either way I’d remove the type just to make sure. Still on the list, you don’t need all of the <p>s and <BR>s you’ve littered in there and you’ve forgotten to add <li> at the beginning of a few list items.
Your second <div> declaration needs a new id (ids should be unique) and then the styling code can be moved into the stylesheet as described above. You then need to remove the third set of </HEAD> and <BODY> tags which are below the opening tag for the second <div>.
My only suggestion for the coding of the blog entries is to wrap each paragraph in <p> </p> tags. At the end of the blog entries where you have your archive listed (this would be better in the sidebar) you’ve not opened/closed the essential <ul> or <ol> tags. By that I mean, instead of this:
<P><li><A href="http://www.sonata.sacred-scars.org/archive1.php"> Archive 1 </A>
…you should have this:
<ol>
<li><a href="http://www.sonata.sacred-scars.org/archive1.php"> Archive 1 </a>
</ol>
Last but not least you have an additional stylesheet being dragged in plus an empty <style> tag at the bottom of your page — these need to be removed.
In conclusion to my rather delayed review, I found your site relatively interesting and in good humour. You have what I consider great English skills for someone not born in a primarily English speaking country (unlike myself, on occasions) and I can see why your website would appeal to those of a similar age to yourself. However, I was incredibly surprised to see that your site was cross-browser compatible because your code is lacking. Follow my advice above and take a peek at the w3schools website which I’ve already linked and you will be validating your code in no time!