Transitioning to Broadsheet Layout

Is the time right to begin dumping 1024 width?

[guru5571]

The idea of optimizing my sites for a wider screen resolution or a broadsheet layout as I call it has been on my mind for years. Obviously what's been holding me back is the persistence of 1024x768. In November 2007, 1024x768 had 46% market share. As of may this year, it is down to roughly 24%. Lately 1024x768 is losing roughly 3/4% per month give or take. I would imagine that 1024x768 will be below 20% in a few months.

You can see current stats here:
[marketshare.hitslink.com...]

Having said that, more users now have default screen widths that are greater than 1024x768. Obviously there are a huge variety of screen resolutions, but to me it seems that new minimum width that has the greatest market weight is 1280px. So this is the width I have in mind as a new default.

My thought is that as more and more people are now using higher screen resolutions, we're beginning to reach a tipping point for a move to optimize for higher resolutions. My personal laptop has 1600x900 and I find it more convenient to have pages enlarged through my browser. Every time I visit a new site, I generally bump up the size a couple of notches. This is on top of the fact that I already have large fonts. I'm not visually impaired and have perfect vision, yet I feel that the default design sizes for many websites look small on high resolution screens. I think we're nearing the point where designing for 1024px width is becoming an inconvenience for a greater share of the audience than it might be a convenience for. I've already considered a fluid width layout and many sites just don't lend themselves well to a fluid layout width, and even a fluid width can look bad on large monitors.

The benefits for the larger layout are being able to fit more content and advertising on pages rather than having a large amount of blank and wasted space for the increasing number of people with high resolution monitors. I also find that wider pages allow for the comfortable use of larger fonts.

I notice that Scandinavian countries already seem to be optimizing for larger screen widths.

For example the Swedish tabloid:
[aftonbladet.se...]

I was already planning on redesigns for several sites in the next few months and wondering what kind of opinions people have about redesigning with a broadsheet layout sooner rather than later. Also, is anyone else out there doing this or planning on doing this? I'm inclined to just do it and damn the torpedoes, but I most interested in just hearing as many points of view as I can before I make the leap.

[edited by: ergophobe at 6:26 pm (utc) on Jun 21, 2010]
[edit reason] oops - post restored to original format as best as possible [/edit]

[ergophobe]

I've run the same thoughts through my head and pretty much agree with everything you said - fluid layouts on large monitors are a problem.

I would say if I wanted to really do it right, I would use a "Switchy McLayout" approach that uses a stepwise function to change the layout according to resolution. The problem with designing for wider and wider monitors is that the mobile segment is growing too, so what's happening is the middle is dropping out.

[guru5571]

Yeah that's the problem with a fluid layout. The pages become a mile long for narrow widths, especially if you want to make a rich site with lots of content on the page for wider screens. The if you design for smaller screens, your content looks lacking on a large monitor. I really don't want to expend lots of energy in creating multiple versions of my sites for the full range of screen widths available. I think that I would probably be fine doing a wide version and maybe a stripped down mobile version.

ergophobe, have you designed any sites that are broadsheets ( >1024 ) yet? Or do you plan to in the near future? I'm trying to find where everyone else is on this issue.

[ken_b]

Don't forget that many folks running larger screen resolutions keep their browser windows open at smaller sizes.

This laptop I'm on is 1280x800, but the browser window size I use most often is at about 800x800.

That lets me keep a couple other programs open and visible (in smaller windows) at the same time.

I only maximize my browser window if I HAVE to, and don't much appreciate sites that don't build in flexibility of some sort.

It's a tough call though. Some liquid sites spread out really poorly, and that's probably more annoying than having to maximize the window or scroll sideways.

Maybe consider some sort of user selected "Choose resolution/screen size", where the user chooses between various fixed sizes?

[ergophobe]

>>ergophobe, have you designed any sites that are broadsheets ( >1024 ) yet?

Not yet and I don't think I'll ever do a fixed-width design that defaults larger. Basically, if you go beyond 35em (about 60-70 chars) readability declines. I know that's nothing you don't know since that issue is implied by your first post.

That being so, with normal sized fonts, the main text area can only get so big. So any wider layout seems to me to work only with
- text columns, which will work well when CSS3 is more widely supported
- additional columns of ads and other "noise" that in effect only gets displayed to users with wide screens.

And then with the issues that ken_b mentions, plus the mobile issues I mentioned, it seems like you need a minimum of four layouts, perhaps five.

380px for mobile
740px for "narrow"
960px for "standard" display
and then a wide and a super-wide

Doing something along these lines has been on the TODO list for a site that I think might attract a more mobile users if the layout was more friendly to them, but alas the site pays its own hosting bills and not a lot more, so I just haven't found the time to put into it.

