Can SO have a fluid vs. fixed-width layout? [duplicate]

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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

**