back to Completed Reviews
Site Name: Control The Chaos
Owner: Lindsey
Reviewed by: Georgina
Reviewed on: 4th July 2009
Site Name
Not a bad name; easy to remember. The alliteration makes it really interesting.
Coding and Validation
Your coding has 8 errors and 7 warnings.
Your errors are rather small so I’ll outline how to fix them here. You have <body> at the very top of your document – that needs to be removed. In addition to this, you are missing the </html> at the very end of your document, as well as forgetting to close a div – so you’re missing a </div>.
By convention, paragraphs of text are generally aligned to the left. You should not be using <center> as it is deprecated, and the text would be a lot easier to read if it was aligned to the left.
Another key rule with validating coding is to 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.
You have warnings in your coding that are fine; they are a result of your FanUpdate entries being coded in XHTML and will not affect your website negatively.
Your CSS has 15 errors and 5 warnings.
These are generally easy to fix; you need to have a look through your stylesheet and set a width on floated elements, in this case your navigation. You also need to place fonts with whitespace in quotes, for example "Century Gothic".
You have quite a few pieces of embedded styling which can be specified with CSS, such as the following:
<div style="position:absolute;top:310px;width:660px;overflow: auto; background-color:#;">Not only do you need to specify a background colour but you should give this div an id like so:
<div id="divname">And specify it with CSS like so:
#divname {
position: absolute;
top: 310px;
width: 660px;
overflow: auto;
background-color:#000000;"
}
You should also do this with your other divs. My tutorial will help you understand classes and ids.
Attempt to use <strong> instead of <b> and <em> instead of <i> from now on, on pages other than your blog, for semantic – more meaningful – purposes. As I mentioned with screen readers it does give more meaning for them.
Avoid having coloured scrollbars at all as they only work in Internet Explorer and they are also invalid.
Browser Compatibility & Usability
Looking at your site at Browsershots.org, your layout is looking consistent in most browsers.
This layout has a generally large image which should be cut down in width in order to fit better in a smaller resolution. Personally, I prefer centered layouts but this layout works well off to the left. You should align all text to the left.
The navigation is clear but the text could be spaced out a bit neater. “Clear” should be written as “Home”. The main text is of a good size and is legible.
Layout
The colours in this layout are vibrant on black, and have a very nice effect, leaving the layout free of blinding elements. The header image is well styled and consists of a pattern that partially surrounds the text. It’s very nice but upon scrolling down, the layout loses its interest as the image ends. Continuing the pattern further down (as a repeating background for faster loading), or a pattern within the footer, would maintain interest.
The information at the foot of the page seems a bit messy. The site information is a bit unnecessary placed in the footer. The “back/home/forward” links are superfluous as they are integrated into most browsers.
The footer information would look a lot neater in a sidebar, otherwise it should be cut down a bit or removed for this layout. Alternatively, affiliate links and such could be integrated into the layout design to make it more interesting, as the pattern is well suited.
The general graphic design of the layout is good, but the elements and sections of the layout need to be rethought.
Content
The Girl
The images on this page are quite large. I recommend sizing them down a bit and spacing out the two pictures rather than having them so close to each other.
There are a few errors:
it okay should be is okay.
Consider spacing out the paragraphs a bit. I notice you don’t use paragraphs but particularly with the information under “The Basics”, the information could do with an extra <br> after each section of text to space things out a little. Your content div being quite wide, it would look a lot neater if the text was spaced out, and it would make it easier to read.
Visitor
The links on this page are really small; consider making them bigger.
The layouts have good graphic design but as with your current layout, the design and placement of elements needs improvement. The pink and green ones have small corner images which don’t really show much of a layout. The divs used for the text are also quite wide. For a change, a sidebar could be used. The old layout is better styled, but the header image is much too large and I don’t like how the girl’s legs simply cut off in the image.
The stylesheets used in the layouts aren’t really exciting or interesting. The underlined and italicised fonts have too much effect.
Your wallpapers should be presented as thumbnails and they should link to the full image. It is a pain having to drag to the address bar constantly. The wallpapers are quite nice and use nice text effects without utilising too many decorative fonts.
You have some errors on the request form:
You’re site should be Your site
in what you want should be with what you want
celb should be celebrity
I’ll be happy should be I’d be happy
did not specify should be do not specify
more then should be more than
url should be URL.
The bulk of the stock photographs are very nice and of good quality. The first few nature ones are a bit blurry but the others are well done. The photographs of people are also quite good; the positions and poses are great. Please have these images as thumbnails. It is a complete pain to view the full image by having to drag everything to address bar over and over. It is also time consuming.
You only have one set of emoticons which is nice but very simple.
I suggest deleting the iframe tutorial. Iframes are outdated and have serious disadvantages both to a viewer and the creator, including the possibility of the browser locking up and freezing, pages being “trapped” in iframes, and a multitude of other reasons.
On the image mapping tutorial:
eaiser should be easier
farther should be further.
You should use <code> instead of <textarea> to display code – textarea is intended for user input (notice how you can edit the text within?) and not for displaying code. In doing so you have to replace < with < and > with >.
This tutorial is fairly easy to understand and you’ve done a fairly good job on it. I personally know how to imagemap this way, but I haven’t seen many tutorials on it.
Site
FanUpdate needs to be on your credits page, as well as where you got the images for your wallpapers from.
On the history page you also have a few errors:
graphical design should be graphic design
on the same should be in the same.
Capitalise Freewebs, Neopets and Iconator.
Personally I think that a lot of your previous layouts looks better than your current one, but you still have the good graphic skill. I liked the sidebars and navigation in your previous layouts though.
Because your Twitter updates are protected, they cannot be viewed on this page on your website, and a popup appears instructing me to log in.
Portfolio
This uses Lightbox; your other pages should use something similar or be presented as thumbnails as well for easier navigation.
I really like what you have here; this includes your past layouts. Most of these are well designed with nice colours and very nice effects.
Originality & Creativity
You’ve got quite a creative website with some original content here. I didn’t really spot anything generic or boring. In general everything was interesting and creative.
Organisation & Errors
Fairly well organised. A few of the pages didn’t have titles and the text was smaller on some pages – you could work on this.
Images should be linked to the full view, so that they page is easier to navigate and browse.
I didn’t spot any errors apart from the grammatical/spelling errors I have pointed out.
Overall Comment
Your site was generally well done, Lindsey. There are a few adjustments you can make to your coding, otherwise it is quite well done.
Your graphic skill is great. Your graphics are high in quality and have very nice effects. Your layout sections could do with a bit of improvement to make them a bit more interesting and organised. I mentioned with your footer that the information would be better off in a sidebar or simply removed.
Your photography was great; most of it was high quality and the photos themselves were quite versatile.
I simply suggest adding more content and removing a few of the unnecessary pages, as well as fixing up the pages so they’re a bit more organised internally. You make good graphics so creating something like icons and more interesting layouts would really spice up your website.
Subscribe to Heartdrops
Lindsey
4th July 2009 at 11:57 pm
THANK YOU SO MUCH! I’ve been looking for something like this for FOREVER and now I have it. I leanred to code by myself so I learned a lot of incorrect things. I really do thank you for all of this feedback, it truly will help me. I won’t fix layout issues such as a repeating background, intresting affie links, etc. because I’m planning to just change the layout. I figure if I fix everything else I might as well make a new layout. You don’t understand how much I appreciate you helping me with my coding. I’ve been so lost with it that I’ve just given up. Once again thank you a shmillion (that’s a word
) times. You’re amazing.
Reply to this comment »