January 11, 2008
Blog CSS Update
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).
10 Comments
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
Post Your Comment
Click here for posting your feedback to this blog.
There are currently 0 pending (unapproved) messages.



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