Grow your CSS skills. Land your dream job.

Any opinion on this design?

  • # February 15, 2013 at 3:25 am

    Hello Girls and Guys,

    i just registered here and first of all i like to say that i really love this site. You can guess.
    Super helpful again and again. Literally all i know about CSS (which is not too much yet) i learned here and at phpacademy. And so the time comes, and i finally coded my first client-request website (for a lawyer).

    I am designing on a super small screen here
    (15″ / 1024×768) and now run into a little, err, annoyance.
    There seems to be **a lot** of space between the main content and the footer on higher res-screens. I set

    footer { position: fixed; bottom: 0; }

    on purpose, because i honestly think (as there is no content in the footer besides the impressum a href) it does not belong sticky to the content. It’s just there because it has to be, legally.
    What would you do? And besides that: any fair criticism is welcome, too!

    [Here you go!](http://priesstiemann.de/test/index.html “The Site it’s all about”)

    # February 15, 2013 at 5:34 am

    For a lawyer site and your very first is pretty decent. I can say that only bad thing is typography. Change font! Give text a little bigger left/right margins. Increase type height and line height. You can go on safe decision and use OpenSans font. http://www.google.com/webfonts#UsePlace:use/Collection:Open+Sans

    # February 15, 2013 at 7:26 am

    >What would you do?

    The only solution for lack of content….is more content.

    Perhaps other images, perhaps combining pages to make a ‘full’ page.

    I would also look into having a different image on each page…otherwise there is very little to differentiate between pages.

    # February 15, 2013 at 10:57 am

    Just some quick suggestions:

    Unless the client absolutely adores it, I would shy away from having scrollbars on the main content area.

    The footer issue isn’t going to go away until you have more content.

    Maybe it’s just that it’s in dev and some of the content isn’t there, but the sidebar is fairly lacking.

    Not really a critique, but if you happen to have need for a pop up for external links (most legal sites do) [LeaveNotice](http://rewdy.com/projects/view/leavenotice/ “LeaveNotice”) is a very nice, easy to style solution.

    # February 15, 2013 at 12:22 pm

    A really good start. I’m a massive fan at the moment of icon fonts and love how you’ve used them in the header.

    In terms of improvements, I would definitely advocate taking @mcjohnst‘s advice about the fixed-height content area. At this stage in web technologies we should really be focusing on trying to cater for a whole range of different circumstances instead of hoping that users will adapt to our ideologies about how they should be. It is important to remember that, as most sites extend “beyond the fold”, visitors do expect to have to deal with some kind of scrolling. The difference though is that they are likely more adjusted to this kind of interaction when it is presented at the side of the browser itself and not within the content they are trying to digest. Other than being a possible plot on the visual design, it may be the case that novice computer users could use the wrong scrollbar and thus moving the wrong content.

    Content is king so the fact that the footer doesn’t naturally stick to the bottom could be used as a motivator to get the client thinking about any helpful information they could add to flesh it out a bit. On the production version, keeping the fixed position may be a bad move as they would take up a lot of valuable space on a smartphone display. If you cannot get enough content to push the footer down “naturally” by the time you’re done, I would look into something like the [CSS sticky footer](http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/ “”) as this a more robust solution and will only act when there isn’t enough content.

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

You must be logged in to reply to this topic.

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