What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

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
4  
Stackoverflow should have "best viewed 1024x768", preferably shown as blinking marquee. –  user153949 Jan 1 at 20:08
2  
Oh, and while they're at it they can add more nested tables. –  bjb568 Feb 11 at 4:12

7 Answers 7

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
10  
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
7  
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 at 4:04

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
2  
+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
    
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 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 2 days ago

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
8  
Why should I resize it? I want to navigate full screen what's the problem? –  Drake Jul 14 '09 at 16:11
2  
@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. –  РСТȢѸФХѾЦЧШЩЪЫЬѢѤЮѦѪѨѬѠѺѮѰѲѴ May 10 '13 at 18:33
    
Website designs with fixed width basically killed the benefits more horizontal screen real estate could bring to multitasking. –  njsg 2 days ago

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
    
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

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.

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

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
    
I can hear the unicorns dying. Rework them! meta.stackoverflow.com/q/253487/2888561 –  bjb568 May 4 at 8:38
    
So how do I view this question in Stack Printer? –  zylstra Jul 27 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. –  Weapon of Choice Jul 27 at 20:40
    
@900 site-ups a day It sent me to this URL stackprinter.com/… . –  zylstra Jul 28 at 18:57

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
1  
buht wzat about ze media queries? –  bjb568 Feb 11 at 4:05

You must log in to answer this question.

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