Review: Haley @ Lollipopster

back to Completed Reviews

screenshot

Site Name: Lollipopster
Owner: Haley
Reviewed by: Georgina
Reviewed on: 24th June 2009

Site Name

It’s a catchy name and is easy to remember; no problems here.

Coding and Validation

Your HTML has 30 errors and 17 warnings.

You don’t even have a doctype for your website. You need one to show that this is an HTML document we’re dealing with; hence you should put it at the top of every page.

You’re using FanUpdate, which automatically codes your entries in XHTML, but you are better off starting with this doctype, which is HTML 4.01 Transitional:

<!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 need to place in the <head> section:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

You have to remove the slash (/) at the end of your stylesheet include, as that is causing errors.

You must also have an alt attribute on all images. This means alternative text, so if the image doesn’t appear there is text to replace it. This is also handy for people with images turned off or who cannot view images on their device.

You’re putting a center tag in your h2 tag. You cannot do this; instead you must edit your CSS and add the following so that h2 is centered:

h2 {
text-align: center;
}

Instead of using h2 to fix up your text and center it, you should use something else like h3 or even use classes or ids to make something different.

Refer to my validating HTML tutorial for more information. If you correct your errors it will decrease the possbility of errors in other browsers and operating systems.

Your CSS is valid and also very organised. Good stuff.

Browser Compatibility & Usability

According to Browsershots.org your site looks different in Mozilla Firefox and Internet Explorer.

Your navigation isn’t centered at all. You should not be using things like position: absolute because that isn’t centering your navigation and aligning it with your layout; your resolution is different from everyone else’s. Your layout image should be inside your container and so should the navigation. There is no need to use these center tags as they are deprecated and you should be customising with CSS. Instead of using position: absolute you should place everything in the container div so that the navigation is properly centered.

You should look at a tutorial to help you; I recommend the tutorial on containers at Audio Rush, or you can view mine.

You could edit your CSS so that your text is more even – the text in the sidebar is bigger than the main text in your blog.

Layout

The header image is nice, but it’s really pixelated. You should have saved it in a better format. It’s in JPEG format but it isn’t very high quality.

You need to fix your layout as on many pages it just isn’t coming together. It’s got bits sticking out, things in the wrong places, and the colours aren’t working together either.

I recommend starting off with a template and editing it, or starting afresh with the containers, because they are not working across several browsers.

The colour scheme in the CSS doesn’t match with the header image. Try Degraeve for obtaining a colour palette from an image.

Overall your layout needs a lot of work. And the links – why are they blue?

Content

Domain

Why is the text on your ‘about me’ page so large and bold?

On the credits page, make sure you credit FanUpdate and Tinypic and whatever other hosts or image hosts you have used.

You should make some regular link back buttons of sizes 88 by 31 pixels and 100 by 35 pixels. And try not to make them animated; they can get distracting.
You shouldn’t be using textarea to display the codes either. Textarea is intended for user input and not for displaying code. Use <code> to display code. When doing so, replace < with &lt;, and > with &gt;.

The text on your history page is too small. You should also paragraph this page so it is easier to read.
Cyrus, it should be Cyrus; it
to have it she should be to have it; she
to busy should be too busy.

The other pages are alright. The past layouts page should be more organised; the screenshots should be of the same size.

Visitors Content

Affiliate images are rarely used. What is wrong with linking people using their names? These images also look pixelated and the quality isn’t very good.

Some of the blends aren’t bad; others are really pixelated the quality isn’t good. You also shouldn’t be using celebrity images as it’s unoriginal and the images are copyrighted to the photographers. Unless you have their permission you shouldn’t be using and redistributing.

The coded layouts are a mess. The images are not of good quality and the coding isn’t up to scratch. The layouts don’t work in all browsers and look misaligned; they need to be fixed.

The ‘download a toolbar’ is an external link.

Glitters aren’t terribly appealing. They’re really distracting. Yours are no exception; I don’t see the point of glitter graphics.

Again, with the HTML codes, use code and not textarea. These codes are pretty pointless; people wouldn’t understand them if they already knew HTML, and people new to HTML wouldn’t understand.

The icons are also very messy – they should be the same size, such as a standard 100 by 100 pixels, and you should avoid animating them and using celebrity images. Again these are of bad quality and should be optimised.

The textures aren’t bad but the first few have a fuzzy quality to them.

Tutorials

The GoDaddy ones can be useful for people using GoDaddy, but you should make them more descriptive. Use images and screenshots, mark the tutorials out in steps so it’s easier to read, and explain what GoDaddy is – some people might not know.

“Download links” should be named “Creating download links”. To be honest, this is really simple and you don’t need to create a tutorial for something like this.

The fonts tutorial is really simple and really quite pointless.
Your done should be you’re done.

On the favicon tutorial, ect should be etc, and Freewebs should be capitalised.

The print screen tutorial is pretty useless.

Hosting

Fairly self explanatory…

Ask Me

Part of the CSS is green here – that doesn’t match.

Originality & Creativity

You didn’t really have any creative or original content on your website. It was quite generic and you used celebrity images – they’re overused and not very original.

I think you can come up with more unique content for your website.

Organisation & Errors

The organisation of sections was okay. But you need to clean up your layout and fix those errors in your coding, and work on cross-browser compatibility.

Overall Comment

Your site needs a lot of work, Haley. You should start off with a template because the coding you’re using isn’t working in all browsers, and this is very important. You cannot just assume that things work in every browser and operating system because it looks fine in yours. This is where editing a template would come in handy.

You need to work on optimising your graphics. The quality of your graphics is very low. Save in a maximum quality JPEG or in PNG format.

Work on a better colour scheme for your layout as well. Make sure you specify things nicely with CSS and test your layouts before you put them up. You really need to work on coding and browser compatibility.

Try not to use celebrity images; they’re generic, boring and unoriginal. Create more resources that people will actually use. If your textures are of better quality more people will use them.

Rating
cookiecookie
(out of 5)

Leave a Comment

Super-cool smilies (click to use; don't abuse)

XD O_O D: @_@ ;) :love: :X :P :O :D :) :( /zzz /x3 /wave /wah /um /type /sweat /sus /snort /rose /puke /pow /poo /pirate /peace /oh /mwah /love /look /kiss /huh /ho /hmph /hehe /heart /finger /faw /ehh /ehe /eee /drool /cry /cool /clap /brow /bounce /bomb /blush /bash /asdfgh /argh /angry (Y) (H)
Comments may be held for moderation by me until they are approved. Comments related to the blog post are appreciated, rather than messages simply commenting on the website. Comments are responded to (as a reply here or as a response at your website) at my own discretion.