back to Completed Reviews

Site Name: Znyrat
Owner: Taryn
Reviewed by: Georgina
Reviewed on: 23rd August 2010

Site Name & First Impression

I’m guessing that your site name was partially derived from your name being spelled backwards. It’s not bad, as it does make for a unique name, and I suppose it would be easy for people to remember your website name if they do know your name.

From the look and feel of your website I get the impression that you don’t have much content. You have a small layout and generally, small layouts are used on websites that don’t have a lot of content. There is a lot of space on the right of my screen, and since your layout is aligned to the left, it makes the large whitespace more significant. Already, I think that your layout could benefit from having a wider content section.

Coding and Validation

According to the HTML validator you have valid code with 5 warnings. You can clean up the code of your tables – you do not need to write px following the number you have specified for your width. Putting in a number specifies the width of the table in pixels already.

In the following piece of code:

<a href="http://vanishedlove.co.cc" title="Kristen & Reem at Vanishedlove.co.cc" target="_blank">K'n'R</a>

Make sure that you replace the ampersand with &. As the ampersand marks the beginning of an entity in HTML, the literal use of the ampersand on its own requires it to be written out as the character entity of &.

It is really good to see you using alt text as appropriately as possible.

According to the CSS validator you have 4 errors and 13 warnings in CSS3. In your stylesheet, font-size:14; should have a unit, for example 14px.

For your textarea you are using -moz-border-radius, which is a property that is only supported by Firefox and other Mozilla browsers, so bear that in mind if you use it for any other more significant element of your layout.

Make sure that fonts like Times New Roman and Century Gothic are quoted in your stylesheet; font names with spaces must be quoted.

You also have a superfluous snippet of code in your stylesheet: ("")

Browser Compatibility & Usability

Your website is looking consistent in Safari, Opera, Internet Explorer, Firefox, Internet Explorer and Google Chrome and I don’t see many differences between the looks of your website across these browsers. All the links function as well. The only issue is your favicon – most of the time, only .ico files work in Internet Explorer as favicons.

Your navigation could take up a bit more space considering its position on your layout. The text could be made a bit bigger as well, to make it stand out more.

I have a big issue with your main text. Your links are easy to spot because they are a dark colour on the light background – but I completely disagree with your white text. It is extremely hard to read because of its colour, and your line-height is much too small. Your text just looks squished in my browser and I have to squint to read it.

Layout

The layout’s colours are sort of calm. The corner image is a nice feature, but there should be more whitespace between it and your content. Perhaps a large title would balance it out. Having the links under the image and the content next to it would make it look more structured.

It would be nicer if the image in the corner was clearer, and if you perhaps utilised the colours in the image more throughout your styling. A website like Color Scheme Designer would really help out here to incorporate more colours from the image into the styling.

The content section should be wider, and as I mentioned earlier, the line height of the text increased. This would really balance out the layout more and let it occupy a bit more of the screen both vertically and horizontally.

Content

Owner

It’s a bit ironic that you spell “grammar” incorrectly as grammer on the “About Taryn” page, not to mention, MySpace should really be capitalised.

Your joined fanlistings page would look a little more organised if there was padding between the images.

Site

I just noticed on your “About Znyrat” page that you have some cute pixels at the foot of the page to go to the previous page and to the homepage. They’re not on every page, and you should keep this consistent if you choose to use them. Your blurb for this page mentions a “history”, however, there isn’t very much on the page in regards to this.

Instead of linking affiliates with “http://”, it would be more meaningful if you linked their names instead. By all means use it for decoration but names or site names would be a much better option as this is more relevant and can help show the relevancy of your pages (or external links, for that matter) to search engines.

If the affiliate requests are closed, I suggest you take down the form.

I just noticed the “UP!” images on your subpage for “Site”. I think you should use a different coloured image if you want these to be noticed, because I could barely see them against the light background.

I didn’t notice that you had more than one credits page, until I looked at your site map. You should simply place all credits on one page, or link to all pages on the “Site” page. I do like the time you’ve taken to write little blurbs here, though.

On the subdomain hosting page, setup should be set up, and you should capitalise Piczo and Freewebs.

I don’t think the “retired” link buttons on your website are needed.

If possible, it would be a good idea to add padding between the images on the plugboard so they don’t look so squished.

‘folio

The banners are really small and the image quality is not so good. I don’t like the pixelly effect on this image, for example. Some images look like they have been stretched to fit on the banner size. This animated banner isn’t very aesthetically pleasing though; the animation is red, which is too harsh compared to the rest of the colours on the image.

