CSS

Such a cool topic, it deserves it's own thread! ;)

Nick

[edited by: Nick_W at 7:41 pm (utc) on Oct. 23, 2003]

CSS Page: 14.78k
Page as a PNG: 8.2k <-- probably could be less, but I am not a gfx optimization wiz.

Again, I maintain that CSS most always increases page size and download time.

<-- puts away matches and runs back to his perl code.

>> I maintain that CSS most always increases page size and download time. <<
Another time and place ;)

CSS is not meant to create graphics...
It's meant to style page content...

If you think that CSS increases the page size - you're just plain wrong! A CSS based page, compared to one using FONT tags is always going to be smaller in size - there's no argument.
If a CSS based page turns out bigger than its HTML equivalent - that's simply a sign that whoever designed the CSS knew little what he was doing.
If you know what you're doing, and if you're using CSS for its intended purpose - you will always benefit from it, no matter what you believe or has been convinced to think.

Then again, it's always a matter of using "the right tool for the right job". In this case, you're right - an image would be the way to go (obviously).
But, let me put it this way... You're complaining about file size. See, the problem is that you're comparing two different techniques. Try creating the same page using HTML only, and I promise two things:
1) The file size will be much bigger
2) The CSS page will look better

The issue at stake isn't CSS vs. PNG (or CSS vs. Perl or anything else... which is like comparing a Ferrari with Nike), The issue at stake is CSS vs. HTML. I know there are many people who are afraid of switching over to using CSS for layout, but that's because you don't know CSS, you have no clue what it can do (or what it can't). Your ignorance has made you scared...

And that goes for anyone opposing CSS as an alternative to FONT tags...

I can't concur with you Brett.
I'm currently working my way through a conversion of my table-based site and the page sizes are being halved and the download times are speeding up massively.

I’d got with ronin file sizes are down by about 50% on a site that getting it first make over in 12 months. Original page size 30 – 40 kb new site 15 – 20 kb and as for loading well what ever you want people to focus on first it’s there, which for dial up users is very nice ;)

Am I worried about the nutscapers, well yeah but, less than 10%, I’m hoping that the next 12 months people will vote with the feet and forget about them

BTW Suzy thanks for the advice I did get a new browser >>> NS3, it still looks like cr*p. Is the site down again ;)

Rich

Every major site that has switched to css has increased in size.

ttp://devedge.netscape.com/viewsource/2003/espn-interview/01/

What are the advantages of the new design, as compared to your old design?.... Less code and faster loading pages. We reduced the size of our front page code by about 50%, and by using absolute positioning, we are able to display important parts of the page before other parts may have fully loaded yet.

He is only referring to the front page but I find it very hard to believe that their other pages increased by 20% while their front page decreased by 50%.

Hmmm, let me see. First of all they change the content, so you can't really compare "file size". Second of all, have you looked at their source code? It looks like @#$%! Can I say "spacer divs"?

Obviously, whoever "made the switch" for ESPN didn't quite know what they were doing either...

Besides, most "major sites that have switched to CSS" never really switched. Most claims are false. All they did was remove background/color attributes and styled the page with CSS. Others even kept the font tags for "backward compatibility" with browsers that couldn't render their page properly in the first place!

I'll say it again - if your page gets bigger after switching to CSS, then there's something you didn't do right. The most common pitfall is that people have no clue about inheritance. They think they have to specify a class/ID for every single element on the page. Others forget about paddings and margins.

Let's have a poll, shall we? Most WebmasterWorld members are professionals. Anyone who has redesigned a page to be CSS based may participate. However, you may only participate if the page content remained the same.

Poll: After the page redesign, in which I replaced the current HTML layout with a CSS based layout, my total file size: 1) was LARGER than before the switch 2) was SMALLER than before the switch 3) remained UNCHANGED

I'll place the first vote: SMALLER

Current result: LARGER = 0 SMALLER = 4 UNCHANGED = 0

[edit]Added richardb's vote[/edit]
[edit]Added stever's vote[/edit]
[edit]Added mipapage's vote[/edit]

[edited by: DrDoc at 6:42 pm (utc) on Oct. 23, 2003]

up to 50% reduction on most pages BTW still using tables for some of the content.

Nick

Every major site that has switched to css has increased in size.

You would have to really do something wrong for the pages to get bigger. It's very simple, less markup = less code = smaller file size.

@Brett_Tabke - can you sticky me the urls of some PNG websites?

And seconding Doc's POV (with my own emphasis):

if your page gets bigger after switching to CSS, then there's something you didn't do right.

and back to the original example... when I first downloaded that page (on a dialup) the rendering was instant! even if the code was smaller I don't think that would make it render quicker than instant ;)

Suzy

All of us who have switched to CSS know for a fact that 99% of the time, you are trimming bloat and size from the pages being converted.

I think the most important thing that has not been mentioned is that your css files are cached when the page is first loaded. From that point forward, there are no more page size issues unless of course you are loading a different style sheet.

Brett is looking for those last few old school, Note Pad programmers who by default have to have <font> tags in their code or they don't understand what is going on. ;)

