back to Completed Reviews
Site Name: Sparkling Soul
Owner: Gillan
Reviewed by: Georgina
Reviewed on: 27th April 2009
Site Name
Easy to remember; I like the alliteration.
Coding and Validation
Your coding has 23 errors.
You don’t have a doctype. You need one at the top of every page to ensure that the browser recognises your document as an HTML one. Normally, because your FanUpdate entries are coded in XHTML by default, I would recommend converting your website to XHTML but since it is apparent that you don’t have the extensive knowledge, I will help you validate your site to HTML.
This is the doctype you will need – HTML 4.01 Transitional – and it needs to go at the top of every page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
You also need a character encoding, which you must place in the <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
You appear to be using ” for a quotation mark. This isn’t necessary especially when using a script, so be sure to change these back to quotation marks.
You’re also using a table somewhere in your coding. You can’t specify the height of the table because it always depends on the content within it. You seem to be using this for your navigation. I advise you to use horizontal CSS block navigation for this; it’s neater and cleaner.
Instead of using a JavaScript for the little Twitter, Plurk, Facebook, etc icons, I suggest just displaying them all. The JavaScript is causing errors and I don’t see the point in having them drop down like that – you might as well display all of the icons or not at all.
Add type="text/javascript to this JavaScript tag for your Yahoo status (you need to specify a type for a script):
<script language="JavaScript" src="http://freehostedscripts.net/yahoostatus.php?sn=dpinkpunk">
You’re using a table for your affiliates. That is fine – but you cannot specify a height for a table, because it all depends on the text within it. The height is going to be the height of the text within it, whether you like it or not.
Add type="text/javascript to the script before your affiliates.
You need an equals sign after form name in your coding. Form names also need an action. If there is no action you can leave it as action="".
Also, here:
background-color: #413e40;
font-size:12px; font-family:Tahoma;
color:#d997ad" font-size:11px;
The font size part should be removed; you already have it within the quotation marks. Even then, it’s best to customise it with cSS.
Your link to the GM Directory has two specifications of alt; there should only be one.
Again in your document you have specified the height of a table, which you cannot do.
You’re placing your FanUpdate entries in a <h3> tag. That’s also causing an error.
You’re using a large amount of Javascript which is not recommended; some people cannot view parts of your site properly because they could have JavaScript turned off. Avoid using JavaScript and try and use other methods.
Furthermore, you can validate your HTML by visiting my HTML validation tutorial.
Your CSS has 1 error and 38 warnings.
The error is caused by the styling in your Javascript. All the warnings are from using the same colours in two contexts, and for not quoting fonts with whitespace, such as "times new roman".
Validation is necessary for browsers to process your site properly, so be sure you at least clean up a few of those errors.
Browser Compatibility & Usability
Your site looks the same in most browsers according to Browsershots.org. Good stuff.
For your navigation, I already mentioned the use of horizontal CSS block navigation, which will get you the effect you want.
“Me” would be better expressed as “Owner”.
The font size is alright; I recommend increasing the line-height though, as the text seems quite squished together.
Try to reduce the amount of JavaScript you use. It can cause your page to load slower and as I mentioned, people can have it turned off so won’t be able to see the effects anyway.
Layout
The first thing I notice is that you’re using celebrity images, which is actually illegal unless you have permission from the photographer to use them. Additionally, they are rather unoriginal. I cannot recall how many times I have seen Paramore on website layouts – too many times.
That aside, the layout isn’t bad. It’s put together creatively. The photos are arranged quite nicely, though the smaller ones look very stretched and dodgy. I think you could have resized them better; the squares didn’t have to be the same size. Also, I see how you’re trying to obtain a polaroid effect; therefore the bold lines don’t really fit. You could have used a brush or used stock images of polaroids to make it look more realistic.
I like the way things are put and how the little curly brushes overlap, and the content section is overlapped by the images.
The thing that bugs me most about the layout is the spacing. The image on the far left is so much bigger than the others, and seems so far away. Since you have overlapped the content section, it would be nice to see the same sort of effect with the larger photograph.
All in all this results in a rather wide layout, which can be a pain for people on smaller screen resolutions. One of the smallest screen resolutions is 800 by 600 pixels – I’m sure they’ll be stuck trying to look through your site when it has quite a wide layout.
The font size doesn’t quite match the layout, even if it is legible. The text is quite small when the layout is quite large; it doesn’t quite fit. I recommend making the text larger. You also have the sidebar further down – which is fine, and very creative, but I think it looks a bit strange when you don’t have many blog posts to fill up that large grey gap.
The CSS colours are quite nice, though I would change the greeny blue to something else; it doesn’t really go with the clours.
Overall this layout is quite nice, but could do with some subtle improvements.
Content
The sidebar could be cleaned a little bit. You don’t really need all those icons there for all your contact methods. It isn’t necessary. Some could be put on another page, really.
Site
On your about page:
well.It should be well. It
was i won should be was that I won
And I should be capitalised!
Same with your advertising page; capitalise the Is. And you need to remove one of the advertisements, whose plan has already ended. The word “here” for the application form is actually a 404.
Affies isn’t a word; it’s much more professional to say affiliates. Nevertheless, this page is well organised.
Gifts page is also organised!
Credits page – nice. You’ve credited your sources well, and under different headings too. Good job. Don’t forget to credit where you got all those scripts from 
The second last button on your link buttons page is a dead image. It’s nice you offer the codes here! More unanimated buttons would be nice; not everyone likes animated ones – they can be annoying.
Past layouts – well organised. The first version doesn’t have an image – I’m assuming you didn’t take one?
Me
Ooh, your ‘about me’ page interested me. I used to have one of those hug counters.
is studying should be am studying
short,i’m should be short, I’m
is like should be is basically
Philippines.I should be Philippines. I
1611(WOW!).It’s should be 1611 (WOW!). It’s
school,go should be school, go
site,listen should be site, listen
music,watch should be music, watch
sleep!But should be sleep! But
seems.For should be seems. For
homeworks done.LOL should be homework done. LOL.
Essentially – place spaces after full stops and commas. And please, for goodness’ sake, capitalise your Is.
On your ‘my bestfriend’ page (which should be best friend by the way), you should update Marielle’s link.
Also, like with your other pages, capitalise your Is and place spaces after full stops and commas. This makes things easier to read and it’s also more professional and grammatically correct.
Chat – self explanatory.
Usernames – this could go under a contact page with your chat page.
Pictures – well set out. No problems here (except to capitalise your Is).
Random facts could really go on your ‘about me’ page. Also, please proofread this page and space out with the brackets and commas and full stops; and capitalise your Is.
Playlist – nothing much to say here.
Survey – just a survey, nothing to really review.
Visitor
Err… I click on graphics, and I click on backgrounds, and I still have to click on a category? Really, this is very annoying. I am going to end up pressing back many times, and even then it’s just annoying to have everything categorised like this with the unnecessary subpages. I just want to see your content. So stop holding back your visitors with so many pages to navigate through!
The backgrounds are quite boring. Nothing really stands out to me and I can’t really imagine many people using these. I don’t see such snazzy backgrounds being used so much anymore, except on Piczo sites or really amateur sites. I’m sure you wouldn’t use backgrounds like these either.
The icons? Celebrities? Well, as I mentioned, they’re illegal. Also, a lot of these aren’t good quality. The Ashley Tisdale ones are very pixelated, and many of the Avril Lavigne ones are fuzzy. In fact, the whole lot of these just look cropped and badly pixelated. Barely any effects, and just very bland.
The quotes are pretty useless. What can they be used for? What’s so special about them? They can’t really be used for anything. People want things they can use in their designs and layouts.
The wallpapers aren’t too bad. The blending is done nicely, but many of the images used could be resized so that there isn’t such a big blob of the celebrity standing out. The typography could also be improved. Choosing fonts that better suit the image and that have a subtle effect to them rather than just being slapped on, will make the image seem more realistic and refreshed.
These gradients are tiny. They can’t even be classified as gradients. Icon textures, yes, but not gradients. When I clicked the image, I expected to get a bigger view. Unfortunately not.
The PNGs/PSDs aren’t very well cut – the Ashley Tisdale ones in particular. Do you think I can’t see the jagged blue lines on this image? And what’s with calling them PNGs? I can easily save some image as a .png file and call it a PNG, woohoo. You should call these cut images or something, seriously. That’s more accurate.
Your basic HTML tutorial is useless. No one will understand these codes without getting a basic grasp of HTML. This isn’t even a tutorial; it’s a set of copy-and-paste codes. If you’re going to ‘teach’ HTML, then write out a proper tutorial.
The PHP includes tutorial is alright. You don’t need to write this underscore crap. You should use <code> to display code, rather than <xmp>. Also, if you’re displaying code, just use < for < and > for >.
The CSS tutorial isn’t bad. It would do better to explain each part of the CSS, though.
BBcodes – this isn’t too bad; the concept could be explained further though.
The popup page code isn’t really useful. People don’t really use popups anymore, and they’re also annoying when people have popups blocked in their browser.
The blinkie tutorial isn’t that bad either; just that blinkies and animated things are annoying and distracting on a website.
A final product image on the blending tutorial would be better.
In your other blending tutorial, because you’ve used the badly cropped “PNG”, it hasn’t turned out 100 percent great.
Glitter text? Similar to an animation in the sense that it is annoying and distracting. It’s not a horrible tutorial, but if you’re going to keep it, it does need refining in terms of grammar and professionalism in that sense.
The text effects aren’t that useful – they just show the effect of clicking a button. People can just experiment with this tool in the program themselves.
You say the following for your file formats:
Credits are from: How to Do Everything with Adobe Photoshop CS2 book
Proper crediting would mean crediting the author, place of publishing, etc. if it’s a book, or at least linking to a website. Besides, these are all practically copied verbatim from the book, which is plagiarism. If you must include this, write it yourself.
The fonts installation tutorial is useless. How would one go about unzipping a file? Where is that function? How is this done exactly? You have to be specific. The user doesn’t like to think they are stupid; you must explain in detail if you are instructing them.
Extra
Tagboard – self explanatory.
Chatroom – self explanatory, pretty much the same thing as a tagboard and I don’t see why you need two.
Plugboard – there’s a MySQL error on this page.
Your advertising form needs to be updated. Your advertisement isn’t a marquee; it’s a slideshow of sorts in which the button changes.
Contact form should really be in the site section… And report an error is the same page from there too.
Originality & Creativity
I couldn’t really see much originality – there were quite a number of celebrity images used. Much of the content was creative, but not very original.
A lot of the content was quite generic and seen on many sites, or even not very useful.
Organisation & Errors
Organisation wasn’t too bad. A lot of your pages could be cut down though, and merged together. Many of the pages were very short and pointless and could be merged with others to save space. Also, you could cut out the unnecessary subpages.
You have a lot of errors in grammar and punctuation. Make sure you fix these because they look very unprofessional and messy.
Overall Comment
Overall there are a few things you could improve on. Firstly the coding could be fixed. You should minimise the JavaScripts you use. They increase loading time.
Work on optimising graphics. Refine them. A lot of the graphics you have seem rushed. And work on better quality graphics with more subtle effects rather than cropping.
Additionally, try not to use celebrity images. They’re unoriginal and boring, not to mention illegal. You can be so much more unique with your own photos or with stock photos. Try Stock Xchng.
Please correct your grammar and punctuation errors. They look very messy. Capitalise your Is and place spaces after commas and full stops. Things look rushed when you don’t proofread.
Cut down on the subpages, as I mentioned. Next time don’t make such a big layout. Cut down on the unnecessary content. Work on creating more original things. Original graphics like photography, drawings, and so on.
These are just simple things you need to keep in mind when designing. Aesthetics and usability are very important. Work on what I have mentioned, and your site will improve.
