While several of our members are studiously assisting us by using (and abusing) the beta version of the new layout, I have to admit that I am still hard at work. Well, actually, no, I’m sitting on the couch with the netbook and a beer trying to ensure the pillows don’t start floating away, but I am thinking hard.

Honest.

I Like Our Layout

Don’t misunderstand, I do like our current design and I didn’t start this process because I was tired of the design. What was bothering me the most was seeing all of the good articles we were posting and all the statistics from people that could bear to read our blogs section and knowing that there probably just as many who weren’t bothering (like myself) simply because of the layout.

Well, and I really disliked how we implemented the layout for the blogs. But lets pretend it was just the higher, less selfish purpose that motivated me.

Layout Changes for Readability

The first major change was to constrain the width of the blogs to allow a more comfortable reading experience. I, like many others, have gotten used to widescreen monitors and found reading unconstrained paragraphs on a 16:9 or 16:10 monitor to be tough. In keeping with the reported findings from other blogs and websites (such as this article), we settled on a more defined and consistently thinner area for the article text. We used a semi-fluid layout to provide a good reading experience to smaller resolutions (1024x—) but take advantage of a little additional space for larger resolutions (1280+x—). The reason we call this semi-fluid is that we only shrink and expand within the widths listed above, preventing the page from wrapping too much text or growing uncomfortably wide.

While the final measurements are being tested right now by our beta members, we feel the combination of constraints on the width and fluid layout should make for a cleaner and less annoying reading experience.

In Technical-ese? We took advantage of the fact that most of you will finally be off of IE6 and that let us use some of the newer CSS attributes that Microsoft has finally started to implement, such as min-width and max-width. There may also be a little JQuery trickery involved by the time we launch to make the margins even more fluidy (keep your scrabble rules to yourself), but this will be dependent on beta feedback.

(Late Addition: There is indeed some jquery magic now for those of you using the 8 year old browser. Feel free to buy me a beer to make up for that evening of my life…)

Color and Font Changes

While black text on a light, slate-blue background is easy enough to read, it doesn’t provide a consistent experience when the various headers (H1, H2, titles, etc) do not follow a clear relationship in size, font, decoration or color. To provide a clear focal area, the greyish blue has been replaced with a white background. Elements of grey and a greyish green remain, but these are used as the background for secondary areas, such as the sidebar or page background.

The close-to-50 font family declarations have been replaced by approximately 2 and standard definitions for links, headers, and various other elements were created to replace sections that often had definitions composed of accretion from 3 or 4 areas of the site. Sub-sites now enhance the standards when necessary instead of redefining them.

In Beer-ese? We take big-big CSS files, whack them with a delete button, and make teeny new CSS files. All better. (Except for phpBB, there is no axe large enough)

And more…

There are more changes still, the next tidbit entry will cover a little more about the changes we made to the major page elements (yawn) and social networking (less-yawn).