Give me your worse!

[samus]

AGAIN, wow, so many new topics in one day (two )

 

Let me introduce myself (ack, not needed but I would like to, please don't stop me)

I am Ashley Smith, and I'm studing to be a web designer (vague I know). Well, we all have to start somewhere, right?  I'm 20 years old and studing HND at the moment for Multimedia Web Development, and hopefully next year complete a degree in Internet Technologies.

 

Now, this is my first layout for a web site I bought.  I admit there is not much content (sorry), however I will increase this when my studies are not on the top of the top to do list (:

 

http://www.miniridley.com/

 

Even, just your personal opinions on the layout.  And I "know" some of you gentlemen will not like the "girly" approach   Remember, it's a personal website and not a portfolio. 

 

Thanks again!

[Guardian-Mage]

Not bad at all

The about me section has crossed out text. If I were you, I would remove it entirely, but since it is a personal site, I don't think it hurts

 

Please download a dictionary attachment for your browser or get Firefox, as your post has some misspellings. You spelled studying without the y. Now that's just being picky, I know, but if you put time into your post,  people are more likely to put time into there replies.

 

-Brandon

[jcombs_31]

 

Now, this is my first layout for a web site I bought.

 

 

So, you didn't do the design?  Why would you ask for a critique then?

[448191]

I'm guessing she meant the domain name/hosting.

 

Anyway, aside from the fact that, how do I say this... well... Let's just say the design is mildly biased towards 12 year old girls.  :-X But hey, if you like that sort of thing, by all means. But then again, there's not much to critique if personal preference of the creator is a holy argument, is there? Let's just say that I'm not really sure you will attract the right audience with this. That is the intent of this site right, attract an audience?

 

Maybe I have this all mixed up. What's your demographic target group?

 

I CAN tell you that it's a good idea to optimize those images. Looks like you forgot at least 2 big ones. Also, even though it has been said many, many times before: beware of serif. Use sans-serif for content. Serif is for printed. And maybe you can make it it look good for titles when applied with a little sIFR anti-aliasing magic. As a rule of thumb; don't use it. Then, if you have a title or navigational object where you think it might look better than sans serif, go ahead and try it.

 

You're also having one image almost totally overlapping another. Thats a waste of bytes. The navigation doesn't look too good either, in general. In IE the nav gets brutalized.

[obsidian]

Now, this is my first layout for a web site I bought.

So, you didn't do the design?  Why would you ask for a critique then?

 

I think she's saying that it's the first domain she bought and did a layout for it... but I may be mistaken.

 

As for the layout, there are very few things I can complain about. As you predicted, I'm not personally a huge fan of the "girly" design, but it is very fitting for the theme, and I think it is done quite well. Here are some recommendations I do have, though:

 

1. I don't much care for serif fonts in body text on a webpage. Try using Verdana or Arial. For the "fantasy" type look you have with the clouds and castle, you may be better off using something like "Trebuchet MS" or other sans-serif font, too.

 

2. I would like to see just a tad more padding in the content area - by 5 pixels or so. When the text runs by the innermost points of the billows, it nearly bumps right up against it. I'd love to see just a little more breathing room.

 

3. I'm not a huge fan of the navigation being staggered like it is, but with how it flows from the rainbow, I think it's fitting as well. I could definitely live with it how it is, and I'm not exactly sure what to recommend on it, either... it just doesn't look quite right to me. I know that's not very helpful, though

 

It works in many different resolutions, and overall, I'm very pleased with what I see. There are a couple small things you could adjust to make things a little easier to read since your content will be lots of text, but overall, very good work.

 

Thumbs up from me.

[jcombs_31]

Ok, here goes my $.02

 

I think the navigation idea is pretty good, but isn't executed very well. Maybe make them larger flags coming from the colors in the rainbow?    It is girly, but you did a good job at the graphics.  I think the content area may be too small and I don't really like the building to the right of it, serves no real purpose and looks out of place. The other problem I have is that each page looks exactly the same.  I think something should change from page to page, not just the text. Overall I think it looks nice, but needs some finishing touches to fix it up.

[samus]

Heh, yeah, I did the design from scratch.  But I guess everyone got through to the end with knowing that.  My bad

 

Very girly.  I know.  But I am open minded, and I have considered all of your replies!

 

Spelling: I suck I know, I shall from now on, use the spell checker on firefox, or use Word to check and then place it in my pages.  :B

 

Link Menu:  That is a toughy isn't it?  I really wanted to have the links to the left, and the staggered li tags were just to try something new.  I did adjust to the older IE browsers which don't work with that to have a image to appear behind it.  But I am stuck as in what I could do.  But I'll think around it - maybe have clouds over it in the li CSS tags.

 

Castle:  That is there for a place my archive links and what not from the blog I will implement during the summer.  Considering how low it is, I will rise it up and my idea was to have a gif animation of butterflies (yeah, very girlyish ) flapping about, and what not.  So as of now, the castle stays there until I see it doesn't suit when the blog is up.

 

Font:  Hmmm, when I think of sans-serif I was see "cartoony" theme.  I guess your thinking - "what the heck, you saying your layout ISN'T cartoony?!" heh.  But I DO understand the whole, it's too fancy.  Good point

 

What's your demographic target group?:  Friends and Family <3

 

Content Padding:  Wouldn't that make the content seem too narrow?  I was more worried about that, IF it does, I could adjust the bacground image itself to be wider.  Hmm?  That could work.  (:

 

Optimize the images:  To be utterly honest, I'm sure I did.  Maybe the background I didn't, but I DID have the "title" image as a PNG 32 because of the transparency, and gif - as you knows - kills it.

 

(sorry to anyone if I didn't repond to all the points, but I have looked at everyone!)

Thanks very much (:

You have provided me with alot of things to go over and I'm very happy to see such a great respond.  Provided me with alot of help!

 

I'll update when I have too updated. (:

[obsidian]

Font:  Hmmm, when I think of sans-serif I was see "cartoony" theme.  I guess your thinking - "what the heck, you saying your layout ISN'T cartoony?!" heh.  But I DO understand the whole, it's too fancy.  Good point

 

In addition to just the "feel" of the page in general, sans-serif fonts are as a rule much easier to read from a screen than serif fonts. Serif fonts (such as Georgia) are great to use for headers and other small amounts of text, but overall, paragraph text is much easier to read as sans-serif font.

 

Great to see you're actually considering all the advice given, too. That's definitely a great deal more than some posters in this forum give.

[448191]

Optimize the images:  To be utterly honest, I'm sure I did.  Maybe the background I didn't,..

 

Well, you didn't.

 

http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.miniridley.com/

 

This pic is almost a 160Kb when it doesn't have to be more than 8Kb.

 

 

Background or no, it still needs optimization.

 

but I DID have the "title" image as a PNG 32 because of the transparency, and gif - as you knows - kills it.

 

You lost me with that one. Why do you need transparency? I can't spot any used either. I assume you mean this PNG:

 

 

Aside from the fact that it's not optimized, it's also way bigger than it needs to be:

 

 

As far as I can see at first glance, the last is simply thrown on top of the first. Meaning 58760 wasted pixels. Or 46Kb wasted bandwidth per request. Also you could do a better job optimizing. Look at these:

 

 

Top: 46.28 Kb

Bottom: 21.88 Kb

 

So that's less than half. There is a minute quality difference in the two if you look very very closely. But bear in mind that I didn't have the original, and more importantly, visitors will not look at you images very very closely. (Plus without direct comparison the quality is still excellent). What they will be doing is download the images. Every last byte.

 

Are you using Fireworks?

[samus]

Thanks obsidian.  I'll do that! (:

 

And yes, I'm using fireworks, 448191, you can tell?! *laughs*

I'm really sorry it seems as though I don't know exactly to optimize the best to my ability.  I "did" to the point were I thought they were, but obviously they aren't ;

 

Let me try it out myself, if I can't seem to figure it out I'll report back, asking - if your willing to help - provide me with instructions to optimize using fireworks.  (:

 

EDIT~

Well, well, well, I'm optimizing haha.  I didn't know that just adjusting the percentage of the quality reduced the file size  so much.  Thanks for that 448191!

 

[448191]

There's nothing wrong with Fireworks. I have both Fireworks and Photoshop and I actually prefer Fireworks for webdesign work.

 

Your unoptimized images are in PNG, so it's not that hard to tell you're on Fireworks.

 

Off topic; your artwork is pretty good. Not my taste, obviously, but good work nonetheless. Welcome to the forums. 

[joshmaker]

I would consider making the navigational links more prominent so users don't accidentally over look them.  Also, from a usability standpoint, the navigational anchors should be display: block;  that way users can click on the entire colored block to activate the link instead of being only able to click on the text itself.