Ok to have elastic layout for 1680px wide?

Is it reasonable to design for a screen resolution of 1680px wide?

Does anybody have statistics on percentage of users with these different resolutions?

All I find is this:

And so far there appears to be only a few percentage of people that have above 1680px.

I want to design a elastic layout but with maximum width of 1680px wide and flexible down to 800px.

I tried designing this for 1280px but my particular design just does not look good on my 1680x1050 monitor. I think this monitor is as wide as most people would have. For people above this it would look ok but for anybody below 1680px the design would fill the entire screen.

Thanks.

So you design for the smallest device and then use media queries to ‘gracefully enhance’ the experience for browsers that support ‘media-queries’.

People with screens that wide would often have a couple of windows open side by side since that is way too wide for reading a single line of text unless you greatly increase the text size (say to 48px or more).

Nah, a lot of us with widescreen monitors still like having browsers maximized :slight_smile:

I would say no unless you’re aiming at an audience that is viewing their maximised browser window from a long way back and your text is very large.

I normally have a content div 900 - 1000px wide centred in the browser window and then some sort of centred background that displays more or less of itself depending on the browser window size.

This site has a 1100px content area centered with fixed width sidebars on the sides.

http://www.huntelectric.com

At 1680px it is readable and even if I increase resolution to 2072x1035 it still is ok. So I don’t know what the problem is. Beyond that is gets ridiculous but that is a small percentage of users and I plan on limiting the width to 1600px anyway (this site will expand to fit the whole viewport)

I think the text is a bit larger than I usually have but it works on this site because of the width.

I think it depends on what kind of site you are designing. I would be tempted to look at other similar sites and copyr the site that has the highest Alexa Ranking :slight_smile:

I noticed that the BBC and CNN sites are fixed whereas SitePoint stretches to the full width.

Here is a link to one of my sites Browser Screen Resolutions from Google Analytics:
http://www.graabr.com/l0MohZ/

Do you expect many smart phone users?

.

I think you need a max-width on the page as the line length is much to wide to read easily on my 1900px res monitor. I would probably set a max-width of about 1400px/1500px (centred) as it is still readable (easy to scane) at those widths.

You seem to have limited the min-width to about 1000px which is a bit too wide and I think you should work on making that scale a lot smaller (to 800px at least) which seems quite easy to do.

I’m not keen on the vertical scrollbar on the middle content as I hate having to use two scrollbars when the one on the viewport works perfectly well.:slight_smile:

Sitepoint is partly fixed but the articles are fully fluid and it seems to work. I think even if I had a 30 inch monitor I would not expand the browser fully and even it I did all I need is to press Ctrl + to zoom in.

There is a nice compilation of resources here:

But there is newer stuff like:

http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/

This will be a Wordpress site and I want to use WP-Touch to reformat the content. I see that there are lots of ways to display fluid/elastic layouts and serve them all with the same layout and it is a little more involved so that is my next step.

You might like this link that Mallory has posted a few times already. Although not specific to your question it addresses the mistakes that other sites have made when using media queries for different platforms/devices/browsers.

To me the question really hinges on the content – 1120px is usally about as wide as you can go even for large font users and maintain readable lines; but – if you have columns on each side that content area can end up well below that on a 1152 display or even a 1440 display.

That said, I generally do not go past 1366 on semi-fluid layouts. (which is what you’re talking about here, min/max-width == semi-fluid)… but most of my layouts are two column. So long as your text lines are not getting too long, I wouldn’t sweat even going as far as fully fluid.

Most GOOD forums are proof enough of that… they’re generally fully fluid and you rarely hear people getting their panties in a wad over it…

While you DO often hear people badmouthing fixed width layouts. The only people who badmouth fluid layouts are usually the artsy-fartsy types who have no business “designing” websites in the first place, or coders too inept to master the DEFAULT BEHAVIOR of most HTML elements.

It’s not just the size of the text that makes a very wide page hard to read. It’s the problem of the eye finding the beginning of the next new line when your gaze has to swing back so very far to find it - you loose track of where your were. As a poor boy with 1200 and 1100px dual monitors, I stretched the page across over both screens until the content area covered the entire width of the 1200px wide screen, and it was trickier to find the next line at that width than when it was only about 800px wide.

This is not a random personal opinion, it is confirmed by research, and one of my classes was given samples with various line lengths to read and the result was exactly as the research predicted - very long lines slow you up and annoy you when trying to find the next line. Although if there is only one line to read, very long is faster than multiple lines as you don’t have to find the next line at all. Also very short lines take more effort as you are continually scanning back and forth after just a few words. Try reading a column with one word per line - annoying, isn’t it!

So, settle for some sort of max-width around 1000px. ish.

And I have dual screens for exactly the reason felgall gives in the first reply.

Sorry if This is late in the discussion, but I thought my opinion and think like would help

On my 27" iMac, I used to have everything maximised, but then I realised that it’s more efficient to use multiple windows.

I think that if you make a wider-screen layout that works on viewports or resolutions bigger than 1280then you are good to go. You dont need anything specific for anything bigger.

Here is w3schools collection of display stats: http://www.w3schools.com/browsers/browsers_display.asp

Hope my input helped a little :slight_smile: