[SOLVED] moon dance

[Ninjakreborn]

After a lot of work, "on a free site" this is what I came up with.  Any advice on this one
www.moondancedesign.com
I made sure now every page is totally xhtml valid, and the css is 100% valid without any warnings as well.  Everything has undergone massive grammar checks, and changes, plus alignments.  It is a free project, just a portfolio builder, so for now on this one I didn't want to pull out the php gd library I have had a few suggestions to do that so I may in the future in my spare time

[lead2gold]

Having the hyperlinks underline is nice, but don't you think you should turn the underline feature off for menus and images.  Moving the mouse over the left menu bar causes some crazy vibration.  the same thign occurs when you mouse over the Graphic on the top of the page.

Other then that it looks nice.

[Ninjakreborn]

actually you are right, when I have some more spare time and go back over the site, I will remove those underlines on both of those, any more advice or anything, thanks for what you have said so far.

[obsidian]

overall impression: not a bad site at all.

however... there are a few things that really caught my attention that i would recommend some work on:

1. navigation. i like the menu, but i hate the way it jumps (both in IE and FF) when you hover over a menu item. it pushes everything in the left column down the page 1-2px every time you hover over a link.

2. banner. i like the idea of linking a banner back to the main page, however, i really don't like how the border [i]appears[/i] on the banner when you hover. banners should be stationary and rock solid. they should not change. they are not your typical links, and as such, they really don't need any visual aids when you hover over them. also, in FF, when this appears, it pushes the whole page down a few pixels... not pretty.

3. image links. the only place this really bothers me is the galleries, and again, it may be a preference thing, but i really don't like underlining or bottom-border as a :hover attribute on images. personally, i like to see full borders where the border changes color slightly or something more subtle like that on images. also, in your galleries, i would love to see some more space between the images... space things out a bit.

4. text links. on the home page, you have a link to "Wicked Stones." the text color on the link is the standard browser default blue... to me, that doesn't fit your page. maybe a lavender or other purple-ish color would be better as the default? just a thought ;-)

hope these thoughts are helpful.

[Ninjakreborn]

When I do another reworking on the site I Will take all of this into account. I may go ahead and program something on the site, where she can add in her own pictures, but the thing is with each picture there has to be a .htm equivelant in this case all of those would change to php, but there has to be a php version that is created that has the paypal information on it, as well as the picture, and a few links, I don't know how to get this to work right through her admin page.

[pixy]

The top graphic is kind of blurry, especially around the text. Maybe try saving in a higher quality JPG setting?

[Ninjakreborn]

perfect, it'll be a little while before I overhall the site again, when I do, I will be correcting a lot of these issues, and ask here again for more advice, I will fix everything that was brought up here when I have enough time to work on it again.  Thanks

[obsidian]

one other thing i would recommend is to change your favicon. bluehost has the bad habit of displaying their own favicon for all sites hosted on their servers without their own declared.

[448191]

Honestly, the site sucks bigtime. Anyone claiming otherwise is probably confused with the quality of the artwork, wich is amazing.
I almost considered getting me a "Golden Lily" for myself.  :-*

Fix image sizing, it's terrible!

I have a ADSL2+ connection that usually does about 1500kB down, but your "thumbnails" are loading slow.
[u]Consider using actual thumbnail files.[/u]

Optimize the full sized images. Geez.

Can you believe my "Golden Lily is" actually 423.01 kB ?????? No way it has to be that big.

I can recognise you want the artwork to look good but you have to consider latency and bandwith usage.

You can hardly see the diff (only if you look [u]very very very[/u] closely), and it's well under a 100k:

[img]http://home.orange.nl/lekkage/img/golden_lily.jpg[/img]

[Ninjakreborn]

You do understand as I said 4 times, this entire website, was built for free.  It was a first timer type project, portfolio builder, recieving 0.00 for the whole entire thing, i still work on it occassionally, more of for a favor, but she returned the favor with some graphic design here and there. As for the site, if I had been getting paid 4-600 it would have been ironed out a lot more, but I haven't done things I normally would do, like optimizing images, and preloading images, or both.

[akitchin]

don't post a site for a critique if you're not going to accept the feedback, citing not having been paid enough.  if you want a critique, you'll get a critique, whether you were paid for the site or not.

it's a waste of peoples' time if you're not actually going to heed or at least consider the negative feedback.

[Ninjakreborn]

I think criticism is good, it has nothing to do with that, almost everything that was offered here will get changed, I thought
[quote]Honestly, the site sucks bigtime[/quote]
Was a little unfair.  As for what yuo said about the images, you are right that is unacceptable, I am putting that on my to do list for the next work through on the site, I will optimize, and pre-load all images.

[448191]

