CodePlex Fixed-Width UI

Dec 13, 2011 at 8:30 PM

Hi,

I haven't tried in other browsers, but sometime over the last couple of hours the CodePlex web site started rendering strangely in IE 9.  There's about 1.5 inches of whitespace on both sides of the main content on every page.  My monitor's resolution is 1280 x 1024.

I understand that this could be a new design for the site that was recently rolled out, but I sincerely hope not :)

Thanks,
Dave

Dec 14, 2011 at 5:37 AM

We released a fixed width site design today.  We haven't been able to find a way to make all pages look good on a range of resolutions from 1024x768 to 1900x1200.  Generally each page would look good in one resolution, but terrible in other resolutions.  For example, project owners would often optimize their homepage for their resolution without realizing how it looked in alternate resolutions.

The vast majority of websites have solved this problem by going with a fixed width design, so we've decided to follow that best practice.  All users will now see the pages the same way ensuring there isn't the situation where some users are seeing a good page while to others it looks terrible.

Any feedback or thoughts is appreciated, particularly any ideas about how to refine the user interface further.

Dec 14, 2011 at 6:32 AM
Edited Dec 14, 2011 at 6:44 AM

Hi,

Thanks for your reply.

> project owners would often optimize their homepage for their resolution without realizing how it looked in alternate resolutions.

Yep, I've done that too; although, "optimize" for me usually just means formatting short sentences or paragraphs to prevent ugly word wrapping.  Are there other common forms of optimization that you're seeing?

Frankly, I think I'd rather have the ugly word wrapping sometimes than wasteful whitespace all the time.  For example, the System Requirements box now takes up 1/3 of the width of the Documentation tab's content.  Given that the box isn't really part of the custom wiki content, and since I have plenty of room in my right margin, it feels unnecessarily cramped.  At least try to move that region (and other similar regions) out of the way of the fixed-width content.  Perhaps floating it and breaching the whitespace margin on larger resolutions would be acceptable?  (Not holding my breath on that one ;)

I guess it just feels very cluttered to me now, but perhaps I'm biased since I've been seeing the previous design for quite a long time.  Though I actually feel this way about every fixed width site I've ever seen.  It's another pet peeve of mine, I guess.

> The vast majority of websites have solved this problem by going with a fixed width design

Perhaps CodePlex should be an exception to this trend simply because it's a wiki, which means it's customizable and content-rich.  You could just leave it up to project owners who care to spend the time to format their wikis without trading off space for those of us that have invested in larger monitors, which is supposed to reduce the need for scrolling on websites and make generally-flowable content more readable.

For example, Wikipedia makes good use of horizontal space (at least on my resolution).

> All users will now see the pages the same way.

Just to be clear, this isn't exactly true.  Unless of course you're forcing smaller resolutions than mine to also have 1.5 inches of whitespace on either side of the page.  ;)

