need criticts about my new music comunity website

[webtuto]

hey

i made this music website where people can make their own playlist , clips .... , its a music community

and id like to know what do you think about it

its all made by me

 

http://www.zik4.com

[ober]

1) Too busy

2) Too many different fonts

3) Too many different colors (pick a color scheme and stick to it)

4) The header image doesn't link back to the index

5) No english translation (intentional?)

 

I give it a 2/10.

[webtuto]

2) i used 2 fonts , one for the name of artists and the second for the rest

3) ill translate it ^^

 

thanks for ur critics

any more?!

[ober]

There are more than 2 fonts.  The fonts you use in the menu are different from the rest of the site.

[Axeia]

• Image alt tags for an artist are redundant as the name is stated right beneath them should stick that in a single cell, wrapping both the image and the text in one <a> and then leaving the alt tag of the image out. Or use a div or something, put the text in it and set the photo as its background.
  
• I'd pick a third color for the mouseover on the mainmenu, looks a bit confusing atm when you let the cursor rest on the second entry and you're on the first. Only one standing out then is the last.. giving the impression you're there instead of on the first page.
  
• Links got a whole lot of useless target="_self"
  
• Contact page isn't using <label>'s for the form elements.. and what I assume to be a captcha isn't described. There's some text coming out of nowhere and then an input field beneath it.
  
• Contact email field description is unreadable in Firefox 3, text gets cut off halfway.p.kust
  

 

And what Ober said, it's too busy. All the flickering and scrolling text is driving me nuts and theres too many colors at once on some pages, like for example: http://www.zik4.com/artiste-125-taha-rachid.html# Shouldn't use high contrast for odd/even table row coloring imo.

 

Also the page linked to just above has this code:

<td>
  <div align="center">
    <a onclick="window.open('player/zik.php?id=1446','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=468, height=255');return(false)" href="#">
    <img src="http://www.zik4.com/imags/listen.png"/></a> 
    </div>
</td>

Call me crazy, but..

<td class="some class with center aligned text">
  <a class="some class styling this as a button" href="player/zik.php?id=1446">Play songname</a>
</td>
<!-- Use some external javascript file that turns all hrefs styled like a button into links opening in a new window -->

Would greatly increase page load times as well as accessibility.

 

 

Now for the positive.

I do like the design, simple blocks, solid fills with grays, black and white and colors mostly used for a bright line to draw attention.

You used <object> instead of <embed>

Use of an unordered list for groups of links

 

[nrg_alpha]

I can't say I'm a fan of the design TBH. I agree with Ober's comments. It is way too busy.. It's like every element is fighting for the eyes' attention instead of collaborating together to form a smooth design.

 

- I would consider axing the scrolling messages and the Call Free phone elements.

- Unifying the fonts and colours would help 'settle things down' a bit.

- The sections like 'Musique Pop', 'Musique Rock', 'Musique Rai' etc.. could be streamlined. As it stands, all those photos simply cause more download sizes and http response / request headers (more on this in a bit). Perhaps a dropdown menu or mega menu effect that displays the categories in a less cluttering fashion?

- Your code doesn't validate (while there isn't in fact 868 errors, this should be looked into).

- Nor does your css.

- Perhaps consider making your site 2 columns instead of 3. This would also alleviate the crowded cluttered feel of it.

 

As for optmizations, your home page (according to Yahoo's YSlow) clocks in at 620.6K using 88 http requests.. that's a lot. To save myself from fully explaining everything, I instead point you to Yahoo's optimizations. This includes everything from using css sprites to gzipping your content. Not noted in that link is smushit.com. That site optimizes images without visual compromises. Your home page in itself can see a reduction of 12.93 KB in just images alone.

 

By simplifying sections, reducing the image count among other things, you reduce the weight significantly. The issue is not that 620k and 88 requests take for ever to download, but rather the principal that things can be reduced significantly to reduce the size of download files and make the site more 'snappy / responsive'.

[webtuto]

thanks guys

well i used smushit , and it only reduced 12.98KB frfom the images

while i made the images i used photoshop to reduce their quality , now its only 3 or 4 KB per image

and ur other critics ill see them later

thanks alot

[jackpf]

Image alt tags for an artist are redundant

Not if you want valid html.

[nrg_alpha]

well i used smushit , and it only reduced 12.98KB frfom the images

while i made the images i used photoshop to reduce their quality , now its only 3 or 4 KB per image

 

Yes, as I said, you can shave off 12.93k (ok, you managed 12.98). You say 'only'... isn't shaving off that better than nothing? It's a start for more savings that can be done.

Saving images in Photoshop can only go so far.. smushit goes 'under the hood' and does it's magic there (Photoshop doesn't match this level of optimization as far as I know - I'm using an antiquated version, but I suspect PS4 doesn't optimize as well either).

