Login or Sign Up to become a member!
LessThanDot Sit Logo

LessThanDot

Web Developer

Less Than Dot is a community of passionate IT professionals and enthusiasts dedicated to sharing technical knowledge, experience, and assistance. Inside you will find reference materials, interesting technical discussions, and expert tips and commentary. Once you register for an account you will have immediate access to the forums and all past articles and commentaries.

LTD Social Sitings

Lessthandot twitter Lessthandot Linkedin Lessthandot friendfeed Lessthandot facebook Lessthandot rss

Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.

Your profile

Authors

Search

XML Feeds

Google Ads

« LTD Re-Design Tidbit #2Intranet Makeover: Virtual Web Sites with Custom DNS Names »
comments
Rate Post:
submit to reddit Digg!FacebookDotnetkicks

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.

LTD Tidbit Image

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.

LTD Tidbit Image

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

About the Author

User bio imageEli has worked in Manufacturing, University and Software Development environments. His skills include application and web development with a number of languages and architectures, database programming and basic administration, manufacturing systems architecture and standards, business analysis, and some basic skills with hardware and systems administration. His industry interests include Lean Manufacturing, Lean Enterprise, process improvement, and Enterprise Architecture.
Social SitingsTwitterFacebookLinkedInHomePagedeliciousLTD RSS Feed
554 views
submit to reddit Digg!FacebookDotnetkicks

Comments and Feedback

2 comments

Comment from: SQLDenis [Member] Email
I really like the new design..seems more modern and more pleasing on the eye (at least for me)

good job
10/26/09 @ 18:04
Comment from: traingamer [Member] Email
*****
(In the voice of frankenstein's monster:)

50 font-family declarations ... bad.
2 font-family declarations ... good!
10/27/09 @ 08:04

Leave a comment


Your email address will not be revealed on this site.

Your URL will be displayed.
(Line breaks become <br />)
(Name, email & website)
(Allow users to contact you through a message form (your email will not be revealed.)