By some accounts, the best web style guide made:
http://info.med.yale.edu/caim/manual/contents.html (http://info.med.yale.edu/caim/manual/contents.html)
Web Style Guide: Basic Design Principles for Creating Web Sites by Patrick Lynch (Yale Press, 1999; ISBN 0-300-07675-4). This is the print version of one of the best online Web design guides I've seen. If I could recommend just one book to Web site designers, this would be it (Nielsen's Usability Engineering would be an excellent companion). It provides the philosophy and rules of thumb for effective Web page and site design. It's highly readable, despite the style guide title. The Web version is at http://info.med.yale.edu/caim/manual/contents.html, but it's much faster to read it on paper than on the Web, and the pictures are better, too.
I am not too into tables for layout. It talks about css in there but I saw it talking about tables too and I really believe people should move away from tables more because there are so many advantages to using css. But that is for another thread and another day.
Quote from: peofeoknight on January 05, 2004, 06:41 PM
I am not too into tables for layout. It talks about css in there but I saw it talking about tables too and I really believe people should move away from tables more because there are so many advantages to using css. But that is for another thread and another day.
You've got this table fixation you should get over. CSS is decorative markup. Tables are structural markup HTML elements. They are not competing concepts.
But tables are abused as such!
Tables are neccessary for some things, but layout is not what they are neccessary for. Tabels are great for tabular data, a data bound grid for example. But css for layout is much more efficient and css was designed for layout. But like I said this is for another thread and I did not want to go into a huge debate. Basically how I see it is tables are misused for layout especially when people start nesting them left and right, css was designed for layouts so it will work better for one.
EDIT: I am not saying that if you use tables for layout you are going to die or anything, but for new webdevelopers it is probably better for them not to start down the path of tables for layouts. HTML 4.01 strict assumes you are using css for layout, html for content. That is why attributes like align, valign, height, etc were depreciated.
Quote from: peofeoknight on January 05, 2004, 09:33 PM
Tables are neccessary for some things, but layout is not what they are neccessary for. Tabels are great for tabular data, a data bound grid for example. But css for layout is much more efficient and css was designed for layout. But like I said this is for another thread and I did not want to go into a huge debate. Basically how I see it is tables are misused for layout especially when people start nesting them left and right, css was designed for layouts so it will work better for one.
EDIT: I am not saying that if you use tables for layout you are going to die or anything, but for new webdevelopers it is probably better for them not to start down the path of tables for layouts. HTML 4.01 strict assumes you are using css for layout, html for content. That is why attributes like align, valign, height, etc were depreciated.
OK that's fair. Look at vL main page though. Its layout is done by tables. The middle section has 3 columns, "navigation", "news articles", and "headlines". Show me how we can accomplish that with CSS?
Quote from: peofeoknight on January 05, 2004, 09:33 PM
HTML 4.01 strict assumes you are using css for layout, html for content. That is why attributes like align, valign, height, etc were depreciated.
hmm, I thought those got depracated in preference to you specifying that kind of information in a CSS, so that it would uniformly apply to all your tables? :)
you can do layering and css structures. I've seen it done on a site before. But it wasn't very good.
Quote from: LoRD`NiKKoN on January 06, 2004, 12:43 PM
you can do layering and css structures. I've seen it done on a site before. But it wasn't very good.
Not everyone runs their browser in full screen or uses >1024x768 resolution, you know (fix your signature image).
Quote from: Spht on January 06, 2004, 01:08 PM
Quote from: LoRD`NiKKoN on January 06, 2004, 12:43 PM
you can do layering and css structures. I've seen it done on a site before. But it wasn't very good.
Not everyone runs their browser in full screen or uses >1024x768 resolution, you know (fix your signature image).
I use 1024x768 resolution, have the browser in full screen and that image is still to big. ;D
Quote from: Grok on January 06, 2004, 09:09 AM
OK that's fair. Look at vL main page though. Its layout is done by tables. The middle section has 3 columns, "navigation", "news articles", and "headlines". Show me how we can accomplish that with CSS?
sure, why not, http://bluerobot.com/web/layouts/layout3.html look at this, it is all of the different box layouts you could ever want http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html . Those are two examples that I just like to give out. My new layout uses two columns, I dropped the owen hack btw because I coded some things differently and found a work around that meant I did not need it, but I still have box model hacks for ie5. http://www.quasi-ke.servebeer.com/layout/index.aspx It looks a little messy still but that is because there is no content on it.
Quote from: Kp on January 06, 2004, 10:00 AM
hmm, I thought those got depracated in preference to you specifying that kind of information in a CSS, so that it would uniformly apply to all your tables? :)
From what i have heard it was depreciated because of the css yes, because tables were not designed for this and css was. Many of the html elements for alignment and coloring and even the border attribute were all depreciated http://www.w3.org/TR/html401/index/attributes.html that is a list of all attributes and you can see which are depreciated. CSS does it much better so it is used.
Please stop saying depreciated :)
:P I was going to make some corny rhyme with appreciate but decided not to... it just would have killed itself.
Quote from: peofeoknight on January 07, 2004, 05:39 PM
Quote from: Grok on January 06, 2004, 09:09 AM
OK that's fair. Look at vL main page though. Its layout is done by tables. The middle section has 3 columns, "navigation", "news articles", and "headlines". Show me how we can accomplish that with CSS?
sure, why not, http://bluerobot.com/web/layouts/layout3.html look at this, it is all of the different box layouts you could ever want http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html . Those are two examples that I just like to give out. My new layout uses two columns, I dropped the owen hack btw because I coded some things differently and found a work around that meant I did not need it, but I still have box model hacks for ie5. http://www.quasi-ke.servebeer.com/layout/index.aspx It looks a little messy still but that is because there is no content on it.
All those three-column layouts look awful at less than 800x600. The outermost table columns overlap instead of shrinking proportionally. Fix that so it works just like html tables?
Quote from: Adron on January 08, 2004, 05:12 PM
All those three-column layouts look awful at less than 800x600. The outermost table columns overlap instead of shrinking proportionally. Fix that so it works just like html tables?
They are supposed to overlap, the content overlaps the links its z-index. It was designed to do that. if you do not want it to you just delete the z-index attributes in the css files. It is only designed to make sure the content is accessable at all times since the link columns do not stretch (nor would you want them too, look like crap if it did) so you do not want the center to get supper tiny.
And anyways those layouts are just to serve as examples, if you used it you would obviously modify it, that is just to show how to make it fluid and still keep 3 cols.
Quote from: peofeoknight on January 08, 2004, 09:34 PM
Quote from: Adron on January 08, 2004, 05:12 PM
All those three-column layouts look awful at less than 800x600. The outermost table columns overlap instead of shrinking proportionally. Fix that so it works just like html tables?
They are supposed to overlap, the content overlaps the links its z-index. It was designed to do that. if you do not want it to you just delete the z-index attributes in the css files. It is only designed to make sure the content is accessable at all times since the link columns do not stretch (nor would you want them too, look like crap if it did) so you do not want the center to get supper tiny.
They should stretch if they can't fit on screen. Which is better: An unreadable column or a readable but not so good looking column?
the middle column does stretch. It will only overlap at resolutions below 640 x 480. Well the bluerobot one anyway. It does not overlap unless it is very small, smaller then any resolution anyone is actually going to have. people at 640x480 do not run around with browser windows that are not maxed anyway. I think that is safe to assume. But the content overlapping the cosmetics is what it is designed to do, as a precaution. But if you do not want it to overlap at all or you want a min width and horizontal scrollbar just delete the lines of code with z-index in them and then use min-width:200px; or whatever.
Quote from: peofeoknight on January 09, 2004, 11:04 PM
the middle column does stretch. It will only overlap at resolutions below 640 x 480. Well the bluerobot one anyway. It does not overlap unless it is very small, smaller then any resolution anyone is actually going to have. people at 640x480 do not run around with browser windows that are not maxed anyway. I think that is safe to assume. But the content overlapping the cosmetics is what it is designed to do, as a precaution. But if you do not want it to overlap at all or you want a min width and horizontal scrollbar just delete the lines of code with z-index in them and then use min-width:200px; or whatever.
That is not safe to assume! The whole purpose of xhtml/css is so unknown reader types can render content appropriately. We should expect that devices other than screens will be reading the data. A cel phone has a display resolution much less than 640x480, maxxed or not.
That is why you use the asp.net mobile controls :P. The reason one would use z-index would be to make the content deliverable no matter what the resolution is, if the sides do not stretch but the middle does (which looks b etter) that means the middle could be 1 letter per line or less unless you make it overlap the nav bars etc. If you read the comments in the css, you would see why they used z-index. If you do not want it to overlap then just delete the z-index, but is there so even if the layout gets masacred at a low res the person can still get the content because it is more important. We all aggree that content > cosmetics correct?
Quote from: peofeoknight on January 10, 2004, 02:02 PM
We all aggree that content > cosmetics correct?
Yes. I was assuming this layout would be filled with "content". Like links and headlines for content in the two edge columns and text content in the center column. Then you have to be able to access all columns to navigate the site successfully. I have seen several sites recently that are unreadable at 800x600 because the columns overlap and cover the text.
Yes but the layouts at bluerobot do not overlap until well below 800 by 600. It is preferable to have a whole other page for mobile divices, by using say asp.net mobile controls to make it adaptable. Also like I have been saying all along, if overlapping isn't your thing then just get rid of the z-index and it will not happen.
It seems to me you may have missed the purpose of CSS, and the message those sites (which you provided links for) were trying to get across. That message is you don't design for screens, devices, or pages. You don't even think like that. If you follow the recommendations for CSS, it won't matter whether you're obtaining the data via a web browser, a cel phone, or braille gloves. The content will be appropriately accessible by each handler device.
So when Adron points out that the 'page' is not properly readable on a display page device at resolutions under 800x600, this is proof that the CSS used was not correctly implemented. After all--a display "screen" is probably what most of even those authors were thinking when they designed the box examples. Yet even on a screen, it breaks.
It's some good work published, and gets people thinking more correctly. However, anyone can make mistakes, and Adron may have found some already.
whatever dude, you missed the whole point of ie hacks, you thought I was using them to "break ie", I design for all platforms and all devices, I missed nothing. If you have a mobile device you use mobile controls because is obviosuly not going to work on a normal layout. My sites work on lynx. So do not give me that junk. Those layouts, the ones at bluerobot you say are done incorrectly? They work at reolutions below 640 by 480, they will work for any computer's resolution. The guy who rote them knows his stuff too, they are done correctly. The whole idea of it overlapping is so that the person can still read the content even if his browser window will not allow the other stuff to be displayed. I have said that numerous times but you stil did not pick up on that.
Here goes.
You put all your "content" in a bunch of divs, with either an ID or a class, depending on your style.
Then inside your page, you link to a certain stylesheet depending on the media (cellphone browser etc).
Isn't that the logic behind mobile controls, it does it for you, it will link it differently for cellphones, palm pilots, pocket pcs, etc? If someone with a cell phone visits your site you can't even have flanking menus, that is another reason for it to overlap, if you have cell phone visiters (which I wouldnt have any on a regular site) you would provide backup navigation for them.
Quote from: St0rm.iD on January 11, 2004, 04:45 PM
Here goes.
You put all your "content" in a bunch of divs, with either an ID or a class, depending on your style.
Then inside your page, you link to a certain stylesheet depending on the media (cellphone browser etc).
There is a standard for using ID vs class. ID is reserved for unique elements, no more than one element may have the same ID. With class, you are free to break that very rule.
I'm still debating whether or not to use a class or id for each column, though. I'm leaning towards id.
I'd say you're not supposed to design web pages that look the same on all browsers. Making a design that requires a page to look exactly the way you tried to make it look is making a flawed design.
Quote from: Adron on January 11, 2004, 08:22 PM
I'd say you're not supposed to design web pages that look the same on all browsers. Making a design that requires a page to look exactly the way you tried to make it look is making a flawed design.
what? If a page is designed with only ie in mind, you are saying it is ok if it gets masacred in mozilla? What??? That makes no sence at all. You should try to design so that your page performs in all browser well, this is not possible because for every mozilla firebird there is an ns4 (sort of like for every rose there is a thorn). So atleast make it so the content is always accessable. That is how I try to do things. Storm, about the id class thing, I use them both myself, if its one thing I use id, if Its multi I use class, and if one element in a class has a slight variation I use the style attribute right on that element, thats just my little way of doing things.
All the HTML that I currently write is for web pages. Even so, I practice writing valid XHTML 1.1 for the day when I will need to consider more devices. When that day comes, fuck all the NS4's, IE4's, and other noncompliant browsers. If people have problems viewing my content when it's written tight and nice, they need to upgrade their viewing device.
Quote from: peofeoknight on January 11, 2004, 09:43 PM
what? If a page is designed with only ie in mind, you are saying it is ok if it gets masacred in mozilla? What???
Design and test in Lynx. I'm sure IE and Mozilla will be able to render whatever works in Lynx. And don't make extreme-precision things adding and removing pixels here and there. Describe what you want in a rough sort of way and allow the browser to make the best of it instead of tweaking and tweaking until you have a solution that only works on the platforms you have tested it on. Remember that your user might have his own style sheet that he applies to your page.
Quote from: Adron on January 12, 2004, 04:48 AM
Design and test in Lynx. I'm sure IE and Mozilla will be able to render whatever works in Lynx. And don't make extreme-precision things adding and removing pixels here and there. Describe what you want in a rough sort of way and allow the browser to make the best of it instead of tweaking and tweaking until you have a solution that only works on the platforms you have tested it on. Remember that your user might have his own style sheet that he applies to your page.
Heh, I actually do have a copy of lynx and I do preview my pages in it, I like css because it can break down for text based browsers into a plain text form real nicely. But I do have ie5, 5.5, 6, mozilla, opera, and netscape running here on this comp that I preview in too. I try to get those to look exactly the same aestetically, while older browsers I focus on the content being accessable. I do go for precision and I do use pixil perfect layouts a lot of the time (where if it does not line up perfectly it looks like crap, for example rounded courners), but that is where hacks come in, the box model in particular for ie5, 5.5.
Making something exact to the pixel makes no sense when suddenly one user has a 60 pixels/inch monitor and the next has a 150 pixels/inch monitor, since one will have three times "as big" (pixel-wise) fonts as the other.
Quote from: Adron on January 12, 2004, 04:43 PM
Making something exact to the pixel makes no sense when suddenly one user has a 60 pixels/inch monitor and the next has a 150 pixels/inch monitor, since one will have three times "as big" (pixel-wise) fonts as the other.
It makes sense if you're writing with the intent to address a printed page. That intent is specifically covered in XML-FO however and you should be using XML-FO and XSLT instead of XHTML/CSS.
http://quasi-ke.servebeer.com/layout/index.aspx when I say pixil perfect I say everything lines up to the pixil, the borders are in css, yet the corners are images. It is also fluid and is not platform specific. That is going to be the layout for my clan's site. I am redoing everything on it just about so it is still far from finished. I am going to turn the news column into a weblog, redo the forum, etc. Also, I am going to redo the banner when inspiration strikes me... the one now is just temporary.
Quote from: Grok on January 12, 2004, 06:08 PM
Quote from: Adron on January 12, 2004, 04:43 PM
Making something exact to the pixel makes no sense when suddenly one user has a 60 pixels/inch monitor and the next has a 150 pixels/inch monitor, since one will have three times "as big" (pixel-wise) fonts as the other.
It makes sense if you're writing with the intent to address a printed page. That intent is specifically covered in XML-FO however and you should be using XML-FO and XSLT instead of XHTML/CSS.
It doesn't make sense on printed pages either, if you translate pixel-perfect to dot-perfect. Because sizing things by dots would mean that the document would print half-sized on a 1200 dpi printer if it was designed for a 600 dpi printer.... That's why sizing by pixels is bad.
Oh, I left that part out -- XML-FO (Formatting Objects) is precise to a point, which I think is 1/1200 of an inch.