Review: Kitty @ The Fight For Freedom

back to Completed Reviews

Site Name: The Fight For Freedom
Owner: Kitty
Reviewed by: Georgina
Reviewed on: 17th August 2009

Site Name

It’s a long name but otherwise it’s fairly easy to remember.

I haven’t seen many Warriors fansites but I have seen a few; thank you for letting me know about that. I personally am not a fan, nor do I know much about the novels.

Coding and Validation

Your coding has 9 errors and 7 warnings.

Your coding is completely incorrect. Not only do you not have a doctype, you don’t even have the correct structure of an HTML page.

You need the following doctype for use of iframes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

This is necessary for every page. Your structure should also be like the following:

<html>

 <head>

 </head>

  <body>

  </body>

</html>

Therefore <header> is completely incorrect. You also have deprecated pieces of coding like <ceter> – when you could be using a class in CSS to define it:

.center {
text-align: center;
}

And you can utilise this in HTML in paragraphs as p class="center" and such.

All content should go between the body tags. You need to have a good grasp of many basic HTML concepts. I suggest visiting some of my tutorials or w3schools for help.

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">

<style> is incorrect and should be defined as <style type="text/css">.

You don’t seem to be using much CSS, but you should still check what you have in the validator.

Attempt to use <strong> instead of <b> and <em> instead of <i> from now on, for semantic – more meaningful – purposes. It gives more meaning for people such as the blind, who rely on screen readers to read their text.

Overall your coding needs some attention. It needs cleaning and you need to master the very basics first. Errors in your coding and incorrect coding can mean a possible error in a browser or operating system, which is why it is important to validate coding.

Browser Compatibility & Usability

Your site looks the same in most browsers, and it is navigable and functions in Internet Explorer, Mozilla Firefox, Safari, and Opera.

That’s a good start, however, I notice you’re using iframes which can be a hassle for web owners and visitors alike. Iframes have many disadvantages. They don’t work on all platforms and devices, some very old browsers don’t cater for them, and they are a pain to navigate and don’t always work, therefore they aren’t very accessible. Throughout the course of your review I assume I will attempt to bookmark a page, but I cannot, as it is trapped in an iframe.

Also a problem for you as the web owner is that search engines will not look at webpages in iframes. People may also come across a single page in your website but will assume there is no more to the website since they don’t see your layout and only the content within the frame.

They might be convenient, but you should convert to divs, then server side includes. You can achieve the same look, and your website will be more accessible.

The font size is nice and large and easy to read.

The navigation and links are bugging me. Firstly, the navigation links are tiny, and they’re in a barely legible font. Keep in mind that not everyone has this decorative font on their computer so adding some alternative fonts in your CSS would be nice:

