77

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

8
  • 2
    Maybe this real estate is needed for advertisements some day. Jul 14, 2009 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. May 10, 2013 at 19:25
  • 1
    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? Oct 13, 2013 at 20:48
  • 10
    Stackoverflow should have "best viewed 1024x768", preferably shown as blinking marquee.
    – user153949
    Jan 1, 2014 at 20:08
  • 3
    Oh, and while they're at it they can add more nested tables.
    – bjb568
    Feb 11, 2014 at 4:12
  • Maybe this question should be re-tagged to status-planned or status-review because it looks like they are planning to implement this based on the January 2018 product team update Jan 10, 2018 at 17:50
  • @KodosJohnson Agree; I found this article quoted at: meta.stackexchange.com/q/307862 as well. Mar 17, 2018 at 0:11
  • The question is about fluid design and not about the responsive design. In my opinion, it is not a dupe, and not a "status-completed" feature request.
    – peterh
    Sep 20, 2019 at 21:17

8 Answers 8

34

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.

12
  • 18
    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, 2009 at 11:19
  • 16
    Hence "reasonably confident" instead of "sure" :)
    – Jon Skeet
    Jul 14, 2009 at 13:04
  • Can't it be 80 columns or more?
    – bjb568
    Feb 11, 2014 at 4:04
  • 4
    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. Jan 17, 2016 at 20:19
  • @NathanArthur: For other SE websites, it might make more sense - but the question is about SO.
    – Jon Skeet
    Jan 17, 2016 at 21:07
  • @JonSkeet Fair enough. But allowing a code block to scroll horizontally when the window becomes too small achieves the same result. Jan 19, 2016 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, 2016 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.) Jan 21, 2016 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, 2016 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. Jan 21, 2016 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, 2016 at 15:29
  • @JonSkeet Haha! Missed that somehow. My bad. Will do. (And, yeah, I knew I was commenting on an old answer.) Jan 21, 2016 at 19:15
30

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

7
  • 4
    You know you can re-size your browser window. You don't have to run it maximized. Jul 14, 2009 at 14:48
  • 15
    Why should I resize it? I want to navigate full screen what's the problem?
    – Drake
    Jul 14, 2009 at 16:11
  • 5
    @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, 2012 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, 2013 at 18:33
  • 3
    Website designs with fixed width basically killed the benefits more horizontal screen real estate could bring to multitasking.
    – njsg
    Oct 22, 2014 at 8:05
  • White space is a design choice, just look at the Google search page.
    – cade galt
    Jan 9, 2016 at 0:16
  • 3
    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, 2016 at 18:42
17

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.

6
  • 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, 2009 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, 2010 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) Jan 29, 2013 at 15:29
  • 2
    +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, 2014 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, 2015 at 4:26
  • I've been using Stylus instead of Stylish for a few years now. Stylish contains spying malware these days. Stylus was forked from Stylish and has had all spyware removed, and is available for both firefox and chromium. add0n.com/stylus.html
    – cas
    May 11, 2019 at 0:35
10

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

2
  • 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, 2009 at 13:17
  • 4
    I don't get it. You can always make the window narrower and the fluid content will adapt. Oct 13, 2013 at 20:44
7

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

1
  • Yeaaa its what i need :D thx a lot
    – Bimawa
    Nov 13, 2013 at 3:53
2

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;
}
1
  • 3
    buht wzat about ze media queries?
    – bjb568
    Feb 11, 2014 at 4:05
2

Here is a Stylish Stylus script which enables 100% width on all stackexchange sites. Apply to stackoverflow.com, stackexchange.com, askubuntu.com etc. Not thoroughly tested, feel free to comment missing stuff.

#mainbar {
    width:85% !important;
}
#sidebar {
    width: 14% !important;
}
.question table, .answer table {
    table-layout:fixed;
    width:100%;
}
.js-comment-form-layout td:last-child {
    width:115px;
}
.js-comment-form-layout textarea {
    padding:0;
    width:100% !important;
}
.comments > table > tfoot > tr:first-child > td:first-child, .comments > table > tbody > tr:first-child > td:first-child {
    width:15px;
}
#content, .inner-content, .container, .answer, #answers, .post-text, .comments, #answers-header, .post-editor, #wmd-preview, #questions, #header {
    width: initial !important;
    max-width: initial !important;
}
.wmd-button-bar, .wmd-input, .grippie {
    width: 100% !important;
}
.grippie {
    background-position: 50% -364px !important;
}
.votecell {
    width:45px;
}

edit:

**

DO NOT USE STYLISH, IT CONTAINS MALWARE

**

1
  • 1
    use Stylus instead. Open source fork of Stylish with no malware. add0n.com/stylus.html
    – cas
    May 11, 2019 at 0:32
1

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.

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