Grow your CSS skills. Land your dream job.

I made a website that shows you a random classic movie, and I need some advice for a better layout.

  • # January 6, 2013 at 3:00 pm

    Hi,

    So I made a website that shows you a random classic movie. But I’m a developer, not a designer, so the layout isen’t what it should be.

    So I want your opinion on some things.

    url: http://www.aclassicmovie.com

    Some people said they feel the website is to busy, specially with the background change, what do you think ?

    Some people also said the video is to small, and the filtering takes up to much space, how do you guys feel about it ?

    Any other suggestions are more then welcome!

    Spedax

    # January 6, 2013 at 4:41 pm

    Looks already quite good to me. But since you probably want people to focus on the content ( = video ), why not tone down the background-opacity a bit, except for the header. ( And have the cool tiling background pattern also there (: really should have a header element though ). Have some air between the video and the filtering (on larger screens).

    header {
    background: url(“../img/pattern.png”);
    height: 140px;
    }

    #bg_grid {
    position: fixed;
    top: 140px;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .75) url(“../img/pattern.png”);
    z-index: 1;
    overflow-y: hidden;
    }

    .tweaking {
    float: right;
    }

    # January 6, 2013 at 5:56 pm

    It already seems great to me!!
    But I’m just a beginner;)
    Couldn’t do better!!

    # January 7, 2013 at 1:14 am

    You could change the controls color to match the film, as you make the background change, I do believe that you have a database with the description, movie URL, background image and the other data (year, genre, etc), you will need add a field for a color value (hex, rgb, rgba you decide), and with the insertion of the movie data insert the color.

    When change the movie use Javascript to change the css of the controls.

    Other things that would be nicer too are:
    A wide player, beside fullscreen, some like youtube uses, where you can have a small, medium and fullscreen, so on medium the player would fill the top and the controls will be placed below.

    A mobile version, with the background, video, controls and description. (Media queries can help).

    These are just suggestions as you asked, you not need to do them, but could at least give a look, try, and if fits improve on the actual design.

    # January 10, 2013 at 3:29 pm

    Great tips guys, keep them coming!

    # January 10, 2013 at 4:24 pm

    Great Idea man!!!

    # January 12, 2013 at 6:04 pm

    I like the layout – it’s simple and straight-forward. I agree with ooredroxoo, however, on a few points: namely, the player could use more width to grab more attention and the background could be more opaque like Atelierbram noted, as some of the text was difficult to read on some of the background images.

    Neat concept and overall great actualisation of it.

    # July 27, 2013 at 6:02 am

    Cool site!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".