Designing with Web Standards

Jeffrey Zeldman

Mentioned 7

The ultimate resource for standards-based Web design, updated and enhanced for current and future browsers.

More on Amazon.com

Mentioned in questions and answers.

I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way
For instance:

  • I still do layout with tables and not with just CSS. I haven’t still found out a way to correctly present data aligned and tabular.
  • I don’t know the difference between display: none and visibility: hidden (well, I know it now. but there are many cases like- padding, margins, overflows etc)
  • I haven’t really followed the inheritance way to writing CSS. Almost every style starts with a # and not a class.
  • Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
  • I don’t know what this picture in firebug is conveying (by the way, firebug is my savior. Life would have been impossible without Firebug)

alt text

  • Whenever layout’s in a mess I am tempted to use position:absolute. Invariably it ends up in a bigger mess.

I know I am doing a lot of things wrong(and I need to get it right) here but I manage to get things into place and somehow show it up, only to see it messed up in a different browser.

I don’t want do a primer on CSS or CSS for dummies. I know more than that. I want to learn CSS the right way. Focusing on problems like the examples I showed above and rectifying them.

Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.

You could start by reading some good books on the matter. The ones of Eric Meyer are hands on and of very high quality. The other book that of which I learned a lot was the Zen of CSS design book.

And the rest is effort and practice. Be sure that you understand why something works the way it does, don't be satisfied with 'trial-and-error' css development.

Practice, practice, practice. You know what you don't know, and that is the key to success in my mind. Every project you do, try to improve your skills, and eventually it will become second nature to do it the right way.

Eric Meyer's Cascading Style Sheets 2.0 Programmer's Reference is a great resource to understand exactly how selectors and rules work, and serves as a great reference as well.

Some thoughts on what you posted.

  • A Master Reset style sheet will help with browser differences.

  • And Tabular data should use tables.
    It's layouts that should avoid table tags in favor of css.

for me, Pro CSS and HTML Design Patterns by Michael Bowers changed it all. no more endless trial-and-error, but problem - pattern - solution. indispensable.

Well the basics are quite simple, you should really get a hang of the quite easy if you've already don't some css coding.

The best practices, browser quirks, hacks and other sketchy stuff concerning crossbrowser layout is something else.

Here is my suggested reading list, all of them are on my bookshelf and certainly worth reading! If you ask me i'd say these are the book you should have read if you are a webdesigner.

I'm not a usability specialist, and I really don't care to be one.

I just want a small set of rules of thumb that I can follow while coding my User Interfaces so that my product has decent usability.

At first I thought that this question would be easy to answer "Use your common sense", but if it's so common among us developers we wouldn't, as a group, have a reputation for our horrible interfaces.

Any Suggestions?

Read Don't Make Me Think by Steve Krug. It is a great starting point, and an easy short read.

EDIT: This is mainly for web usability though, but it would still be a good read even if you are doing rich clients.

  • Don't make things work in a different way than your users are expecting (i.e. breaking the "back" button when using Ajax in web forms
  • Follow the K.I.S.S principal

Really, any rules someone posts will be a variation on the theme: Don't Make Your Users Think

"Don't Make Me Think" has already been posted, see also Design of Everyday Things and Designing with Web Standards which are also great for light usability reading.

I suggest to read these blog posts from the Enso creators.

Of course they repeat guides/ideas/advices from books such as
The Design of Everyday Things and About Face, but nevertheless, the posts contain quite a few insights and (IMO) they are a good read.

Am using django framework, am pretty comfortable with the backend logic using python, but whats bothering me is the front-end bit where i have to work with css, how can i learn easily the workings of css or is there a tool i can use to create the front-end interfaces for django easily?

I have to agree that it's a lot of trial and error. There are sometimes many ways to achieve what you need to...some more "proper" than others. CSS Zen Garden was one of the first sites I discovered that really helped things click in my own head. View the design, view the source, view the design, etc...

A couple of books I appreciate having around are Dan Cederholm's Bullet Proof Web Design and