[Axeia]

Image alt tags for an artist are redundant

Not if you want valid html.

If you quoted the entire bit you'd see why I called them redundant (double)

Image alt tags for an artist are redundant as the name is stated right beneath them should stick that in a single cell, wrapping both the image and the text in one <a> and then leaving the alt tag of the image out. Or use a div or something, put the text in it and set the photo as its background.

 

A screenreader is going to come by and mention every entry TWICE cause.. well there's 2 links, with the same text. Didn't say the entire alt="artist name" should be gone, just saying it should be alt="" if the artist name is mentioned right beneath it.

And it should be grouped with the text instead of being put in another cell.

 

edit

Although smushit is a great service, I'm not all that fond of it's suggestion to remove metadata from jpegs.. although in this case it probably doesn't matter it does have its uses.

[webtuto]

thanks g uys

but you meant that i have to put the image and the name of the artist on the same <td> ??

and use one ALT for both right ?

[webtuto]

there is also another problem

in my website i added some feautures like , making  your own playlist / your video library....

 

but people seems not to know about these feautures ,

do i have to make a video tutorial?? if so where do i have to put it  ? near the logo ?

 

thanks

[Axeia]

Oh.. firebug made me think better of the code then it was.. looking at the actual source as a whole that thing is a mess (nested tables where there really isn't a need to).

 

New suggestion... use this for the artists:

 

<style type="text/css">
  .artists
  {
     padding: 0;
     margin: 0;
  }
  .artists li a
  {
     text-align: center;
     display: block;
     float: left;
     width: 110px;
     padding-top: 125px;
     padding-bottom: 15px;
     background-position: top center
     background-repeat: no-repeat;
  }
</style>

<ul class="artists">
  <li><a style="background-image: url( images/tingtings.jpg );" href="artiste-146-the-ting-tings.html">The Tings Tings</a></li>
  <li><a style="background-image: url( images/tingtings.jpg );" href="artiste-146-the-ting-tings.html">Ricky Martin</a></li>
  <li><a style="background-image: url( images/tingtings.jpg );" href="artiste-146-the-ting-tings.html">Pussycat Dolls</a></li>
  <li><a style="background-image: url( images/tingtings.jpg );" href="artiste-146-the-ting-tings.html">Miley Cyrus</a></li>
  <li><a style="background-image: url( images/tingtings.jpg );" href="artiste-146-the-ting-tings.html">Katy Perry</a></li>
</ul>

That way if you can't see images it's simply a list with links to artists, which makes the most sense.

[nrg_alpha]

edit

Although smushit is a great service, I'm not all that fond of it's suggestion to remove metadata from jpegs.. although in this case it probably doesn't matter it does have its uses.

 

I for one suggest it, as I personally don't think there is any need for any extra weight 'beneath the hood'. The more images in the page, the more this unnecessary stuff adds up. It may not matter for sites that get extremely small amounts of traffic (thus not much accumulated bandwidth usage to speak of), it's more of a matter of principal of making things more lightweight for the sake of whatever savings you can get, you take it. If I can have two identical images (visually speaking), one 1k lighter than the other, why bother with the larger one, since image degradation is a non factor.

 

Some might argue about storing stuff like copyright information in metadata. This will not stop copyright infringement, as this can be obviously stripped out, edited / spoofed. Thus copyright metadata is not in itself considered final proof of ownership. Actual legal action (such as registering intellectual properties with a copyright office for instance) would be a much greater step towards enforcing ownership as opposed to metadata.

 

Perhaps others (photographers for instance) would prefer to keep metadata (like aperture selection, focal length, shutter speed, etc..) even in reduced web images. Nothing wrong with keeping this info in the full sized image that is used for printing / archival purposes. But why not make note of these elements, include them as text to accompany the image in question on the web page and manage to shave off a few kilobytes in the process?

 

I suppose to each their own. I just find no use for such additional info personally. It's not the end of the world by any stretch to leave any extra info within the image mind you. I just consider it wasteful TBO.

 

[jcombs_31]

My biggest gripe is the movement at the top. I don't like the marquis and the numbers flashing.

[webtuto]

My biggest gripe is the movement at the top. I don't like the marquis and the numbers flashing.

 

i added the marquee to display visitors messages if you know what i mean

[jcombs_31]

I understand the concept, I just find it annoying and distracting.  Glad you corrected my wonderful spelling