Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 157 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

When will SO stop wasting real estate of my screen by having static width layout?

EDIT

It would be very interesting to hear how does Joel, being UI specialist, feel about this. JoelOnSoftware site has fluid layout...

share|improve this question
1  
Maybe this real estate is needed for advertisements some day. – Ladybug Killer Jul 14 '09 at 11:40
1  
And the other direction, too; there's no technical reason I can't use the full site rather than the mobile one on my tablet, but for all the horizontal scrolling. – Monica Cellio May 10 '13 at 19:25
    
Can at least an option be added to pop out code listings? They are a pain to read thru a 80 char wide "keyhole". Copypasting each piece into some editor is an option, but then you are likely to lose formatting and/or coloring. Please? – David Balažic Oct 13 '13 at 20:48
6  
Stackoverflow should have "best viewed 1024x768", preferably shown as blinking marquee. – user153949 Jan 1 '14 at 20:08
3  
Oh, and while they're at it they can add more nested tables. – bjb568 Feb 11 '14 at 4:12

While I completely agree it's a pain, there is one advantage of having a fixed width: when I reformat code to make sure it doesn't scroll horizontally, I can be reasonably confident it will be displayed properly for all users. Scrolling code horizontally is a horrible experience.

Arguably a vertical line overlay showing 80 columns (or something similar) would be nice - if it would be feasible in the first place. Then users who care could format code appropriately but still take advantage of a wide screen.

share|improve this answer
13  
actually, you can't be sure that it will be displayed properly for all users because some users set larger fonts (the NoSquint plugin on Firefox is brilliant if you're sick of reading websites in tiny little fonts that only look great on the web designer's own screen) – cas Jul 14 '09 at 11:19
11  
Hence "reasonably confident" instead of "sure" :) – Jon Skeet Jul 14 '09 at 13:04
    
Can't it be 80 columns or more? – bjb568 Feb 11 '14 at 4:04
    
So we force users to scroll the entire window on every page so they won't have to scroll the occasional code block? Doesn't that seem a little odd to you? Even if this was good enough a reason for SO, many SE websites rarely ever see a code block. – Nathan Arthur Jan 17 at 20:19
    
@NathanArthur: For other SE websites, it might make more sense - but the question is about SO. – Jon Skeet Jan 17 at 21:07
    
@JonSkeet Fair enough. But allowing a code block to scroll horizontally when the window becomes too small achieves the same result. – Nathan Arthur Jan 19 at 21:11
    
@NathanArthur: I'm not sure I see your point. If the width of a code block varies, there's no obvious expectation to guide when to add line breaks. – Jon Skeet Jan 19 at 22:20
    
@JonSkeet: Simple: Never autowrap; only use user-specified line breaks. CSS white-space:pre and overflow-x:scroll achieves it quite nicely. (Try reducing the width of the preview pane or adding longer lines of code to see overflow behavior.) – Nathan Arthur Jan 21 at 13:50
    
@NathanArthur: I'm still not seeing it... if I write code in an answer, I want to format it so that no-one will need to scroll - at least if they meet a certain "minimum width requirement" which is very obvious today. How do you propose showing that minimum width requirement? Or are you happy with everyone making different guesses about what's suitable? – Jon Skeet Jan 21 at 13:53
    
@JonSkeet It's a good point. Many IDEs display a red vertical line to indicate a good max line length. SE could use user screen resolution stats to inform the placement of that line (say, where 90% of users wouldn't have to scroll). Additionally, a "maximize" button could be added to code blocks with little trouble. Simple changes like that could potentially improve the experience for everyone, not just those who need to use a small view port. – Nathan Arthur Jan 21 at 15:08
    
@NathanArthur: Right, so suggest that as a feature request. (Although note that I mentioned something similar in my answer 6 1/2 years ago, too...) – Jon Skeet Jan 21 at 15:29
    
@JonSkeet Haha! Missed that somehow. My bad. Will do. (And, yeah, I knew I was commenting on an old answer.) – Nathan Arthur Jan 21 at 19:15

I am using single monitor at 1920x1200 at work, more or less 50% of SO is white.

I definitely vote to have an option that you can set in your profile/cookie to have fluid layout

share|improve this answer
4  
You know you can re-size your browser window. You don't have to run it maximized. – Joel Coehoorn Jul 14 '09 at 14:48
11  
Why should I resize it? I want to navigate full screen what's the problem? – Drake Jul 14 '09 at 16:11
3  
@JoelCoehoorn - I resized mine on 1920x1200 by placing two windows side-by-side and now there's a horizontal scroll bar for the entire page. – Flexo Feb 7 '12 at 14:05
2  
You get advantage of big monitor by having more fitting vertically. Vertical dimension is much more important than horizontally, it's funny that the monitors evolve in opposite way. My laptop has less horizontal dimension that my first monitor, which is really a nonsense. – Danubian Sailor May 10 '13 at 18:33
2  
Website designs with fixed width basically killed the benefits more horizontal screen real estate could bring to multitasking. – njsg Oct 22 '14 at 8:05
    