Did you look up any of the articles on Switchy McLayout? That always seemed to me to be the right general approach.

[guru5571]

ergophobe,

Yes, I looked into the Switchy McLayout. I guess I always had that concept in mind, but just didn't have the name for it. I think you're right and I'm going to have to go with an approach like that. It seems there will be continued divergence with screen widths. I do notice that a lot of the new Android phones are now using 480px which I'm thinking might end up being a good low end default for mobile. I realize this would be cutting off all the smaller screens, but right now I have no mobile solution and I don't want to design for a smaller size if its on its way out in a year.

[badbadmonkey]

Guru I sympathize with you in general but I'm not sure there's any call for a change in layout mindset. From notepad to newspaper? No.
Rather, with CSS you can set higher resolution fonts etc. I would stop there.

1) While PC screens are rapidly becoming 1280px wide at least (and to hell with any idiot still using a 1024 screen hahah), you are ignoring the rapidly growing market which is simply following the same path as laptops 20 years ago: mobile devices, including pads, which now have respectable enough resolutions not to need to rely on 50% zooms or reprocessing solutions like Opera Mobile. Aren't you looking forward to seeing that sizable section of 800x600 viewers again? LOL

2) As above lots of users with large screens do not maximize their browser windows. I have a 24" which is 1920px, very common now, maximized is too big on most sites. The likes of Wikipedia are the worst culprits, full spread divs with no max-width at all. Ugh. Try 27" or 30" screens - forget it, even folk like Ken above with a 1280px laptop are creating 'problems' for you.

I try to keep content very linear with a clear structure that any device can make sense of, and use clear CSS to hint styling - large fonts and div widths for PCs, smaller fonts for mobiles, print layout for print, etc.

[Hoople]

One factor to also account for is viewport size. This is screen size minus chrome and toolbars. Some users have a boatload of toolbars. Example: Eb*y, Yahoo, Google, Smiley, etc.

I'm on the road now with an older 2007ish laptop, Google Toolbar and have the following screen data: Browser Version: Firefox v3.6, Screen Resolution: 1024 x 768 and Browser Window Size: 1024 x 553

[tangor]

Sad thing most are overlooking is that with the new "real estate" resolutions is that many have to ZOOM their browsers just to read the "fine print". My commercial sites are 80% centered/fluid at "normal" font. Easy read, easy zoom if desired. Those do best. Hobby site is framed with same above which actually reads even better since the real estate is parceled (but is not monetized so can't say how that works out on the money side). What is disappointing (running 1680x1050) is all those sites that think 9px-10px is okay for text... 9 times out of 10 I just hit the back button instead of CTRL+ three or four times just to read it. Which also blows all layout and images out the whazoo...

Smart thoughts these days is max length columms/divs to maintain reading length per line and don't depend on users running half screen browsers on max res real estate.

Me, personally, I run full screen since I'm losing my sight between cataracts and glaucoma...and unlike the kiddies out there, have a wallet with bucks inside...

Pick and chose presentation of content. Do it correctly regardless of resolution and reap the rewards.

[topr8]

>>Aren't you looking forward to seeing that sizable section of 800x600 viewers again? LOL

can't wait myself - all my sites work fine at 780!

[milosevic]

resolutions is that many have to ZOOM their browsers just to read the "fine print". My commercial sites are 80% centered/fluid at "normal" font.

Excellent point tangor.

While I'm lucky enough to have good eyesight, many sites (such as wikipedia) use text which is too small to read easily from a couple of feet away on the screen I use at home and I have my browser set for these sites to work at a higher zoom level.

I've been experimenting recently with two things:

1. Fluid designs with heavy use of max and min widths, both on the outer container and inner elements - so eg Wordpress theme that works and looks good from about 700px width up to 1600px width (max-width) - but I set a max-width on the div.post article content, otherwise it would become too wide to be easily readable at full width.

2. Fluid layouts/content which drop floats to accommodate narrower widths, for things like photo galleries.

3. Larger default text size - imo this is the best thing to accommodate people with high definition screens, it also allows blocks of text content to be wider in terms of px before length of lines of text becomes too long for readability. I also don't think in terms of accessibility of information it harms display in lower res screens, except in the kind of areas where getting tons of stuff above the fold is important.

There's a couple of other points I'd raise.

Is information not best presented in a portrait format? My thoughts are that information is best presented so that it can be processed from the top down. Sites with stacked sidebars (eg some wordpress themes) I find visually offputting. Yes, you can make a page wider and stick in tons of widgets and sidebars, but is that good user experience?

The Aftenbladet site does create a scrollbar when viewed at 1024px, but the only content that's missing is the adbar on the right hand side - so the site would still be fully usable without horizontal scrolling, it has been designed so that most users viewing fullscreen at 1024px will not notice that part of the page is missing.