Ok, I admit, I was being a bit harsh. It's just that it doesn't look professional at all, and after comments like "it looks nice" and "not a bad site at all" I thought you needed a realitycheck. Since you are trying to be a professional website designer, you need those.

I could give you a detailed critique, but there would be no end to it. If you want it, I'll do it anyway. Just let me know. I promise I'll be 'fair'.

[steviewdr]

This page doesnt look great!
http://www.moondancedesign.com/gallery1info.htm

[Ninjakreborn]

actually if you could give me a full critique, no matter how harsh it's a critique, I would love it, any constructive criticism, or anything I can work with I will cahnge.  So far I have a huge list, when I overhall it everything that was mentioned will get fixed, I was waiting for a full-blown criticism.  It is on my portfolio, the better it looks, the better it'll be in the future.  Whether they paid for it or not?

[Ninjakreborn]

I did a bunch of stuff to this, I changed those underlines on the links, I am about to optimize ALL the pictures for now, then later I will try to pre-load, I have to set up some more images on the site here in a little while anyway.

[448191]

I haven't looked at the changes, I was to busy writing your full lentgh review.  :P

Categories:
[list]
[*]Performance
[*]Layout
[*]Color scheme
[*]Content
[*]Usabilty
[/list]

[448191]

[size=14pt]Performance[/size]

[b][size=12pt]Latency[/size][/b]
As I pointed out, the file size of the images are outrageous. Preloading doesn’t help, you have to compress. Trust me, nobody will see the difference.

Also setup image caching to an eternity, just don’t use the same filename twice.

[code]<?php
header('Cache-Control: max-age: 31622400, must-revalidate');
echo file_get_contents($file); //PHP5
?>[/code]

[i]Edit: If you use php to setup caching, make sure the url for every file you ever use is unique. You pass the filename through 'get'. The file is refered to by this url. Be sure to validate before usage...[/i]

31556925 seconds, one year.

That’ll get proxies caching you images. Other than that, response times for the site are fine, as to be expected from a site with virtually no (or none?) server side processing. There is one more caveat though: Paypal. Paypal can be very slow. I think you should use a ‘local’ shopping cart, and submit it to Paypal upon checkout. That will prevent a lot of irritation.

[b][size=12pt]SEO[/size][/b]
This site is SE junk food. No dynamic links, clear meta tags, plenty of keywords in content (art, artwork, fractals, gallery), plenty of internal links. One thing I càn suggest is to use more descriptive titles (and add some of those keywords). Also, use more descriptive filenames.

[448191]

[size=14pt]Layout[/size]

[b][size=12pt]Containers[/size][/b]
Important things on top, things of secondary interest below them. That means your ‘shopping cart’ has to move up and your ‘more info’ box has to go down. Limit scrolling down when it’s not necessary,  for example, on the index, ‘open edition’ and ‘limited edition’ prices can easily be placed next to each other. This is also a usability subject, I’ll get back to that. Gallery information pages: there is absolutely no need to make ‘naked’ pages for that info. Incorporate it into your layout.

[448191]

[size=14pt]Color scheme[/size]

[b][size=12pt]Mood/Matching[/size][/b]

Argh….

Color schemes are THE way to set a certain mood for something viewed. Your friend Carolyn can probably open a book on that for you. Talk to her about what mood she wants to set for the site. I reckon she wants it to look fresh and natural as most of her artwork is about flowers. Purple is one you should keep, but ditch the yellow/orange variant, it doesn’t match AT ALL. It’s probably matched best with white and if you can do it right, blue.

The color scheme you’re using currently makes me picture custard with artificial flavoring, not flowery artwork.

Look at this image from Carolyn for inspiration (only use a lot more white):
http://www.moondancedesign.com/purchase/morningflower.htm

[448191]

[size=14pt]Content[/size]

[b][size=12pt]Texts[/size][/b]
This is what bothered me the most:

[quote]“I find explaining a fractal difficult at best.”[/quote]

What is this, a blog? A high school essay on ‘fractals’?

No, it’s a company website. It’s hard for people to believe you KNOW something you can’t explain properly.

[quote]“They are the beauty of design that is never ending and maybe that is all that is necessary. However. Let me get a bit more technical.

A fractal is a mathematical formula rendered in the computer to form a design with colour. The computer makes….”[/quote]

The intent of above section is good: give a simple explanation that anyone can relate to and understand, then go into detail to show that you know what you’re talking about. The intend is good, this is how it should be done. The execution is not as good though.

First off, don’t use single word sentences if you’re writing a serious text. Secondly and more importantly, better divide the information by purpose.

Example:

[quote]“Fractals are the beauty of design. They are artwork that is generated by a computer from input of the artist…. Etc etc…”[/quote]

Then the technical shit (and maybe go in a little deeper):
[quote]“The computer makes thousands of computations….. Fractals are characterized by their repetitious pattern…… Etc etc…”[/quote]

