1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What do you guys think of my current design?

Discussion in 'HTML & Website Design' started by Roush, Jun 1, 2015.

  1. #1
    Here is a preview:

    [​IMG]

    Link: http://youtube-2-mp3.org
     
    Roush, Jun 1, 2015 IP
    Karen May Jones likes this.
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Given that you've included the actual video on your site, I'd assume that is a bit important - I would personally drop the second container, with the input-box, and move the logo to the left, and the input-bar up onto the red background, and thereby moving everything up on the page. Granted, this is desktop only - you haven't shown us anything for mobile users / smaller screens / touch-input etc. so I'm assuming this is only the first of the designs?
     
    PoPSiCLe, Jun 2, 2015 IP
    Karen May Jones likes this.
  3. SocialSignals

    SocialSignals Well-Known Member

    Messages:
    683
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    110
    #3
    Simplicity is cool. So you've got that going for you.

    PoPSiCLe had a good point though, about dropping the input bar on the side. (I would advice it down.)
    The point is that people are used to reading subtitles/news reeling by/etc. Which makes the whole: input bar above, video below phenomena too werid to be practical.

    I'm not sure why you need the video compartment though.

    Other than repositioning the input bar, I'd don't see anything wrong with it.

    I know of ways to maximalize it, like boosting the converter button, keeping the converter as simple and as approachable as possible. This no bells and whistle approach does serve practicality best. Which is something you should consider to pursue.
     
    SocialSignals, Jun 2, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    From a visual standpoint the Inaccessible fixed metric (px) fonts on flow text, questionable colour contrasts, and lack of responsive design are amongst the first things I'd be looking to address; it's an illegible mess here. There's a reason the WCAG says use % or EM for font-size, and that there's a formula for figuring out if your colour choices are legible.

    Under the hood I'm wondering just what in blazes all that markup is for given how simple the design is. Endless pointless DIV for nothing, enless pointless classes for nothing, lack of media target on the local style and incomplete for that fancybox crap... of course it's got the "jQuery for nothing" bloat, the stupid malfing "let's wrap the HTML tag in a half dozen IE CC's to cover up developer ineptitude" garbage Paul Irish cursed the Internet with, incomplete form with false simplicity (placeholder is NOT a Label!), P wrapping an empty DIV (almost never makes sense and one can only assume that's a scripttard target), the pointless allegedly semantic HTML 5 tags actually pissing on your semantics, static style in the markup, static scripting in the markup...

    ... and the realtime scripttardery while cute has no graceful degradation plan, you don't really offer more than one result in the search, and it reeks of the same "pageloads are evil paranoia" that leads to the absolute rubbish crapplications I'd rather not see more of online.

    It's a laundry list of how NOT to code a website. You're using 865k in 23 files for something I wouldn't waste more than 48k in 6 files on.

    I mean even the little stuff like the "robots" meta values that don't actually exist (there is NO SUCH THING as index or follow") or the overstuffed keywords meta where many of the terms have zero content relevance -- it shows a lack of understanding what HTML is, what it is for, and how to use it!
     
    Last edited: Jun 2, 2015
    deathshadow, Jun 2, 2015 IP
  5. Karen May Jones

    Karen May Jones Prominent Member

    Messages:
    3,469
    Likes Received:
    290
    Best Answers:
    1
    Trophy Points:
    380
    #5
    I like the input bar in the red area as well. I second that nomination. Also, I think I would Make the text a little bit bigger where it says "youtube mp3 converter" at the top right under the big MP3 - of course, it might just be my eyes having to squint. I like these kinds of sites because its the best way for me to get agatha christie audio books that my library doesnt have. I especially love the narrations by hugh fraser. Okay. I wish your site success. :)
     
    Karen May Jones, Jun 2, 2015 IP
  6. Franklin Hatchett

    Franklin Hatchett Well-Known Member

    Messages:
    462
    Likes Received:
    27
    Best Answers:
    2
    Trophy Points:
    123
    #6
    Looks good I like it. I actually use sites like that all the time.
     
    Franklin Hatchett, Jun 2, 2015 IP
  7. Roush

    Roush Active Member

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    58
    #7
    This guy is harsh, but mostly right. There is no such thing as 'bad criticism'. The reasoning on the bad markup is because this was a personal site for myself. I was creating inline css / js with the intention of redoing it correctly. I think laziness is to blame here, more than lack of know-how. I wasn't unaware of the fixed metric fonts on flow text. I know see why people use EM instead. If you could teach me your ways of the perfect color theme, I would owe you indefinitely. I am aware there are other conversion sites out there, and as Elon Musk says, in order to beat your competition, you can't just be "a little better". You have to be extremely better, because in the end the user will always pick the trusted or known site over a slightly better one. I wrapped the empty DIV with a P, because I am appending new data to it. It was a bad choice, I know.

    Thanks guys for all the criticism. Here is a sneak peak into what's to come:

    Possible Layout Design:
    [​IMG]

    I want to make it where users can create and share their own playlists on the go. Instantly.
     
    Roush, Jun 2, 2015 IP