I also can’t even make out too much of this banner because it’s blurry. Most of these banners are blurry or the colours are saturated. You should stick with simpler effects at first, and perhaps start on a bigger canvas and work your way to smaller images. A lot of these banners would have looked better large and simple, and with minimal effects.

I don’t see the point of the fonts page. You didn’t link the fonts to their source. If visitors were interested in a font, they would have to look it up after deciphering the font itself.

There isn’t much use in the 50 by 50 icons. You state that they’re unedited, so they’re really just cropped images which anyone can create themselves.

The bulk of the music icons you have don’t look good at all. A lot of them are very saturated, blurry and unsightly. As you can see, just looking at this bunch, they don’t look that great:

The effects you use on the icons are too much, and you have altered the colours too much. I’m not familiar with GIMP, which I believe that you use, but there are websites like GIMP-Tutorials.net and TutorialBlog.org that have tutorials to help you out. Your icons can improve if you use less harsh effects, starting with a few coloured overlays or textures, then progressing. Be sure not to overdo an icon, as it is really easy to with such a small canvas. Experiment with different ways to crop, too.

The icon textures aren’t so bad. I see that you include the larger image version. If you include and offer this, you might as well just display those on your website, because users can simply crop the image themselves for an icon!

I don’t see the point in the image map; one can code an imagemap themselves with their own image. Writing a tutorial on this would be more beneficial.

I’m really surprised by some of your website layouts because they look better than your current layout. Though they can be improved, layouts such as Fairy Brushes, Corey Taylor and Hugh Jackman are really well done compared to your website’s current layout. Some of them need to have bigger text that is clearer to read, but in terms of colour, structure and overall design, they are much better.

Additionally, with textarea; you should not use it for displaying code, as it is intended for user input only. <code> and <pre> (for larger blocks of code) should be used, as explained in this tutorial.

The older layouts should be removed as they’re not of good quality, as well as the Slipknot and Halloween site model ones. The images are too bright and/or saturated or overdone. These layouts could be improved by using bigger more readable fonts as well. The ones towards the top of the page are very neat and their simplicity is what makes them stand out as good.

Some of the website names are terrible. I don’t think anyone would want to name their website “Migrainz” or “Presint Skein” – not to mention, I didn’t think you liked it when words were misspelled, if I correctly recall from your hosting application. Not to mention, “Stilleto” would correctly be spelled Stiletto.

I don’t understand the use of the background image tutorial or what the point of it is.

The code you provided for your dropdown menu is incomplete; there is no </select> or </div>. If you are going to offer tutorials with code, be sure you provide the right code.

The tutorial on FanUpdate smilies is useless; if one knows basic commands and how to use a browser, they could figure this out themselves.

It is really very annoying having to click your anchor text reading “Click to see!” for every image in a tutorial. If I wanted to follow a tutorial I wouldn’t want to do the extra work clicking – so display screenshots on the page to make it easier.

On the pop-up window tutorial, you should have an example of the window itself.

Host

This simply links out – surely you could have your host as a footer link, or under “friends”, since it really isn’t “navigation”.

Plug

I don’t think you really need this in the main navigation when you have it linked on a subpage; it’s also not a major part of your website.

Site Map

An exceptional idea for those who just want a glimpse at your site. Well done for putting this in for easy navigation.

Originality & Creativity

I think that instead of using celebrity images for your icons, you could try using stock photography from somewhere like Stock Xchng, or even your own photographs, which would make them more original.

You use some simple effects on your website layouts that you offer, and your structure and use of colour in the layouts, especially Fairy Brushes, was very balanced and easy on the eyes. You should adopt the same techniques with layouts such as your current one, especially in terms of styling headers. Right now they look a bit messy and you could improve this.

It’s good to see that you’ve put effort into your website and have clearly made an attempt at designing your own graphics. However, you do need some improvement to make sure you don’t overdo an image with unnecessary effects, which is why I suggest reading up on some tutorials.

Organisation & Errors

Your website was fairly well organised. I didn’t really read the blurbs for each page since I generally skip past them, but they are very organised as well. You have a few errors to fix in your coding, as well as a couple of typos I was able to correct.

On pages with images, you could have done a better job by spacing them out more. Your tutorials could actually benefit from having images displayed on the page as well, so that they are easier to follow!

Overall Comment

I’ve suggested many things throughout this review but this list should sum it up:

• clean up coding, make sure you display code correctly and provide complete codes on tutorials
• clean out your icons, make better ones, starting simple and not too many effects
• work on a better layout for your website, ones that are just as good as some of your offered website layouts
• work on organising images on pages
• increase the text size and general size of your layout/appearance of your website
• read up on some tutorials to help you out

There’s a lot for you to work on, but good luck.

Rating

(out of 5)