Andy Budd's CSS Mastery

Both give solid ways of accomplishing some common techniques and issues you'll run into with css-based designs.

The best book I've read about CSS and HTML is Zeldman's Designing with Web Standards

Zeldman covers the historical aspects of HTML and CSS along with converting a table-based website to semantic CSS. He also covers web standards, graceful degradation and browser quirks. It's often considered the 'bible' of modern web development.

After that I'd recommend Dan Cederholm's books Web Standards Solutions and Bulletproof Web Design

CSS isn’t really that easy — it kind of stands on its own in terms of its concepts.

If you’re delving into it deeply, CSS: The Definitive Guide is well worth it.

I'm looking for best-practices for designing a site that with accessibility in mind. The site is going to have a lot of older and less-abled individuals visiting it, and I want to make it as friendly for them as possible. Is there a resource that describes all the right tags, and attributes to use?

Thanks!

A must read is Jeffery Zeldman's "Designing with Web Standards"

Not sure if you are using Dreamweaver, but he has also just realeased a toolkit to validate your site for accessiblity.

I just started working for a pretty large company and my group manages all of their public facing websites. I opened the style sheet for the first time today and have seen over 20 instances of the designers using the voice-family hack to fix an IE bug. (I don't know why they allow graphic designers to write any kind of markup at all)

What is the general public opinion of the voice-family hack. Is it worth the time to recommend using IE conditional comments to include custom styles sheets?

The "voice-family" hack, better known as the Tantek Celik Box Model Hack, is used to hide specific CSS rules from IE4/5 on Windows because of incorrect implementations of the CSS standard in those browsers. It is an attempt to deliver the most correct single stylesheet to all browsers, without resorting to browser sniffing and multiple stylesheets.

Ironically this hack is the result of many man-hours (months?) of experimentation and testing to develop a standards-compliant stylesheet that works across older, newer, and future browsers. It is one of several workarounds that been created to make up for the horrible state of browser compliance to the CSS standard.

See Jeffrey Zeldman's Designing with Web Standards for an in-depth look at why adhering to standards (as much as possible) is a worthy goal, and why using browser sniffing and multiple stylesheets only causes headaches for the developer:

http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321385551/

One example is the arms race to keep up with browser/operating system combinations, not to mention mobile phones and other future devices with browsing capability. The detection code has to be changed with each new combination, and because of the way that many browsers masquerade as Netscape Navigator, detection can become a full time job.

Another good reference is the Web Standards Project, which has a lot of good information and tutorials on the subject:

http://www.webstandards.org/

If you move your coding style towards standards-compliance, you will generally not have to be as concerned about the release of future browsers. Yes, you still have to test against them, but you don't have to write and then test custom stylesheets for each one.

Before reading JavaScript books, what is a good resource for learning HTML and CSS? I'm looking for material that will get me up to speed rather than specify every single compliance standard. So, concepts that are prerequisites for exploring JavaScript. I've done basic web development for about 6 months (HTML/CSS, ASP.Net) but my approach has been a top-down one - I've learnt from tutorials and code examples rather than books.

Many thank you's...

Designing with Web Standards by Jeffrey Zeldman and, Eric Meyer on CSS and, More Eric Meyer on CSS

Read all three of those (or any one) and you'll be rewarded with an excellent foundation in HTML/CSS.

I would like to learn moders XHTML and CSS programming. Does someone has any good book suggestions where to start? I would like to have a book where I can learn those languages completely or as much as possible and I can use them if I get trouble on my web-programming projects. And of course I would like that my sites passes web-standards and validators and teaches what are different DTD's.

I would second the recommendation of Head First HTML with CSS & xHTML.

Other good "starter" books would be:

All of the above are very readable and focused on the practical.

Css Mastery - is the best CSS book I have read. If you think you know a lot about CSS, this book will open eyes!

I learned from the CSS Zen Garden and the associated book, The Zen of CSS Design. I'm not sure that's the best way since the books are more about the design aspects of css, but it worked for me.