Fluid width content on entry pages

[little_terror]

Title:
Fluid width content on entry pages

Area:
styles, entries, usability

Summary:
Fluid width content on entry pages to improve usability and readability.

Description:
At the moment, DW only seems to provide fixed content on default/unstyled entry pages. Because of the fixed content parameters, overwhelming whitespace can be an issue for larger monitors and computers running higher resolutions. Moreover, long comment threads end up "shrinking" very quickly, necessitating users to click more links (such as thread or expand) in order to view content.

Fluid width for entry pages would decrease the amount of uncomfortable whitespace users running higher resolutions encounter. Fluid width would also prevent long comment threads from shrinking too quickly and decrease the amount of clicking users are required to do at present.

Implementation of fluid width should not be difficult, as the style sheet that currently powers the default entry style only needs to have fluid width coded into style containers.

In conclusion, fluid width would improve usability and readability across platform and resolution. I hope the DW development team considers this suggestion!

Poll #9492 Fluid width content on entry pages

Open to: Registered Users, detailed results viewable to: All, participants: 51

View Respondents

This suggestion:

View Answers

Should be implemented as-is.
10 (19.6%)

Should be implemented with changes. (please comment)
5 (9.8%)

Shouldn't be implemented.
20 (39.2%)

(I have no opinion)
13 (25.5%)

(Other: please comment)
3 (5.9%)

Comments

[musyc]

God no. A VERY large part of the reason I love DW's default site scheme is because it's fixed width. Fluid width is horrible for reading text. Eyestrain and fatigue is a huge problem for me when sites put fluid width as a default. That's getting into the hundreds of characters in a line and the sheer repetition of flicking back to the beginning for the next line of text does a number on my eye muscles.

Implementing a fluid width option in the schemes, like the light-on-dark option, I wouldn't object to, but leave the fixed width as is.

[ratcreature]

+1
I appreciate the fixed width as well on my widescreen laptop.

[turlough]

Hear, hear!

[instantramen]

+1

[pocketmouse]

I thought there was already an option for content by percentage -- so instead of journal entries being '800 pixels wide' or whatever, you could set them to be '90% of window width.'

[facetofcathy]

Okay, I am deeply confused. And I've totally had coffee today.

I thought that fixed width meant you set a container in some "safe" width in pixels and you let the content scale--or not--inside that container.

Fluid width means the container is set in ems or % or not set at all and defaults to full screen and the content scales happily inside that container.

So, neither Celerity nor Tropo have fixed width entry pages. Tropo's is 80 ems and Celerity's is unfixed, limited only by the sidebar.

If this suggestion is to change Tropo to full screen, which I think it is, then a thousand times no.

Please correct me if I've got something wrong, missed the point somehow.

ETA: white space never makes me uncomfortable (1600x900 display)

[musyc]

Heh, I had to go check my different screens. On my netbook, little screen, a full line of text on Tropo Purple takes up about 900 pixels. On my desktop, great big screen, full line of text takes up about 930 pixels. The only real difference is in the white space to either side. Lots on the desktop, not so lots on the netbook.

[facetofcathy]

Which is likely due to some slight differences in font or font size as that's driving the train in tropo. I personally think 80ems is a little wide, and I'm using celerity right now anyway--I might throw together some stylish scripts and see if that can give people options.

[musyc]

*nod* I think that's why I was convinced it was fixed-width, because there's no real discernible difference for me despite monitor size. The margins right now are fine, though I wouldn't mind a little less wide. My AO3 skin gives me a 12.5% margin on either side of works, and that's a comfortable read to my eyes.

[ninetydegrees]

This. Content is already fluid on system-styled pages but can have a max-width for better readability.

[facetofcathy]

Thank you, I thought I was not functioning as expected today or something.

[facetofcathy]

Okay, replying to myself here to just put this info on the record as it were:

The folks at Smashing Magazine talk about three types of layouts--Fixed, fluid and elastic.