Just kidding Brett, Ducking for cover now...

I've converted over 20 sites in the past 18 months and all of them saw a savings of at least 25% in code per page.

Once that css file is written, using Note Pad is a breeze!

Here's my question: if you had gone back to those same pages, could you have reduced page size with lean, intelligent HTML? I find that lots of pages have redundant tags, overly complex tables, etc. While switching to CSS certainly offers the opportunity to eliminate this kind of bloat, much of it could be eliminated by HTML changes. The CSS switch may often be part of a total redesign - if you open that option to the HTML coder, he/she might be able to whack some serious bloat, too.

I'm an agnostic on the CSS debate. I'm using more CSS and enjoying it, though I've not eliminated tables yet.

Interesting question. Ditching tables and font tags for css is a lot of the code reduction.

Even if you do try and use tables 'efficiently', you'll have to nest at some point, and that's just extra code. CSS-Positioning is just leaner than nested tables, width="xxx" etc. and all that goes with it.

Not only that but each page would have to 'carry' that structure, while a css file is downloaded once then cached.

font tags go without mentioning

interesting take on this... but

lean, intelligent HTML?

is not quite right... HTML is not meant to be intelligent ~ it's a (HTML)markup language only, it outputs your information on a web page.. it doesn't (or shouldn't) know how to do anything else, and it's because it thinks it does that this whole scenario has arisen!

But yes I dare say a lot of HTML pages could be reduced in size just by removing "excess" (read: shouldn't have been there in the first place) code....

I can see that your point is valid, and would probably do a lot more for "facts and figures" folk.. than it would for the "I just want it to fit in and look good folk".

Before I became a CSS convert I was only starting to realise that "complex nested tables" weren't necessary, but then that was only the first step on my road to boring you lot....;)

Suzy

However as an old school notepad HTML writer I would say CSS is like a breath of fresh air - I have much more control of my overall code structure. Each page element is a code block in its own right rather than being nested in another block or blocks (in table terms those annoying td and tr tags which always seemed to get in the wrong place and mess up the layout - which then took ages to debug to try and find which ones had gone walkabout.)

Added - I do agree with rogerd to some extent there is usually a lot of bloat that can be removed from pages by good table coding too

[edited by: IanTurner at 8:21 pm (utc) on Oct. 23, 2003]

The problem is how to accomplish leaner code, faster loading (and rendering) Web pages, usable Web pages, while maintaining a crisp look. HTML combined with CSS is the only solution.

CSS cannot replace HTML, neither can HTML replace CSS. They are partners and work best together (not to mention that CSS cannot be used alone).

Then, if nothing else helps to convince... consider the following:
Two people build a Web site. One is relying heavily on CSS for all layout, while the other is using old school HTML layout. Twelve months (and 10,000 pages later) the client wants to redesign the whole thing. The CSS guy (or girl) can do it alone in a day or so. The HTML guy will need a team, and a couple of weeks.

CSS saves time and money...
You can still charge the same, but it gives you more money in the pocket ;)

But my experience also is that using CSS always gives a file size savings when I convert a legacy page -- and CSS always makes site development and maintenance easier when I design with CSS from the beginning.

Finally I can create pages that are both easy to skim and easy to read on screen, pages that an ordinary user can really settle into. And finally I have a tool that helps search engines see what the content of the page is really about.

And when IE5/mac and IE5-6/pc finally fade away, CSS will be even an even better tool.

This can be achieved by using a html optimizer to remove any white space you dont always need .css to reduce file size

I learnt the basics of style sheets to remove the font tags which do bloat the page, that alone reduces the page size

There is still the issue of Netscape 4 users getting a text based layout, it's OK saying that the % is small that is by the by you still have to cater for all users

>>the first step on my road to boring you lot

SuzyUK - you are not boring I had the pleasure of meeting you and Ally and being in you company for 3 days at pubcon. You are just passionate at what you do :)

Bottom line
Is you site doing well in the serp - well leave it alone
if it's not broken don't try and fix it

>>You are just passionate at what you do

aren't we all.. hehe otherwise debates wouldn't exist as we know it!

>>I learnt the basics of style sheets to remove the font tags which do bloat the page

exactly!

Suzy

Horse hockey - you can survey alot, but I want statistics. ESPN's homepage is now over 20% larger than before they went CSS. The interview with the designer at espn is not an accurate reflection. This is the same reason you can not poll about something like this. You have to see it in action.

Css always increase page size and download time. Always.

I think both sides here are right. Those proficient in CSS will know how to do something more efficiently than a novice. I'm closer to the novice end in CSS, but I like it because it's easier to change the look of a site. I can't get rid of tables completely though because I don't know techniques on say how to maintain minimum widths in IE browsers.

So we are supposed to take your word over his?

Css always increase page size and download time. Always.

Again are we just supposed to take your word on it despite the large number of people with contrary opinions?

Brett, ever hear of the fallacy called the sweeping generalization?

I could prescribe some remedial reading about classical logic if you'd like...