In other words, all users will see content in the same way; i.e., with the same amount of clutter and scrolling that are inherent in smaller resolutions.  So if consistency in design is more important than the amount of information being displayed, would it just be easier if we all purchased smaller monitors? (Sorry, that last bit sounds ranty, but it's just meant to be rhetorical.)

- Dave

Dec 14, 2011 at 7:58 AM

hello jwanagel,

why why why? look at my project http://netoffice.codeplex.com it looks so terrible now. i need a complete re-design. you steal my time :(

DAMN IT!!!!

Dec 14, 2011 at 8:33 AM

davedev - I think one thing worth considering is lines of text much more than 100 characters wide create readability issues.  That's why newspapers and magazines always break things up into multiple columns versus having paragraphs spread across the entire page.  Most content websites have adopted the 100 character rule of thumb.  So Wikipedia expanded out does use all the horizontal space but it creates lines of text much wider than what is considered easily readable.  So that's not saying it has to be a fixed width design, but regardless of the width, the evidence is pretty strong towards keeping text width limited for readability.

Dec 14, 2011 at 8:36 AM

SebastianDotNet - Sorry about the trouble, I took a look at your homepage and it looks like its displaying improperly due to a Wiki rendering bug with the new layout.  Let me try debugging it and I should be able to fix it.

Dec 14, 2011 at 9:55 AM
Edited Dec 14, 2011 at 11:06 AM

Hello jwanagel!

The new fixed-width site design is much less usable, imho.

I've created a work item for this: Please undo fixed-width site layout

Dec 14, 2011 at 10:15 AM

Hi jwanagel,

I haven't seen the research, but I suspect that the "100 character rule" is less about causing difficulty and more about perceiving difficulty.  People probably just tend to think that a wide paragraph will be more difficult to read or is too long to read (i.e., has too much content) and so they don't read it at all.  Perhaps paragraphs are made to be more narrow in print and are broken up by images through techniques such as wrapping to entice people to continue reading.

Whatever the actual reason, I can see how CodePlex may benefit from having generally thinner paragraphs to either entice reading or to make it functionally easier.

But is there really a consistent 100 character width on all pages in CodePlex with the new design?  It seems like it's greatly reduced by impeding regions such as System Requirements, Activity, Other Downloads and Configure View.  Is the chosen constraint for the width based on browser usage data for CodePlex?  What's the most common resolution?  I'm guessing 1024 x 768.

- Dave

Dec 14, 2011 at 12:45 PM

indeed thats sucks ;/

Dec 14, 2011 at 7:32 PM
Edited Dec 14, 2011 at 9:32 PM

@jwanagel

i do some design changes now. my body is now only a little bit bigger than 1024. i can't change that.

first:
its possible to center the content *always* in the middle? currently ist only in the middle with x<1024 width. a punsihment for all users with bigger resolutions. put the content box always in the middle depending on the width and already was okay.

second: the header with the logo and so on needs the same size as the body of course. my body is little bigger than 1024 and the header has to follow them.

third: the layout changing was a big bad suprise. what comes next? next time, it's possible you give the developers a fair warning 2 weeks before? 

 

Dec 14, 2011 at 7:38 PM
Edited Dec 14, 2011 at 7:38 PM

i wonder i they have some test version, why to experiment on online release ;/

Dec 14, 2011 at 7:42 PM

Could you default to fixed width but give us a profile option to put it back the way it was?  As it is now, there's just so much wasted space on either side of the content.  It's worse on the pages like Discussions, Issue Tracker, and Source Code because of the additional box on the right which forces the content width even narrower so now you do more scrolling up and down to see everything and more space is wasted below the box on the right.  This new layout is a real step backwards.

Eric

 

Dec 15, 2011 at 11:58 AM

@jwanagel

i'm not sure currrently what i have to do. i have more than 80 example code listings, documentation, technical documentation, tutorials, faq's online and all the sites looks bad now. i can do a fix (needs 1 week of all my free time) but i dont know codeplex create an update and change the layout behaviour again or not.
please communicate what codeplex want to do or not to do in the next days/weeks. be transparent (this is what sara said all the time)

thank you
Sebastian

Dec 15, 2011 at 6:14 PM

wft, it's still not fixed, bad, bad, bad, sucks

Dec 15, 2011 at 6:55 PM

Just curious, do you guys have an actual experienced designer in the CodePlex team? I think the fixed width design can look good as long as you make another 10-20 changes, starting with removing the outer box.

Dec 16, 2011 at 11:03 AM

still not, SUCKS

Dec 16, 2011 at 5:07 PM

I hear the complaints, and fundamentally the problem is dealing with screen resolutions of different sizes and what to do about it.  The fixed width effectively shows what the site content looks like when using a normal resolution.  If it doesn't look great then that's what most of your project users have been seeing all along!  I'd like to make sure all the pages look great at normal resolutions, so it would be helpful if you provided links to pages that don't look good at normal resolutions, plus any ideas you have on what would make it better.

For what to do about large resolutions, stretching the screen without adding more content essentially just shifts whitespace around so isn't really a solution.  Adding more content but at text widths of 500 characters really isn't a good solution either.  For certain pages like the source code browser it would, but not for the other tabs.

Dec 16, 2011 at 6:06 PM

bullshit, do not create problems out of nothing, we are doomed ;/ unfortunately for whole week now

Dec 16, 2011 at 6:23 PM
Edited Dec 17, 2011 at 12:05 PM

..at least fix header, remove unneeded stuff, decrease title font so it fits in one line:

Dec 16, 2011 at 6:23 PM

The problem of the site having appearance and usability issues at different resolutions is definitely real.  For some pages the problems were at normal resolutions, for other pages it was at high resolutions, but lots of problems across the site.  Project users never seeing the pages the way the project owners created them because their resolutions were different is another real problem.  Trying to eliminate the appearance and usability issues for all pages at all resolutions was not working, and the majority of websites have adopted fixed width because of these kinds of issues.

Dec 16, 2011 at 6:31 PM
Edited Dec 17, 2011 at 9:40 AM

;

Dec 16, 2011 at 6:34 PM

@radioman - I think finding a better way of handling long titles is definitely a good suggestion, we'll spend time working on that problem.  I think it's a great example though of why we're trying something different, your project title has been word wrapping on most users displays for as long as your project has existed and you probably never even realized it was looking that way for them.  If you have other issues let us know and we'll look into them.

We apparently also need to fix the handling of large image attachments in the discussions.

Dec 16, 2011 at 6:37 PM

I think having some kind of background image for the whitespace on the sides is a really good idea.  I actually like your cloud, heart, and star image.  Do we have your permission to use it?

Dec 16, 2011 at 6:54 PM

the ONE and the ONLY design feature comparing with other sites was great(unfortunately), the good use of horizontal space, and most developers have good monitors, so it was perfect,

 users with crappy monitors are not my problem, but heirs, stop dragging their bullshit to all.

Lets assume 'most' users have crappy monitors so lets make all movies in low resolution, with crappy sound(because MOST users use bad sound cards), do i need to continue?

Yes

so imagine MOST users have cars, NO. NO, NO, lets drive with bikes, cars are now to big, the best practice is to minimize ;}