Fixed is what I said above--the container width is set in pixels, and how that fits in a screen depends on the screen size, and large font users will quickly reach a point where things overflow, get truncated or trigger scroll bars.

Fluid is a width set in %--and 100% or full screen is a %--so with something less than 100% the content is never full screen on any screen, but it scales better than fixed and the white space remains proportionally the same.

Elastic is a width set in ems--like Tropo has. And this confuses people, particularly people who never change their font size or device or screen width and never see it change. Widths in ems are based on your font size, the site font size and may or may not show full screen. They provide the opportunity to set line lengths at comfortable amounts, usually 60-70ems. Which is approximately 60 to 70 characters of text, regardless of size of that text.

Elastic layouts, like Tropo, are the kind of layout that allows everyone to enjoy using a site. That doesn't mean everyone has the view they'd like best, it just means it will work on all devices, font sizes and screen resolutions.

Close...

[marahmarie]

Fluid width means the container is set in ems or % or not set at all and defaults to full screen and the content scales happily inside that container.

Percentage or else not set at all. Em-based layouts are elastic, not fluid, the difference is they adjust based on default font size, while fluid layouts scale to viewport width; only pixel-based layouts are truly fixed.

A page body set to 960 pixels wide, for example, won't be flexible but set page body and font to ems and it should all adjust accordingly.

Ems are fluid in the sense that they scale up or down (unlike pixels), but in using them to set the body width (for example) to my mind, that's like setting a minimum maximum width.

I looked up em-based layouts (which I guess is close to what Dreamwidth is using - I'm thinking they use more of an em/pixel combo like the ones I usually wind up making for myself, but I'd have to look more at their CSS to know) since your comment got me thinking, and found some sites that discuss them:

http://www.456bereastreet.com/archive/201101/only_use_ems_for_the_total_width_of_em-based_layouts/

http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Re: Close...

[momijizukamori]

Tropo is set to have a content area max-width of 80em. Below that it's... 92% of screenwidth. So if 92% of screenwidth < 80em, it's 92%, otherwise it caps out at 80em.

[tyger]

...I'm kind of confused. I agree that itty bitty entry text and too-fast comment-squishage is a problem, but you seem to only be having a problem with the default site skin? Which I've never had a problem with. Could you explain more clearly? (Of course, I run an abnormally small browser, so that might be the difference.)

[moonvoice]

I love fixed width. I can understand why others might want fluid width though, so I think this should be an *opt in* option, if it were to ever go through. So I voted 'should be implemented with changes.'

I've got a large screen / high resolution, and fixed width is my best friend. I hate writing across as massive, long screen, and fixed width makes things comfortable and wonderful for me. Fluid width is great for seeing images and stuff on say Tumblr, but it's terrible for reading text. D:

[cesy]

I would much prefer elastic width wherever possible, but this would be a help.

[montuos]

I don't care whether this particular suggestion is implemented or not as long as somebody makes it possible and easy for me to use the 2.5" of empty space wasted on each side when I go fullscreen.

[zellieh]

If you have Firefox, you can install Stylish, which lets you install styles for websites that suit your tastes. Here's one of the styles I use: http://userstyles.org/styles/30671/dreamwidth-for-widescreen

I also use it to restyle LJ and Wikipedia.

[montuos]

Thanks! Happy camper now. :)

[sky]

This would be a godsend. This has been pretty much my #1 pet peeve on DW ever since my first day here three years ago. I have a userstyle set up to stretch Tropo comment pages for most of the length of my screen (1366x768 widescreen) but I'd much prefer to have the functionality baked in.

[jeshyr]

I propose leaving the default site skin the way it is, but I'd like to see that we work consciously towards having a variety of site-skins where at least some of them are designed to fill a higher percentage of the screen width and some are designed to fill a lower percentage of the screen width.

As an accessibility issue we need to account for all sorts of needs - whether it's having a low percentage of white space on screen, having a narrow column to read, having enough space for magnification, light-on-dark, etc etc. Infinite Diversity in Infinite Combinations :)

[zing_och]

yes, this.

[zellieh]

+1