CSS is Worthless
by Mike Stenhouse on June 6 2006, 08:22
CSS does not make a site accessible. CSS does not make your site rank higher in search engines. Good CSS does not make you an elite web programmer. I don't code CSS. CSS is misunderstood.
Misconceptions
I was looking at the HTML source of a website the other day and something a creative director once said to me popped into my head:
I really like this site. It's a really interesting design and it's done with CSS so
it's accessible.
Wrong wrong wrong. CSS does not an accessible site make.
The forgotten basics of CSS
Let me quickly recap what cascading style sheets actually do... They allow you to redefine the presentation of any HTML tag. This means that there is no need to be bound by how a tag displays by default because you can change it. We can now use whatever markup makes sense and then redefine it to fit our design. That's the key benefit of CSS – it lets you use the right HTML.
CSS is misunderstood
This is the biggest misunderstanding that I come across when trying to teach someone CSS: They've heard that CSS is the thing; it's the way web pages should be done these days. It lets you do away with spacer gifs, achieve pixel perfect precision and carries accessibility and SEO benefits to boot. They want to learn CSS. I have a really hard time hammering home that CSS is only the icing and the real benefit comes from how they do the rest of their coding... And I suspect that an awful lot of people who say they can 'do' CSS have the same problem.
While consulting at a company a couple of weeks ago I was chatting to one of their developers, trying to gauge his level with web standards, and he told me that he could do CSS1 but not CSS2. What does that mean? I also see 'CSS2' as a requirement in a lot of job ads these days, as though knowledge of these extra properties somehow makes for a more accomplished web developer. I do not see any distinction (other than the obvious historical one) between CSS1 and 2 - I code my HTML properly and then use whatever rules come to hand the redefine the behaviour of those tags to fit into the required design.
A given site may not use a single property from the CSS2 spec but if the HTML is good it will have all the benefits people associate with CSS.
HTML matters
Now, at the beginning of this article I said that I don't code CSS. That's not entirely true but let me finish that sentence. I don't code CSS, I code semantic HTML. I happen to use CSS to restyle that HTML, to make it look the way I want, but that's an aside. I only use CSS because I use semantic HTML. I use HTML tags for their appropriateness for the information they contain (instead of for how they look) so I have to redefine how they behave.
Almost all of the benefits people normally attribute to CSS are actually down to the underlying (X)HTML. The better your markup, the better sense machines will be able to make of it – that includes both screenreaders and search engine spiders.
A bit of care and attention to what your page's markup actually means will go a long way. I'm not saying
that everyone should agonise over whether to use a definition list or an unordered list for navigation – pedantry aside, either
will do pretty well, but it pays to think about the content you are wrapping up. Do the headers go
sequentially from h1 down? Are your lists in ol, ul and dls? Are you using
div elements unnecessarily? Is there
something more meaningful you could use instead? I get the bulk of my HTML done before I touch the CSS – if it
makes sense naked then I'm on the right track.
Turning it around
HTML can make a site accessible. HTML can make your site rank higher in search engines. Good HTML can make you an elite web programmer. HTML is misunderstood.
Comments
* many developers have understood the signals of moving away from table-based layout. That’s all good.
* that goes hand in hand with validating your code. Great!
* but when you look under the hood, and that seems to come at a later stage of the learning process, you’d want semantically correct markup. Some people say, it’s good for search engine rankings, others say, it’s good for accessibility, and the rest says that it makes the code easier to read. Everyone’s a winner.
* and we haven’t even started talking about CSS yet. And that’s where Mike comes in and states, rightfully, that although CSS turns our valid, nicely formed, mostly black-and-white pages into a great or not-so-great looking website, it’s really the HTML that deserves all the credit for above mentioned advantages.
Now who wants to argue about that? Or, to put it differently, adding fuel to the fire: Who that has read the whole article, and at least one other of Mike’s articles, wants to argue about that?
by Matthias on June 1 2006, 05:06 #
I suppose thats why XHTML*+*CSS.
by Toru on May 31 2006, 00:08 #
pleasantly surprised, thanks.
by nortypig on May 31 2006, 01:56 #
CSS most certainly isn’t worthless, and being able to ‘code CSS’ is a primary skill in being able to develop semantic, accessible websites. The HTML structure of your document is certainly important, and spending time working on your content to present it in the most meaningful way is the best way to develop a website. Without CSS however, you wouldn’t be able to presentationally reorder content, remove extrenuos content that is not contextually required or add image or presentational detail for emphasis – meaning that your document, while structurally meaningful, would have little or no typographic style, colour, emphasis or layout – which also makes it inherently unusable.
I’m sick of reading articles written by people attempting to promote their knowledge and improve their standing in this industry by rattling off thinly veiled attacks on people learning the ropes or making minor errors in their CVs or blogs. Its a knowledge based industry like any other – some people have more knowledge than others. This article doesn’t say much except regurgitate what others have said but with a distinctly tabloid feel.
by Ben on May 31 2006, 05:05 #
Only designers that want to sell a redesign.
Like JS, once a total nono cause “u cant use the site when people have turned it off” (those 0.001% of the users were never important) and now u have Ajax which is sooo hip.
If u have to code diffrent versions for diffrent browsers … rethink and make life easier and faster.
Table around, the superfancy stuff for later.
Accesiblity ? Have u ever checked how many users which means customers which means revenue of any site really (!) need that ? And how much the redesig did cost ?
Hype, Hype, Hype.
by Rob on May 31 2006, 04:10 #
I have been waiting for someone to write something like this about CSS. I love css and I use it when creating “tabled” HTML websites. But I hate creating websites done in 100% css because NOT ALL BROWSERS render css the way they should look. I mean why would I push myself to create a 100% css/div website when some browsers misalign my containers etc.
Thank you for writing this article. Now I won’t feel guilty creating websites using both tables and css.
I know for a fact that css isn’t more seo friendly than Tables because my tabled website is Number 1 in Yahoo and MSN for my targetted keyphrase.
But I’ll still “slowly” move to that direction incase someday it’s necessary in order to get hired.
:)
by Bench on May 30 2006, 22:28 #
Call me old fashioned, or just Mr. Simple, but I think the word presentation, or any of it’s variants works just fine for encompassing those elements/items.
My point was not to confuse the issue further by trying to cleverly word something.
CSS can not, does not, ever control the behavior of (x)HTML elements, only their presentation.
by James Mathias on May 30 2006, 22:36 #
Anyway, I use the same technique as you in that I mark it up in XHTML first then style later. It feels right.
It shocks me to see so many sites with multiple h1s too! Oh well it makes my site perform a little better in the SERPS compared to some!
Nice Link Bait title too ;)
by Steven on May 30 2006, 08:53 #
by David on May 30 2006, 09:02 #
Take away the stylesheets, and what does your page look like – THIS is what you should be paying attention to, and then building your CSS around that. Stylesheets that re-create valid (X)html are the worst. Instead of using an H1-6 tag, the designer created a whole new div with the same look/function of a semantic HTML element.
Anyway, I could ramble on and on….but this was a great read – with a very catchy title. I was ready to come in here to battle, had my shield and sword ready! hehe.
Peace,
Nate
by Nate K on May 30 2006, 09:22 #
by Fredrik Wärmsberg on May 30 2006, 09:24 #
by Paul Watson on May 30 2006, 09:34 #
I second other reactions – IT SHOULD BE OBVIOUS IF YOU HAVE A BRAIN
by Johan on May 30 2006, 09:39 #
by Mike Stenhouse on May 30 2006, 09:44 #
I spend way too much time trying to explain that to people.
by Baxter on May 30 2006, 14:48 #
by Matt Sandy on May 30 2006, 14:39 #
by Mike Stenhouse on May 30 2006, 09:49 #
by Shaun Rowe on May 30 2006, 09:58 #
” It’s an especially hard leap if you come from a tables background where you are used to exploiting HTML for its looks. ”
Now CSS is well documented with all its bugs and bites. Plus you can re-use a lot of existing code.
by Johan on May 30 2006, 10:32 #
Ciao Marco
by Marco on May 30 2006, 10:50 #
by simmu on May 30 2006, 10:58 #
by Mike Stenhouse on May 30 2006, 11:02 #
Great article, Mike!
by Rik Lomas on May 30 2006, 11:11 #
by egon on May 30 2006, 14:56 #
However, good and valid points.
by Jens Meiert on May 30 2006, 06:49 #
by Alex Giron on May 30 2006, 08:06 #
by Mike Stenhouse on May 30 2006, 08:08 #
There are certain hooks that I know I am likely to need whilst coding up my html (which I do tend to add in as I go) but I too start from the html and work my way out to the stylesheet once my information is in place.
Sometimes I wonder if I get too pernikety (spelling?) about semantics although I have a lot of respect for folk like Tantek who take semantics to another level.
I found the presentation below very interesting when he went on to describe things like compound tags. Essentially combining tags to make more meaning for your document.
http://tantek.com/presentations/2005/03/elementsofxhtml/
I’m sorry but I can’t remember where to find the podcast of this presentation but I would recommend it to anyone…
The only thing that I wonder about is to what extent extended semantics are understood by screen readers etc and to what level end users actually benefit.
Cheers
by Alan on May 30 2006, 08:09 #
by Mike Stenhouse on May 30 2006, 08:10 #
should read
‘CSS isn’t worthless at all, but it certainly makes for a good headline that will get linked to lots’
Valid points made, shame about the marketing :)
by Terry on May 30 2006, 08:29 #
by Mike Stenhouse on May 30 2006, 08:33 #
by Tom Rogers on May 30 2006, 13:50 #
by Stuart Robertson on May 30 2006, 14:13 #
by Mike Stenhouse on May 30 2006, 14:25 #
Without the CSS we would not have been able to completely seperate style from content.
@Rik, reverting back to tables wouldn’t be semantically correct in every situation ;)
by Tim Hofman on May 30 2006, 12:02 #
I think Rik’s point is that without proper thought, CSS can be used to produce sites that are no more semantic than tables. A div carries very little semantic meaning and so should only be used when nothing else fits but I’ve seen too many people use it as their one-size-fits-all building block…
by Mike Stenhouse on May 30 2006, 12:13 #
I do think for the benefit of new CSS adopters that you change the term “behave(s)” to something that corresponds/relates with presentation.
CSS controls only presentation of the document structure, never the behavior of those elements.
I 100% understand your point, but I think it’s best, with an article of this nature to stick with the facts and not confuse the matter further for people new to CSS.
Also I agree that div’s have no semantic meaning by default, but their original and current purpose is to give the developer a generic “box” to which he may apply his own semantics through the use of a classname. So in that sense, div’s are an all purpose building block, for cases when no (x)HTML element is available to address the problem.
by James Mathias on May 30 2006, 14:58 #
I am entirely with mike on this one. If your markup is piss poor then your website is, no matter how fancy it looks because you styled it with CSS.
by Pascal Opitz on May 30 2006, 17:15 #
I use plenty of divs myself. My problem is with people using them without thinking about it. I've been shown dozens of nav bars by agency developers marked up with divs instead of lists with the developers sitting there proudly, thinking they've done a good job. Their CSS is often very good but their understanding of how they ought to be using it is lacking. When there's nothing else suitable, as you say, that's when they should be used.
by Mike Stenhouse on May 30 2006, 18:26 #
by Jeff Croft on May 30 2006, 18:59 #
by Mike Stenhouse on May 30 2006, 19:19 #
by Pilok on May 30 2006, 20:30 #
I feel dumbfounded when I hear clients go “I need a CSS design!...are you sure you can do CSS?”
Geez. Enough of the hype. CSS is a cool thing. For folks who have been designing for the web for few years and using CSS where appropriate, at times it can make us doubt ourselves if we’ve really missed some kind of a gigantic wave completely.
Finally an article that helps allay those awkward moments.
by Zaid on May 30 2006, 21:55 #
@Ben: You’ve missed my point. I am saying that CSS has received undue attention, resulting in the neglect of the HTML that underpins it. I am definitely not saying that no one should use CSS, I’m saying that the benefits that people often attribute to CSS are actually down to the HTML foundations. I’m sorry that I have offended you but I think you’ll find that this point hasn’t been made elsewhere. I have seen these misconceptions (and they are not minor, as you outline in your comment) held over and over again by people who should know better so it is a point worth making. If you know it all already then good for you – you’re elite, but many don’t.
by Mike Stenhouse on May 31 2006, 06:05 #
At SES last year the speakers were all trumping CSS as their new SEO silver bullet so if your web standards sites aren’t ranking as highly as your tables sites you might need to look at your semantics and content. The learning curve on browser compatibility is pretty steep but once you’re over that the rest is easy. It sounds like you’re well on your way so good luck.
by Mike Stenhouse on May 31 2006, 06:11 #
by Johannes Gorset on May 31 2006, 06:48 #
Content with styleMissing a .
by lol on May 31 2006, 07:44 #
by Mike Stenhouse on May 31 2006, 08:11 #
@Ben: I don’t see the point in slagging people off for writing articles. All of us chip in spare time and pay for server etc by ourselves. Simply stating that one tries to market oneself as expert instead of acknowledging the fact that at least he got his arse in gear to write an article, just because you didn’t personally relate to the feel that the article is conducted in is a bit harsh, no?
Personally I found the title entertaining and it becomes quite obvious what mike wants to say once you read it.
After all, it’s just an article, and I cannot understand why everyone here gets so worked up on it?
by Pascal Opitz on May 31 2006, 08:13 #
by Tim Hofman on May 31 2006, 12:08 #
Good article… Good WORK
by KRis on May 31 2006, 12:27 #
“Let me quickly recap recap what cascading style sheets actually do… They allow you to redefine the presentation of any HTML tag.”
No, they allow you to separate content from presentation… maybe you see those as the same, but they are not.
by Montoya on May 31 2006, 13:34 #
I cannot see what is wrong about the sentence you’re picking at, since every element has a default presentation, i.e. a paragraph is a block element and bold, which can be overwritten with CSS.
Also, using CSS does not automatically mean you seperate content from presentation. You might as well apply CSS in the same file, and that doesnt make it seperated at all. Same goes for style attributes filled with CSS commands.
Last but not least: Like Mike clearly stated in this article, and what this article is about if you ask me, seperation of content and presentation doesn’t make it good code, since the markup still might be not semantically correct. Hence the posibillity that CSS is worthless as tool for accessibility, SEO or anything else when the (x)HTML that it styles up doesn’t pay attention to those issues already.
One more question: Why shall this article do harm? If you ask me it’s about reading it properly instead of just looking at the headline.
by Pascal Opitz on May 31 2006, 16:30 #
You say : “CSS is worthless (without good use of semantic HTML)”. that is correct, but your argumentation and text construction does not simply show that. Its obvious that you need perfect html, but a good website needs also perfect css.
Ps: ” CSS will NOT boost your site in google. Good HTML (then of course styled with CSS) will.” . You should read more, its not just styling html with css.
Google gives more weight to content closer to the top of your HTML document. Search engines spider the content that comes first in your source code. With CSS you can easily structure the content to appear first with the rest of the source code following it. This will help outrank your competitors who may have their navigation appear first and their content last..
And how about css tricks to boost this up?...
The point is, of course html is important, of course css comes from html. But the way you talk one thinks css is used only for styling… and that’s the mistake of the article. A css “guru” would say something very different.
by Santos on June 1 2006, 07:29 #
Even on a complex site using toons of asp.net i need css. It all depends on how much you know about css, unless you know a lot you wont see benefits.
And for those who take css to the limit, the relation between a website and the search engines goes to a new level.
“only REDEFINES the HTML” , are you kidding?? a good css based site is cleaner, and has a visual impact. Take a look at a 80% based css site, and no way you can achieve the same level of “design” unless you master css. And you do it saving a lot of time.
by Santos on May 31 2006, 16:46 #
That is very incorrect… If you loose a couple of minutes reading and experimenting you’ll change opinion. You can find a lot of interesting articles of the relation between css and google…
An elite programmer must master html and css, and i mean master.
If one does not master a technology one does not fully understand it.
by pedro on May 31 2006, 16:54 #
by Danzo Manzo on May 31 2006, 16:54 #
I understand your point, giving too much credit to css and forgeting a good clean html is not good webdesign.
But i think you failed in two points. The first the benefits of css in search engines. An excelent use of css will burst a site position in google.
The second is the “aspect” of a website. It not just to make a cute list, or nice hover effects… css taken to the limit will make great things. If you take a look at a good css gallery site you will see amazing things in 100% validated sites. And they do it in much less time.
I have also read (in a comment) that css coders only look for a reboot deal. Only a guy that knows nothing about this could say that.
But i took from your article an important point, don’t forget html.
by Silva on May 31 2006, 17:07 #
@pedro: Relations between google and css… hmm, links please …
@Danzo Manzo: Like clean URLs, keywords in the content and linkage? Sure, but those are usually not misconceptionally credited to CSS.
@Silva: CSS will NOT boost your site in google. Good HTML (then of course styled with CSS) will.
And people, not to forget that Mike is a “CSS guru” if you ask me. He did things for the Zen garden before I even knew about it (or him) and he pushed accessibility and XHTML + CSS based design big time a couple of years ago, already.
For all of you that don’t really get his point and are offended by his statement that CSS is worthless, you don’t understand the article I’m afraid.
Relax and complete the title in your head:
“CSS is worthless (without good use of semantic HTML)”
by Pascal Opitz on June 1 2006, 03:25 #
In fact CSS is just used for styling. It does nothing else. Tell me one example where the CSS does something else?
by Pascal Opitz on June 1 2006, 07:49 #
by Matthias on June 1 2006, 07:58 #
by Pascal Opitz on June 1 2006, 08:03 #
So SEO then…
@Santos: I’m actually quite deeply embedded in the SEO industry. I’ve spent a lot of time working for Wordtracker, I’m at SES London today and tomorrow, I know about link building, white and black hat tricks. I’m definitely not an SEO expert but I know more than most. If you look at my CSS Framework you’ll see that I put the navigation after the content to allow for better top loading. Can you tell me what ranking benefits you get purely from CSS tricks? I would bet good money that the tricks you’re referring to actually rest on HTML…
@Silva: I’m glad to hear it’s triggered a discussion – that’s the best possible outcome. Care to share the conclusions you guys came to?
@Danzo: I know that HTML is not the only thing – my point is that the benefits that people often attribute to CSS actually come from the markup.
@Pedro: Yep, that’s exactly what I mean. CSS lets you do some clever stuff with your HTML and that’s where the benefits lie.
by Mike Stenhouse on June 1 2006, 08:14 #
Thats fucking true !
The real pure information stand in (X)HTML markup. CSS is just a plus.
I really agree with Mike. A good site could normally work without CSS.
Then, to know if your site is well made, desactivate stylesheets and try to find information…
by Franck on June 1 2006, 10:03 #
If it gives you a better ranking, why is not everybody using it?
by Tim Hofman on June 1 2006, 17:28 #
by fred on June 1 2006, 21:43 #
nothing new indeed. I find that this SEOmoz Article comes in quite handy when optimizing your website. SEO is more on the sidelines of my work, but I do try to structure the HTML following these factors.
You’ll find more information about top-loading under “Organization of Document Text” on this document. As you can see, it’s not the highest priority, but then again, I think that the sum of your efforts is the key to a good ranking.
by Matthias on June 2 2006, 05:53 #
‘Course, I usually wind up stressing the actual (X)HTML above all while summarizing it all with “CSS-based design.” It really depends on who you’re speaking with – marketing, developers, non-techy designers, usability engineers, interviewing candidates, etc.
by France on June 2 2006, 11:01 #
Standards are important because in the future it might be impossible to decipher invalid documents. Parsers, by then, might have become more strict about things.
If you consider a website as a mission to be accomplished kindo thingy, then ok, it might work to get there in whatever kind of way. However, if you take the information contained in websites as something that has been put on the internet in order to last for a while, then sticking to standards might be the only way to ensure that future parsers can read it. On a sidenote: What's the 100% valid for? Is there anything in between valid and invalid? ;)
by Pascal Opitz on June 2 2006, 21:59 #
Think about who this article is aimed at: how many people who think they know CSS would read an article called Use Proper Html
Let me preface this by saying your article is right on for a certain demographic. But I think you’re getting ahead of the true learning curve.
The irony of your statement here is that we use the term CSS fast and loose for the exact same reason you used the title that you did—to reach the ill-informed
I’ve been on the standards train since Zeldman started trumpeting it back in 2000. I’ve paid my dues trying to float divs in Netscape 4 and IE Mac. At my last job I was the boss and hired my own assistants which made it possible to work with people who knew what they were doing. But since then I’ve come to work at an agency (I still do freelance as well thank god).
Despite the large volume [sic] of the web design blog community, most web designers are still using Dreamweaver and using it poorly. There are literally millions of these people who know their way around Photoshop, and have some design skill, but they don’t consider themselves programmers, and have no interest in HTML per se. I’m nearly pulling my hair out doing back-end work on designs that look beautiful but have tables nested 4 or 5 levels deep for a simple three column layout. These people just need to get started down the path of ‘CSS’ as soon as possible.
In our insular on-line communities its easy to rage for weeks over some semantic detail, while in the real world a little bit of knowledge could make major productivity improvements. Some projects I work on could make 30% or 50% or 100% more
efficient use of my time if the designer knew just some basic principles of CSS instead of slapping tables and spacer gifs around every little thing.
Face it, CSS is a buzzword to the majority of people. It’s in the mainstream, and trying to enforce correct usage is hopeless if people don’t have the interest to learn. There’s no reason to fight it. Pretty soon you’ll sound like those guys saying “A Mac is a PC. Personal Computer” before adjusting their pocket protector and scaring everyone out of the room.
When you see shitty sites designed with CSS, that’s the time to say “your HTML sucks” or “your CSS sucks” or whatever the case may be. Talk to people at whatever level they’re at, don’t fight common usage.
by Gabe da Silveira on June 3 2006, 00:58 #
Everyone needs to dump the elitist attitude. It’s like designers becoming self proclaimed expert programmers because it’s trendy – the minute they do learn about programming fundamentals will be the minute they start laughing at the web and all it’s “standards.” Seriously, CSS and XHTML is something you learn over a weekend…and I will never brand my web site with a tag that says I created valid markup. It’s like putting a C++ logo on the box of your software because it was written using C++. SO!? Who cares?! That’s not the point of creating software – or a web site. The web is a completely silly little playground that’s gone out of control.
Use CSS, XHTML, HTML, DHTML, Flash, Java, etc. however you like – The only thing that matters is if it accomplishes the goals you set out to accomplish. NOT whether other people on the net think it’s “proper.”
by Tom on June 2 2006, 16:39 #
i know your point. you’re trying to say that the html semantics are more important than just “coding css.” i get that. but your title and the way you present that information by making examples of people who don’t understand this point has made me, and others like ben, recoil at this article with a hint of disgust. no offense.
maybe a better title would have been “CSS is Misunderstood” like you have in one of the subheadings. To say, outright, that “CSS is Worthless” is merely trying to exaggerate for the sake of exaggerating. It doesn’t help anyone.
by kevin on June 2 2006, 17:05 #
A good site has content that people want to see, and keep coming back to see. A great site does the same, and adds interactivity with other people. A superior site does all that and makes it look elegant (whether the code behind the scenes is perfectly structured or not).
That all said, I don’t feel I’m an enemy to semantic markup and CSS. It’s just that I refuse to be technically enslaved by them. I program to standards when the standards helps me deliver what I want, and deviate from the standards when they don’t. Sue me. :)
Besides, there are enough differences between the browsers in terms of how they support standards that deviations are the norm. And there even other approaches to achieve a semantically understood site without perfectly semantic markup.
by Steve Magruder on June 3 2006, 03:51 #
“Seriously, CSS and XHTML is something you learn over a weekend…”
I don’t think that is totally true. CSS itself ain’t that hard to learn, but to get it working in every browser, you need much more experience than just 2 days. Like you know, it can be a real pain in the ass. The same with XHTML, unless you have a very good teacher or other sources to learn, you won’t be using it right that quick.
by Tim Hofman on June 3 2006, 05:04 #
by Andrew on June 4 2006, 01:07 #
I am very proud of the design (teamwork) and will show this piece in my portfolio. As design and interface goes, it looks smashing. Indeed, css was worthless and untidy back then.
by Johan on June 6 2006, 03:36 #
But I know all that too. ( I am the type that even makes javascripteg galleries to degrade nicely with or without styles as it should …)
But the website was made in 2002. So it does not matter since it is not online anymore. It is from the very past. I am not gonna put my effort in rebuilding the website and webshop (with horrible JS – remember Netscape 4 and IE 4-5.0).
The only thing is (without being nostalgic) I really am proud of the design (it is timeless) and the need animated logo. I was thinking to integrate this again in my portfolio. Since it counts as a showcase for a portfolio. I am thinking of making a demo version (buld with CSS and valid for the swfs)o f it with the same graphics and the animated logo (but without the webshop since it is a horror).
This way I can use the thing as a portfolio piece once again.
For you i have a good link (from a very good guy)
http://www.howtocreate.co.uk/tutorials/html/semantics
by Johan on June 7 2006, 05:26 #
Since back then, by inroducing new laws against discrimination and some organisations facing legal action for not providing an accessible website, a lot has changed in the www world and just because a design looks still as fresh as it did back then doesn’t mean that you could not get sued.
@hollowmyth: Maybe you’re right. It does look significantly better though, no? Also there’s a lot more tools you can use, and noone will kill you for using an image that has more than 2.5k. Instead everyone will kill you for an animated gif with a roadworks sign that says “under construction”.
by Pascal Opitz on June 7 2006, 03:28 #
by hollowmyth on June 6 2006, 17:07 #
The markup is outdated, even the company’s website has renewed (and the webdesign company I worked for even merged with another). Though the web site (took a peek again after all these years in the code) works extensively with tables, inline styles, no doctype, frames, etc. What I meant the design-interface looks fresh still today, and works just like back then. Though if I would add some minor changes to the styles and chuck out some tables, the text would scale and overflow as should. So the website works ok but could need a brushing up.
by Johan on June 6 2006, 04:51 #
@Andrew: I think what you’re missing a bit is the point that all the benfits like Accessibiliy and SEO have nothing to do with the visual representation of the document in your browser. And that is what the article is about. About the misconception that is now a very common one, i.e. “CSS is great because it enhances accessibility” or “CSS is great because it helps my search engine rankings” ... wich is only true if the markup is well structured … of course you can style poor markup with CSS as well, wich will give you a poor ranking in search engines and poor accessibility.
@Johan: I somehow cannot grasp the bottom line of your post. Is it meant as example how only the outcome counts? Or as example how old websites are not future proof because of the outdated way to markup back then?
by Pascal Opitz on June 6 2006, 03:58 #
Should one include sites made back then with outdated markup into ones list of references?
I think yes. Everyone should know how it was back then, and pixel-perfect table layouts were regarded as best practice in most agencies. Therefore there is no need to be ashamed of them me thinks …
However, if you personally are just intersted in showing off the design: How about a good old screenshot?
by Pascal Opitz on June 7 2006, 05:47 #
by rich on June 7 2006, 08:42 #
by Marcus Bointon on June 7 2006, 12:45 #
by Craig on June 8 2006, 08:58 #
by Mike Stenhouse on June 8 2006, 09:32 #
by Holly on June 7 2006, 18:40 #
by Mike Stenhouse on June 8 2006, 09:36 #
And then I learned what it was and how to use it. An importantly, at the same time, learned the importance of your (x)HTML markup.
Great article, but I will agree with those who have said it before – shameless (but effective) tactic to get the CSS-groupies to read about the importance of everything that came before.
by jenn.suz.hoy on June 8 2006, 11:45 #
by Nikki-ann on June 9 2006, 04:24 #
by John on June 9 2006, 09:20 #
Its definatly not “worthless” though as without it websites would look like those sweet ones that used to be made in the 80/90’s!!!
by Ross Bruniges on June 12 2006, 09:05 #
If theres a perfect HTML coded web page done with no CSS whatsoever and then the same presented web page but with all its styling done in CSS in a seperate CSS file, what one do you think would rank higher?
by Ross on June 15 2006, 09:03 #
by Frankie on June 19 2006, 15:26 #
@Frankie: You’ve taken the time to look at the source code how about taking the time to read the article?
by Mike Stenhouse on June 20 2006, 06:28 #
By the way, it looks like your system publishes your commentors email addresses if they don’t list a website. I’m not sure that’s a good thing; I can testify personally, that it really discourages me from commenting.
That aside, I really like your site.
by Joey Livingston on July 21 2006, 09:46 #
Yes I understand that good clean html will help search engines reach this content but I also believe search engines will be designed with all this in mind.
Google themselves say something along the lines of you are better off spending time working on the content than doing things like submitting yourself to search engines and the rest.
Content is king.
To me you arguments about CSS seem to apply to your aguments about HTML. HTML is worthless next to bad content ;)
by Sebastian on August 3 2006, 07:24 #
‘HTML is worthless next to bad content’ sounds like an article title to me!
[Oh, and email addresses aren’t published any more.]
by Mike Stenhouse on August 3 2006, 07:35 #
..way back up there in the posts. a litlte.
I actually would be surprised if future browsers don’t continue to support old code. The framework is already there. They literally have to do nothing different. Just add the new. It would also be foolish to drop support for old content as many web sites would not load. I think that puts software companies making web browsers in a big position of responsibility.
I don’t know if there will ever be a solution or a real true “standard” – the funny thing about a standard is, it’s not a standard unless everyone follows it. Well, not everyone does here and some people are fighting against these so called “standards” to create their own version. ehem major companies shall go nameless.
by Tom on August 10 2006, 23:22 #
by Ocira on August 18 2006, 10:28 #
Whats all the fuss about CSS and XHTML, the whole point of a commercial website is to make money, if it works fine with the businesses target audience, do they really care if its 100% valid css and xhtml?
Thanks guys,
keep up the good work,
from the lads at Teesside Website Design
by Teesside Website Design on October 15 2006, 20:37 #
But I have a couple of points two consider here:
First of all, there is a possible loss of money for the business: What about those people that might buy into the products sold that are using unsusual browsers, mobile devices or display devices that help themselves out with disabilities? Or even worse: What if you get a letter from the lawyers telling you that your website is not accessible enough and that you have to change that or else?
The second point is the pride that I want to take in my daily work. I think it is important to adopt new techniques and push yourself to create the best product possible, otherwise you might find yourself with an outdated skillset or get bored to death.
The third point is about efficency. You might waste your time going through the same old process again and again if there’s a possible way to do things in a smarter and more streamlined way, saving time, money and deliver a better product. Most new programming techniques as well as best practice rules aim for saving you time .
An my last point would be the teamwork one:
If people stick to best practice rules and coding standards, then it becomes more easy to take over a project, thus you save time again.
Hope that all makes sense to you.
Hope you can see my points in this one.
by Pascal Opitz on October 16 2006, 03:42 #
I’m getting there!
Thanks!
by Tom L on October 27 2006, 08:43 #
Yes HTML is the foundation, without it the rest just crumbles/doesn’t matter. CSS, SEO and usability would be a mute point then.
But…
CSS does help SEO, anyone who’s ever written or cracked open source code on any spider. You’ll find that more “strict” or valid HTML will make or break the crawler from doing what really matters most, indexing everything it can find from your site. Bad code, and the spider will hiccup all over the place.
Next with absolute positioning one can easily put “meaty” content at the top of the source before any redundant header, menu’s and footer. If it does help SEO is a debatable topic, however I don’t see any reason why it would NOT help in an SEO aspect. Theres a reason Google ranks the root index page the highest and everything under it less.
CSS does also help in the realm of usability, with out it you wouldn’t get the nice “semantic” HTML your referring to. You would end up with more styling and therefor screen readers have more HTML it has to parse. Not too mention percentages on font-size, anyone who’s still using fixed font size’s should be shot. Granted these few things don’t make or break SEO or usability for any site, theres a ton of other factors but it is in fact a good step towards helping in these realms.
BTW, I’m assuming your “make” should be after “not” and before “an”.
“wrong wrong wrong. CSS does not an accessible site make.”
reference:
http://cart-lab.blogspot.com/2006/08/14-search-marketing-questions-answered.html
by B00MER on January 6 2007, 09:22 #
I agree that website developers (both pixel pushers and code monkeys) need to understand the proper place of HTML and CSS in the real world.
In regards to the other I have been the victim of my own and others perspectives about developing a solution that will last longer than the great wall of china. This leads to some great but ultimately unneeded functioanlity in the solution being developed.
I belive that if you get cought up in the “tech” aspect of the solutoin you are developing and forget about the clients “NEEDS AND EXPECTATIONS” then you will deliver a product that while getting the correct ooooohs and aaaaahs of the tech world with have the client sending you some less than plessant comments.
We are all (either self emplyed or otheriwse) in business to deliver to our clients that they request.
Thanks for the article I appreciated its contet and comments and I personally belive in its use of catchy titles.
by Nathan H on November 14 2006, 08:41 #
It’s moot point, my friend… for future reference.
I suppose a point that were made by a mute might seem moot as well, but that’s beside the point :)
by Ean Bowman on March 2 2007, 12:59 #
Now this one is a new development among purists that I’d like a good excuse for.
Any browser worth it’s salt can scale fonts quite well – and a pixel-perfect design often requires finer grained control over font sizes than “small”, “large”, “smaller”, etc…
I really want to know… why?
by Ean Bowman on March 2 2007, 13:03 #
It seems about half of the people who have read this have missed the point – that you are NOT against CSS, but that you dislike people calling it the end-all and be-all of web scripting when all it does is style content.
The real holy-grail is markup that makes sense semantically since that’s really what it was designed for.
It’s not about oohs and ahs from techs. It’s about making a site that will:
1) Be accessible on any format that can read proper HTML.
2) Be useful in the future when new standards arise based on HTML and XHTML and rely on the code made for them being somewhat compliant.
It’s not a techie wang-waving contest… it’s common sense.
by Ean Bowman on March 2 2007, 13:07 #
The benefits you’ve listed are ALL in the HTML, facilitated by CSS. That’s exactly my point. Everyone should write good HTML – something I’ve seen too many people lose sight of. Have you ever looked at the source of the sites listed on cssBeauty? They’re all lovely but very few have good, semantic HTML and without that they’re forefitting many of the benefits that should come with web standards-based techniques.
‘BTW, I’m assuming your “make” should be after “not” and before “an”.’
No, it’s an English figure of speech. The order of the words is historical.
by Mike Stenhouse on February 19 2007, 05:45 #
Imagine this scenario:
If a web browser has their CSS switched off (lord knows why but hypothetically) then your so-called Semantic HTML is all that will be displayed, and the default associated styles of the HTML elements. Therefore, if your so-called Semantic HTML is composed of only divs, li, and text elements, any column style will be lost without the use of tables, making it potentially very inaccessible.
So, your claims that CSS has nothing to do with accessibility are way too generalistic. Any half decent web developer ought to use a combination of native HTML element styling with the repositioning skills of CSS thrown in. My basic HTML element set is composed of LIs, very simple style definitive tables, divs and text elements (h1,h2, p etc)
by anon on April 23 2007, 11:59 #
If you preserve the columns by marking your page up with a table then you’re locking whatever device is accessing the page into your design. While JAWS does a decent job of linearising tables itself my mobile phone browser doesn’t and with only a couple of hundred pixels to play with that is a nasty impediment to my accessing your data. Accessibility isn’t about having “CSS switched off” it’s about making your pages’ content available to the widest possible audience on the most diverse set of devices and that’s what good, semantic HTML does best.
by Mike Stenhouse on April 23 2007, 12:19 #
Directly it does not sure but i completely disagree with this statement. I find css very useful because i only have to write one rule once for an entire site saving me a great deal of time. therefore a tool that enables many web designers to save time, money and increase efficiency is worthless? It’s like making a statement that PHP is worthless…
Css helps clean up your code making a site more accessible by cleaning up the code and filtering out repetitive junk that makes a poor screen reader work twice as hard. Clean code is easier to understand period. Therefore more accessible. Whats more accessible for a person with a hurt leg. To climb a flight of stairs? or multiple flights of stairs before reaching the same destination? Cleaner code = easier to understand = more accessible to a degree period.
Css is there for future/backward compatibility as well if it is used properly.WC3 has incorperated standards so that the code is used properly so that your website will look the same 10 years from now. Css is more a visual element than anything. And yes HTML is cool and can be used to achieve accessibility but XHTML is far more prominent when it comes to accessibility. Keeping content and presentation separate. and it’s deemed worthless? I deem is useful. When you can half the bandwidth used on your website, decreasing your operating costs… thats worthless? Losing a visitor because your page takes too long to load? Worthless?
I don’t think you understand fully what you are talking about when it comes to the differences between CSS1, CSS2 and such.
by nate on May 1 2007, 02:14 #
by Mike Stenhouse on May 1 2007, 06:23 #
by nate on May 1 2007, 17:54 #
But mostly means “not all”. I do think good CSS help the SEO. Here’s why.
Content is the King. He rules it all. No King, no Kingdom. Good King, good Kingdom. Bad King, bad Kingdom.
Markup is the Kingdom Architech. Without the Architech, the King can’t do anything. The better the Architech, the better the Kingdom.
CSS is the Kingdom Ambassador. He talks about the Kingdom to other people, to other kingdoms. He makes it look good, makes it look nice. Because of that, people come to the Kingdom and other kingdoms talk about the Kingdom.
And then, more people come to the Kingdom and tell their friends to go see the Kingdom. And more kingdoms write about the Kingdom telling people what a nice Kingdom it is.
The SEO is the Kingdom Accountant. He looks at the King and sees that he does a good job of taking care of the Kingdom. He looks at the Kingdom with a very large smile..
Then he studies the Architech’s work and sees how efficiently the Kingdom has been constructed. He looks again at the Kingdom with a large smile.
Finally, the Accountant is also an accountant. He counts how many people and kingdoms are talking and writing about the Kingdom. He then sees how popular the Kingdon has become. He gives the Kingdom a smile.
So today, the Kingdom has received
a very large smile for the King’s work,
a large smile for the Architech’s work and
a smile for the Ambassador’s work.
Louis
by Louis Lapointe on June 18 2007, 13:44 #
by Coreg Albenza on August 15 2007, 03:11 #
HTML coding is something i`ve done for mere months, great fun but repitition of the HTML Tags sure slows things down, I knew CSS would help out there but had to learn HTML Basics first before worrying about Cascading Style Sheets … now to do some research on Semantic HTML!
Christopher J.
by Christopher J. on February 5 2008, 03:38 #
@Ean Bowman Any browser worth it’s salt can scale fonts quite well – and a pixel-perfect design often requires finer grained control over font sizes than “small”, “large”, “smaller”, etc…
I didn’t see an answer to this one… Internet Explorer, for one, is a browser that is incapable of resizing fonts set with pixel size. No matter how often you hit CTRL +, the font stays the same.
There’s also the simple fact that a browser is not a magazine. “Pixel-perfect” fits in a world of paper or PDF, but HTML should be readable on an 800×600 screen as well as a 1600×1280. If I see a website that uses 10px fonts on my 1280×1024 screen, and I can’t use my mouse wheel or CTRL + to enlarge the font, I’m gone. That stuff is reminiscent of LiveJournal blogs and MySpace.
The first priority for a business website is to have contents; the second is to keep these contents accessible… and accessibility is more than “it works in a screen reader” – people with mildly impaired vision or impaired motor skills (who do not get the several hundreds of dollars a screen reader costs back from their insurance companies) need to be able to see contents, even if it means breaking your pixel-perfect design. In the simplest scenario, they’ll switch off styles or override them, discarding your perfectly aligned pixels altogether…
... which is where this article fits in perfectly, because if the contents aren’t offered in a way that makes sense semantically, they become inaccessible or unnavigable.
I actually used the “icing on the cake” thing (mentioned WAAAAY up there) myself on another designer’s website’s comment page, but went as far as to say:
CSS is the icing on a site’s cake – but without contents [or semantic markup], the icing is nothing but a big blob of processed sugar.
by Mehdi on February 16 2008, 12:07 #
Yeah – and I’m very late to respond too. XD
You’ve missed my point entirely. Perhaps this is a side-effect of the digg/reddit phenomenon. People don’t read, they skim.
What I said is exactly what you said – but that sometimes I’m required to work with pixels to make a design I’m handed work perfectly.
This is not my decision but it sometimes is what puts the money in my hands and the site on the web. Of course I’ll give good consultation on the subject but it sometimes falls on deaf ears.
1) My designer is quite against using 10px font sizes anyway.
2) I’ll likely style any body content in pts if at all anyway.
3) Why the hell are you still using IE6? It’s the bane of the web. This is 2008 – get an alternative browser or get something from the same company newer than 2001(?). http://en.wikipedia.org/wiki/Internet_Explorer
To summarize, I agree and I have been supporting semantic markup all along. Pixel font sizes aren’t evil if you don’t choose to use a horrible browser. The web is definitely not print, but it is a canvas of sorts. Perhaps selectable font sizes is a kludge but doing without setting them is probably best.
by Ean Bowman on July 29 2008, 16:32 #