dot forget MOST users have crappy Internet bandwidth , lets minimize it to all to 28kbps, then all will have the same crappy experience and be 'happy'

=> "so we've decided to follow that best practice. All users will now see the pages the same way" => the crappy way

Dec 16, 2011 at 6:55 PM

"one microsoft way"

Dec 16, 2011 at 7:37 PM
Edited Dec 17, 2011 at 12:05 PM

spacy ;} it's about space, now i get it

Dec 17, 2011 at 12:02 AM

Hi guys!

I just made a tiny browser extension for Google Chrome that restores the original elastic layout of CodePlex website.
It's far from perfect, as it executes after each page is completely loaded causing some flicker, but it does what it was made for.

http://codeflex.codeplex.com/

Dec 17, 2011 at 9:36 AM

nice!! thanks a lot, it would be great to have it for opera too

Dec 17, 2011 at 9:46 AM

looks great ;}

Dec 17, 2011 at 10:52 AM

@radioman:

Here is a version for Opera: http://codeflex.codeplex.com/releases/view/78930#DownloadId=316110

Dec 17, 2011 at 11:39 AM
Edited Dec 17, 2011 at 12:03 PM

thanks ;} i made one for myself too

Dec 17, 2011 at 4:52 PM

i have also a vote down link on my project page now.
the example code pages are not readable with the download box on the right side.
what a nightmare...

 

Dec 19, 2011 at 7:03 PM

Could you make the fixed width a choice on the project page?

I much prefer the old layout, my screenshots in the documentation are almost unreadable now because they are smaller to fit the fixed width.

Dec 20, 2011 at 7:04 PM
Edited Dec 20, 2011 at 7:16 PM

You know, to all the naysayers of this, I must say that I agree with the mentality they're trying to go for.

The issue is, certain aspects of the website aren't suited for fixed width: namely the code browsing/viewing.  The primary reason for this is it's almost as though you wrote Visual Studio's source browser with solution navigator so that it would only take up so many pixels horizontally.

On other pages, such as the Home and Documentation, a large portion of the viewing area could be recovered if the right panes that display in every page were to be eliminated and put in some sort of a horizontal format that uses the fixed-width near the top of the page.

The same goes for the Discussion layout, such as the Reply, and Reply with quote; those, in fixed width, consume much more space than they used to since the space allotted for the entire page is now fixed.  Placing them below the text or in the box detailing the poster's information would yield a better experience.

Going fixed width is a nice idea, have everyone see the same thing, the issue is it seems you might've jumped the gun, you fixed it to a width, but didn't create a proper layout structure to fit that mentality.  You waste too much space in the current layout to make the fixed width a good idea.

Dec 21, 2011 at 6:48 AM

I agree there are some things that don't make sense to be in a fixed width format and the source code browser has been changed to be full width.

