Feedback Welcome on the new look and feel

Technocrat

Feedback Welcome on the new look and feel

Kai Howells

Sat May 10 01:54:00 -0700 2008

About+Technocrat.net

manage

I've reached the stage where I'm pretty happy with the direction the new stylesheet is going. Please provide feedback in the comments to this story on your impressions of the new.technocrat.net style. (Editor: I have tweaked Kai's style, and am trying one experiment, so problems are not necessarily Kai's fault. - Bruce)

(Fixed the bad link -- again. Alan)

Looking over the site now, it's looking like some of the elements in each story will need to move a couple of pixels to the left - when I was developing it, they all seemed to line up OK, so I'll have to go over the css line by line and see if anything's changed in the css -> sass -> css conversions. From a quick look, it seems to be the same, so I'll have to look into it in more detail.

Other than that, there are a couple of font size issues I'm looking at and we'll hopefully have the option to supply a sans serif or a serif font version (or a combo). I've left the bulk of the text as a serif font, and kept all the headlines and other "snippets" in a sans serif font.

If we're going to have user-selectable CSS, I might go ahead and develop some different colour themes too. Is this something that readers want, or would font choice be enough?

My aim so far has been to get the entire site looking as it does - testing first in Safari (as that's the browser I use 99% of the time) and then in Firefox. Once I reach a milestone for the design (which I think is pretty close) then IE will also be tested and tweaked if necessary/possible.

I would love to see some stats for the site to know the breakdown of browsers used by our visitors - I'd imagine there will be a higher proportion of Firefox use as compared to the general population, but I've got no idea how much - knowing what browsers are in use will help focus the tweaking of the CSS to ensure that there's a good return on my investment in time.

I'm not a web designer, but I am a regular reader, and sometimes contributor, to this site and I really enjoy the community that's being built here. I'm definitely not a programmer and probably never will be so getting things here looking good is something that I'm going to be far better at.

As it stands, the site's design is 100% CSS - there are no images used at all - and I gather Bruce wants to keep it this way. Does anyone really want an image-based layout?

Feedback Welcome on the new look and feel

TheBashar

Sat May 10 02:45:06 -0700 2008
manage

Much better. The old scheme made my eyes bleed periodically. This one is surprisingly soothing. Nice.

Feedback Welcome on the new look and feel

Kai Howells

Sat May 10 02:57:32 -0700 2008
manage

Thank you! I've aimed to keep this one looking clean, smooth and professional. Something that you will hopefully not get tired of looking at for quite some time

I would have liked to throw in a rounded corner or two just to soften things up a bit, but didn't want to use images in the CSS as up until now the entire site has been without any.

I have to fix the two pixels down the left-hand side of the stories, and then it's close to v1.0.

Feedback Welcome on the new look and feel

Uncle Entity

Sat May 10 06:51:39 -0700 2008
manage

That green background gives me a headache, maybe tone it down a bit...

MSIE's CSS support...

Kai Howells

Sat May 10 03:16:15 -0700 2008
manage

Awww crap. I've just checked things in IE 7, and it looks like a bag of balls. The nice thin dotted borders are thick, the divs are all over the place and, frankly, it makes Baby Jebus cry...

I'd love to see some stats to know just how important IE support is :D

IE

zogger

Sat May 10 06:30:29 -0700 2008
manage

I don't remember it exactly, but last time I looked at the stats when they were up and working we still had a fair representation for IE..which IE I don't recall either. Sorry, best I can do right now.

MSIE's CSS support...

rubycodez

Sat May 10 07:48:07 -0700 2008
manage

just as test booted up windows xp drive and looked with IE 6 too; everything is misaligned

but looks great n Firefox and Konqueror.

Just fired up daughter's Mac OSX Tiger and looks fine in Safari.

MSIE's CSS support...

Bruce Perens

Sat May 10 08:03:26 -0700 2008
manage

30 to 40% of viewers are using IE. Many viewers arrive here for the first time from google search, and we'd like them to become regular visitors.

blackberry support...

Uncle Entity

Sat May 10 15:02:50 -0700 2008
manage

Tested it in the blackberry and there is zero style.

Also can't login since the standard browser doesn't support iframes or frames at all AFAICT.

blackberry support...

Bruce Perens

Sat May 10 15:08:27 -0700 2008
manage

I'll have to do something for mobile users. Rails 2.0 makes that pretty easy. I guess it doesn't support javascript either?

blackberry support...

Bruce Perens

Sat May 10 19:01:38 -0700 2008
manage

I added a fall-back for systems without frames. I haven't been able to test it.

blackberry support...

Uncle Entity

Sat May 10 21:15:21 -0700 2008
manage

OK, let's me login now on the blackberry.

Had to turn on javascript, I keep it off because there are a surprising number of sites that host phone killer javascript ads. I would think that once it gets it cookie I should be able to turn it back off.

Still no style though...

blackberry support...

Uncle Entity

Sat May 10 21:20:37 -0700 2008
manage

Scratch the javascript -- just didn't notice the buttons that are there with it disabled.

blackberry support...

Uncle Entity

Sun May 11 00:15:53 -0700 2008
manage

Tried it with Opera Mini -- frames and login work fine. Doesn't do too much css (thread indenting and fancy lines)but I think that's a 'feature' of the broser.

Feedback Welcome on the new look and feel

Roy Schestowitz

Sat May 10 05:21:32 -0700 2008
manage

Contrast in subheading (date, poster) could use a tweak.

Feedback Welcome on the new look and feel

Kai Howells

Sat May 10 05:34:32 -0700 2008
manage

Agreed. I'm going to make the type 1 or 2 points bigger, maybe make it a bit darker too.

Feedback Welcome on the new look and feel

Michael Smith

Sat May 10 06:51:20 -0700 2008
manage

I don't understand the distinction between the title and redundantTitle classes. I am not sure that this conveys any useful information to the reader.

RedundantTitle

Bruce Perens

Sat May 10 07:22:47 -0700 2008
manage

RedundantTitle means that title == parent.title. Thus, the stylist doesn't have to waste space on it. You can cut it out entirely, make it smaller, whatever. It might thus provide an incentive for the poster to write a title.

Oops, this wasn't documented until now.

As an experiment, I have turned display of redundantTitle off in the style-sheet. It's not what you're used to. Comments?

RedundantTitle

Bruce Perens

Sat May 10 10:26:01 -0700 2008
manage

I have turned that back off until we can change the style-sheet to fit it. Rather than a negative margin on attributes, we need to set the margin small on title and attributes. Also, it's confusing in the stylesheet that half the style for the title is under h2, rather than title.

Feedback Welcome on the new look and feel

Champs

Sat May 10 07:03:12 -0700 2008
manage

I have no usability research to back this up, but I only use grayscale for long blocks of text, and reserve "colored" backgrounds for short notices and headings to draw/lead the eye. I feel slightly disoriented with comments on an admittedly-subtle green background because it seems like everything on the page wants my attention.

As for testing with Safari, I sure hope Document Inspector is coming along. Thus far, I've only heard positive things about DI, compared with Firefox + Firebug, has been with more recent Webkit builds. Apparently, even Opera is catching up in this area.

Feedback Welcome on the new look and feel

berck

Sat May 10 07:22:40 -0700 2008
manage

Too much color. I really don't like the green background for body text. Suggest white or grey. Otherwise, it's just fine.

Feedback

D. Hensley

Sat May 10 07:31:09 -0700 2008
manage

It looks reasonably consistent in Konqueror, Opera, Epiphany, and Firefox (I used the default CSS settings in Konqueror and Epiphany, rather then the custom settings of my own).
I haven't owned/used a Windows box in many years, so I have no idea about I.E., Safari you have tested (and runs much of the Konqueror core anyway --KHTML and KJS, WebCore, etc.).
A strong yes to alternate color themes, as well as fonts, for those that can not control this behavior to suit themselves.
A strong no to an image based layout.
All in all, a good job. I think most users will be happy with the changes, and proposed changes.
Good luck with I.E... I suspect that tweak, while maintaining the rest, may be some work.
Don.

Feedback Welcome on the new look and feel

Bruce Perens

Sat May 10 07:49:54 -0700 2008
manage

I nixed the body font choice and the italic style for blockquote. Replies get in blockquote so that they are indented when viewed without a style sheet, so you have to surround the style for blockquote with the body class for it to work correctly. Hm, is it too confusing to have a class with the same name as an element used elsewhere?

If you style blockquotes to be italic, you should style em and i within them so that they will be differentiated from other text. I know italic is the print convention, but perhaps a background color change makes more sense for the web.

There seems to be significant agreement that there is too much color behind block text. I can listen to others but not trust my eye-judgement, as I'm red-green colorblind and colors do not stand out for me in the same was as they do for others. Try gray or beige?

Read More

Bruce Perens

Sat May 10 08:05:55 -0700 2008
manage

The Read More link needs to be bold, or larger, or in some way grab more attention. It's a "money" link. That 0.4 cents per page-view helps us stay in business.

thanks and maybe a nit

Thomas Lord

Sat May 10 09:02:16 -0700 2008
manage

It looks lovely and I join the others in thanking you.

I have one little criticism. I'm not sure what elements and classes are in use so I hope this description is clear enough:

Nested replies for which a comment is not displayed begin with a specially colored box containing the "by" line and time-stamp. "By Joe Cool Sat May blah blah blah ..."

The reply itself is given a dotted line border.

To my eyes, there are two problems:

First, the "by" line extends all the way up so that it is one pixel below the dotted line of the reply above it. That looks crowded and almost like it was a mistake.

Second, the dotted line border around a title-less reply reaches in hight only up to the baseline of the "by" line. To my eyes, that interferes with the "unity" of the "by" line with the body. The dotted line just looks misaligned there.

The two problems combine and make it look even more like the "by" line is extending up so far by mistake.

-t

thanks and maybe a nit

Bruce Perens

Sat May 10 09:54:25 -0700 2008
manage

I probably did this to Kai's style by turning off the title display on same-title comments. I think I need to change the class hierarchy so that redundantTitle surrounds title and attributes, so that both cases (redundant and not redundant) can be laid out better.

thanks and maybe a nit

Bruce Perens

Sat May 10 10:27:25 -0700 2008
manage

I backed my change out until we can mess with the margins for title and attributes.

thanks and maybe a nit

Thomas Lord

Sat May 10 12:56:11 -0700 2008
manage

Cool. Well, bummer about the bug but cool.

So, while we're thinking about "pixel perfect" there's another one:

On the front page (at least on Firefox) the "read more" blocks extend some tiny number of pixels below the lighter blue comment box which, again, looks like a mistake.

On the aesthetic front:

There are two many one-pixel lines between the front page titles and front page bylines. There may be a bug in there, too because the display is inconsistent. For example, as of this writing, the article "An Alternative Tank Ballast..." has one fewer line in that part of the display.

-t

Feedback Welcome on the new look and feel

ah.clem

Sat May 10 09:58:07 -0700 2008
manage

I prefer the narrow column style - right now the main page fills the entire browser width. Following a link provides a narrower text column. It would be nice if that was the case on the main page.

The colors are ok, I'd prefer a white background - a black on white, non-busy font scans quicker for me on white background than color.

I use Firefox and I now have this HUGE default font I'm replying with - and what is it, Ariel, or something like that? I think the old font size and style was fine - the reply page seems a bit "Fisher-Pricey" now. Maybe this can be customised somewhere?

(update - I just found the TinyMCE (simple) interface option at the bottom of the page - back to normal now, thanks.)

Frankly, the old site interface seemed fine to me - it accomplished it's purpose without getting in the way or being too busy (koff, koff, slashdot, koff) so I'm not certain why the update.

Sorry to sound like a curmudgeon, I like technocrat, not bitching about it, but you did ask. The narrow column thing is the most important - I just I find it faster to skim down than across. Different reading styles, I guess, but on previewing this, it's really getting annoying. Can I set it to a narrower column?

ah.clem

Feedback Welcome on the new look and feel

Bruce Perens

Sat May 10 10:32:30 -0700 2008
manage

It's interesting that the narrow column bugs you, even in the preview screen. I guess screens are getting too wide - what size is yours?

I can do something about that, yes. I'm still thinking what to do with the front page. It doesn't need the story_list the way the comment pages do, you're already looking at the stories. So, I could lose the right column and keep the left, or just move the advertising up in the right column.

Thanks

Bruce

Feedback Welcome on the new look and feel

ah.clem

Mon May 12 20:49:57 -0700 2008
manage

I have an old laptop (14.1 diag) that I use a lot of the time, and at the office I use dual 19" diag. but I keep the browser in one screen.

It's not the narrow that bugs me, it's the wide. Maybe I mis-typed that, or maybe you did.

Anyway, I think it's the way I scan text that makes the wide text problematic. I scan down quickly in a backwards "S" motion and "chunk" the text, with very small left to right eye motions. Wider text line means I have to use wider eye motions - slowing down the top to bottom scan . As I said, it might just be something I do. Actually, the best width for me with the screen about an arms length away from my head is about 7" - 7.5" - many times I have to reduce the browser width if I have a lot of text to read.

ah.clem

Browsershots.org

Bruce Perens

Sat May 10 11:19:53 -0700 2008
manage

A reader emailed me this:

Mozilla Seamonkey is based upon the FireFox engine, so not sure why there is trouble. But the new site does not render well at all. I'm using Seamonkey in windows and fedora linux, so pretty standard systems. On the new site, some font's do not show up as sans-serif, not sure on purpose or not. Left to right the site is very compressed on my lowly 800x600 screen. Just does not look very good. I can live with it, but if you are putting effort into layout perhaps it is worth a look. For a quick cross browser look give http://browsershots.org/ a try. I find it works pretty well.

Feedback Welcome on the new look and feel

Bruce Perens

Sat May 10 11:45:38 -0700 2008
manage

Here's a zip file of 37 screen shots of our front page in different browsers.

Lighten up

archanoid

Sat May 10 12:03:36 -0700 2008
manage

Well, I realize you want to have your own look and not mimic any other sites, but I must say I find Groklaw terribly easy on the eyes. I light shade of "tan" is a much better background than the current olive shade in the background you've got here. Overall, it's a bit dark for my liking. Lighten it up a bit.

Otherwise, well done.

Feedback Welcome on the new look and feel

Bhima

Sat May 10 13:15:36 -0700 2008
manage

It looks different when I am logged in... better I suppose.

Also the comment count on the main page is still wrong.

how does one go about making their own style sheet?

Feedback Welcome on the new look and feel

Bruce Perens

Sat May 10 13:24:00 -0700 2008
manage

how does one go about making their own style sheet?

Try reading the existing one, or the SASS version, which is our "source code", and see if you can make sense of it along with this manual. Then save a page from the site, edit it to load your stylesheet instead of ours (we'll make this a site feature eventually), and view it. If you get something you like. email it to bruce at perens dot com.

Feedback Welcome on the new look and feel

Kai Howells

Tue May 13 15:55:24 -0700 2008
manage

I'm still working on this - things at work have been very busy this week, and I'm going to be interstate later this week, so won't get a chance to do much until the weekend.
I've got some changes I've made over the past couple of days that are improving the look, but haven't yet submitted them - hopefully we'll soon have the user submitted CSS feature and I can test the stylesheet in a "live" environment a lot more easier...