[b][size=12pt]Other content[/size][/b]
With ‘other content’ I mean a variety of things. For one, you could ditch the ‘validity’ icons, since NOT A SOUL ALIVE SEARCHING FOR ART GIVES A RAT’S ***.

The banner. It’s terrible. It’s a poor excuse for an image.

This is an artists’ website for crying out loud! Have her create an image!
Idea; have her incorporate the name of the ‘company’ into the design. She could, for example, use an image of a morning moon, and add a siluet of someone dancing on it.

Copyscape logo. Don’t do it.

I can understand you put a lot of work into creating this site, and will put in even more, so you don’t want someone to come in and steal it.

But trust me, you don’t have anything worth stealing on that site. You can use copyscape if you insist, JUST DON’T SHOW IT. It doesn’t serve any other purpose then make your site look like the work of a amateur. It’s almost as annoying as ‘no right click’ scripts.

[448191]

[size=14pt]Usabilty[/size]

[b][size=12pt]Readablity[/size][/b]
Usability is all about making it as easy as possible for the user (or visitor, name as you will) to use the functions a site has to offer them. One of which is getting information.

Texts need more ‘grouping’ (or ‘paragraphing’ if you will). For example:

“You can also view my work on ebay under the ID of "bromley2". Please…”

Before I actually read it, I have no idea what’s it about. I’d almost think “Wicked Stones” is the paragraph heading. That, by the way should NOT be there. I reckon Vikki is probably a close friend of Carolyn, and she wants her link on the front page, but this is wrong. The link is perceived as content, not an external link. Don’t confuse your visitors. But her logo at the bottom, next to the EBSQ logo, where it belongs. People tend to pay more attention to logo’s than links anyway. Just like ‘reading’ the playboy.
[quote]
“Browse the galleries within Moon Dance

                                                          Design and you will find”[/quote]

That doesn’t read very easily now does it? Who are you trying to torture?

Use nested images wisely. Look at the ‘Testimonials’ part on the front page. That part looks good. Align images right. Only use left aligning when the image is fairly small.

Why? It’s simple: people read from left to right. It’s a pain to have move your sight by a hundred chars to the left suddenly.

Padding. Padding’s primary function is to make for easier reading. Use it for anything you want read. That includes the ‘more info’ box!

I said I’d come back to you on scrolling. Scrolling is not necessarily bad, as long as it’s used wisely.

[b]First let me introduce you to the concept of ‘content-breaking’.[/b]

Content-breaking, in essence, is the improper dividing of content.

On every website you have content. This content can be logically divided into groups, subgroups and many smaller groups. The art is to divide these groups, without ‘breaking’ their relationship. Look at it like an XML tree. If I take one child node and attach it to a different parent, chances are the application parsing the file will interpret it differently. Same goes for content. Except your visitors are the applications, your content groups are the nodes, and your navigation and layout is the tree!


[b]When to require scrolling:[/b]
When you absolutely need the extra space to fit content that is grouped, and dividing the group up is not an option (not logical). In other words, when a 'undividable' group of content needs more space. Many sites divide the group, especially when dealing with text, over several numbered pages. This should be considered ‘breaking’. Scrolling is much more convenient to the user. Alternatively one could use chapter headings as navigation, if the content is dividable in chapters.

[b]When NOT to require scrolling:[/b]
When rearranging, resizing or anything else can prevent it. When the content can be logically divided, and still (or even more so) be easy to find.

[b][size=12pt]Shopping[/size][/b]
I mentioned earlier the concept of breaking. This applies very much to your gallery. The galleries should be grouped and divided, not broken and dumped into the ‘root’ of your navigation (your menu).

Ok, so scrolling is not an option, too many thumbs for that.

What you need to do is properly divide the artworks into categories and facilitate clear navigation.

For example:

Categories: Flowers, Fractals and Others.
One link to gallery in menu.
Clear category pages, with prominently placed links to other categories.

It’s as easy as that!

Again, I’m going to point out you should use a local shopping cart. People want to know what’s in there, or at very least the total amount. Having to click a link, interrupting the shopping provides a very poor shopping experience.

[i]Edit: removed some inconsistancies...[/i]

[448191]

[size=14pt][b]Summary[/b][/size]

It has potential (it has a valid purpose and some great looking art to support it), but needs serious work.

I could write more here of course, but it's way past my bed time... It's 1:00 over here.

I might even critique some more when I have the time...  ;D

[moberemk]

...
That is a long, long critique.

[Ninjakreborn]

That is the best, and most helpful critique I have ever seen or recieved.  It'll take me a few months(in my spare time) to do all of this but I will follow virtually everything you said, I wish you would always critique every site I laid out here like that, you could be a professional critiquer with that kind of professionalism, thanks.  I will do 99% of this when I redo the site again.