White space is a design choice, just look at the Google search page. – cade galt Jan 9 at 0:16
    
If white space is a choice it should be the users choice, not the designers. There were comments above about scrolling source code that completely misses the mark. If the source code posted is wide, why should I, with my 1920px wide monitor, have to scroll it just as if I had a 10 year old monitor? If someone posts code as-is, and it is wide, why do I have to look at it within at best 1/2 of the width of my monitor? If you insist the designer got it right, have a button to to expand the code to full screen, then press esc to put it back again... – Brian B May 12 at 18:42

I loathe fixed width because I have a 24" wide screen 1920x1200 monitor, and tend to have wide windows in firefox to fit more tabs without scrolling, even my terminal windows typically have at least 132 columns - great for grepping or tailing log files. I tend to make my windows about two thirds of the screen width, so i can see what's going on in other windows and easily cut-and-paste between them.

anyway, on fixed width web sites that means a huge expanse of white glare with a narrow page of content in the middle. ++ungood.

my solution is to use the Stylish plugin for Firefox and make up little CSS override fragments that disable fixed width settings, font-size settings, and other hard-coding horrors. The Firebug plugin is useful for doing this interactively to figure out what needs to be done in Stylish.

IMO, web designers who develop like that are missing one of the most important points about the web - the correct way to render a page is however the user wants it to be rendered. that's always more important than their grand design, no matter how beautiful they think it is.


BUT, with all that said, SO's width doesn't bother me much at all. not enough to even bother using Stylish to "fix" it. An inch or so on either side of the actual page. it would bother me a lot if my ffox window was horizontally maximised....that looks dreadful.

share|improve this answer
2  
I loathe fluid width because I have 24" wide screen monitors at work (3 of them actually), and differing sizes at home depending on what computer I am using. – TheTXI Jul 14 '09 at 13:32
3  
+1 from me for a programmer's solution - hacking a local CSS override. Now I only wished you would write it up as a 'howto' on (e.g.) superuser .. – lexu May 8 '10 at 9:04
1  
Would be great if you could share the style tweaks you did on userstyles.org so everyone could benefit the change (on Google Chrome at least, the Stylish plugin can load styles from this site) – Need For Speed Jan 29 '13 at 15:29
1  
+1 request to share the CSS overrides, if possible, I can try to hack it myself, but it is always better to skip the "reinvent the wheel" part :-) – njsg Oct 22 '14 at 8:04
    
I now have a 27" 2560x1440 monitor. SO's fixed layout has become quite annoying. In a year or two, i'll probably buy a 4K monitor. – cas Oct 30 '15 at 4:26

I like fixed width. This is especially useful for someone like me who goes between multiple monitor sizes between home and work and I don't have to let my eyes wander to find what I want to find. With a fixed with I know it is going to look the same regardless of what monitor and resolution I am using (to a degree).

share|improve this answer
3  
I agree, I personally wouldn't benefit from having dozens of one-line-thick answers spanning hundreds of characters across my screen. While having more code on your screen can be beneficial when programming, I don't think (again, speaking for myself) that benefit translates to prose discussions. – ベレアー アダム Jul 14 '09 at 13:17
2  
I don't get it. You can always make the window narrower and the fluid content will adapt. – David Balažic Oct 13 '13 at 20:44

The primary designs are all based around a fixed layout; reworking them is not feasible.

This certainly doesn't preclude the use of fluid layouts for other designs. For instance, mobile practically demands a more fluid display.

And since the underlying data is all public and fairly easy to access, you could always write your own UI similar to how Stack Printer does it.

share|improve this answer
1  
I can hear the unicorns dying. Rework them! meta.stackoverflow.com/q/253487/2888561 – bjb568 May 4 '14 at 8:38
    
So how do I view this question in Stack Printer? – zylstra Jul 27 '14 at 19:56
    
@zylstra See "StackPrinter Bookmarklet" on that page? Drag it to your bookmarks bar. Then you'll be able to invoke Stack Printer from any question page by clicking the bookmark. – user259867 Jul 27 '14 at 20:40
    
@900 site-ups a day It sent me to this URL stackprinter.com/… . – zylstra Jul 28 '14 at 18:57

You can try this userscript.