a {color: #000000; font: normal 8pt Harrington, Arial, "Times New Roman"; text-decoration: none;}

Also, the regular links change font size on hover – this isn’t too desirable; it’s distracting and also doesn’t look professional. Stick to the same font size and just a basic colour change or addition of the dotted bottom border.

Layout

The static rose in the bottom left corner is a nice addition to the whole theme of the layout. It stands out nicely and fades very neatly into the background.

I like how the theme of the rose follows on in the header image, but this time with a darker twist. There are nice layers of textures and effects in the image.

While a combination of fonts are desirable, you must be careful that they don’t clash. You’ve used two fonts in the header image which are both decorative, and using too many decorative fonts can clash. You should have opted for one decorative font for the title and a much simpler font for the layout tagline. With all the effects going on in the header, it looks a bit messy if you have such a variety of fonts.

The blending in the image could be improved. It seems like there is a change in the style of the image from the cat to the rose; it would look a lot neater if there wasn’t much a distinct division between the two.

The layout is neat and uniform; it’s good to see that it’s centered and uses some varying shades of basic grey for the sections of the layout. This adds a bit more interest to the simplistic style of the layout.

Content

Website

On this page scentences should be sentences.

On the staff page, Nickleback, should be Nickelback.

On the contact page, Affiliate form is bellow should be affiliate form is below.

On your credits page, you cannot simply credit “Google Images”. Google images is a search engine that produces results based on a search. When crediting a website, credit the exact website you got the image from.

On the disclaimer page, warriors should be Warriors.

On the link back buttons page, you should be using <code> to display code, not textarea. Textarea is intended for user input only. When displaying code, it must take on the following format, with < replacing < and > replacing >:

&lt;a href="website" target="_blank"&gt;&lt;img src="image URL" alt="alternative text"&gt;&lt;/a&gt;

On the trophy cabinet page, experianced should be experienced.

Visitor

On this page niffty should be nifty.

You should have titles on your pages so I know exactly where I’m at when I am browsing your website.

On the cat artworks page fill free should be feel free.
The images on this page take a long time to load. Instead of using the width attribute to resize the images, create a separate image for the thumbnail. This way, not all the large images have to load at once. If you simply use the width attribute, the full size image is only being resized on the page; hence the full size image has to load, and when you have a lot of images on the page this can have an undesirable effect on the loading time.

Editing images so that they look like characters from the book is a creative idea. The images all have rather different styles though. Some looks like they are painted; others like real photographs. Some of the ones that look painted are a bit rough on the edges and aren’t terribly convincing, such as the last one. All the images need credit. You may have found them on a search engine but you should be crediting the exact website that you got the images from.

The avatars have good base images but the text additions need improvement. Some of the text on the avatars looks as if it was simply “slapped on”. The text needs effects as well, even just a simple dropshadow to make it stand out and not blend in with the background. You’re using a lot of decorative fonts. Be sure not to overuse these as I mentioned similarly with your layout.

The same note goes for the banners. You need to work on the effects and not simply place text on. Some of the banners look ridiculously simple; as if you just took an image and put text on it without any effects. However, this banner is a good one. It has a subtle text effect and the colours are also well chosen.

When choosing colours for text on images, use one that contrasts but that isn’t too bright. If you have a dark purple image, you aren’t going to place text on it that is also purple. A pale grey or white would work better. This website can help you with selecting colours from an image.
You have a dead image on the banners page.

You’ve only got one blend. It looks quite good and is blended very well. Blends aren’t terribly useful though.

The “blogs” should be more accurately named. The term is rather outdated. “Blog” is an abbreviation of “weblog” (an online diary). “Blog boxes”, on the other hand, would be inherently more accurate.
Again with these graphics, you need to rethink the colour scheme of the graphics. The “Butterfly dreams” one has a rather striking content space, which isn’t very appealing. You also need to use code to display code, as I mentioned earlier with your link back buttons.

The character blends are actually an improvement from the other graphics I have seen so far. The colour choices for the effects are a lot better. The text needs a few more effects though.
Same deal with the images. Resize them as a new image for the thumbnails. It saves loading time. When someone wishes to see the full sized graphic, they will click on it. Not having thumbnails results in the page taking a long time to load, as I mentioned earlier.

For many of your graphics, you state that hovering over the image will give a description. Unfortunately this is not the case in Mozilla Firefox and several other browsers; the alt attribute does not function in this manner. In the image code, title must be placed as well as alt.

Instead of having a “garbage bin” of works, why not place them in a portfolio or just don’t display them?

On the lyric banners page, veiw should be view.
These could really be improved. There is so much text on the images that it looks extremely cluttered. The images also look as if the text has just been “slapped on”. The font for the lyrics is quite edgy and barely legible. The “One Step Closer” lyric banner is made in a better fashion – not too many words and not incredibly cluttered and messy.

On the petpages, Preveiw should be Preview.
These are alright. The general presentation of the layouts look okay but the graphics and the colouring need to be improved. The same goes for the premade layouts.

The signatures look fairly good; these are some of the better graphics I have seen so far; the text is not overdone and it has a subtle effect.

The signs are quite nice and have very nice effects. I’m just not liking the random sizes.

Whitefur’s user bars look nicer, neater, and simpler, while I like the designs of the other bars better.

Warriors

On this page theorys should be theories.

I’m not sure if you wrote the battle moves, but if not, you must give credit on this page.

Most of this section is generally information. It’s a good thing to include but for people unfamiliar with the series, some more introductory information would be good.

Writings

You’ve spelled “Reviews” incorrectly numerous times; it is Reviews. NOT “reveiws”.

I won’t be reading through your writings and reviewing them; they’re your pieces of work.

On the rants page you have mistakes:
beleive should be believe
neightboor should be neighbor/neighbour
Literaly should be Literally.

The tutorials are okay. The images, instead of being full screen views, should be cropped to focus on the part that is being changed. This way the tutorials are easier to follow.

Extras

On the contests page:
arn’t should be aren’t
that wat should be that way
reqest should be request
Contestents should be Contestants
Setember should be September.

Originality & Creativity

I have seen quite a few Warriors fansites so I can’t say there was much originality of sorts. I think it’s a unique idea to have such a fansite but being familiar with a few websites, you generally had the same content.

Each person has their own unique style so keep working on those graphics. You have potential, but that means practice.

Organisation & Errors

There were only a few mistakes in writing. Things were generally organised – the only annoyance was with the images taking a long time to load.

Overall Comment

As I mentioned earlier I am not familiar with the Warriors series. I cannot accurately judge the written content of your website, but overall for a fansite you do have quite a lot of content.

The coding does need a bit of work and the graphic skill needs to be worked on. I understand about all the graphics having a bit of a dark nature but it wouldn’t hurt to have some bright graphics or at least some “happier” colours. I would highly suggest converting from the iframes and using divs.

You’ve done a sound job on your website; there are just a few things that need attention.