How wide should a column of text be?  I have a 24 inch monitor and text that is 20+ inches wide seems incredibly difficult to read to me.  We've looked at studies on text readability and also checked tons of websites to see what they do, and the overwhelming majority of the popular sites display columns of text at a width somewhere between 400 - 700 pixels.  All of them had extra horizontal space they could use but apparently intentionally avoided it.

I think the idea of trying to use up more of the available space on the screen is a good one, but it doesn't seem like widening text columns beyond 700 pixels wide would be the right way to do it.

Dec 21, 2011 at 8:36 AM

..what are you trying to full? I have 55 inch monitor and fixed width looks bad, seems you don't get it ;} anyway browser extensions fixes all nonsense easily

Dec 21, 2011 at 9:15 AM
Edited Dec 22, 2011 at 6:36 AM

@jwanagel

>I agree there are some things that don't make sense to be in a fixed width format
>and the source code browser has been changed to be full width.

Thanks!

>I have a 24 inch monitor and text that is 20+ inches wide seems incredibly difficult to read to me.

Please consider using multi-column layout mode:

It's supported by most modern browsers used by developers (who are the primary target audience of this site).

Other browsers can emulate it with javascript:

>I think the idea of trying to use up more of the available space on the screen is a good one,
>but it doesn't seem like widening text columns beyond 700 pixels wide would be the right way to do it.

I don't think that narrowing the whole site down to 980px is the right way to fix it either...
Many CodePlex sections would benefit from a full-width mode with no other changes whatsoever:

  • Issue tracker
  • Forum thread list
  • Code samples in documentation wiki, etc.

Have a look:

Dec 21, 2011 at 10:52 AM
Edited Dec 21, 2011 at 10:58 AM

If your concern is the readability of the website, based off of the number of characters presented, then one thing you could potentially do is find a way to make multiple columns of text possible and easily managed through the content editor.  Enabling people to utilize the space in an effective manner is one of the steps in your goal to make the website an easier place to browse.  Without such flexibility, you're basically saying that the content they have must be one column and conformed to the ~700 pixels of space, and the rest must be white-space used by the release/requirements boxes, all the space below them is just wasted.

In areas where you're displaying a list of elements, rather than utilizing just the full width, perhaps allow it to dynamically reallocate the number of columns in play, let's say you want each item to represent 600 in width, resizing the window would enable them to flow to the right and then down, just as characters wrap on a line, the content elements would wrap thusly so.

There are options out there, it's just a matter of how much effort you're willing to put forth in making them viable.

The same thing can be said about the content areas, if you wanted, you likely could find a way to marshal the text into fixed-width columns that satisfy the readability constraints you're talking about.  Utilizing javascript or canvases in some way to ensure that they dynamically adjust the display area based off of the space available; however, the fixed width nature of the page headers make sense.

Dec 21, 2011 at 10:58 AM

adding simple checkbox to enable/disable fix layout is 5min job, then you can collect statistics how many people really enabled it

Dec 21, 2011 at 11:09 AM

Hi,

I don't want multiple columns in my wikis.  I want a single column that is expanded as wide as the monitor that I purchased.  Though perhaps there are some documents that would benefit from a multi-column layout, but they would be the minority in my projects.

I'd be fine with Eric Woodruff's suggestion above to offer a profile setting that allows readers to choose which layout they'd like to see: fixed-width or stretched.  Another option could be given to authors to allow them to choose between single- or multi-column layouts.

However, offering these options would go against the apparent goal of forcing a somewhat "consistent" look across all resolutions (if you consider lots of unused whitespace on larger resolutions and unavoidable scrolling on smaller resolutions "consistent" ;).

Basically, I think it comes down to this:

As a reader, I want CodePlex to make the most of my horizontal screen real estate on every page, without restrictions.  This requires a stretched, not fixed wdith layout.

As an author, I want CodePlex to do the right thing for readers based on the wiki content that I provide.  This may require implementing automatic common sense layouts, such as proper indenting for long titles that wrap around project logos, and perhaps optionally using newspaper-style paragraphs that automatically add whitespace between characters to avoid weird wrapping.  Forcing a fixed-width layout seems like a blunt solution for problems such as these.

Ultimately, though, some readers are simply going to prefer fixed-width layouts.  As we know, jwanagel agrees.  Even if most CodePlex users agree, if a large enough percentage disagree then maybe giving readers and authors options, as mentioned above, would be the only acceptable solution; otherwise, there are always going to be users out there that are unhappy.

