Blog CSS Update

January 11, 2008

Blog CSS Update

I've updated the CSS for this blog.

Today, I found some time for a long due update of the CSS (Cascading Style Sheet) of my blog.

First of all, I made it fixed with to better host advertising banners, With a fixed size layout you can anticipate how users will see the site a little better, and know the banner won't get lost in case the browser width is very large (for one, I have a 1,600+ width resolution on my portable).

I've changed my main div style as follows:

#main-box {
	padding: 0.2em 0.2em 0.2em 0.2em;
	background: #FFFFFF url("/css/content-orange.gif") repeat-x repeat-y;
	border: 1px solid #eee;
	margin: 0 auto;
	width: 1000px;
}

Next, I've increased the font size of the overall web site, trying to make it more readable (I used to like small font sites, maybe I'm getting older...), also because I noticed Joel remarks that his blog was succesfull "mostly" because he had picked a very readable font.

In a few minutes, I'll move the "google search" section to the side menu (over the google ads), and I'll be done for now. Of course, some of the old pages might not be that readable any more. If you see any problem let me know.

By the way, I read most of "CSS Mastery" by Andy Budd recently and found it a very nice reading! I still have to update the content anchors for automatic adding the _blank target and apply another couple of tricks. Oh, yes, and I'll need a graphic designer to spice up the site colors a little bit.

Update (Jan 15th)

Well, after all the comments I reverted back the width to fit the available browser window. I still think the formatting will suffer from similar flexibility, but I do understand the complaints as well. I've kept other changes and set the "rounded top" effect to all elements, using a custom Mozilla style (no rounding for Internet Explorer users, sorry).

posted by marcocantu @ 12:11AM | 10 Comments [0 Pending]

Blog CSS Update

Too bad you've gone fixed width. I dislike sites with
fixed width pages. Why won't the sites use the large
screen I have? Why do site authors think it is
good-looking having a narrow band of information in
the middle of my screen?

If a site uses the full width on the screen, I can see
much more information at the same time. It is because
of information that I visit sites - not because I want
to see a lot of unused, wasted space...

Also: This window (the feedback entry window) opens up
(in FireFox) too narrow - The input box is truncated
at the right side, and I need to manually expand the
window in order to see the full box.

Comment by Keld R. Hansen [http://www.heartware.dk] on January 11, 12:35

Blog CSS Update

Keld,

  the problem is that as I post images, media
elements, or advertising banners, knowing how they'll
fit in the page helps making them look much nicer.

  in any case, there is nothing preventing me of going
back to full width, if many people ask for it... it is
only a single line in the CSS.

BTW, I've fixed the box for posting.

Comment by Marco Cantù [http://www.marcocantu.com] on January 11, 12:52

Blog CSS Update

No - the problem is that you think your opinion is
more important than your viewers' :-) :-).

A truly good HTML layout will allow the site to look
good in *any* size. Keep the images on the left and
let the text float around them. That way, the width to
the right can be used fully by the floating text.

Don't think that HTML is a strict layout language -
it's not. It was never meant to be.

My own site (http://startrek.epguides.info) looks good
in whatever screen resolution you might want to have
it displayed at (from 1024x768 and up), and I use the
screen width fully if it's there or wrap the text
properly if it's not.

It's all about not trying to force a DTP-mindset on
HTML - it can't be done. I could turn off CSS parsing
on your site, I could override your setting locally,
and I could force it to be the way that I want it, but
if you keep on designing your page with a fixed width
in mind, it won't look good on variable width.

If, however, you design your page with a variable
width in mind, it'll look fine in ANY screen width
(from a certain minimum and up).

So don't go DTP on me... :-)

Comment by Keld R. Hansen [http://www.heartware.dk] on January 11, 16:45

Blog CSS Update

The "Feedback to blog posted" page (the page coming
after pressing "send" on the feedback entry window) is
also too wide...

Comment by on January 11, 16:46

Blog CSS Update

 I like sites with a "narrow band of information".
Narrow bands of text are better to read. It is more
confortable than having your eyeballs runing accros
the screen with 50 character lines. That´s why news
papers also choose narrow strips of text.

I like a lot this blog and its layout, the only thing
I would like to see diferent is the colors.

Comment by Norberto Martinez on January 11, 18:38

Blog CSS Update

Then you can achieve it by narrowing the width of your
browser window.

The problem is that this choice is taken away from the
user if the site administrator have specified a fixed
width already.

Comment by on January 11, 21:36

Blog CSS Update

Keld, just because your site always uses the full
width of the browser doesn't mean it looks good. Also,
blank space on a page isn't necessarily wasted.

I dislike fixed-width pages, but for the opposite
reason as you. I have two screens. The main one is
1400 pixels wide and the other is 1600. I never have a
window maximized on either of them. I think it's crazy
to dedicate so much space to just one window at a
time. There's plenty of room for two entire windows
per screen, with another two partially visible. Screen
width is never equal to browser-window width. (The
same goes for height.)

I estimate my browser is about 850 pixels wide. That
suits most pages just fine. With Marco's new design,
the right column gets cut off. I didn't even notice it
was there at first since the first two columns fit so
perfectly. In fact, I saw this article and was very
pleased thinking he had switched to a two-column
layout. (And I was even more impressed thinking he had
done it solely by changing the CSS!) Now that I've
learned the truth, I'm a little disappointed, but not
too much since I usually just read the article
introductions in Google Reader and decide I don't need
to read the rest of the article.

Comment by Rob Kennedy [http://www.cs.wisc.edu/~rkennedy/] on January 11, 21:39

Blog CSS Update

I never claimed it looked good (that is always
subjective) - I am a programmer, not a designer :-).
It is, however, very functional...

My point was that on my site, I leave the choice up to
the user. It's not a choice I have made for them.

If they like the layout with full width, then they
have that option. If they don't, they can do like you
- use a narrower width, and my site will adjust
gracefully.

Marco has taken this choice away from the user and
have imposed his own will on all users. That is
certainly his right, but it is a choice that I don't
agree with, hence my own site's layout, and my
comments here...

Comment by Keld R. Hansen [http://startrek.epguides.info] on January 13, 10:52

Blog CSS Update

"That´s why news papers also choose narrow strips of 
text."
Newspapers choose narrow strips of text more for 
typography historical reasons than readability - 
that's why only few old books followed the same 
layout. And that's why some modern newspapers born 
after DTP often choose more modern layouts. I too 
prefer layouts that adapt to the scree width.

Comment by on January 14, 00:45

Blog CSS Update

Still, even with this update the site in Opera looks 
not very good, if not to say, ugly.

Take a look at the screenshot http://ipicture.ru/
uploads/080115/4WfW0SmdBy.png 

Definitely, you are not the Opera fun :)

Comment by Denis on January 15, 13:36

Marco Tech Blog

Blog CSS Update

Update (Jan 15th)

10 Comments

Blog CSS Update

Blog CSS Update

Blog CSS Update

Blog CSS Update

Blog CSS Update

Blog CSS Update

Blog CSS Update

Blog CSS Update

Blog CSS Update

Blog CSS Update

Post Your Comment