Notice the new theme? Things weren’t loading well yesterday, so I decided I should just revamp the whole blog. I picked out a new theme and tweaked it. I wanted these features.
- A wide center panel to show large images.
- Three columns, each at least 160 px wide so eventually, I can shove in various ads, feed buttons, links etc. I like them even wider so aging eyes can increase the font size and still read the content. (I use the ad money to pay the server charges. It worked at my knitting blog; it’s might work here too. )
- Recent comments / trackbacks showing.
- An edit function so users can edit their comments for five minutes after they comment.
- A fairly large comment entry box.
- Comment numbers so people can cite previous comments.
- Links to commenters’ web sites with “follows” to those who comment frequently. (I need to tweak this.)
- Ensure images in previous posts continue to float the way I intended!
- Include html tips for commenters. (I need to get this implemented.)
So far I have most of that implemented. But, I’m also taking suggestion (provided they aren’t to difficult to implement.)
Appearance Issues
One difficulty with web sites is they look different on everyone’s screen.
Commenter ‘fieldnorth’ kindly posted a link to http://browsershots.org/ which lets me examine screen shots from a wide range of browsers. I know my theme is fairly wide– to accomodate large images. But, at least it’s not positively broken on any I’ve examined so far. But there is no substitute for asking viewers whether or not they can read the blog!
So, let me know if it looks dramatically different on your screen. To help me fix problems, do be specific if possible. Here’s what the blog looks like on my screen.
For today, I have various “containers” outlined– this helps me identify the source of problems. They’ll go away in a few days. But, it would be great if you could tell me if you see text flowing outside those boxes. Problems with CSS can result in odd behavior– like missing sidebars, missing content, text flowing outside the boxes etc. If you see any obvious glitches, describe them– and tell me what browser you are using!
Lucia.
I’m using Firefox 2.6.0.16 and can see everything except, as you have already mentioned. the end of the tags over on the right.
Links seem to be coming up ok also
Thanks Dave. I think I have a contact page up and running. Now, to find the quicktags so people can get their html in. . .
I use IE 6. The blue/purple line down the left of your screen shot sits sits very near to edge of my browswer window. Everything to the left of that line isn’t evident to me. Those graphics, I can’t see down the left, are also missing from the right, where another purple/blue line is visible to me, but missing from your screen shot.
The visual effect is text that starts at the edge of the browswer window. While technically readable, I struggle with flashbacks of nuns with rulers lecturing me about writing in the margins.
Raphael–
Please, no Nun flashbacks!!! 🙂
The lines themselves will go away. But if the text is slammed up at the edge of your screen, I think I’ll need to make the whole format a little narrower. This theme is centered, so the bright blue box that runs all the way to the very top always “centers”. (Maybe I can override the centering. I may need to experiment by installing a “practice” blog! It’s easy to do.)
I am using IE 7 and the margins are really crowded. I lose portions of words on the left side and about 1/2 the column on the right. Same at home and work.
Lucia –
Generally like the new format, but I am having the same margin problems a lot of the other commenters are having, whether I use IE or Firefox. The text is way to close to the right margin and I lose most of the third column off the left of my screen. I would suggest making the first column slightly narrower.
Bob
Looks fine on Firefox 3.0, other than the containers being visible, of course.
Actually, I just noticed that the “My Blog’s RealRank” box is down below the bottom black box on my browser.
Need margin on left side and constrain window to 120-140 pixels wide. My normal viewing on a 24″ monitor (browser about 1/2 width of screen, cut off the right side. Just my 2¢
The following are my hopefully constructive observations. At the end of the day, you have to make your site look like you want it — not like I want it 🙂
My Firefox 3.0 1280×800 (widescreen) looks much like yours. Like yours, text in most areas is right up against the left box outlines — which makes it harder to read and looks not so good. Suggest shrink text line lengths so there is a clear 1 or 2 character minimum space between ends of lines and the outline boxes.
Also, my text (nominally the default) seems finer than the text in your image. Combined with the medium-light blue (?) background, the contrast makes reading a bit harder for my 20/30 vision. So, thicker text would be better — and/or a lighter background . For example, even the “fine print” comment date text is more readable to me than the larger comment text.
FWIW, my eyes are most comfortable with light (white) text on a very dark background — only a few sites like that.
Hey, thanks for the edit feature. Whoops, my monitor brightness was not set right. The contrast is better now.
Whoops, sorry. My monitor brightness was not set right. Now the comment section is more readable. However, the top section (where you write about the topic) is still dark on medium (though better). I still could use slightly thicker text — but your site is like a lot of others, so I can live with it.
I was having the same problem as many of the above commentators until I increased the resolution to 1280 x 720. The template is too wide to display properly at anything less than 1280 but the browser (Firefox) tries its best to fit a forty inch waist into thirty two inch jeans.
I find fixed width pages hard to read because my IE window is always either too big or too small. You should be able to make the column on the right fixed width but let the main column expand to fill the available width.
Speaking about fixed width. I was under the impression that the standard for web pages was 800×600 if fixed. and the standard graphic maximum on a normal page was 640×480 (click for larger version). People with small monitors or bad eyes have to resort to the 800×600 to get large enough text to read.
On the other hand, the 24″ widescreen LCD monitors work best at 1920×1200 which is their native resolution.
I have a 24″ widescreen CRT, so can set any resolution. But, I surf at 1280×800 or 1440×900 and do not switch resolutions for a site (I routinely visit ~15+ sites each morning and evening — like reading the newspaper). Yesterday, I was having a “bad eye day” and used 1280×800. Today is a “good eye day”; so, I am using 1440×900. I have used 1920×1200. The upshot is: Even I cannot be sure what resolution is “best” for me on a given day (much less be sure what is best for others).
The wide range of screen resolutions visitors might use (800×600 to 1920×1200) makes adjustable width sensible.
All this personal opinion and personal usage data in hopes it is helpful when making theme decisions. Again, make the site you like and “they will come”.
Comment editing does not work for me, yet.
Allen–
There are standard widths. The difficulty is there are several, and various people read the blog different ways. I set up a test blog for formatting, and I’m going to use the “climate standard” width. The width is going to match Real Climate, Watts, Tamino etc.
On font size. Some people like it small; some like it large.
Firefox and most browsers permit the user to set a minimum font size for display. I set that to 15 px when browsing. People browsing should be aware of this and set it! The blog owner can also set a minimum. I’m going to check the CSS style sheet and make sure the minimum font is 12 px. That way, people who don’t know they can reset the size won’t run across something in 7px!
On adjustable– People have strong preferences on this. Unfortunately, it seems to be 50%-50%. I like adjustable– but it also means I need to find a theme that includes the other features I like. So… this go around, I’m using fixed.
Today, I’ll be making this fixed width. The “rulers” on the containers will go. I’ll try to figure out what’s wrong with the editing of comments.
1) I thought that the move from a rather warm orange to a cooler teal theme was just an unconscious affirmation of recent global climate data trends.
2) Firefox is not fitting whole page on the screen for me on my old rectangular monitor. Otherwise it is a nice layout.
With Mozilla Firefox the left edge of your text starts right up against the border of the browser window which makes it hard to read. It’s better for the comments – they have a bit of a margin.
I can edit my comments.
I’s using Firefox 2.0.0.16. The text at the top and on the right is smack up against the lines to the left with no space. Also the text touches the top line. But that is not true in the comment section, there looks to be two spaces before the comment text begins. Maybe lightening the background blue behind the text for the old geezers. I’ve never been crazy about this font, I prefer Times Roman or something similar.
This version looks clean and readable.
Allen– I increased the font size– the style sheet suggested 84% of whatever is “normal”. I chanted that to 100%. To take care of the background colors, I just dumped the images. I’ll get new ones later.
I am going to look for a pretty image– but after I stick it in, I’m going to make sure the blog loads with the content always showing even on small screens. Plus, I’m going to make this narrower.
So, you’ll be seeing more changes. I just need to locate some “stuff”, run it on the “test blog” I installed, and then port it over here.
Lucia, I’m using IE 6. For me, the text is jammed up againt the left and, on some comment threads at least, I cannot even see the first five-six characters that I type.
I’m using the latest Safari on 1440×900 screen. Looks pretty good except for the missing left margin. Comments start one character from left. Readable, but, odd.
Opera looks the same.
Firefox looks the same.
Looks like you got it pretty much straight now.
I miss the orange weiner dog. Otherwise it’s more readable.
The one thing that bothers me is that the entry headings appear compressed vertically when there is more than one line. That’s on Safari
BarryW– I’ll take a look at the “H2” level tags on Monday. I think I have a mostly functioning theme now. I still need to add some stuff. But, at least thing didn’t look broken at the blog that lets me check how the screen looks on a bunch of browsers. (‘Broken’ is, btw, a truly unreadable state!)
This design is intended for 1024 or wider browsers. I looked checked the display with 800 wide screens, and usually the right column was cut off– so I’m not going to put anything important over there! I’m going to look into whether I can detect the screenwidth and select a different style sheet dynamically. My only concern is screwing up caching which would lead to down time if I got a lot of traffic.
Ah, the orange weiner dog returns. All is right with the world again. Thanks.
now it looks great on IE7. congrats.
Re 4889
The technical term for what I was complaining about is “leading” or “line spacing”. The descenders on letters such as ‘y’ or ‘g’ are below the tops of the next line. Not unreadable, but not elegant to my eyes. Had to look that up so I looked at least half knowledgeable.
Lucia-
Your latest post (RSS MSU Temperature Anomaly) shows up in my rss reader but when I go to the page, I get “Page could not be found – Error 404”.
One small suggestion… the link to comments follows posts, which makes sense, but the link is below the line and inside the box containing your next post. You might wish to consider raising the link to comments above the line that separates your posts. The post and related comment link would then be in the same box.
I do hope you realize that given the quality of content and discussion here, you could post on the side of a cardboard box with a half-dry magic marker and not chase away a single reader. The new look is great but that’s not why I drop by to read. Content trumps bells and whistles every time.
Thanks HR– That was a good idea. The link to the “comments” is now above the line separating posts. That’s much clearer.
I agree that content is more important that bells and whistles. I don’t know about other people, but I don’t visit blogs to see beautiful design. Still, it’s always worth making sure a blog is readable! I figure the best way to find out what my demographic finds readable is to ask.
Lucia (4914):
Kaizen, eh?
lucia,
I mostly like the new theme. I have a couple of minor suggestions that are probably just personal preference:
1. A little more white space between paragraphs would help readability;
2. I prefer a different colour and/or underline for URLs (instead of bold);
3. A non-bold font for blockquotes will make it easier to add emphasis;
4. The commenter’s name should be emphasized over the comment number;
Test blockquotes:
JohnV— Those are all easily fixes! I’ll also look for a search box today. SteveM suggested I add links for data sources, so I’ll be doing that too.
Lucia, readability is improving. I like that when one opens a thread, you get ALL comments, and not simply page 1.
However:
– Do you really need such a wide right column? There’s alot of wasted space. You could always open it up again when you need to, but why not fold the calendar and meta items into the other column?
– As some blogs like Volokh do, it would be a real service to commenters if you provided a handy way to add links, bold, italicize and blockquote.
Best,
Tom
Tom–
Yes, I need the wide right column. I’ll be putting stuff in there. I just want to make sure the theme isn’t broken. The width of the theme and the column formats are the portions that are difficult to adjust at anytime.
I plan to add the handy way to add links, bold etc. That’s on the list– I just need to find the plugin. Because of the time involved, certain things are deferred until I know the bits that can “break” catastrophically are working!
test link? does this underline?
#5045 Are you asking us? Yes, it is underlined. (IE6)
Bender– I was asking myself. I should have deleted. JohnV requested a few format changes, including underlining the links.
I can read it now. The left side isn’t cut off, and the addition of the Amazon books is a great touch.
Left side isn’t cut off anymore!
I just switched from Windows XP Pro to Windows Vista — still Firefox 3. Apparently, FIrefox in VIsta handles characters differently. Your site (and others) are far more readable now.
I’m having a problem with blockquotes pushing all the text which follows it left (maybe half a letter width). After a few blockquotes, I encounter a “left side cut off” problem. 🙁
#5175 I am still getting that problem too, wherever there is blockquoting.
Raphael and bender–
Do you mean the next paragraph? Or the right edge flows over?
I’ll look at the formatting in the block quotes. It may be fixable by setting the width of “the container”.
Maybe everyone should switch to auditing WordPress, JohnA is trying to upgrade ClimateAudit and having to beat it into submission.(grin)
Lucia,
It would be like:
quote
something quoted
end quote
All these words which follow in this comment or any subsequent comment would be pushed over toward the left.
Rafael–
That’s weird. I need to read to find out if there is some sort of “clear” command. I don’t know why the margins would shift left after the “close” bracket of the blockquote!
I guess I need to read some CSS stuff. . .
Lucia,
The change in quote style seems to have resolved the issue I was having.
Lucia,
It is not important but when I try to magnify the image from a 100% setting, the left and right blue borders move inwards and become the background colour for part of the text. It is strange because the top part of the borders near the top blue border, down to where the calendar starts, seems to scale correctly.
It is not a problem for me as the 100% setting is quite adequate but I thought you might have a simple fix. 🙂
Jorge–
What you are doing seems to be related to your browser (thought I’m not sure.)
By adjusting the 100% setting, do you use “preferences” to adjust your fonts in your browser? Or do you do something to increase absolutely everything — including images etc– on your screen.
If the you use a browser setting, I don’t think that would affect the screen layout. If you do the second…. I don’t know!
Hi Lucia,
In case it helps, I am using IE7 and the screen is 1280 x 1024. The thing I am adjusting is called the zoom level and it does also magnify pictures. I did notice that the comment box and the black box at the bottom are clearly in a different layer and they stamp over the intruding side borders. It really is not a problem but I thought it was curious.
I am afraid my computer prowess ended when I could no longer use assembly language to program real hardware. 🙂
Hi Jorge–
Newer and newer browsers keep coming out, and each one has different features. The way to adjust things changes too. It’s sort of a pain. . .
But even though newer ways come out, most of us don’t learn “better” ways until the old way stops working.
If you need larger type generally (not just at my site) it’s useful to find the method for increasing your default font size. I don’t use IE, so I don’t know where it is on that browser. But it’s available on Firefox, Netscape, safari etc. All have “preference” sub menu somewhere.
I googled, and found this link for more information:
http://www.computerhope.com/issues/ch000779.htm
I clicked on the IE bit. It says:
Adjusting the font size won’t make the images larger. But, it will help you read the font. I’m trying to be sure to add “click to see larger” on the images so you can get a larger image if you l ike.
Thanks Lucia,
I had a quick look at changing the font as your info said. Strangely it seems you can only change the font, not the font size.
Anyway, I have wasted too much of your time on something that is not a big issue. Finding out whether we need to save the planet is the important thing. 🙂