Default site width

[mikey_w]

@SamA74

That seems like a reasonable range to cater for.
I wouldn’t worry about anything bigger.

Okay.

@SamA74

Think of your [other thread][1] where you talk about optimum chars per line. The big screen is where you may put that to practice.

Okay.

@SamA74

In a ‘fluid’ design, you should not need a query for this. I think it has been mentioned elsewhere to use max-width instead. Avoid using width:###px; for major containers in RWD. max-width:###px; and/or width:##%; is OK.

I’ll try to change to your suggestion as I tweak my code while working on this current issue.

@SamA74

@mikey_w

the new trend in web design seems to be these web pages that look like they cover every inch of the monitor - including background photos.

Do you have an example of this? I have seen many where a background image fills the screen, but usually the actual content container will be limited in width.

That is what I meant. Up until recently, web pages had lots of whitespace, but now you see these never-ending scroll sites where all they have is full-width menus and pictures and even the content is much wider.

Squarespace or whatever has lots of those desigs.

[mikey_w]

@chrisofarabia

@mikey_w

If you were me, would you take advantage of the extra 110 pixels and stretch out my design to go up to 1280px?

I probably would as a max-width, and then work with the padding inside that, or on the margins of any smaller containers.

I never really thought about this topic before, and now my mind (and eyes) are mixed up and I feel like I have lost my point of reference.

Personally I like tons of whitespace and minimalistic designs. My client’s sister from this summer made me feel like their website looked crappy and boring. Guess I have a diffferent perspective on what looks good?!

I am going to see if I can expand things out to 1280px just for consistency.

@chrisofarabia

@mikey_w

I don’t really feel like supporting over 1280px at this point, mainly because I don’t know what they would look like, plus they seem unnatural from a reading standpoint.

Am I right in thinking that’s the largest screen resolution you have available to you currently?

The only device I have is my MacBook at 1280x800…

@chrisofarabia

@mikey_w

Chrome’s Responsive Design View - or whatever it is called - only offers a “Laptop with HiDPI” at 1440 X 900, so anything beyond that I wouldn’t know what my website would look like anyways.

Just set up a custom size in there then; you’re not constrained by the built-in containers sizes they’ve created.

Okay.

@chrisofarabia

@mikey_w

All of this is throwing me off, because I have been focused on “Mobile first” and making sure my web pages don’t break UNDER 1280px versus over that!

At the moment, it does seem to be sensible to focus on mobile devices. It’s just a matter of understand that there are larger devices out there. 1920px, is perhaps the most common large screen size, but some are much bigger e.g. iMacs

Okay.

[mikey_w]

@dresden_phoenix

Then why do people use such hi-res monitors?

consumerism.

Amen!!!

@dresden_phoenix

i base many of my designs on 960/1280 because of MATH

160/240/320px col-width are quite readable fits nicely in small devices. expounding on what I said earlier, i can then bring columns of those widths side by side as screen size increases, and I use a gutter to ‘fill up’ the remainder. remember that your column COUNT is should be determined by chiefly by CONTENT ( say for example: main story, secondary story, aside, perhaps a footer,maybe). Keep in mind column count ratios greater than 1:4 are excessive… so considering our (convoluted )example on a lurdiculously wide monitor like 1920px wide:

4:1 Main
3:1 Secondary
2:1 aside
1:1 footer

10:1 total

You lost me here.

Are you saying that no one column should ever be more than 4 times as wide as the skinniest one?

And why are you adding up ratios? (That seems like convoluted math!)

[mikey_w]

@SamA74

In a ‘fluid’ design, you should not need a query for this. I think it has been mentioned elsewhere to use max-width instead. Avoid using width:###px; for major containers in RWD. max-width:###px; and/or width:##%; is OK.

In fairness and on second thought, I want a fixed width in my cases - I have a rotator/slider (?) and also 5 boxes of services and I don’t want them to be fluid. They are fluid in that when the parent collapses down on them too much, I change then from fixed-width to fluid like display:block and width:auto.

In general I can see where your advice makes sense, but on my home page, I think how I handle things makes more sense.

Not sure if you follow me without an example.

Just saying.

[chrisofarabia]

@mikey_w

And why are you adding up ratios?

How familiar are you with the way grind layouts are built up? The first one I ever encountered was 960.gs. If you take a look at their demo page, you can see how the ratios build up (in this instance based around either 12 or 16 columns). Here, they show the numbers based on pixel widths, but I used the ratios between those and converted them to percentages for use on my blog. I got that fluid quite quickly from what was an absolutely a fixed width site - but as I’m yet to deal with the break points with @media queries, I’d make no claims about it being responsive, despite it passing Google’s “Mobile Friendly” test.

[felgall]

@mikey_w

Then why do people use such hi-res monitors?

That resolution is needed if you are going to watch video as that’s the most common video resolution now in use - unless you need screens with 3840px width in order to watch 4k video.

Most people when they are using a computer also have more than one program running at a time. A 1920px width only allows for 2 by 960px windows to be visible at the same time.

[mikey_w]

@chrisofarabia

How familiar are you with the way grind layouts are built up?

No clue.

@chrisofarabia

The first one I ever encountered was 960.gs. If you take a look at their demo page, you can see how the ratios build up (in this instance based around either 12 or 16 columns). Here, they show the numbers based on pixel widths, but I used the ratios between those and converted them to percentages for use on my blog. I got that fluid quite quickly from what was an absolutely a fixed width site - but as I’m yet to deal with the break points with @media queries, I’d make no claims about it being responsive, despite it passing Google’s “Mobile Friendly” test.

