Not-Noticeably.net

View screenshot | Visit site »

The layout is fairly simple but with pleasant, soothing colors; I definitely like the color scheme. I enjoy seeing more graphics in a layout, or at least more complicated graphics, so I would appreciate it more if your header graphic was more complex. There are a few little details I’m picking up on that I think could be improved:

• The purple bar that fades at either end beneath your header ‘Blog’ is very pretty. I think this should be replicated beneath other headers, such as your entry titles where you have a bar the same color, but which doesn’t fade out. Having such a similar-looking bar under the other headers makes me think, “Oh, it’s that purple fade thing again. Oh no wait, it’s not, it just looks really darn close,”–it introduces some confusion to the eye. Since your other headers are left aligned, you might experiment with having the fade occur only on the right side. I think this would help with consistency and the fade effect just looks nice.
• The flower in the header has kind of a pixelly edge to it, as if it’s a transparent GIF with some issues or like it was cut out of a full photo but some jaggies were left. I see it’s a transparent PNG, though you could just as easily have placed it on a segment of the header background and made it opaque. Then, you could have slightly blurred the edges of the flower to have it blend in better with the background and not show those jaggies. I also have a concern that your transparent PNG won’t work properly in IE; I’ve had that problem before where, instead of transparent regions, I would see a solid, and seemingly arbitrary, color.
• Looking closely at the gradient body background, I notice little horizontal lines running through it. That happens for me when I choose too narrow a sample as the background. You might widen your bg.jpg image so that those horizontal marks disappear. It could also be that the original gradient wasn’t that smooth, but I doubt that.
• I think it’s a source of confusion that your link hovers have dotted underlines, just like acronyms and abbreviations usually have, when they’re not acronyms or abbreviations. I would go with a solid underline on regular-word links.

If a site has an overall pleasing layout and structure, then I think focusing on the little details is an important next step. I tend to react better to a site if I can tell the owner has put in a lot of work. One thing that shows that, as well as indicating that you care about the entire visitor experience, is prettying up little parts. One thing you could do, for example, is have an image instead of the default bullets. You could maybe use some green from the flower’s leaf. Even if it’s just a solid-colored circle, by using an image you can make it rounder than the default round bullets (at least in Firefox), and it would also tie in nicely with your layout. Another thing, and this would also be useful because it might be less confusing, would be to have form buttons look like buttons. I never like it when I see buttons styled with a solid border because then they look just as flat as an input field, and this doesn’t lend itself to looking clickable. A way I get around this when I’m styling my input elements is to just do border-width: 1px; border-color: #c0c0c0;, something like that. I completely skip over the border-style property, so that each element retains its default.

Now for some content! In your Scripts section, I don’t any kind of licenses for either of the scripts. I would suggest making note of the license you either applied yourself or the project inherited from its previous author. In your About Amelie section, you say that you play flute up to “Grade 5 standard,” but I have no idea what this means. You don’t need to go so far as to explain it on your page, but you might link to a Wikipedia article about it with the words “Grade 5 standard” so that unfamiliar visitors can find out easily. In your “A load of things you never knew you wanted to know” (haha, that’s a fun title) section, I think your content could benefit from being in a padded list. Having it just in paragraphs separated by br tags means you can’t easily adjust the spacing between entries. You could adjust line-height for those paragraphs, but then everything would be spaced out, and it wouldn’t clearly delineate which item was which. Having a padding-bottom of even 5px would help readability here.

I don’t understand the need for a link to your FAQ on both the main navigation bar and in your About section. I find that to be a little confusing, actually, because I thought they would be two different sections. I would choose one location or the other to hold the link to it. Something that might be more annoying than helpful is your ‘Oops’ reset button in the contact form. I find myself hitting reset buttons sometimes instead of submit buttons and getting all annoyed that my form was just wiped out. This is especially possible when you do what everyone else does and put the reset button right next to the submit button. This problem is aggravated when some developers put the submit button on the left and others put it on the right. I personally don’t see the need for a reset button; if I change my mind about sending the form, I just don’t hit any button, or I leave the page. Easy. I would suggest removing the reset button entirely or, if you must keep it, making the submit button stand out a bit more. Give it a different background color, bold text, something.

Also in your Contact Me section, I don’t think the bullets next to the icons for how to contact you are necessary. You’ve already got the little icons to delineate each method of contact, so the bullets are just extra fluff. They’re not even pretty extra fluff, since they’re the default I’ll-pretend-I’m-a-circle Firefox bullets for me.

Overall, I think it’s a good site; there’s really not much to complain about. :) I just think there are some details that you could work on that would make your site more polished.