What is Digg?Sponsored by Rockstar Games
Grand Theft Auto: Episodes from Liberty City view!
rockstargames.com - Out Now on Disc for Xbox 360. Includes The Lost and Damned plus the all-new The Ballad of Gay Tony.
69 Comments
- tjanson, on 10/12/2007, -2/+20True, good content is always the key. I've found well written and researched articles on sites that looked like they were designed by Jakob Nielsen (especially when it comes to non-tech topics) - and I didn't care a bit. But that doesn't mean that there shouldn't be or is no need for good web design, regarding both code and looks.
But anyway, am I the only one getting tired of "[2digit number] (rules|resources|code snippets|tips|...) for [...]"? (If yes - go ahead, digg me down.) Especially because it's so damn redundant: How many times have we read "Don't use tables for layout" - duh! That is old news since 2002 and those who haven't changed to semantic code by now will probably never change their mind.
All the list says (and the guidelines are good, no question about it) (go ahead, read along!) is:
1) Separate Content, Presentation and Behaviour (HTML, CSS, JS in most cases)
2) Use semantic markup (and pay attention to stuff that usually doesn't get enough attention: alt-attributes, other usability stuff, etc.)
Those two principles are so basic that if you're a web designer and you haven't heard about them you should seriously go read some fundamental books. I'm usually not an "Old News!" screamer, but this list is completely unnecessary. - burke, on 10/12/2007, -1/+13Actually, having used divs for the last few years, I find them much easier than tables to get properly aligned.
- jasg, on 10/12/2007, -1/+12*crying*
I am confused,what are you trying to say ? - Fatalbert06, on 10/12/2007, -18/+29While HTML is great and all, to succeed in making a web page, I think one should endeavor to gain a firm grasp of the English language first. No one will care how well done your HTML is if your content isn't at least understandable.
- Amoeba16, on 10/12/2007, -2/+12This is not bad, actually, considering the quality of the usual "make a good web page" lists generated by parrots that usually get Dugg.
Any list that feels the need to include "don't use blinking text" is aiming too low to be useful. This article, in contrast, makes some decent points about the beauty of streamlined code, which layers that interact in a way that makes formal sense. - tjanson, on 10/12/2007, -1/+11That's definitely not true. The only browser still in use (>1%) that has serious issues displaying CSS based layouts is IE5 at about 2%. Many clients actively *demand* table less layouts, not because they understand the whole thing, but because it's a "cool" buzzword. The Box Model Bug you're referring to is thankfully long gone, and was easy to fix with a separate IE stylesheet - you have to fix IE's bugs a bit, that's true, but no one is still designing table layouts because of browser compatibility unless it's a website for Netscape 4 Enthusiasts ;-). Someone who still codes table layouts is either lazy or doesn't know about semantics (like... my dad). I don't know in what cave you've been hiding - have heard of - say - Zeldman? If you're clients want table layouts you should show them the benefits of semantic markup and persuade them.
- romanpike, on 10/12/2007, -0/+10That seems to be a common misconception with tables these days. Many designers believe they are pure evil, but you are right, provided you are using them with tabular data they are appropriate. People seem to forget that the anti-table rhetoric is aimed at using tables for layout and presentation. Now, will somebody take the bait for the "using tables to markup forms" debate...?
- inactive, on 10/12/2007, -2/+10Are you retarded? We have 200 active projects and none of which use tables for layout and are compatible with IE6, 7, FF2, Opera 8-9 and Safari. Tables are for lazy idiots. Using a horse and carriage can still get you where you need to go, but would you still want to use that today?
http://www.delawarestatefair.com
http://www.intergem.com
http://www.robinsellslewes.com/
http://www.inclind.com/
Just a few examples.. and it only takes about 4 hours to do it correct. - Lick, on 10/12/2007, -3/+11That might be true, but it's better to develop for the future (and for the standards) than to support antique browsers. We HAVE to move on.
- kitwaites, on 10/12/2007, -2/+9I think this is aimed at big websites that get thousands of hits per day, where a team of web developers will be in charge of keeping it up to date. Let's face it - clean code is great, however, if you're only bashing together a fansite it's best to save the time and use a few extra bytes. However, if you're expecting other people to read your code, standardised, commented code that other people can make sense of is a must if you want to keep your job.
- TenebrousX, on 10/12/2007, -0/+7And screen readers and other such clients will hate you for using tables for layout
- inactive, on 10/12/2007, -0/+7As a freelancer I *do* earn money making websites (and not just one or two a month... I do it full time), and I can tell you that it is possible to get things to render correctly without using tables. You're talking bs. Yeh, sure, noobs can't get it to display correctly, but once you understand how each browser and versions render things, you can do whatever you want
- PsychoticClown, on 10/12/2007, -1/+7Good info. Now for some guidelines for The Digg Kids to know how to use grammar and spelling.
- insovietrussia, on 10/12/2007, -3/+9He's not trolling, he does have a point. Sometimes you just have to get things to 'work', it's part of any job.
Take a look at any of the most succesful commercial sites (Amazon, New Egg, eBay, Google even), they are all HTML 4 and use table layouts. It's not pretty, but in the real world your boss doesn't care about web standards and browser hacks. - bairy, on 10/12/2007, -2/+8@Ninja
Digg removes html tags, you should probably try that again. - andy206uk, on 10/12/2007, -5/+10Stop trolling.... you clearly have no idea what you are talking about. Tables are for people too dumb or too lazy to figure out how to do the same job with CSS.
- inactive, on 10/12/2007, -1/+6No ***** man... Anything that is output as tabular data like a spreadsheet or image gallery is perfect use of a table, because you are displaying TABULAR DATA. Its not about being a CSS nazi.
- maexus, on 10/12/2007, -0/+4I knew all that but it's a great article none the less. Prevents disasters like the code soup of Myspace.
- garreh, on 10/12/2007, -1/+5@supert0ad
I don't know what Google you are going to but the code I have up here right now is criminal. If you don't believe me look for yourself... using < center > is deprecated, repeating classes, no doctype, horrible use of & nbsp;& nbsp;& nbsp;& nbsp;, use of colour names as oppose to hex values, use of tables (which is what this article is condemning in particular), ambiguous class names (e.g. "q"), ampersand literals in urls, unescaped tags, incorrect nesting of tags, mixture of uppercase and lowercase attribute names... need I go on?
You really havn't a clue, have you? :) - jasg, on 10/12/2007, -2/+6Man, i feel like working with this guy.
very good article, wish i could digg it more than once ! - Alisic, on 10/12/2007, -2/+5Another good note would be to test your design in different browsers thoroughly as you go along building it. It might seem a bit time consuming, but ultimately it saves you a lot of hassle. People often make the mistake of testing in different browsers only when they finish the whole design or a huge chunk of it. Then usually the whole thing is too complicated to solve gracefully and you have to resort to hack-o-rama in order to achieve consistent display across browsers. And with that, usually, the semantics go flying out the window.
- phoopee3, on 10/12/2007, -3/+6While our websites might suck when looking at the code, 99% of the end-users don't give a ***** what the code looks like.
There's a huge difference between theory and practice. That being said, I do agree with you that the theory is a good one and we should all strive to get there. - resplence, on 10/12/2007, -0/+3I think he meant the 's' and 'strike' elements, since at first I thought the same. What I think the article means, though, is not that they don't serve a semantic function, but that they are deprecated - as he pointed out - and you should use 'del' instead for the same purposes (information no longer being relevant or available).
- Lick, on 10/12/2007, -1/+4Dugg because it's a great read and a reminder for the next time I go XHTML-ing.
However, as picky as I am, I do have one complaint. Why doesn't this article add something of its own? It seems that the entire article is a short flashback of all the other blogposts I have read about the subject in the past years.
I was really hoping to find some new information, but I guess that's only a personal thing I projected onto the article.
At any rate, the article gives what it promised: 21 strong guidelines, whether you knew about them or not. - inactive, on 10/12/2007, -2/+5Thats pretty ridiculous floating everything left. Then you'd have to also say clear left on the ul, and ASSUME each thumbnail is evenly sized (100x100 or whatever) and this isn't always the case. Floating multiple elements in a single container is a no-no. Besides, wouldn't display: inline get li's to stay in line?
If you have a gallery that displays 25 photos per page, thats a 5x5 data grid of photos. Perfect use of a table.
inside your td cell
img br
title br
etc
No reason to put those details in each cell. An example here:
http://www.lighthouserealestatellc.com/property/index.htm - thesimo, on 10/12/2007, -1/+4well your kind of pointing out the obvious there, content will always win, but from the point of a developer (which this article is aimed at) clean smart code will cause u a lot less pain in the ass.
- Antiproton, on 10/12/2007, -4/+7I am a web developer by trade. I do not use tables. Tables are crap, and I'm glad they are dead. They make your code look like poo and, truth be told, large tables render more slowly than a pure CSS solution does. You might not want to believe it, but it's true. This is PARTICULARLY true, if you use tables across many pages that all share the same style sheet. Download style sheet once, cache it, apply it to every page OR download full tabular markup for every page.
That being said, I do take some issue with this article. While it's fine, in theory, to be such a 'style seperate from substance' purist, sometimes it just doesn't work out that way. So, to this article, and everyone reading it with an eye for advice, just remember this: learn everything and use the advice judiciously. If you stick a 'style' attribute on a div to override the style of a single element on a single page, it's not going to turn your website into a travesty of horrible code.
Just don't go nuts, try and be clean and remember that someday, you or someone else might need to go back and try to figure out what the hell is going on.
To all the people who say "blah blah you can't use pure CSS if you are on a deadline... doesn't work for the real world...", what you actually mean to say is "I don't feel like taking the time to learn how to do it properly, so I'm going to do it the way I learned how in 1995". That's fine, but your websites will still suck. - freefm, on 10/12/2007, -4/+6I don't think you'll have a problem with any of this if your whole site is flash.
/jk - kewlito, on 10/12/2007, -1/+3I was going to digg you up until this: "If you're clients want table layouts..."
- HigherLogic, on 10/12/2007, -1/+3@ phoopee3: "where do these people work that they have the time to line everything up right using divs and *****?"
I always hear this from people who use tables, how it takes so much longer to create a tableless website. The only reason you feel this way is because you can't create a tableless layout.
If you could you (a) wouldn't have backed up table-based layouts and (b) you would know that you can whip out a tableless layout in the same, if not less, amount of time it takes to create one with tables. - HigherLogic, on 10/12/2007, -0/+2@somedigger5:
It's apparent that you don't have a full grasp on CSS if you think it takes "hours" to do something. See my above comment from the guy who also thinks it takes forever to create a tableless layout.
Tables aren't bad, don't get me wrong, I use them for tabular information like I'm supposed to (just like I use the strong tag for making text bold).
Seriously though, 25-30 minutes to knock a skeleton out isn't a terribly long time... - HigherLogic, on 10/12/2007, -0/+1A microformat is basically like a "convention," or a formally recognized set of markup that external (and internal) sources can use.
The vCard example on Wikipedia was a good example:
http://en.wikipedia.org/wiki/Microformats#Example
They first showed you how you could display the same information with no extra markup. The second example, however, because of the added class names and wrapping vcard class, an external source (such as a mail program) can identify this bit of markup on your page and do something with it.
A really good example that probably most web designers have used is the rel="nofollow" attribute on the anchor (link) tag. Google (and correct me if I'm wrong, but I think other engines use this now too) recognizes this bit of code, even though it does nothing at all to some crawlers, and won't follow the link (typically to an external source) and give it weight. - tjanson, on 10/12/2007, -0/+1Sorry for that, kewlito ;-) I was typing fast and English is not my first language anyway. I'm deeply ashamed.
@HigherLogic: Oh yes, you do ;-) There's still plenty of well documented bugs (e.g., http://www.positioniseverything.net/explorer.html ) and if you haven't run across any of these you've been very lucky. Some of the stuff you have to fix is not exactly a bug, for example the pre-IE7 support for alpha channel PNGs. You'd "fix" that using MS's proprietary CSS "filter" opacity function thingy. Or the lack of pseudo-class support - try to make an IE6 compatible drop-down-menu without JS.
Wikipedia's layout and design isn't particularly complicated, right? Go take a look at the <head> section. IE is apparently the only browser that needs fixing, and not just a bit: IE50Fixes.css, IE55Fixes.css, IE60Fixes.css, IE70Fixes.css, IEFixes.js (!?) - see my point? - Matt2k, on 10/12/2007, -1/+2> where do these people work that they have the time to line everything up right using divs and *****?
They work for blogs where people get paid to write *****. I don't know. Using DIVs to line things up is fine and dandy, but in most cases it really isn't one bit different.
It doesn't _really_ matter what you use to get the job done. Semantic web is ***** crazy designers pretending they're tackling serious programming issues and inflating their egos. Here comes the mod crew. I use CSS like I use SSI and don't make it a religious crusade. - resplence, on 10/12/2007, -0/+1Oh, ok. I think I get it now. The examples of formatted content being easily extracted by third-party programs really drove the point home. I still don't see much use for the general public as of yet, but I guess this is how profound changes that are ahead of their time start.
- Matt2k, on 10/12/2007, -1/+2> As for the example you sent, I could recreate that in CSS in about five minutes, maximum.
Your irritating condescending tone reminds me of the "fixed-width nazis" we had before the "css nazis" took over. Now just about every site is fixed width. And the world didn't end. Because it turns out no one really cared that much except for a vocal crew of experts. - burke, on 10/12/2007, -4/+5Right. This is considered tabular data, and most people who aren't Level 11 CSS-Nazis would consider this a perfect use of tables.
- inactive, on 10/12/2007, -3/+4I agree with antiproton.
"Are you retarded? We have 200 active projects and none of which use tables for layout and are compatible with IE6, 7, FF2, Opera 8-9 and Safari. Tables are for lazy idiots. Using a horse and carriage can still get you where you need to go, but would you still want to use that today?
http://www.delawarestatefair.com
http://www.intergem.com
http://www.robinsellslewes.com/
http://www.inclind.com/
Just a few examples.. and it only takes about 4 hours to do it correct." - garreh, on 10/12/2007, -4/+5@tjanson yes thats true. Content is KING.
Take YouTube and Google for example. The markup for that site is absolutely AWFUL and breaks every coding law. But why do people still flock to those two site? Because of content.
I would advise people to work on content for their site as opose to worrying about how their markup isn't 100% to standards or, even worse, spending all their time worrying about micro-optimisations. - inactive, on 10/12/2007, -0/+1Here's a good tutorial on how to do layout without tables.
http://www.htmlgoodies.com/beyond/css/article.php/3642151 - astrotrain, on 10/12/2007, -0/+1Nothing mentioned about staying away fro Front Page or anything Microsoft for coding HTML. This should be Guideline #1.
- garyl2k, on 11/27/2007, -0/+1http://www.freegifts4you.co.uk
- tjanson, on 10/12/2007, -0/+1Cmon guys stop the name calling... That said... I'm not sure what you've been smoking, but I definitely want some of that: "HTML is DEAD as a semantic language"? The fun is just beginning!
Okay, so say you're a) lazy and b) want a layout that works in crappy browsers (i.e., I.E. ;-) ) using semantic code, separation of content, presentation and behavior? Here's the solution: Use frameworks. Maybe not perfectly "tailored" for your needs, so it might be overkill depending on your actual needs, but if you use your favorite CMS, YAML or Yahoo's CSS frameworks, Mootools (or Prototype if you prefer that) and a nice design (that the design guy of your company makes for you, if you're lucky and have one), you get the job done *fast*, and the code is rock solid. (There are still thousands of ways to screw up, of course, but if you're a decent HTML/CSS coder you should be fine) - resplence, on 10/12/2007, -1/+2"Guideline Number 10: Use microformats when appropriate."
I've went to the microformats website and wiki half a hundred times to try to understand what they are and figure out their practical purpose. Maybe I'm just real dumb but I still don't get it. The whole thing just looks like some Semantic Web 1337 Club. - HigherLogic, on 10/12/2007, -1/+2@tjanson: "Box Model Bug you're referring to is thankfully long gone, and was easy to fix with a separate IE stylesheet - you have to fix IE's bugs a bit, that's true ..."
If you are simply talking about IE5 I might agree, but as you said, hardly anyone is using that (less than 1%, if even that), and I doubt it's a priority anymore for any legitimate web designer.
But I don't agree with you that "you have to fix IEs bugs a bit" because you don't. I use one stylesheet. Zero hacks or conditionals. And all my sites pass in IE6, IE7, Safari, Opera, and Firefox. I simply can't stand when so-called designers call out IE on issues because of their inability to code properly, when it's apparent that it can be done without hours of debugging and hacks and whatnot. - informbusiness, on 10/12/2007, -1/+1To help with that when your are organizing your design process include a list of the browsers and platform you deem necessary for your code layer to work over, thats before you assume any code.
- HigherLogic, on 10/12/2007, -1/+1>> There's still plenty of well documented bugs
I never said there were not any bugs, just that these bugs are usually the result of people doing things incorrectly in the first place. I've encountered one bug in Firefox that bothers me to no end (the anchor tag, specifically set as a block element with a background and different a:hover background, it breaks in Firefox randomly, so it's not improper coding).
>> for example the pre-IE7 support for alpha channel PNGs.
I agree with the PNG with alpha channel support, but that doesn't mean you can't get around it. I exclusively use PNG files for my websites, and if I have to use transparency, will use PNG-8, or PNG with index transparency. There's always a way around something without resorting to a hack.
>> Or the lack of pseudo-class support
The pseudo-class issue is bothersome, but workable. You learn to code without resorting to techniques that you shouldn't use (or if you do use, aren't really adding any value to your site).
>> try to make an IE6 compatible drop-down-menu without JS.
If I want a drop-down menu, I'll use a form element. I'm a usability nut.
>> Wikipedia's layout and design isn't particularly complicated, right?
Looking at someone else's code doesn't say much. I could create the Wiki layout without any hacks. That just tells me the developer who did the markup doesn't fully understand how to do it either.
I make pretty complex sites that are hack-free, so I cannot understand why someone would need to use a workaround, a hack, an alternative stylesheet, etc. And when I do hear people complain, I always ask to see their website. 100% of the time, it's evident just from looking at their designs that they are not what you would call a professional. They may _think_ they are, but they aren't even close.
If you stick with proper, well-structured, semantic markup, and employ usability in your designs and added technologies (like a drop-down navigation) then you can do without any of the aforementioned hacks and alternatives.
I'll even wager a bet on it, which I've done countless times on design forums, to which (at no suprise) on one bites. - tjanson, on 10/12/2007, -1/+1Okay here's the deal:
Semantic markup is good because it could in theory be processed by a machine (call it crawler or whatever you want): <em>a webcrawler might know that this is meant to be emphasised</em>. That's nor very helpful yet, but think about links for a second: If you just write in a text paragraph: "Buddy, check out weirdpix.com" a machine could tell that it's a URL (well, it could, because of the .com, but just ignore that ;-) ). Microformats take this a step further: If you use the hCard code in your about page a machine could identify that. (See the example link above.) Rather scary? Okay a different exampe:
Upcoming.org uses the hCalendar microformat to mark up the events and with the right Firefox extension you can simply drag and drop 'em into iCal or any other calendar software that follows the open standards (i.e., not Microsoft, I guess ;-) ), because the date, location etc. are marked up in clean XHTML and standardized class names. Still unsure? Try this: http://microformats.org/code/hcalendar/creator , probably the best way to get the concept. - mendigg, on 03/30/2008, -0/+0Good info. Now for some guidelines for The Digg Kids to know how to use grammar and spelling. http://domikua.com/
-
Show 51 - 70 of 70 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is