Join Andy Clarke for an in-depth discussion in this video Web standards and CSS, part of CSS for Designers.
- [Molly] I happen to be really interested in the history of the web, and one of the things that fascinates me when I go back and look at what was going on in 1993 when the World Wide Web first came to the consumer desktop, is that it was pure text. There wasn't any design involved. It was never meant to be a visual environment and I think that so many of the challenges that we have today as designers, is that we are working on a screen space that originally was never meant to be used that way and as time has progressed certainly we've gotten better browsers and better technology to help us do that but it's taken a very long time to sort of balance that stuff out, so as a result, I'm going to show you a little bit of the history, because I think it really is very important that designers understand fully that the difficulties we're having today and the challenges we have today have a very deep historical reason.
By 1994, the W3C was formed. This is the World Wide Web Consortium, and we're looking at their website right now. Essentially, the W3C is involved in developing the technologies, CSS, the XHTML, and various specifications and software and tools that relate to building the web. It's very interesting to note that CSS was originally proposed in 1994, the actual year that the W3C was created. Of course, we didn't see it for many years to come, much less be able to use it, but it was, in fact, proposed in 1994.
What was very interesting to me, is not only that it was proposed as an idea, but people I think don't realize or certainly people that are working on the web, with no particular print or production background, find themselves working with CSS and wondering, or thinking it's a new technology, but the reality is, is that comes out of desktop publishing and it was not at all a new idea, it was just a new application environment. So, essentially we needed something to keep us busy with design in the interim, while browsers were becoming more sophisticated and while CSS was being developed.
This is excite.com. It's a site that I really enjoy showing to people, because it has some examples of what we were doing during those years when we didn't have CSS and we had to rely on presentational HTML to get the job done. And what I mean by presentational HTML is using markup to achieve a specific visual goal. In this case we're using all kinds of things, such as fonts, font element, tables for layout. Let's take a look, in fact, at that. I'm using the web developer extension.
This is a fabulous toolbar, as you can see, running across the top here, with a lot of useful tools for web designers and developers, and I highly recommend that you check it out. You can find how to get it if you check out our bookmarks.html file in the source folder, with your exercises. I'm going to go ahead and use this to outline the table cells and the tables themselves, to show you just how complex tables became in order to lay out the visual components of the page.
It's pretty detailed and it's very interesting to see how a table cell might be used just for a single bullet, or another table cell used for a single link, when in fact, if we look at this, what are we seeing? - [Andy] It's just a list. - [Molly] It's just a list. So, we're learned a lot in the years that have gone since these types of designs have become really the way to design for the web. But back in those days, this was all we really had to be able to move this image, for example, to the right, or have each of these things broken down into table-like components.
So, if we turn that off, we go back and we see the three column layout, header material, footer material, very, very common design that we still see today. Now, an interesting thing happened in 1996, we got CSS 1, and CSS 1 gave us a lot that we could do with styling links and adding colors and things like that. But there weren't any things that helped us with layout, so if we take a look at the CSS in this particular situation, I'm going to go ahead and disable the CSS on this page, using that developer toolbar, and as you can see, the fonts and some of the colors and presentational issues of that nature have now been moved into the CSS, even though a great deal of the markup remains presentational and the table based layout is intact.
Okay, so this was a form of design that some people refer to as conventional web design, and it is a practice that is still the dominant practice on the web. But when we learn CSS and when we come to the realization that CSS gives us so much more, we begin to see so many benefits, as we talked about in the opening live action video, that really the entire shift in the industry is occurring because of this and I know that as designers, you're all going to appreciate how much better and how much more control you have over your sites as a result.
By 1998, CSS 2 came out and that was when we began to actually see layout emerge. This came a few years later, but 1998 is when the specification for CSS with all of the layout components were made available. And browsers began to adopt them, and eventually, as browsers adopted them, people began to adopt them. One of the earliest examples of CSS layout is available at bluerobot.com in the Layout Reservoir. But as we look through this site, we can see, here we've got a simple layout, very simple, header, left nav, main content area.
But, if we go ahead and we remove the CSS from this, you'll find that we end up with a very plain but structured HTML document. No tables, none of that presentational stuff in the way. So really getting more and more towards this very, very clean, lean, mean document concept. Here we see the header and the same kind of design with the header and the navigation to the right and the content to the left, and another very, very popular layout, which, of course, if we think about the Excite's site, say that 10 times fast, Excite's site, when we look at this, We see three columns, very, very common way of laying out pages.
In fact, it was such an interest to me that my own web log took from that particular design. And that was an early version of molly.com, using that particular layout that was used here. - [Andy] I never knew that. - [Molly] Yeah, that's where it comes from. Another resource, where we saw some pretty early use of layouts and some original advancements that began to push CSS more and more toward the designer, is the layout techniques glish.com, and just bear in mind that all of these links will be available in the bookmarks.html file and also on the chapter file for chapter one, you'll find bookmarks in there as well.
As you can see here, we've got the Holy Grail of web design, as they said. Basically a header with three columns below it. It's pretty funny to look back at this, isn't it, and think that this was the most sophisticated we could get, because as you'll all find out as we begin to move into layout and actually work through layouts, you're going to find that we do things so much better now. But this is what we had, as we progress through that history. There's something I do want to point to here, and this is the box model hack. This hack was created by a gentleman named Tantek Çelik, who was the developer of the Mac Internet Explorer browser, in the 5.0 version.
So, he really knew a lot about the browsers and interestingly enough, Microsoft has a different box model, which is essentially is a bit of technology there that designers actually need to understand a bit about and we'll talk about it as we progress through the tutorial. But essentially, the way that the box model worked in IE was different than the way it was working in Netscape and other browsers, and this was causing a problem. People couldn't create sites using this type of layout and have them look somewhat alike from browser to browser.
But that hack, right there, that voice-family strangeness that you probably have never seen, or if you have seen it, you've seen it being used exactly in that way to correct this issue. This is what advanced CSS forward, and gave us those opportunities. A couple of other issues is that in 1998, to step back a second, the Web Standards Project (WaSP) was founded by Jeffrey Zeldman and a number of other people, and the reason for this organization was to help push all of these technologies forward within the browsers and the tools and all of that.
We exist today to continue to improve, constantly, these technologies, within the browsers, empowering designers to the best of our ability. So it's really a very interesting thing to see, as we move through the history and into now contemporary times, how the failings of HTML and the limitations HTML, the limitations of CSS, and the failings of the browser software companies to get things organized in a certain amount of time has really caused a significant delay in being able to apply CSS, but now we have that.
- [Andy] I think what's really interesting about this story is that the history of CSS is actually quite short, but there's been fraught with problems along the way. Hold ups, really, in terms of people adopting CSS in a more widespread environment. Particularly within the commercial environment. And when we consider that the majority of these issues have been up and solved through the dedication of certain people, and it's been really individual's who have been sat, figuring out how we can do this kind of stuff, which has really pushed the web forward to the point where we are today.
- [Molly] I think that's an excellent point. And, in the next exercise, we're going to get to see a little bit of how that CSS then moved from this point and pushed forward into the exact contemporary thing that you're talking about, Andy, is that we needed that push and those individuals pushed and we were able to get to that certain point with CSS that we had layout and then it began to really, really take off. So, in the next exercise, we're going to see how it took off and where it ultimately ends up.