New design at IanOut

[Ashmo]

Re: Rant

Honestly, check out the http://www.csszengarden.com and check out some of the designs (View >> Source and see the lack of layout code in the HTML file)

Damn that's a clean code, perhaps I gotta look into this a little further. Right now I'm learning php/mysql stuff, it funny to think that I only knew basic HTML code when I first started here on NMA..

The use of schemes is something I consider a hype tho, really are there that many people here that consider it soooo uberkewl that a site has different schemes ? Sure a totally different scheme, ala new design is right on but just plain different colors ala RPGcodex (no offense to them tho) is just lame IMO..

Nobody forces you to supply different themes (i.e. alternate stylesheets), but for once with CSS you can change the layout in an alternate stylesheet without touching the HTML (i.e. no need for new templates), you can change an existing layout more easily and you can do a redesign more easily (because you don't have to edit the HTML for anything but new classes and IDs -- and even that isn't usually required).

The funny thing is I stopped using templates a couple of months ago because it didn't make any sense anymore. If the entire styling is done in CSS, there's no need for complex markup. The best choice would be generating the markup dynamically (i.e. object oriented rather than just echoing HTML snippets), but OOP in PHP (or at least in PHP4) is too slow for that. I'm thinking about running compiled C++ programs via PHP in order to generate the markup right now, even.

 

[Odin]

Re: Rant

but for once with CSS you can change the layout in an alternate stylesheet without touching the HTML (i.e. no need for new templates), you can change an existing layout more easily and you can do a redesign more easily (because you don't have to edit the HTML for anything but new classes and IDs -- and even that isn't usually required).

Ah found a bad thing about using CSS, it slows down the loading of the page actually. Having a CSS file that is "huge" will slow down the load time of a page, but still I want to look into this..Gotta learn some new stuff..

 

[DarkUnderlord]

Re: Rant

Sure a totally different scheme, ala new design is right on but just plain different colors ala RPGcodex (no offense to them tho) is just lame IMO..

I agree with you (which is why the styles at Terra-Arcanum are planned to be unique) but the option is there if you want it. The other advantage is also not so much with providing multiple themes, but think about yourself updating NMA's design again in a few years. Do you really want to go through raw HTML all over again? With CSS, you make a new style-sheet and that's it. You don't even have to touch the rest of the code.

Ah found a bad thing about using CSS, it slows down the loading of the page actually. Having a CSS file that is "huge" will slow down the load time of a page

Not as bad as you might think. From what I understand, the HTML is loaded first, CSS comes second. So even users on a slow connection get all the content first before it jiggles itself into shape. CSS pages are also cached. So if you're (as you should be) using the same CSS across the entire site, then it only gets loaded once and is then re-used for each page. Also, if the visitor comes back again tomorrow, he still uses the cached style-sheet.

It's also a matter of how much CSS is used. If the external file is huge, then chances are you're over-using CSS. The idea is to create a few key <DIV> tags which are then replicated across every page of the site.

... of course, you can also go the step of providing a seperate "plain text" style sheet for those who prefer lightning load times.

but still I want to look into this..Gotta learn some new stuff..

Heh. So do I.

Just for laughs, here's a neat use of CSS I found.

 

[Odin]

Re: Rant

The other advantage is also not so much with providing multiple themes, but think about yourself updating NMA's design again in a few years. Do you really want to go through raw HTML all over again? With CSS, you make a new style-sheet and that's it. You don't even have to touch the rest of the code.

Well I've made NMA so that I only need to make one template page and update two files with that and it's all good. But if I added this too I might ease it even more...

the HTML is loaded first, CSS comes second.

Huh, I thought I read somewhere that the CSS was loaded first hence the reason it could slow down the loading of a web page.

Oh, btw..nice house!

 

[Ashmo]

I don't know of any browser that loads the CSS first. That's impossible to do because you need to parse the HTML to find the name of the stylesheet, and if you're not using an external stylesheet the browser even has to parse all those style attributes and a possible embedded stylesheet.

What is true however is that external stylesheets can be cached. If a page hasn't changed, it won't get loaded again unless you explicitly tell your browser to (i.e. force refresh). Same goes with the stylesheet: if two pages require the same external stylesheet, the stylesheet will only be loaded again if it has changed in between (or if the browser is told not to cache anything).
Thus you don't lose speed but you lose traffic (no more presentational HTML -- CSS does all that in a centralised external stylesheet file).

I'm not sure whether XML reads in stylesheets first as XML stylesheets are specified in a processing information which comes before all the markup, but that's not a problem you have to deal with if you're writing HTML, or XHTML prior 2.0.

You even gain speed in rendering because normally all those tables can't be displayed until they are read entirely -- the rendering has to pause if the table is still being loaded because the page is not loaded completely yet. If you don't rely on a layout table, that's not a problem you have to worry about anymore.

Debugging gets easier because you can actually comprehend your HTML if you look at it.
The cleaner HTML also allows you to apply a cleaner structure to it more easily. If you want, you can indent your markup so it's not only comprehendable but also somewhat pretty (I do that most of the time just to avoid nesting issues).

 

[Odin]

I don't know of any browser that loads the CSS first. That's impossible to do because you need to parse the HTML to find the name of the stylesheet, and if you're not using an external stylesheet the browser even has to parse all those style attributes and a possible embedded stylesheet.

According to Website Optimization:

TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 1 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.

This is from an analyze of NMA and we have a "external" CSS file, how do you make it an internal one ?

So I wrote wrong, not HTML but body..which slows down the initial loading..

 

[Ashmo]

I don't know of any browser that loads the CSS first. That's impossible to do because you need to parse the HTML to find the name of the stylesheet, and if you're not using an external stylesheet the browser even has to parse all those style attributes and a possible embedded stylesheet.

According to Website Optimization:

TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 1 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.

This is from an analyze of NMA and we have a "external" CSS file, how do you make it an internal one ?

So I wrote wrong, not HTML but body..which slows down the initial loading..

Some browsers ::cough::MSIE::cough:: render the markup first and then re-render the page with CSS applied.
At least it does so under certain circumstances (it must be an external stylesheet, and I think the external stylesheet must be included or something).

As for internal stylesheets: There's two ways: embedded and inline.

Embedded stylesheets are placed into a <style/> element in the <head/> (usually right before the end of the head).
It works like the script element, thus you need to specify the MIME type as well: text/css, in this case.
It's generally a bad idea and should only be done if you need to restrict the page to one file or during development.

Inline "stylesheets" don't exist. That's just a name for the style attributes. They should only be used during development or if for some reason you have a unique object on one page which occurs nowhere else and can't be added to the stylesheet (for example, if the object is a temporary note which will be removed within one hour anyway and you do not plan to use the same styling ever again). Classes and IDs (which have to be unique per page) are way superior to style attributes.

A large head indeed slows down the loading, but that is especially true if you are using embedded javascript and stylesheets. If these things are external and referenced, the markup can be parsed quicker.

Also, a page using CSS won't load much slower (we're talking about fractions of seconds anyway) than a page marked up in crud-HTML.
Sanitized standards-compliant HTML gets parsed way faster than creative patchwork "HTML" -- unless we're talking about MSIE, which treats *everything* as tagsoup, but even here the smaller filesize (clean markup == less markup) will affect the loading times slightly.

Anyway. Migrating to standards has many benefits, most of which you only understand afterwards.