Am building my first responsive website. Somehow through it all, I have a major break point at 1170px. Is that a problem?
It feels like I should have my main desktop “look” fit exactly into 1280px for default desktops, and then go from there.
I get that my site should adapt to any device - and it does - but with my current code I have a gutter on each side of my home page on my MacBook and I feel like I screwed up since I am not utilizing all the space I have on my Mac.
Thoughts?
white space is never a bad thing. a lot of websites have gutters on the side when there responsive. It really depends on where you your breakpoints are.
Do you have your website up to view?
Not up yet. It doesn’t look bad, I think part of my concern is this whole new fad of 100% screen coverage websites. (I feel dirty having a gutter and white space!) 
I suppose the fact that I ended up at 1170px shows poor planning on my end. Instead of working outside in, I worked inside out and ended up a little short of a full-screen. (That sounds bad!) 
It’s most definitely a learning process. Once you do 2 or 3 responsive sites, you’ll get the hang out of it, and you’ll have a system of how to do things.
I know for me, I have a process of how I layout the design of a website to building it.
Are you using a framework to help you create your first responsive website, or are you creating from scratch?
Heck no - I’m a TextEdit kind of guy! 
1170px is not just a little short of a standard 1920px screen width (of course a lot of people make use of the window-leftarrow and window-rightarrow key combinations to open two applications side by side so that each only gets 960px).
1920px is the new “standard” monitor resolution?
What would you design your default desktop version at?
1170px looks good on my MacBook, and I wouldn’t go beyond 1280px because then I wouldn’t be designing to my content. In fact, part of me things 1280 is maybe too wide.
I do know that from 1170px down to 320px things adapt very well.
you may find it useful to think of layout dynamics differently.
even if you had to actually deal with desktop that had extremely wide monitors, you would not WANT take up the whole width of the monitors. As lines of text can become difficult to read after they go past a certain width. This is the reason why printed material such as magazines and newspapers use columned layout.
Try visualizing your layout as a series of limited width columns that you stack side by side only if monitor width permits. the monitor width greatly exceeds the total width of all your columns, you don’t gain much by extending the width of the columns so that they become hard to follow. As such having a decorative background/white space on either side of the page actually serves to keep the eye focused on the content area.
Very true.
I don’t have a problem with line widths here, but some did think that the Discourse width was a better choice and the lines were approaching if not passing acceptable length here. Compare
;
Even if one were to try and account for all devices, the ability for users to define their own settings means literally any dimensions are possible.
Custom resolutions allow end users to the ultimate flexibility to add virtually any resolution and refresh for their display. If users want to use a unique resolution or refresh rate that is not available through windows control panels, this control will let users manually add any mode. The software will perform a check to make sure the end user defined resolution and refresh rate are supported by the graphics card.
Where I work almost everyone has two monitors and some have three all of then 1920 x 1080 resolution just like modern tvs - that gives a screen width of 3840px for most and 5760px for some.
Of course 1920 is too wide for proper viewing but fortunately most sites (such as this one) leave whitespace on either side when the browser is opened this wide.
When I an using a computer with a single monitor I usually have the browser open half screen which gives a more reasonable 960px which works fine for responsive sites and is also wide enough for most old fixed width sites (except those that are 960 fixed width where the browser chrome means that the page ends up being just under 20 pixels too wide to fit.
Certainly where I work, we’re not quite at that resolution yet, or at least not commonly. I just checked my own 21" HP screen, and whilst it’s capable of that, it’s not a comfortable read at all, and I have it set to 1600px. That’s the same resolution as my own 13" Lenovo Yoga, which I can work with (though I do find it ever so slightly smaller than I’d like - I’d want that resolution on perhaps a 14" screen). On the other hand, I have a 24" screen connected to my desktop PC, that is always set at 1920px which reads just fine.
At the moment, there are 27" Retina iMacs out there with a 5k resolution of 5120px width, as well as 320px smartphones.
I think the point is, that screens vary, wildly. I’ve just described screens that have a 16x ration between them. No one layout is going to suit them all though without be either too cramped, or lost in a sea of white. All the designer/dev can do is to try their best to accommodate this range in such a way that things don’t obviously break. RWD and PE isn’t just for mobile though.
Good points, and yes, I am aware of what you are talking about.
To clarify my OP, currently my last media query occurs at 1170px and does exactly what you talk about. At 1171px I switch to a wrapper{margin: 0 auto;} so that on higher resolution monitors you would just get an increasing gutter.
All I was wondering about is if I am “cheating” users on the (formerly?) standard 1280px width displays like on my MacBook?
After all, 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. To me, this is foreign, but it got me to thinking that maybe I should stretch things out to at least take advantage of the 1280px that many people will see.
I suppose 1170px vs 1280px is petty, but I am just trying to do the best design I can.
Make sense?
Then why do people use such hi-res monitors? 
If you were me, would you take advantage of the extra 110 pixels and stretch out my design to go up to 1280px?
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.
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.
Thoughts?
P.S. 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!
That seems like a reasonable range to cater for.
I wouldn’t worry about anything bigger. Think of your other thread where you talk about optimum chars per line. The big screen is where you may put that to practice. I wouldn’t like a site (main content container of) to expand unlimited, it will break the layout on shorter pages at some point, too wide and short. You have to put a stop on width at some point IMO.
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.
People don’t always have every window maximised. They may be using a number of programs at once and have multiple windows open on parts of the screen(s). I work (in my real job) in graphics, so I want all the screen resolution you can throw at me.
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.
If you did want to make a super-wide design, you could utilise the css columns to wrap an article to a multi column display, keeping columns at a sensible width for reading and maintaining a working layout.
I probably would as a max-width, and then work with the padding inside that, or on the margins of any smaller containers.
Am I right in thinking that’s the largest screen resolution you have available to you currently?
Just set up a custom size in there then; you’re not constrained by the built-in containers sizes they’ve created.
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
Then why do people use such hi-res monitors?
consumerism.
All I was wondering about is if I am “cheating” users on the (formerly?) standard 1280px width displays like on my MacBook?
not if the design looks ok and most of all is readable and accessible. Don’t force the issue of pixel size.
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:
10:1 total
10x160 =1600px
with the MAIN content area being 640px… that roughly optimal line lenght
At ludicoulsly large screen sizes 160px gutter on either side seems quite reasonable, tho if you don’t mind doing extra math and possibly extra background graphic design you could also re distribute that space as between content-columns.
Another example:
6:1 total
6x240=1440px + 240 gutter on either side, not too bad, with a mail content width of 720px… which is on the upper limits of comfortably long line lengths.
I hope that didn’t seem to scattered brained and helps clear up your question
As Dresden said the graphics can spread to the edge for good effect (like the current trend for whole page photos) but you can still confine the actual content to whatever width you think fits your design best.
Readability is about line length and not monitor/viewport width width so you should always try to ensure that lines don’t get too wide (about 40 - 60 chars) for main blocks of text.
On larger viewports you can increase the number of columns to take up more space but you don’t have to do this if you think it doesn’t suit the design purpose. Even though I have a 27" imac display I don’t maximise the browser and I don’t really want the site spread all the way across in multiple columns.
You can set the max-width to suit your design but there is no reason why design flourishes (decoration) cannot fill the rest of the viewport to keep interest.
If I’m on my laptop, I will maximise the browser because the screen is not that big. At work I’m looking at twin 1920 x 1200 monitors, there I don’t maximise the browser, it doesn’t need to be that big to view a web page.