Looks like a more advanced topic to add to my responsive to-do list!

[chrisofarabia]

@mikey_w

No clue

That should, of course, have said “grid layouts”

[dresden_phoenix]

Yes , I was. 4:1 ration or even 5:1 ratio max was just an aesthetic rule, not a mathematical one.

[mikey_w]

@SamA74

In a ‘fluid’ design, you should not need a query for this. I think it has been mentioned elsewhere to use max-width instead. Avoid using width:###px; for major containers in RWD. max-width:###px; and/or width:##%; is OK.

Is the correct way to do things, then for me to set my wrapper element to:

#wrapper{
max-width: 1280px;
margin: 0 auto;

[SamA74]

@mikey_w

Is the correct way to do things, then for me to set my wrapper element to:

Yes.
It will go no bigger than 1280px, but when the screen is less, it will take the default 100% width, unless you also state a width (which should be % to stay fluid, if you choose to set a width that is).
That is the basis of a fluid layout. You then only need add a query when something ‘breaks’ like the columns are too narrow or menu doesn’t fit.

[mikey_w]

@SamA74

Yes.
It will go no bigger than 1280px, but when the screen is less, it will take the default 100% width,

Okay.

@SamA74

unless you also state a width (which should be % to stay fluid, if you choose to set a width that is).

Please explain. Why is using pixels bad?

@SamA74

That is the basis of a fluid layout. You then only need add a query when something ‘breaks’ like the columns are too narrow or menu doesn’t fit.

A lot for my brain as I learn “trial-by-fire”.

So I set wrapper to

#wrapper{
max-width: 1280px
margin: 0 auto;
}

and my outside wrapper handles everything over 1280 pixels by having a fixed-with design with expanding gutters, right?

Then under 1280px, I can use media queries to mix things up, like switching from display:table to display:block for smaller screens, right?

[mikey_w]

@SamA74,

How about this simple example…

<!doctype html>
<html lang="en">
<head>
    <style>
        #wrapper{
            min-height: 100px;
            max-width: 1000px;
            margin: 0 auto;
            font-size: 2em;
            font-weight: bold;
            text-align: center;
            background-color: #CCFFCC;
        }
    </style>
</head>

<body>
    <!-- Page Wrapper -->
    <div id="wrapper">
        I am 1000 pixels wide, but no more!
    </div>

</body>
</html>

[felgall]

@mikey_w

Please explain. Why is using pixels bad?

If someone whose eyesight isn’t perfect does a 1000% zoom on your page in order to be able to see the text on your page then the text that will fit in 1280px is only 1/10th of what you intended.

If you specify the max-width in em instead then the maximum width will increase when the text is zoomed.instead of trying to fit a lot less text across the screen.

[mikey_w]

@felgall

If someone whose eyesight isn’t perfect does a 1000% zoom on your page in order to be able to see the text on your page then the text that will fit in 1280px is only 1/10th of what you intended.

If you specify the max-width in em instead then the maximum width will increase when the text is zoomed.instead of trying to fit a lot less text across the screen.

I think @ronpat mentioned this a couple of months ago.

Right now I have a stripped down version of my home page with just the masthead and a separate wrapper with some text in it. I did a test using…

#masthead{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
/*    max-width: 75rem;        /**/
    max-width: 1200px;        /**/
    margin: 0 auto;
    border-collapse: collapse;                    /* Allows border. (Collapses margins/padding.) */
    font-size: 0.9rem;
    line-height: 1.1;
}

#homeWrapper{
    position: relative;
    top: 120px;                                                    /* Position wrapper below masthead. */
/*    max-width: 75rem;        /**/
    max-width: 1200px;                                                /* Provide full-width container. */
    margin: 0 auto;
    background-color: #CCFFCC;
}

I tried zooming in on both as far as FireFox would go, but didn’t see any difference. Sorry if I’m be dense!

[ronpat]

@mikey_w

I think @ronpat mentioned this a couple of months ago.

Is this the post/thread that you are thinking about?

Unordered List as boxes? - #18 by mikey_w

If so, that was a very specific use of ems for container dimensions because you specified in bold that you wanted the boxes to remain square if the user changed his font size. It wasn’t a full page width thing, though.

[mikey_w]

@ronpat

@mikey_w

I think @ronpat mentioned this a couple of months ago.

Is this the post/thread that you are thinking about?

Unordered List as boxes? - #18 by mikey_w

If so, that was a very specific use of ems for container dimensions because you specified in bold that you wanted the boxes to remain square if the user changed his font size. It wasn’t a full page width thing, though.

Yep, that was likely it.

So what do you say about @felgall suggestion?

First off, I don’t see the difference between the two when I zoomed.

Secondly, it sounds like you think his idea is not so great in this instance?

[ronpat]

I didn’t read a suggestion into @felgall’s last post.

No, I’m not disagreeing with @felgall. He is using a conceptual example to make a point about page design.

[mikey_w]

@ronpat

I didn’t read a suggestion into felgall’s last post.

No, I’m not disagreeing with felgall. He is using a conceptual example to make a point about page design.

I don’t understand what @felgall is talking about in post #34. I could not create the effect he mentions.

[felgall]

@mikey_w

I could not create the effect he mentions.

Is the page available online? If you can post a link to it I’ll see if I can get a screenshot of what it looks like when zoomed.