Review: Anna @ Fragile-Heart
back to Completed Reviews
Site Name: Fragile-Heart
Owner: Anna
Reviewed by: Georgina
Reviewed on: 29th June 2009
Site Name
It’s a nice name; easy to remember. “Fragile Heart” reminds me of the song by Jewel.
Coding and Validation
Your HTML has 6 errors and 31 warnings.
Firstly, you need a doctype to declare your document as an HTML document. You have good basic structure but are missing these fundamentals. The doctype below, HTML 4.01 Transitional, best matches your coding. You need to place this at the very beginning of every page, before <html>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
You also need a character encoding to define the character set of your webpage. The most common one is UTF-8. You should place this in between the head tags.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Remove the </style> towards the beginning of your document; you probably accidentally left that there when converting to an external stylesheet – the include for the stylesheet does not need to be ended.
Another key rule with validating coding – specify an alt attribute (alternative text) for all images. Screen readers such as those for the blind will be able to read these more effectively and give a better description if you put some alternative text on your images.
With your divs, try and use CSS to style them. For example, with this one:
<div style="position: absolute; top: 0px; left: 177px;">
You can give this div an id (read my tutorial on classes and ids) – take a look at this:
Use:
<div id="header">Specify with CSS:
#header { position: absolute; top: 0px; left: 177px; }
You can also do this with other bits of styling in your HTML coding.
Remove the first </div> that you see in your coding – you have accidentally put two.
The Twitter updates are causing an error in validation; have a look at my Twitter tutorial to see how to fix that.
So you are aware, the warnings are simply from Cutenews, which codes your entries in XHTML rather than HTML.
Attempt to use <strong> instead of <b> and <em> instead of <i> from now on, for semantic – more meaningful – purposes. As I mentioned with screen readers it does give more meaning for them.
Your CSS has 4 errors and one warning.
A couple of small mistakes here. border-bottom: dotted 2px; #0000000 needs a semicolon afterward. Instead of writing #none for the backgrounds just delete the whole property.
Browser Compatibility & Usability
According to Browsershots.org your site looks similar in most browsers.
You are using absolute positioning to position the layout. I assume you are trying to center the layout. If not, it is a uniform layout with a bold outline so centering it would be better. Refer to my tutorial on div containers. You simply place the entire layout in a centered container.
I think your navigation could be bigger. Using bigger text with CSS block navigation will make it stand out more.
The font size is fine and comfortable the way it is.
Layout
My first impression is that you have a very simple layout. There isn’t much to it. The font you have used for your website name is nice; the “.f-a.com” isn’t really necessary. It’s not part of your website name. I understand it is your URL but let the name of your website stand out.
The tagline “head in the clouds” is a bit out of place. I think you could do without it, or at least make it more subtle.
The clouds are very cute and simple but there is so much whitespace in the header image. You can make these cute little clouds stand out by perhaps only having one, or having both at the left and right sides of your website name. It just appears that you’ve slapped the layout together without putting much thought into it.
From the layout it seems that your graphic skill probably isn’t that great. Yet these clouds are simple and nice and you have used their simplicity well without making the layout look tacky or overdone.
The colour scheme is simple and the layout is easy on the eyes. I think you could utilise more colours in the headers and titles though. That would really brighten the layout up and make it seem more defined and interesting. You don’t need great graphics for a good layout; use colours!
Content
Visitor
This page looks a bit messy. You should space out the text because the descriptions of each page in such a bunch make things look cluttered.
The website tips article is really quite simple. You have a few errors:
first getting started should be getting started
do’s and don’t's should be dos and don’ts
ok should be okay
weird[like should be weird [like
makes sense with your site type should be fits with your site type
your a beginner should be you’re a beginner
Don’t do html should be Don’t use HTML
to graphics should be to graphics.
html. Ok should be HTML. Okay
reccomend should be recommend
Server or a Root Directory should be server or a root directory
The basic HTML tutorials are pointless – I suggest you remove them. The codes don’t mean anything to someone who doesn’t know HTML, and for someone who does, they’re pointless. You also should be displaying code with code and not textarea – textarea is intended for user input only. This goes for the links tutorial too.
With the avatar tutorial, you should specify what program you are using. Same with the tutorial on blending, which also has errors:
guassin should be gaussian
your done should be you’re done.
Also avoid using celebrity images as you should have permission from the photographer to use them, and they’re not very original.
On the mosaic tutorial, your done should be you’re done.
The avatars are very simple and you don’t have many. The ones you have are a good start; continue adding more!
The colour schemes are simple but alright; there isn’t much one can say about colour schemes.
The names and scribbles – very nice. Not the greatest graphics but definitely a touch of originality and creativity; good use of colour as well.
The uncoded layouts are fairly well done. I just noticed that Miley Cyrus’s foot is transparent in one. As I mentioned, avoid using celebrity graphics; they get boring and unoriginal.
The word pixels are very simple. Try adding a shape to them or a symbol to make them more interesting. You have made the backgrounds transparent which is good.
On the scribble contest page, optional you should be optional; you. Try and space out these rules so they don’t look so squished.
On the reviews request page:
me(Anna) should be me (Anna)
webmis should be webmiss
ect should be etc
you rating should be you a rating
Thank you for using my pixels. 
Site
The linking buttons are alright; try creating a few of 88 by 31 pixels. That is another size commonly used.
It would be helpful to have the subnavigation at the top of every page in the website section.
On the affiliation page:
ect should be etc
recieve should be receive
an affiliates should be an affiliate
awhile should be a while
affiliates,as should be affiliates, as.
“If you put no email, sorry” – doesn’t make sense.
Owner
You should place a comma after “school” under “style”.
Summer and yellow don’t need to be capitalised.
Yes, petunia is spelled correctly.
Affiliates
Self explanatory.
Originality & Creativity
You had some creative things here and there and I can see that amongst a few celebrity graphics you do have original content.
I think you can work more creatively with your layout to produce something a lot better, and you can also keep working on your graphic skill to come up with more creative content.
Organisation & Errors
Well organised. Some of the pages could be spaced out for easier reading. There were a few grammatical errors which I pointed out. I didn’t spot broken images or links.
Overall Comment
Your site was fairly basic, Anna. For someone who has only recently been HTML coding, you show sound knowledge of HTML and you do attempt to create some original content.
You can tweak your coding a little bit; there are things you can shorten and make easier. It’s good to see you have already worked with PHP includes.
You have quite a nice variety of content. You simply need to work on your graphics a little. I find that photography worked for me for a bit while I was working on my skill. Keep your layouts simple and keep up the content. Work on adding a bit of excitement and “oomph”.
(Y)
Sophia
Good review it was fair, about magical surprise I know you were and I respect you for that, but just encourage her a little so she will continue web designing
[Reply]