Join Andy Clarke for an in-depth discussion in this video Chapter intro, part of CSS for Designers.
- [Molly] Welcome to CSS for designers. I'm Molly Holzschlag, a technologist, and I dabble in design but really I'm not that great at making things look beautiful. Over here in the booth with me is- - [Andy] Andy Clarke, and I'm a designer. And my job is usually to make things look pretty, as well as to make them usable. - [Molly] Combined, we work together to balance this issue of what is technology and what is design for the web, to make the web beautiful but also keep the under-structure of everything we do clean, and in order to really gain the best benefits that we can not only for our users but also for the environments in which we work.
One of the things that we've learned over the last few years is that web standards, the kinds of technologies we're working with, XHTML, CSS, and accessibility, all of these things fall under what we term web standards. You can see that I'm looking at The Web Standards Project website. Both Andy and I are members of The Web Standards Project. And we are a group of, at this point, about 50 people that are working on various aspects of how to promote best practices and standards in our profession to give empowerment to everyone working on websites, whether they're large or small, and to gain benefits both for economic and workflow reasons as well as to give the best experience that is usable and accessible to the site visitor.
As you can see, The Web Standards Project has been around since 1998, and we've been fighting a long time to get not only developers and designers to implement the technologies and techniques that we'll be talking about in this title, but also to get the browser companies to support the specifications and to get your tools to support the specifications. There are many many benefits to using the techniques that we are about to teach you. Just to highlight a few of them before getting on with the show, first of all there is this return on investment.
When you begin to look at large-scale websites especially like America Online, Yahoo, MSN, things of that nature where very highly trafficked sites, sites with a really large amount of content on them, it becomes clearer to people just how much technology is being used. If you have a million people hitting up a million documents in a given short period of time, that's a tremendous burden on the server. You have bandwidth issues and you also have technology issues that are involved there.
In order to make this entire process more effective and to use less bandwidth, keeping in step with the techniques we're teaching, that can empower and enable us to really significantly reduce the amount of bandwidth and requests that go on during the process. In large-scale environments, we've found up to millions of dollars saved each year in bandwidth because of the techniques that we're about to teach. The other advantages are obviously for usability on the user's side; a better faster experience because of the way the technologies work in tandem with browsers.
And also a very important piece, accessibility. And for many many years, people had been criticizing accessible design, saying it looked much like this page we're looking at right now, a bit too boxy. But by the time you are working through this tutorial, this site will look quite a bit different and you'll get a little sneak preview of that. I'm going to turn this over to Andy for a moment. He can tell you a little bit about the logistics of working with us through this tutorial. - [Andy] Yeah, a little bit of housekeeping.
All of the example files, all of the exercise files that we're going to be walking through are available to you. They've been broken down into both chapters and into individual movies. So inside every exercise folder, you've got all of the XHTML, all of the CSS, and all of the graphics that we're using for these exercises. We're going to be using Dreamweaver as our code editor. Although any code or text editor on any platform will work just fine. We're using Dreamweaver 8 mainly because of the snippets facility to enable us to drag and drop some pre-made code snippets into our pages to help speed up the presentation.
- [Molly] A final reminder is that at any point that something is unclear, we'd like to remind you that you can go ahead and rewind the video, take a look at the exercise in a little more detail, and review any movie at any time that you feel the need to. There is a lot of technical information in this session. We've tried to keep the technical jargon to a limited amount. And so we've put a couple of important files into the source folder on your CD, or if you have the premium membership, it'll be on the film library for you, where we've included several files.
One is called selector matrix and the other one is called value matrix. These are HTML files that will give you a lot of information about the kinds of symbols that you're seeing. In fact, in this document in front of you, things of this nature, all of these aspects of CSS and also some XHTML will be reviewed in those particular documents so that you have those resources and we don't have to explain them in highly technical detail here to you, rather just demonstrate so we can get right down to the design.
So please be sure to check those files out. There are also some very wonderful resources to fill in any gaps that we might have left in the presentation in the bookmarks dot html file. And again, anytime you have to go back and listen to something, feel free to do so. And we very much look forward to hearing from you, your thoughts and experiences with this movie. I say on with the show. What do you say, Andy? - [Andy] I think let's crack on.