Review of fluffyland.com (2)

Reviewed: Sam
Site URL: fluffyland.com

I was quite excited about seeing your new layout because you have a tendency to produce cute, colourful setups which are pleasant on the eyes and easy to use. I was somewhat disappointed to find a bland, somewhat amateur-ish layout with a lack of structure or colour. What went wrong? I like the idea of the huge text with a simple picture—no chance of a visitor not knowing where they are—but all that white makes my screen literally glare at me.

In terms of presentation I think there are a few things you could do to improve the layout. For starters, a very pale blue background (something along the lines of #DFF0FF) in the sidebar and a pale pink (#FFEFF8) background in the content area might brighten things up a bit. I’d have tested these colours for you but the sheer mess of tables put me off. I’ll get to that later though. I think your sidebar should be slightly smaller – both to take the focus away from it and to make the layout compatible with 800×600 resolutions (there’s a horizontal scrollbar right now.)

I think your headers need more definition. For starters there’s no size difference between your h1 and h4 headers which defeats the point of using them in the first place and the dashed border doesn’t look that great. In my opinion a nice rounded header in #7DC0FF would look good. In fact, using the groovy Mozilla Firefox Web Developer toolbar I changed your h1 styling to:
h1 {
font: bold 15px/1em Arial, Sans-Serif;

margin: 8px 0 0 25px;
}

..and it really suits your website. You could gradually make them smaller (14px, 13px, etc) to tie in with the general scheme of things and to achieve their purpose appropriately.

I like the fact that you’re using an unordered list to present your navigational links: this is a key factor in accessibility and usability. It also makes for easier customisation to create graphical menus like the one on jemology. I do think that removing the default bullets (list-style-type: none;) and resetting the margin and padding to 0 would give a tidier appearance.

I don’t like not having my cursor change when I hover over a link. Cursor changes in general are a no-no; people can get quite uppity about having that kind of thing messed with. While we’re discussing links I would just like to give you a hearty pack on the back for having some kind of difference between visited links and those which are yet to be clicked. I personally would also change the colour to a muted grey-blue shade (#B5C3CF for instance) to really make it obvious.

The content under Travel Elsewhere looks untidy because the text is justified. Unless you can guarantee that you won’t be left with huge gaps between words you should never justify text. This text should be left aligned and one size smaller—this just allows the user to fixate on your content. You don’t want to send your visitors to another site before they’ve even read any of your stuff!

The Archives, Who Links to Me, etc at the bottom of the main page are interrupting the overall flow of the page. I think these items should belong on the sidebar, or should be removed altogether.

I do like your colour scheme and I think with a few changes here and there your layout could be so much cuter. I am hoping that you take some of my presentational suggestions above seriously because I really think they would benefit your website.

Onto the content of your website… still on the front page of your site I’ve seen something that’s made me twitch violently. Under Travel Elsewhere you seem to have a single line describing the outside links (with no full stop—tut tut) and then a larger description; I don’t understand why? Under Creativity… Unleashed! “i’ve” should be “I’ve” although this is part of the one line description and I think these should be removed.

You mention “site updates” as one of the things you talk about in Sam’s Weblog, and yet here on the index page you have site updates. Is there any point in having two lots of site updates? Talking of updates: mentioning that you have updated your q*bee quilt is not really applicable to the majority of your visitors and would be better on a separate page as part of your quilt.

I am looking at your navigation list and not seeing much here. I was hoping to see a page about you or at least your outlook on life and yet all I can find is domain related content. That makes me think that this is some sort of small collective and I am now questioning why anyone would submit a collective to be reviewed. You’ve had personal content here before—where has it gone? Is this lack of any content a temporary thing or are you moving this kind of thing over to your weblog?

There’s not really much I can say about the content you do have. I think there should be padding around the past layout previews to stop the text running into the borders, and according to my spelling checker bezier (under Version 5) should be Bezier. You might want to add some sort of emphasis to your comments on completed reviews other than italic styling, as sometimes people may use italics in a review (thus making it hard to distinguish between review and comment.)

I spotted one hatelisting listed amongst the fanlisting links on the Links page. You might want to create a separate header to list them under if there is more than one (I go googley eyed looking at all of those animated buttons.) On your Link Me page you are using a textarea to specify the code which includes the URL to the buttons and yet at the same time you say direct linking is not allowed. If I were you I’d like the basic code at the top of the page (something like: <a href="http://www.fluffyland.com"><img src="IMAGE LOCATION" alt="fluffyland button" /></a> would suffice) and then just list the buttons. Although, you may not even have to provide the code. Chances are if someone has a website to link you from, they’re going to know the basics of coding.

I love what you’ve done to the guestbook!

On your contact page I think you should left align the form fields and make them longer to allow for more input. I also think it would be better if you used the <label> tag to label the fields instead of filling in the information in the value="" attribute. I also think you should remove “TAKEthisOUT” from the e-mail address. I rarely remember to remove superfluous crap from addresses (thus e-mails get bounced back) and there are other methods you could use to protect it (JavaScript, etc – do a search on Google.) Also, I wonder why you’re trying to protect this e-mail address when it is ‘whole’ in the 3rd ‘x’ vote link; e-mail harvesters would have no problem getting your e-mail address from that.

Your coding. Ahh, your coding! For someone who is validating at XHTML standards I was surprised to see you using tables, nested tables of all things, to control the appearance of your website. Especially when the same layout could be created with a few lines of HTML (utilising <div>s) and some CSS. Tables are for tabular data only. This is quoted from a comment Gemma recently left:

I have a piece of software that emulates a screen reader for the blind – and viewed in this, table layouts are a minefield. The reader will specify how many rows and columns each table has. (Which makes sense, since tables are expected to contain organised data, and the number of rows and columns would be significant.) So every time it encounters a table, it outputs ‘Table with X rows and X columns’ before outputting the content itself. This obviously makes the content more difficult to understand, especially on a site that uses nested tables (though perhaps screen reader users are more practised at filtering out table information). Div layouts don’t do this – there’s no ‘document division here’ before the reader outputs the content.

If you want to try creating a similar layout with CSS this is the basic structure you’ll need (not including head/body/etc):
<div id="all">
     <div id="updates">

          Update content here.
     </div>
     <div id="navigation">
          Links and such here.
     </div>
</div>

You could then customise those in your external stylesheet like so:
body {

}
#navigation {
float: left;
width: 150px;
}

Do remember that by adding padding (and I always recommend adding padding) you will have to fiddle with the sizes of the box. For example, if you add a left and right padding of 10px to your navigational <div>, you will need to take 20px of the total size.

I’m really not sure how you’ve got WordPress set up to control your index page but it seems you’ve made a page, and then just included the blog (updates)? Or you’ve not followed the template structure set out in the WordPress themes, anyway. This means that not only do you have <meta /> and <link /> tags in the middle of a page but you also have a closing <head> that’s not open and a second <body> tag. Because I can’t quite understand how you’ve made the mess I don’t really know what to suggest to fix it, other than using the template system.

If you wanted to use the WordPress templating system with the basic coding I’ve given above, you’d want to remove all of the WordPress <div>s and then put the <div id="all"> and <div id="updates"> opening tag in the header file. Place the closing tag for <div id="all"> at the top of the sidebar file, then open <div id="navigation"> and add your sidebar content to it. Lastly, close the sidebar at the bottom of the sidebar file. This should give you a basic setup, although you’ll probably need to make some modifications to get things exactly how you want them.

<script language="JavaScript" type="text/javascript" src="http://m1.nedstatbasic.net/basic.js" /> shouldn’t have the XHTML closing slash at the end—<script> closes with </script>

You’ve got double line breaks after the link to each comments page which I know for a fact WordPress didn’t insert. If you want a gap between posts, WordPress has already separated each with <div class="post">, so adding this to your stylesheet would work just as well:
div.post {
margin-bottom: 10px;
}

Talking of your stylesheet—in my opinion it is in the wrong order. Obviously there’s no ’set’ order for a stylesheet and having the body { } selector at the bottom won’t stop it from working or even validating, however it is logical to place it at the very top. Not only is this one of the most important elements of a web page but by defining properties in the body { } selector you can get rid of extra properties elsewhere. Values such as font are inherited by other selectors.

Your link pseudo-classes are in the wrong order: a:hover must come before a:active.
b {
color:#000000;
}
i {
color:#000000;

}
u {
color:#000000;
}

..is pointless. Not only are the <b>, <i> and <u> tags deprecated but you’re not giving them any extra special values so you can delete that. You can also delete every occurrence of font-weight: normal; that isn’t actually resetting bold text; normal weight is given to most text by default.

Although inputs, select drop downs and textareas don’t inherit the font set in body { } by default instead of specifying what font you want again, to set the font the same as the other text you can use font: inherit; You can also compress:
font-size : 8pt;
font-family : verdana, tahoma, arial, sans-serif;

..to font: 11px Verdana, Tahoma, Arial, Sans-Serif; I’ve replaced 8pt with 11px because ‘pt’ fonts are meant for printing only (I only learnt that the other day, great, isn’t it?)

I like your website because it’s always got a great colour scheme, but recently it seems to be lacking. I just don’t get the impression that you care about it at the moment. I really, really hope you take some of my presentational suggestions to heart and that you work on the coding (because it honestly doesn’t seem to improved that much since the last time I reviewed you.) I want to see some of your personal content back and maybe some written content too if you can? You recently posted your opinion on abortion at my personal site; why not add this to your own site? You’re a strong-willed girl who knows how to express herself, so start doing it!