New design at IanOut
- Thread starter Odin
- Start date
PsychoSniper
So Old I'm Losing Radiation Signs
Sweet, though an animation of Ian SMGing the PC in the back would be very appropiate 
EnderWiggin
First time out of the vault
I really like the new site.
Good job.
Good job.
Rant
First of all, lose that annoying intro page, will you? The concept of having a mandatory page with no content, one link and a big image on it is questionable anyway.
Secondly, why is the footer text an image? Do you want people not to be aware of your copyright statement when the image doesn't load?
I'm not going to nag about the "ASCII-art" in the title and the "stylish" use of lowercase, so let's skip that.
Whoever had the brilliant idea of using a bloated DHTML menu should be shot. The effect is easily archievable with a few lines of JavaScript and some CSS. JavaScript hover effects for links are a no-go.
Using ONE table solely for layout purposes is bad enough. Why are you using multiple nested ones? CSS can archieve the same effect with less code and no abuse of HTML functionality. Margins are what CSS does well, rely on them.
If you are going to use JavaScript, mark it up properly. The "language" attribute has been deprecated for years just as the "type" attribute has been mandatory.
If a script is not going to print out content, place it in the header. If it does, you should consider using the Document Object Model correctly so it doesn't anymore.
If you use CSS, why do you rely on font elements? Using font AND div elements on the same page shows you seriously lack some understanding of the basic ideas behind CSS and the HTML standard -- talking of which: please use it, standards ensure interoperability.
If navigation tabs are not actual links, don't imply they are clickable. The pointer cursor implies it's clickable, if it's just going to do something on hover, a cursor change is rather pointless.
If you use a linked stylesheet and certain things appear on every page (the navigational table for example), for Christ's sake, please don't rely on style attributes. Give the element a class and put the styling into the already existing stylesheet.
If you have a news script that doesn't allow using HTML to put down lists, at least include a function which turns asterisks into list items (and puts the list items into an unordered list).
Line break elements (br) are meant as a way to provide line breaks within a paragraph, not to artificially lay out a single block as multiple "visual" paragraphs. If you want to manipulate the margin of elements, use CSS, not line breaks.
Lastly, there's a space lacking in your copyright statement -- unless the project is called "2004ianout" now.
End of rant.
Don't feel offended, I'm just pointing out the noteworthy mistakes.
Considering the shortness of the list, you could call it a positive outcome.
First of all, lose that annoying intro page, will you? The concept of having a mandatory page with no content, one link and a big image on it is questionable anyway.
Secondly, why is the footer text an image? Do you want people not to be aware of your copyright statement when the image doesn't load?
I'm not going to nag about the "ASCII-art" in the title and the "stylish" use of lowercase, so let's skip that.
Whoever had the brilliant idea of using a bloated DHTML menu should be shot. The effect is easily archievable with a few lines of JavaScript and some CSS. JavaScript hover effects for links are a no-go.
Using ONE table solely for layout purposes is bad enough. Why are you using multiple nested ones? CSS can archieve the same effect with less code and no abuse of HTML functionality. Margins are what CSS does well, rely on them.
If you are going to use JavaScript, mark it up properly. The "language" attribute has been deprecated for years just as the "type" attribute has been mandatory.
If a script is not going to print out content, place it in the header. If it does, you should consider using the Document Object Model correctly so it doesn't anymore.
If you use CSS, why do you rely on font elements? Using font AND div elements on the same page shows you seriously lack some understanding of the basic ideas behind CSS and the HTML standard -- talking of which: please use it, standards ensure interoperability.
If navigation tabs are not actual links, don't imply they are clickable. The pointer cursor implies it's clickable, if it's just going to do something on hover, a cursor change is rather pointless.
If you use a linked stylesheet and certain things appear on every page (the navigational table for example), for Christ's sake, please don't rely on style attributes. Give the element a class and put the styling into the already existing stylesheet.
If you have a news script that doesn't allow using HTML to put down lists, at least include a function which turns asterisks into list items (and puts the list items into an unordered list).
Line break elements (br) are meant as a way to provide line breaks within a paragraph, not to artificially lay out a single block as multiple "visual" paragraphs. If you want to manipulate the margin of elements, use CSS, not line breaks.
Lastly, there's a space lacking in your copyright statement -- unless the project is called "2004ianout" now.
End of rant.
Don't feel offended, I'm just pointing out the noteworthy mistakes.
Considering the shortness of the list, you could call it a positive outcome.
sztupy said:
Best thing would be to have just two small flags on the top of the main page (ie not that "loading" page) instead of that page..
EnderWiggin
First time out of the vault
I'm not opposed to intro pages. However, I've visited a few sites that autodetected what language to load the page in for me.
Lose the intro page? whoa that would mean removing my wondrous Ivan Kamaras(where's the ´`go hah)-does-fallout-morbino-family-style picture - the sole legacy I have upon the new websites are ye nuts??
Anyway, as the former designer of the website I have to say this new one has my full blessing, it's some great work from mvBarracuda and his friend scorp and a definate pick up from my old grunge site(or shite, oh sorry that's a bad habit i'm beginning to form in everything I write..).
Hopefully this will signify a new step in the right direction for IO.
Once again well done and Cheers!
Anyway, as the former designer of the website I have to say this new one has my full blessing, it's some great work from mvBarracuda and his friend scorp and a definate pick up from my old grunge site(or shite, oh sorry that's a bad habit i'm beginning to form in everything I write..).
Hopefully this will signify a new step in the right direction for IO.
Once again well done and Cheers!
mvBarracuda
Vault Dweller
Re: Rant
And on the other site there will be a magyar version of the site. But maybe I'll detect the language and save it into a cookie
I'm one of these noobs that are happy when the page looks like it should; I'm not one of these people that search every line of html code and try to optimize everything.
and Obelix, too [/sarcasm]
feel free to insert a german word (or even two if you like) of your choice
It's because we did not want to lose the cool Kamaras; like Chronos already statedAshmo said:
And on the other site there will be a magyar version of the site. But maybe I'll detect the language and save it into a cookie
It's because of the background. The dots in the background pic would it make difficult to read the copyright. As it's an image we can add a little border around the text which eases reading it. Anyway I'm not that kind of person that says: look at this homepage, it was done by me. So I basically give a fuck about the copyrightAshmo said:
This was an idea by me. So I'm to blame for that ^^ Anyway: no-go sounds like "not trendy". And again: I give a fuck about a trend or a "no-go". If you don't like it don't visit the site. But it would be happy if you send us your cool css/javascript menu, so we can include it ^^Ashmo said:
Sorry but I'm no html expertAshmo said:
I'm one of these noobs that are happy when the page looks like it should; I'm not one of these people that search every line of html code and try to optimize everything.Hmm as long as it works I don't care. If the newer browsers doens't support it anymore there will be a updated homepage ^^Ashmo said:
I'm not into these "rules of clean coding". Nobody needs to work with the code; it's not an open source project where other coders need to work with the code. It JUST a homepage ^^Ashmo said:
The main problem is that I'm to lazy to make the newsscript use css. The newsscript uses a lot of font tags and as long as it works I'm not interested in changing it.Ashmo said:
That will be changedAshmo said:
Again: If got more things to do; mainly dealing with our new IanOut mapper. But if you got time: I'll send you the homepage and you can optimize itAshmo said:
[Sarcasm]I never liked AsterixAshmo said:
and Obelix, too [/sarcasm]No you're right: it's called "ianout2004 - Odyssee in HTML"Ashmo said:
Thx for your positive feedback; just one word for my german mate Ashmo: "Es ist ja alles gut und schön, aber was du hier für Sachen erzählst, das interessiert mich ..."Ashmo said:End of rant.
Don't feel offended, I'm just pointing out the noteworthy mistakes.
Considering the shortness of the list, you could call it a positive outcome.
feel free to insert a german word (or even two if you like) of your choice
DarkUnderlord
Water Chip? Been There, Done That
Re: Rant
*goes off a googling*
I want to learn. You must provide linkage to teach me.
No seriously, I'm re-designing this hunk of crap - Properly using CSS is the way I'm trying to go.
EDIT: Holy Shit.
Good God. Every web-site I know uses tables to control layout...Ashmo said:
*goes off a googling*
I want to learn. You must provide linkage to teach me.
No seriously, I'm re-designing this hunk of crap - Properly using CSS is the way I'm trying to go.
EDIT: Holy Shit.
Re: Rant
Check for the language requested by the browser. Then offer a flag to override that on every page.
No legal reason. Put the text into a block element (div or p, whichever fits better) and give it a background color (white I guess).
"No-go" means "bad idea that will cause problems". DHTML menus are trendy, but bloating them beyond sanity is bad practice because it tends to cause errors, especially with ancient JavaScript backing it. Browse through ALA and look up the articles on DHTML menus. Some of them are sub-optimal, but they are a lot saner than yours (NOM).
Hmpf. Buy a book. I'd recommend "designing with web standards" by Jeffrey Zeldman or O'Reilly's HTML introduction.
*cough*die*cough*
The browser needs to work with the code. Handing it a facefull of gibberish provokes erros, especially with the ways different browsers handle tagsoup.
If you think it's more difficult to solve a problem with CSS you don't know HTML. Except for tabular layouts (even those can be done with CSS easily these days tho -- although it still takes some tinkering due to MSIE limitations) there's always a better approach with CSS that is easier to code than the HTML tagsoup approach.
Good.
I'll be busy the next week and out of the country next weekend, so what about the week after that?
As long as you can send me the non-sliced layout as an image, I mostlikely am fine.
The issue stands.
Oi.
I suppose the German word would be "nicht" or "nicht wirklich", eh?
Psht.
Using one table is not good, but still acceptable (unless you're hardcore like me, heh). Using multiple tables not only proves lack of understanding of CSS, but also of HTML.
If you really have to use a table, you can split it up rather than use nested tables. Nested block elements do well as replacement for one-column tables (who in their right mind uses a table with only one td element anyway?) and any block element works as replacement for one-cell tables (which is an insane thing to do in the first place).
Learning the standards is the first thing to do. Learning how to use HTML and CSS in a coherent way is the next thing that follows.
Yupp. That's what CSS is for. When examining the source, remember the excess classes, IDs and non-semantic elements (span, div) are only there to allow maximum freedom for the designers.
As for linkage, ALA is a good source for tutorials. The World Wide Web Consortium is the source for web standards, tho. However, unless you like reading complex specs written by techies for techies, you won't like going there. Once you've learnt how to read them, you might find it more rewarding than learning the specs with tutorials, tho.
mvBarracuda said:It's because we did not want to lose the cool Kamaras; like Chronos already statedAshmo said:
And on the other site there will be a magyar version of the site. But maybe I'll detect the language and save it into a cookie
Check for the language requested by the browser. Then offer a flag to override that on every page.
It's because of the background. The dots in the background pic would it make difficult to read the copyright. As it's an image we can add a little border around the text which eases reading it. Anyway I'm not that kind of person that says: look at this homepage, it was done by me. So I basically give a fuck about the copyrightAshmo said:
No legal reason. Put the text into a block element (div or p, whichever fits better) and give it a background color (white I guess).
"No-go" means "bad idea that will cause problems". DHTML menus are trendy, but bloating them beyond sanity is bad practice because it tends to cause errors, especially with ancient JavaScript backing it. Browse through ALA and look up the articles on DHTML menus. Some of them are sub-optimal, but they are a lot saner than yours (NOM).
Sorry but I'm no html expertAshmo said:
Hmpf. Buy a book. I'd recommend "designing with web standards" by Jeffrey Zeldman or O'Reilly's HTML introduction.
*cough*die*cough*
The browser needs to work with the code. Handing it a facefull of gibberish provokes erros, especially with the ways different browsers handle tagsoup.
If you think it's more difficult to solve a problem with CSS you don't know HTML. Except for tabular layouts (even those can be done with CSS easily these days tho -- although it still takes some tinkering due to MSIE limitations) there's always a better approach with CSS that is easier to code than the HTML tagsoup approach.
That will be changedAshmo said:
Good.
Again: If got more things to do; mainly dealing with our new IanOut mapper. But if you got time: I'll send you the homepage and you can optimize itAshmo said:
I'll be busy the next week and out of the country next weekend, so what about the week after that?
As long as you can send me the non-sliced layout as an image, I mostlikely am fine.
[Sarcasm]I never liked AsterixAshmo said:
The issue stands.
Oi.
Thx for your positive feedback; just one word for my german mate Ashmo: "Es ist ja alles gut und schön, aber was du hier für Sachen erzählst, das interessiert mich ..."
feel free to insert a german word (or even two if you like) of your choice
I suppose the German word would be "nicht" or "nicht wirklich", eh?
Psht.
Dark Undies said:
Using one table is not good, but still acceptable (unless you're hardcore like me, heh). Using multiple tables not only proves lack of understanding of CSS, but also of HTML.
If you really have to use a table, you can split it up rather than use nested tables. Nested block elements do well as replacement for one-column tables (who in their right mind uses a table with only one td element anyway?) and any block element works as replacement for one-cell tables (which is an insane thing to do in the first place).
Learning the standards is the first thing to do. Learning how to use HTML and CSS in a coherent way is the next thing that follows.
Yupp. That's what CSS is for. When examining the source, remember the excess classes, IDs and non-semantic elements (span, div) are only there to allow maximum freedom for the designers.
As for linkage, ALA is a good source for tutorials. The World Wide Web Consortium is the source for web standards, tho. However, unless you like reading complex specs written by techies for techies, you won't like going there. Once you've learnt how to read them, you might find it more rewarding than learning the specs with tutorials, tho.
DarkUnderlord
Water Chip? Been There, Done That
Re: Rant
I've already read most of Eric's book and have so far taken it to task on a new form layout I was working on (After reading the book, I can honestly say the lack of CSS in my layout was atrocious - Like amateur hour at the pub) ... but how do you ditch tables in that instance? Even Eric's example in his book (Project 7) still uses a basic table to layout the elements of his form or are forms the exception to the rule?
What about laying out form elements on a page? I've dived head-first into this and bought "Jeffrey Zeldman - Designing with Web Standards" and "Eric Meyer on CSS" (I found them both mentioned as books to read on various web-sites I scoured yesterday).Ashmo said:
I've already read most of Eric's book and have so far taken it to task on a new form layout I was working on (After reading the book, I can honestly say the lack of CSS in my layout was atrocious - Like amateur hour at the pub) ... but how do you ditch tables in that instance? Even Eric's example in his book (Project 7) still uses a basic table to layout the elements of his form or are forms the exception to the rule?
I noticed that, how they've given each paragraph a class.Ashmo said:
Re: Rant
Many good suggestions, but I'm wondering what are the benefits besides being able to easily change the colors, fonts, etc..etc.. when using CSS rather than HTML?
I must confess that I've neglected CSS on NMA also...
Ashmo said:
Many good suggestions, but I'm wondering what are the benefits besides being able to easily change the colors, fonts, etc..etc.. when using CSS rather than HTML?
I must confess that I've neglected CSS on NMA also...
Chronus said:
Exactly, that's the thing.. But I was wondering if it makes the pages load faster or something like that, going through an entire site like NMA and optimizing it for CSS is quite a job. I've used CSS in lots of pages but in the end I use tables/nested tables to control the pages..Guess I'm old fashioned
CSS is meant to do styling. HTML is not.
Styling isn't what HTML does best (oh, wait, didn't we hear something like that some days ago? ).
The point isn't not using tables, but not using table elements for layout. <table> has a semantic meaning. <div> and <span> do not.
My forms usually look something like this:
<form ...>
<div class="form-field">
<label for="first-input">Input #1</label>
<input type="text" id="first-input" .../>
Description of Input #1</p>
</div><div class="form-field">
<label for="second-input">Input #2</label>
<input type="text" id="second-input" .../>
Description of Input #2</p>
</div><div class="form-buttons">
<input type="submit" value="Submit"/>
</div>
</form>
Now, if your browser supports CSS, it would load a nice stylesheet which turns that into a somewhat tabular layout with each <div> being a seperate "row".
I also use a little trick to make the descriptions appear as sort-of tooltips in browsers that support fixed positioning (i.e. not MSIE) and as normal, indented, text in all others.
However, I could as well just write a new stylesheet which makes the labels go ontop of the inputs or have the label and input on the left and the description on the right, etc etc.
That's what stylesheets are most importantly for: seperation of styling and content.
HTML is for marking up content semantically. CSS is for styling that content. Of course HTML implies a structure -- otherwise we'd be using some kind of generic XML or RDF dialect -- but that doesn't mean it defines a layout or even styling.
HTML is markup. Markup is not styled. Given, there's a default rendering for unstyled HTML in almost every browser ever crafted, but that doesn't mean you need to rely on that, or even worse: tinker with it in order to get the page to display correctly in that one browser you've tinkered with.
There's two experiences which help a lot understanding that (believe me, two years ago I thought Netscape would suck simply because it didn't render my crap-HTML the way MSIE did, now I think Netscape sucks because it's updating less regularily than Mozilla is):
- marking up one or more full-blown, text-heavy, unstyled pages semantically correct and always using the semantically most adequate elements for each and every paragraph or object (especially for lists) -- nevermind the way your browser will render it with the default styling as long as the syntax and semantics are correct
- writing a complex data structure (with content) in XML and styling every element you introduce with CSS in order to make the styled file look as good as a styled website marked up in HTML (rely on background-images instead of HTML's img element!) -- for sanity's sake, use Mozilla or Opera for looking at the styled XML, MSIE does a bad job at that
The first will help you understand why / is to be used instead of /<u>/ in almost every case (an exception is the case in which you want to use an actual headline or the span element: abuse of markup for styling), it will teach you understanding the importance of semantic markup.
The second will simply show you the power of CSS.
If you follow the standards while doing these two things, you will learn a lesson or two about markup and styling and why editing HTML isn't design.
Styling isn't what HTML does best (oh, wait, didn't we hear something like that some days ago?
).The point isn't not using tables, but not using table elements for layout. <table> has a semantic meaning. <div> and <span> do not.
My forms usually look something like this:
<form ...>
<div class="form-field">
<label for="first-input">Input #1</label>
<input type="text" id="first-input" .../>
Description of Input #1</p>
</div><div class="form-field">
<label for="second-input">Input #2</label>
<input type="text" id="second-input" .../>
Description of Input #2</p>
</div><div class="form-buttons">
<input type="submit" value="Submit"/>
</div>
</form>
Now, if your browser supports CSS, it would load a nice stylesheet which turns that into a somewhat tabular layout with each <div> being a seperate "row".
I also use a little trick to make the descriptions appear as sort-of tooltips in browsers that support fixed positioning (i.e. not MSIE) and as normal, indented, text in all others.
However, I could as well just write a new stylesheet which makes the labels go ontop of the inputs or have the label and input on the left and the description on the right, etc etc.
That's what stylesheets are most importantly for: seperation of styling and content.
HTML is for marking up content semantically. CSS is for styling that content. Of course HTML implies a structure -- otherwise we'd be using some kind of generic XML or RDF dialect -- but that doesn't mean it defines a layout or even styling.
HTML is markup. Markup is not styled. Given, there's a default rendering for unstyled HTML in almost every browser ever crafted, but that doesn't mean you need to rely on that, or even worse: tinker with it in order to get the page to display correctly in that one browser you've tinkered with.
There's two experiences which help a lot understanding that (believe me, two years ago I thought Netscape would suck simply because it didn't render my crap-HTML the way MSIE did, now I think Netscape sucks because it's updating less regularily than Mozilla is):
- marking up one or more full-blown, text-heavy, unstyled pages semantically correct and always using the semantically most adequate elements for each and every paragraph or object (especially for lists) -- nevermind the way your browser will render it with the default styling as long as the syntax and semantics are correct
- writing a complex data structure (with content) in XML and styling every element you introduce with CSS in order to make the styled file look as good as a styled website marked up in HTML (rely on background-images instead of HTML's img element!) -- for sanity's sake, use Mozilla or Opera for looking at the styled XML, MSIE does a bad job at that
The first will help you understand why / is to be used instead of /<u>/ in almost every case (an exception is the case in which you want to use an actual headline or the span element: abuse of markup for styling), it will teach you understanding the importance of semantic markup.
The second will simply show you the power of CSS.
If you follow the standards while doing these two things, you will learn a lesson or two about markup and styling and why editing HTML isn't design.
DarkUnderlord
Water Chip? Been There, Done That
Re: Rant
Honestly, I thought the same thing about CSS for years. "CSS, Wowee. My font colour looks cool. Yay." When you realise you can ditch an entire table layout and all the associated code that goes with it (TABLE, TR, TD) along with all spacer.gifs and then you don't have to spend eons messing around with them just to get your table looking right...
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) and realise that with CSS, if you want the menu on the left, you put it on the left. You don't have to cut and paste an entire (what I now call bloated) <TR><TD></TD></TR> structure and put it elsewhere. Actually, you don't touch the HTML at all. All you do is open up the CSS, change a few margins, and maybe some padding and wallah, your menu is on the right, or along the top, or in the center of the screen if you want and all the other text has automatically adjusted to flow around it.
Of course, re-desiging an entire site in it is a bitch, especially when you're still just learning. It helped that I was already in the process of over-hauling Terra-Arcanum and was looking for a template system that would do the job.
Upsides I see right now (after only looking at this for the past 2 days) are:
Compare that to now, where chances are, someone with an old browser could end up with all sorts of funky things happening, unreadable text and so on (depending on the site's design of course).
Ashmo: I thought that was the case re: forms needing a few divs. I'll have to use that, me thinks.
You haven't had your zen moment yet Odin.Odin said:
Honestly, I thought the same thing about CSS for years. "CSS, Wowee. My font colour looks cool. Yay." When you realise you can ditch an entire table layout and all the associated code that goes with it (TABLE, TR, TD) along with all spacer.gifs and then you don't have to spend eons messing around with them just to get your table looking right...
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) and realise that with CSS, if you want the menu on the left, you put it on the left. You don't have to cut and paste an entire (what I now call bloated) <TR><TD></TD></TR> structure and put it elsewhere. Actually, you don't touch the HTML at all. All you do is open up the CSS, change a few margins, and maybe some padding and wallah, your menu is on the right, or along the top, or in the center of the screen if you want and all the other text has automatically adjusted to flow around it.
Of course, re-desiging an entire site in it is a bitch, especially when you're still just learning. It helped that I was already in the process of over-hauling Terra-Arcanum and was looking for a template system that would do the job.
Upsides I see right now (after only looking at this for the past 2 days) are:
- Brilliant template system (even more control than you can get with tables in some instances).
- A few kb saving on the bandwidth. The CSS is loaded once and cached for every page (provided you use the same styles across site). Compare that to now, where every page you load has to load a whole bunch of <TD></TD></TR> code. That can be quite a bit of code across several pages and because it's hard-coded, each page has to load it.
- Cleaner code. Any HTML you write (which in this case is probably going to be in PHP files I'd guess) is going to be pure content. Div tags, content and nothing else. No table around it, no images embedded in the code, no nothing. Just text. Makes it a damn site easier to deal with, especially in a complex PHP file.
Compare that to now, where chances are, someone with an old browser could end up with all sorts of funky things happening, unreadable text and so on (depending on the site's design of course).
Ashmo: I thought that was the case re: forms needing a few divs. I'll have to use that, me thinks.
PsychoSniper
So Old I'm Losing Radiation Signs
Can y'all speak englich pls ?
Re: Rant
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..
DarkUnderlord said:
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..