It expands at least the question's page to a widescreen layout based on your input. Change the variable "maximumWidth" to a value that suits you.

This has now been implemented as a Firefox addon

share|improve this answer
    
Yeaaa its what i need :D thx a lot – Bimawa Nov 13 '13 at 3:53

It'd be nice if a compromise could be created, like Google News or Microsoft's homepage, where the formatting can be optomized for various screen sizes. Not a true flow-layout, but users with wide screens and users with narrow screens could each be accommodated.

They're not that hard to create. I've created a few myself using a bit of jQuery and CSS Selectors. I've also seem some great examples using HTML 5 data attributes and attribute selectors, though backwards compatibility can be an issue.

Example:

var _currentLayout;
function AdjustLayoutWidth(initialize) {
    if (initialize)
        _currentLayout = 'Wide';
    var l_windowWidth = $(window).width();

    var l_pageLayoutDiv = $("#LoggedInMaster_PageContent");
    var l_newLayout = _currentLayout;
    // NOTE:
    // There's a 30 pixel gap between layout shifts in either direction
    // to ensure that the sudden appearance of
    // a scrollbar doesn't cause the browser window to frantically switch
    // back and worth between layouts (thus
    // locking up the UI for several seconds).
    var l_switchGap = initialize ? 0 : 30;
    if (l_windowWidth < 800) {
        // Narrow (0-799)
        l_newLayout = "Narrow";
    } else if (l_windowWidth >= 800 + l_switchGap && l_windowWidth < 1200) {
        // Normal (800-1199)
        l_newLayout = "Normal";
    } else if (l_windowWidth >= 1200 + l_switchGap) {
        // Wide   (1200+)
        l_newLayout = "Wide";
    }

    if (l_newLayout != _currentLayout) {
        l_pageLayoutDiv.switchClass(
            "PageLayout_" + _currentLayout,
            "PageLayout_" + l_newLayout, 
            initialize ? 0 : 'fast', 
            'easeInOutQuad');
        _currentLayout = l_newLayout;
    }
}
.SearchStringTextBoxSmall
{
    font-size: 10pt;
    padding: 2pt;
    margin: 0px;
    background-color: white;
    border: solid 1px gray;
}

.PageLayout_Narrow .SearchStringTextBoxSmall
{
    display: block;
    width: 100%;
    margin-right: 16px;
    box-sizing: border-box;
}

.PageLayout_Normal .SearchStringTextBoxSmall
{
    width: 280px;
}

.PageLayout_Wide .SearchStringTextBoxSmall
{
    width: 500px;
}
share|improve this answer
3  
buht wzat about ze media queries? – bjb568 Feb 11 '14 at 4:05

This is a very late answer to the wasted left space on higher resolution screens. I was more concerned about the fixed width of the question and answer boxes that forced wrapping for some code, thus making it less readable (this is particular annoying on codereview which is about code, tons of code).

For Google Chrome, I have created a little extension that allows left column enlargement and also allows horizontal resizing of the answer textarea. The code:

manifest.json

{
    "name": "CodeReview column extender",
    "description":"Extends code area from CodeReview site",
    "version":"1",
    "manifest_version":2,
    "content_scripts": [
        {
          "matches": ["http://codereview.stackexchange.com/*", "http://meta.codereview.stackexchange.com/*", "http://stackoverflow.com/*", "http://meta.stackoverflow.com/*"],
          "js": ["jquery-2.2.0.js", "myscript.js"],
          "css": ["styles.css"]
        } 
      ]
}

styles.css

.answerBox {
    resize: both;
}

.moveToLeft { 
    margin-left: -200px !important;
    width: 928px !important;
}
.largerReadonlyCodeBlock { 
    width: 860px !important; 
}

.questionHeader {
    margin-left: -200px !important;
    width: 1270px !important;
}

.footerMenu {
    margin-left: -200px !important;
    width: 1310px !important;
}

myscript.js

var $input = $('<input id="toggleWidthButton" type="button" value="Toogle width change" />');
$(".topbar").append($input);

$('#toggleWidthButton').on('click',function(){
    $(".wmd-input").toggleClass("answerBox");
    $("#mainbar").toggleClass("moveToLeft");
    $(".post-text").toggleClass("largerReadonlyCodeBlock");
    $("#question-header").toggleClass("questionHeader");
    $("#footer-menu").toggleClass("footerMenu");
});

Change manifest to include all interesting sites. Download jquery-2.2.0.js, put all the files in a folder, go to chrome://extensions/, activate developer mode and Load unpacked extension...

Note: No layout element is affected (everything remains visible).

Cons: hardcoded values for widths and not easily installable.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .