Tobold's Blog
Saturday, January 31, 2009
 
Comments separation

As consequence of the blog layout discussion, I added a background color to comments, clearly separating them. Tell me if that works better for you.

On the issue of some people preferring the text to not use the whole width of the screen, I can only recommend making your browser window less wide if the text is too wide for you. Unfortunately Google Analytics tells me that my blog is read by people using anything from 320 pixel to over 2000 pixel wide screens, and telling the blog to use "all of it" is the only viable option.

[EDIT: Color changed to that of the sidebar, and added a border and padding. I also added a max-width of 1280 pixels, based on usual screen resolutions of people viewing my blog as reported by Google Analytics. Unfortunately that max-width works on my computer only when I use Firefox or Chrome, not with IE7. The preview works with IE7, but once I save it, Internet Explorer just ignores the maximum on my computer.]
Comments:
Do you like this color for comments background?
 
yes
 
Nice @ the comment colors.

Nah @ the width. Fixing it at 1024 is a very viable option as well. Ease of reading is increased when the width of the reading column is smaller. Read up on it. There's a reason why both magazines and newspapers have been doing it for years.
 
Sorry for double post. What I meant was Fixing it at max 1024, for elastic for lower widths is viable and doable as well.
 
Hmm.. I don't mind the color itself, but the comment boxes could use some padding on the left side. And the transition from the comment box color to the white background is a bit too abrupt. Perhaps the "posted by" line could use a slightly lighter color. That same color could be used to make a very subtle border around the comment itself.
 
Colour works nicely, Tobold.
 
I think a alternate colour/no colour scheme would work - it would also be a good thing that Tobold comments are highlighted in a different way(as post author).
 
Oh god. At the very least, add some type of border. At the moment, blue rectangles on top of each other with white stripes in the middle look terrible. If you can't manage some borders, I would rather you use a solid color for the whole section than have ugly stripes delineate each comment.

A little bit of padding between the text and edges wouldn't hurt either.
 
Hate the colour Tobold. Baby Blue just doesn't do it for me. As a consequence I find it more distracting than the normal white page.
 
I like having a visual change that distinguishes the comments from the "Tobold" text.

I'll echo Pzychotix: it would be good to put some more padding on each comment box, and wouldn't hurt to have a border either.

For an example of what padding can do for you, see http://www.resto4life.com/2009/01/29/blue-mana-regen-to-be-updated-or-redesigned/
It means that the comment boxes become slightly larger than the text itself, which is visually pleasing.
 
I like the blue background to set off comments. I find it easier to read. Perhaps making the white main background ivory or off white might help those who hate the white stripes. Or maybe not. Visual layout once you get past the basics (no black backgrounds with dark brown or navy letters, please!) the rest is personal preference in my opinion. Tobold's visual "look" is a distinctive signature. Once you settle on something that folks can see, the rest is your own style and helps define your blog.

Tobold's style is bare bones, focusing on what he is saying, not fancy layouts. Once folks can read something, stop there. It's so you, baby!
 
I don't like the colour at all. Why not try a light gray instead of turquoise?
 
The color is OK, it might look a bit more tight if the color used was, say, the color on the little bars to the left and right of your blog. Can you match it?
 
i don't really like the blue boxes. If possible, I'd recommend just sticking a line to separate the comments section, and/or, as other people have said, using some lines (or put each comment in it's own box with a border but a color similar to white on the inside.) to separate the comments.
 
I like the comment background
 
The color isn't the greatest. I echo rulez and go for a light gray instead of the blue. Otherwise highlighting the comments is fine.
 
From a graphic design point of view, the blue box is way too dark when compared to the white overall, and simply doesn't look right. Try to use the same color you have on the sidebar, it may look better.

However, the full width text is simply bad design. It makes really hard to follow the text lines, and you constantly have to check if you're reading the correct line. Google it a little and you can probably dig up a dozen studies on the subject.

BTW, people reading on 320 pixel screens are doing it from cellphones, in which case the non-fixed width makes even harder for them, since the page doesn't fix itself on a larger, zoom-able format, but tries to conform to their screen size, in which your sidebar gets too large.

The "correct", or should I say more standard way to deal is making the site fixed-width to the most common screen resolution. If most of your users have 1024x768, then fix to that; if they use 800x600, go for that format. But trying to accommodate to all is simply a bad idea, because what you get is something that works bad on all cases.
 
I also think the blue box is too dark and would prefer the sidebar color.
 
The "correct", or should I say more standard way to deal is making the site fixed-width to the most common screen resolution.
I'm glad that you rephrased that sentence. While you can make fixed-width pages with HTML, it doesn't mean that you should. HTML is designed to be viewed by a wide variety of programs, devices, resolutions and DPI, and trying to force it not to act according to it's primary characteristic is counterproductive at best. Properly used HTML doesn't need to be zoomed, and for good reason. Reading lines wider than the screen is very slow, because you need to reposition the viewport all the time. Allowing the browser to reflow the content and letting the user scroll vertically is much more user-friendly.

That said.. there is a way to get the best of both worlds. Namely, the max-width property, which does what it says on the tin. It prevents an element from growing wider than the limit, but avoids horizontal scrolling when the available viewport is narrower than the limit.
 
@Shalkis: yes, HTML (the language) was designed to allow this flexibility. However, in practice this is hardly ever worth the trouble. Since is already so much problem to make it look okay on different browsers, trying to make a page that looks fine on different resolutions just becomes a nightmare.

Of course, for a simple and clean design such as the one here on Tobold's, using max-width should be a good enough compromise. I still maintain that allowing the layout to resize all the way to 320px is bad practice, if you don't adapt the layout to not display things such as sidebars, so using also a min-width is essential.

Not that it would be necessary here, since I just noticed that the Blogger bar on the top of the page kinda locks the layout around 770 pixels, so you'll need to zoom or scroll for any resolutions under 800x600 anyway.
 
@Tobold: yeah, the IE thing is a known bug. Try adding this:

max-width:1280;
width: expression(this.width > 1280 ? 1280: true);

or check this link for more info: http://phydeaux3.blogspot.com/2006/01/max-width-and-faking-it-for-ie.html
 
Oh, and sorry for the comment spam, but the background does look a lot better now. Thanks :)
 
Tried, but couldn't get the fake max-width to work either.
 
I like the new format, Tobold. The backgrounds seperating comments makes it easier to read individual comments instead of briefly wondering where one began and one ended. I've been working on getting mine fixed as well, but due to me using quite a bit of background images and NOT being savvy with HTML, I'm going to have to mug an webpage designer and force them to work for me.

Also a side note, if anyone reads my blog it is down due to some issue with Google and custom domains. =( *Is without a home*
 
I also think this comment section works pretty well also.

(Now we'll just wait for the inevitable "First people tell me what to write, than the insult my layout" angry blog post. :) )
 
@Dillon: don't see why Tobold would make an angry post about the comments made here; he asked for our opinions on the change, and most people were okay with it. Me and a few others made some criticism, but all on a constructive manner, as far as I can see. I didn't notice any comment that could offend him, and he always seems to be very reasonable about this.

Sorry if I don't praise as much as I nitpick, it's a personal thing: I don't see how I can help anyone by simply agreeing and cheering, so if I'm not adding anything to the conversation, I just keep quiet.

@Tobold: which brings me to just another small observation. It seems that on your last edit to the styles you made a small typo: your code now reads "max-width:10280px;". The extra zero is making the page full width again.

Cheers
 
Dillon: don't see why Tobold would make an angry post about the comments made here; he asked for our opinions on the change, and most people were okay with it. Me and a few others made some criticism, but all on a constructive manner, as far as I can see. I didn't notice any comment that could offend him, and he always seems to be very reasonable about this.

i was just goofing around there (hence the smiley at the end, though the smilies aren't really obvious in these comments, and are hard to notice.)
 
Now we'll just wait for the inevitable "First people tell me what to write, than the insult my layout" angry blog post. :)

Well, I would delete all comments saying "stop being self-centered and writing about your blog". But I'm grateful about the constructive criticism that lead to an improvement of my blog layout.

It seems that on your last edit to the styles you made a small typo: your code now reads "max-width:10280px;". The extra zero is making the page full width again.

Yeah, I was using the extra zero to see how the page looked with and without max-width, and then forgot to delete it at the end. Thanks for noticing, fixed it.
 
Now this is a layout I can agree with.
 
I think the comments section looks much better now and more readable. Good job Tobold :)
 
Post a Comment

Links to this post:

Create a Link



<< Home
Newer›  ‹Older

  Powered by Blogger   Free Page Rank Tool