Furthermore, having moved to a fixed-width layout may reveal to authors that problems exist for readers with smaller resolutions, but it doesn't necessarily provide the tools that we need to fix them.  For example, how can I shorten my project title (Rxx) to prevent strange wrapping?  Must I drop the logo altogether?  As you can see, I've chosen to move the title under the logo and now it looks pretty silly.  The original placement of the title (right-aligned with respect to the logo) may have always looked strange for smaller resolutions due to wrapping, but it never looked strange for larger resolutions.  Now it looks strange for both!  And the problem may have even been solvable without moving to fixed-width by simply adjusting the word wrapping for long titles so that two lines can fit next to a 100px logo (the maximum height allowed by CodePlex).  Currently, a long title wraps below the logo when right-aligned.

- Dave

Dec 22, 2011 at 9:47 AM

RE: "any ideas about how to refine the user interface further"

- set it back to its previous state, this certainly is no improvement, layout messed up and takes lots of time to repair;
- or at least allow full css styling (eg. position: relative; seems to be blocked out)

Regards
Fwsmaster

Jan 7, 2012 at 4:58 PM

i have 54 example code pages online currently and all this sites looks unreadable now.(thanks again)
now what i have to do is to change this pages at hand but the codeplex online editor has still the full with and not the fixed with.
its very very difficult to create the perfect layout now. can you change them please?

 

Feb 29, 2012 at 7:41 PM
Edited Feb 29, 2012 at 7:45 PM

Hi jwanagel,

will you please post your current statement of direction?

What you are planning to do with the site layout? Leave fixed-width as is? Are you working on a complete redesign?
How should we write code samples in a wiki to make them compatible with a future updates of Codeplex?

jwanagel wrote:

Any feedback or thoughts is appreciated, particularly any ideas about how to refine the user interface further.

I've just figured out a great solution to the fixed-width design problem at well-known Pastebin.com website.
They simply have a button: «Toggle layout width» at the top-right site corner.

By default, they offer fixed-width design, but any user can click the button to set a cookie and opt-in for a fluid-width layout.
So even non-registered users may set this option.

Coordinator
Feb 29, 2012 at 8:08 PM

We'll be staying with the fixed width layout for the foreseeable future.

Mar 1, 2012 at 6:57 AM

how good for you ;/

Mar 5, 2012 at 7:22 AM

great stuff, I would like this to opera too. :)

Mar 5, 2012 at 9:33 AM
klomp wrote:

great stuff, I would like this to opera too. :)

If you're talking about the extension, it's already there: http://codeflex.codeplex.com/releases

May 1, 2012 at 11:58 PM

damn that download button, its bigger than the project title itself! total nonsense... hire decent designer, not colour-blind is is prefered, with experience and RESULTS, make it nice dammit...

May 18, 2012 at 10:32 AM
Edited May 18, 2012 at 10:39 AM

Reasonably big monitors have finally become the most common class of desktop computer screen, dethroning the 1024×768 resolution that was long the target for web design. — Jakob Nielsen

Source: Jakob Nielsen's Alertbox, May 7, 2012

UPD. A few more notes from the same source:

  • For web design, I've always recommended avoiding "frozen" designs and instead ensuring that your design can scale across a range of screen resolutions (especially since the really important number is the browser canvas resolution, which is often smaller than full screen, particularly on huge monitors).
  • Still, you must target something as the best case, where the design looks its finest (while still working on bigger and smaller screens). Since 2010, the core design target has been the big screen. For a few years, it will be safest to target screens in the lower range of the "big" category.
  • The old recommendation was to make your website look its best at 1024×768. The new guideline is to optimize for widescreen monitors around 1440 pixels wide.

P.S. Who the hell is Jacob Nielsen? See Wikipedia

May 18, 2012 at 11:06 AM

they don't like the truth, they love that tiny mini smaki crap..

May 18, 2012 at 12:00 PM

Hi radioman,

Please let's stick to constructive discussion :)
Codeplex guys surely don't have evil intentions whatsoever.

@jwanagel, @matthaw:

Just posted that diagram to state the obvious: 1024px pages are too narrow for developer-oriented site.
Please note that average developer has larger monitor than average internet user from that Jacob Nielsen's diagram.

May 18, 2012 at 12:14 PM

..well they decided to go with this 'fixed' thing without asking anyone, not nice thing to do ;} just saying..