Responsive Layout Design

[ACRDepos]

Hello, in the midst of creating my Responsive Webpage - http://turningheadssalons.com/index.html - You will notice that my menu and pages are all responsive. What I'm trying to achieve is a better way to construct my menu and navigation. (As you can see it overflows when the floats are cleared below a specific width) Although the client doesn't want the primary design to change, would there be any insight to either A. Better construct the menu and navigation of the page and/or B. Better change the navigation so it won't overflow and it will align center when reached below a specific width? Thanks

[mmcdonald]

I have no comments regarding navigation (sorry) but I would add some line height to your scrunched up paragraphs, see here: http://turningheadssalons.com/aboutus.html

The text looks really scrunched, add a line-height style. I usually set my line height value to 1.3 x font size. So if I'm using size 18 font I set my line-height to 23.

Looks like a nice design though - well done!

[ACRDepos]

Thanks for your input! I will definitely implement that into my code tomorrow and see how it works.

I want to also mention the background is a bugger, that's another issue I'd like to tackle at some point or another.

[mmcdonald]

Define bugger? :)

If your BG isn't always fitting 100% then you can use the new CCS3 properties:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

That works 100% in:
* Safari 3+
* Chrome Whatever+
* IE 9+
* Opera 10+ (Opera 9.5 supported background-size but not the keywords)
* Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

This is another great option, very reliable:

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}

Works in:
* Any version of good browsers: Safari / Chrome / Opera / Firefox
* IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim
* IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine
* IE 9: Works

Don't be fooled - I didn't write the above, but I use it so regularly that I'd saved it in a text file in my development folder :) The original article can be found here.

[ACRDepos]

When I mean bugger, I mean the background wasn't really deemed for a website background per-se. You can see the image here: http://turningheadssalons.com/Images/Background_New.jpg

Initally, the client wanted the background to be at an angle, like their print work, however when the black areas of the background weren't covering the text or they were covering the text and it clashed with the black font against the gray background.

I did implement this code, as per your suggestion, which I think works a bit better :)

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}

The only issue that I'm coming across now is, if the window drops below a specific width, the background covers the black font at the footer.

I also implemented this line of code to the line-height for the paragraphs in the info boxes:

#infoboxleft p, #infoboxright p{
    /* font-size: 12px; */
    font-size: 0.75em; /* 12px / 16px = 0.75em */
    color: #b5b5b5;
    /* line-height: 14px; */
    line-height: 1.125em; /* 18px / 16px = 1.125em */

    padding: 0;
    margin: 0;
    border: 0;
}

Initally, the line-height was set to 1em, however I upped the line-height to 18px as a starting point and then proceeded to make it responsive.

There's a part of me that's going to say to all my future websites - I will be coding in HTML5 and CSS3. (However, that's debatable because I live in an elderly community, where there are some folks who completely refuse to update their browsers...)

[mmcdonald]

Would it not be more effective with the majority of the grey at the bottom such as in this edit: http://masterthepc.com/test.jpg in comparison to http://turningheadssalons.com/Images/Background_New.jpg

All I've done is twist the grey and drop it to the bottom.

[ACRDepos]

Aha! I initally had the background like that (or something very similar) and unfortunately my client wanted it at 45 degree angle. If push does come to shove with this layout, I may have to let my client know that a background (like the one you have edited) is going to be the better of the bets.

[mmcdonald]

Sounds like a good shout, the client isn't always right ;) Well to be honest in this scenario they are because there are solutions to this particular issue - they're just too much work :) You could technically hide the background image if the screens resolution is too low and set a background color to the body element?

[ACRDepos]

What I'm actually thinking is one of two options - 1. When the window reduces below a specific width - a message will appear saying: "Please Enlarge Your Broswer" and everything else will be faded out. 2. When the window reduces below a specific width a different layout is implemented. I will have to consult with them to see what the best option is.

[mmcdonald]

Woah... that's a terrible move O.o At worst you should remove the image and have a solid background...

[ACRDepos]

Well, there's a kicker to this. If I reduce my layout to the "Please Enlarge Your Broswer", that would only solve it for browser issues, reducing the page down to 420px or less. This way, I would be able to create another media query for mobile applications, with essentially a different layout.

[mmcdonald]

Yeah that's true - but you didn't say that above :D Still not a very 'acceptable' method of doing business - but each to their own! You are losing focus on your end goal however, and that was to build a responsive website. You shouldn't lose this focus - keep working towards a totally responsive website! It'll pay off in the end

[ACRDepos]

Something interesting came up in the past day or two with the owner and that's the background. Apparently in some browser windows the black text at the bottom gets covered sometimes by the background.

Any ideas on how I could fix this?

The good news, is I started doing some tests on a responsive nav bar with HTML5. It may be an uphill battle, but I'm sure I'll come out victorious!