Slashdot Mirror
Designing With Web Standards
Jeffrey Zeldman is one of the best technical writers whose work I've had the pleasure of reading. He is obviously well-educated with regard to the subject, and his passion for the work really shows through. Still, he never comes across as a zealot -- his style is even-handed, thoughtful, and easy to comprehend.
The first part of the book ("Houston, We Have a Problem") is the reason I give a rating of "9" rather than "10." Zeldman spends a perfect length of time on background and history of Web standards (why they're here, and what designers did before they emerged). However, this section seems to suffer from what many technical books suffer from: a case of "We'll see this soon"-itis. While this is perhaps unavoidable in such a treatise, it is nonetheless apparent. Still, it's only marginally distracting.
The meat of the book comes with "Designing and Building." Zeldman first talks about modern markup, then explains the variations on XHTML (i.e. Strict, Transitional, Frameset) and how each ought apply to your design. Here we see more theory than practice, though, but this is welcome -- it lays the foundation for a more cerebral look at distinguishing markup from design. Once Zeldman explains the nuances of that topic, we moveon to the redesign of a Web page constructed with a hybrid table/CSS design complete with all the excellent effects we hope to see in modern pages.
After working through this redesign, Zeldman talks in more detail about the CSS box model (and the browsers that break it), typography, and some of the quirks that Web designers must deal with. Next he touches a bit on Web accessibility--a must-read for everyone, whether you think so or not.
While Zeldman isn't incredibly thorough here, he doesn't need to be--it's a book on Web standards, after all, and this chapter serves to show how accessibility can still be achieved within those standards. He also suggests a couple of other books for more information.
Finally, Zeldman walks the reader through a redesign of zeldman.com, basically as a hands-on summary of the book, and as a guide for future projects. Also included is a "Back End" (i.e., appendix) showing some excellent information about each major browser.
Too often, a book or Web site on XHTML/CSS will dwell only on the "how"--this book shows the "how" and still explains the "why": Here's how you set up an id'ed element; here's why we do that, rather than using a class. It's already opened my eyes to many things I thought I had a handle on, but now realize that I only knew in a cursory fashion.
So, ask yourself: Do you want to design a Web site that will work for everyone, regardless of their platform? Do you want to make sure your Web site is future-proof? If so, you need this book.
You can purchase Designing With Web Standards from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
You code. And code. And code. You build only to rebuild. You focus on making your site compatible with almost every browser or wireless device ever put out there. Then along comes a new device or a new browser, and you start all over again.
You can get off the merry-go-round.
It's time to stop living in the past and get away from the days of spaghetti code, insanely nested table layouts, tags, and other redundancies that double and triple the bandwidth of even the simplest sites. Instead, it's time for forward compatibility.
Isn't it high time you started designing with web standards?
Standards aren't about leaving users behind or adhering to inflexible rules. Standards are about building sophisticated, beautiful sites that will work as well tomorrow as they do today. You can't afford to design tomorrow's sites with yesterday's piecemeal methods.
Jeffrey teaches you to:
* Slash design, development, and quality assurance costs (or do great work in spite of constrained budgets)
* Deliver superb design and sophisticated functionality without worrying about browser incompatibilities
* Set up your site to work as well five years from now as it does today
* Redesign in hours instead of days or weeks
* Welcome new visitors and make your content more visible to search engines
* Stay on the right side of accessibility laws and guidelines
* Support wireless and PDA users without the hassle and expense of multiple versions
* Improve user experience with faster load times and fewer compatibility headaches
* Separate presentation from structure and behavior, facilitating advanced publishing workflows
I have over 70 freaks, do you?
So, all those things in the book are great and all, but what about Flash? You can do no wrong with flash, you know.
Until Slashdot fixes the funny modifier, use insightful or interesting. The poster knows your intentions.
He also has an excellent list of related resources and links on design and accessibility:
http://zeldman.com/externals/
You mean it's not enough to make sure it works in IE6 on Windows XP?? I wish more web "developers" were concerned with standards. Not only does it make their job easier, it makes it easier to use their sites (assuming the browser developers are equally concerned with standards).
This is my sig. There are many like it, but this one is mine.
Standards are for pussies
Don't you Microsoft people do anything but read slashdot all day?
Trolling is a art,
Eric Meyer on CSS. I finished Zeldman's book about a week ago and am now going through Eric Meyer on CSS. Zeldman tells you what needs to be done, and gives some examples, Eric Meyer gives you a bunch of practical examples. Guess this is why can be purchased as a pair at Amazon...
I agree that he is an excellent tech writer. However, I thought his first book was much better than this one.
A Review Can Be Found Here
Although I am not very good at web design... what I have learned, I learned from this guy. He rocks.
Davak
The only standards you need to follow are the W3C Web Standards They even have a validator for your convience if you need to make sure that your code is valid. I did that at my summer internship and over the course of a summer was able to make our 1000+ page website 99% w3c complient. It might take you a few days to get in the rythym of doing things, but once we had our site up to html 4.01 standards, we never had a problem with any browser compatability issues, and we tested all the way back to Netscape 4.7.
Since when does the web have standards?
The Blaster Master Fighting for Truth, Justice, and Evil Pie since 1979
I happened across this site the other day... it really shows off what CSS can do. No idea how it looks in IE, but in Firebird it's pretty amazing. Pick a design from the left and note that it's all style sheets...
http://www.csszengarden.com/
Where is the completely compliant web site that thet reviewer was designing prior to reading this book? It would be pretty darn interesting to see what it looks like.
"I'd rather be a lightning rod than a seismometer." -Ken Kesey
A Web page that was HTML 3.2 compliant is not standards-compliant at all these days.
How do we know the W3C won't change the standard AGAIN in three years?
Bookpool is always cheaper!
It seems to me that the larger problem with web standards' adoptions is that many managers would prefer to just have crap, so long as they can have it "right now", and forego the longterm financial savings that web standards coding can provide. I would like to see a book on how to implement a web standard or two that will really save a lot of time right from the beginning, versus the kinds of major changes that take weeks to months to implement -- weeks & months that no small-business manager wants to pay for.
stuff |
I like standards. I like accessibility and usability. I hate Zeldman's site. It's like hypocrisy in motion. If I lectured on web design and make sites usable, I might improve my site from where it is.
Zeldman makes life tough on older viewers, disabled, and newbies. His labels are quippish and arrogant, his colours too similar, fonts too small and not resizeable in the most prominent browser out there.
Take a look around and you'll probably find better books on standards. Or, if you must, take the gospel of Zeldman and water it down with a little Jakob Nielsen.
Linux - because it doesn't leave that Steve Ballmer aftertaste.
Forgive me if this sounds clueless, but most people who are given the
task of setting up a web site are going to be looking at ways to not
have to do it from scratch. There are a lot of CMS (Content
Management Systems) out there, some free, some not. What *I* really
need is an O'Reilly book about CMS that helps wade through all the
stuff that's out there right now so the reader (me) can make an
informed decision about which way to go.
I did a quick check of the O'Reilly web site and all their CMS info
revolves around XML and Java. This does not help me.
Am I the only one who noticed that his website is Supported by XDate Speed Dating, 30Dates Speed Dating, and for free online dating, xdate.com?
Maybe he should take a break from writing and get out to the bar a bit more.
Tuus crepidae innexilis sunt.
Just open up MS-Word and use File-->Save As
web page
Voila! You have now created the perfect web page in ten seconds!
Microsoft takes care of all of the standards stuff so you don't have to worry your pretty little head about that. No really...don't worry.
No...don't do "View Source"
NO! Don't! EVERYTHING IS OK!! STEP AWAY FROM THE KEYBOARD
It will be standards-compliant to its specified version number. If you're compliant with HTML 4.01 today, you will be 5 years from now even if the current spec is XHTML 23. You may not be up-to-date, but you're compliant with the specified version, and a client will be able to render the page with the appropriate DTD and so forth. (afaik)
To add to this, one can follow all the rules making pages comply yet still provide poo usability due to ill-thought layout and navigation on top of a good framework.
For starters, if you're not familiar with him, here is Jacob Nielsen's site. He is usability guru formerly from Sun.
Dogma - "let's just say we'd like to avoid any empirical entanglements."
Reading tech books from start to finish is quite underrated. I find that if you don't read every word in a tech book, one often misses important information that can save a lot of time.
Don't you Microsoft people do anything but read slashdot all day?
Dude, what else am I going to do? Anytime I try to open Word, Excel, or Visual Basic, it crashes. The only thing I can load is Internet Exploder.
Just because I doubt myself does not mean I find your position compelling.
Couldn't you see the rather obvious box for selecting different text contrast/size? He uses alternate stylesheets. That even works in IE6. So no problem in the "most prominent browser".
But it's easier to complain...
And then when XML-only browsers pop up, all these old pages become unviewable.
Yes. Just like you can't view a WordStar 6.0 document in a Web browser.
Free hint: XML is not HTML. It's close, but it's not the same. Any HTML document that is conformant to a given HTML specification can be rendered by any competent HTML browser that's conformant to that specification. If you don't believe me, I can find some very, very old web pages that far predate the 4.01 standard, yet are conformant to the standard of their time, and Firebird renders them perfectly.
Saying "yeah, and when XML-only browsers pop up, all these old pages become unviewable" is a trivial statement. If it's XML-only, then it's not a freaking HTML browser, and it makes no sense to complain that an XML-only browser can't grok HTML. Just like it makes no sense to complain that Firebird can't render WordStar 6.0 documents.
Our faculty of the university at which I work has decided on a new layout for their web pages. This was done and delivered to us by a PR agency. I feared that it might be bad, but that fear didn't even come close to what I had to witness.
Imagine having to tell our users (many of which are using GNU/Linux or Macintosh) that our web site only works reliably in Windows with Internet Explorer 6.0 and above. Just because a PR agency can't develop web pages. It's impossible. I had to do something about it.
So when I implemented the layout for our department (scheduled to go live later this month), I scrapped everything they had done. I took a printout of their page (as it looked in Internet Explorer) and marked up what colors and fonts they had used.
Then I set down and wrote the same thing using XHTML/1.0 Strict and CSS1. This was about two days work, but the finished result now validates using w3c's validate tools, and it works reliably in all browsers I've managed to try, all the way back to Mosaic and Netscape 3, with or without images (yes, Lynx, Links, w3 and other text browsers work very well indeed too).
Not only did I get the pages to validate. By using CSS, I was able to get rid of several images they had been using with their design. The overall size of a page, including graphics and CSS, now weighs in at about 35 kbytes. This is compared to around 120 kbytes with the proposed code.
And even better, most things can be cached by the browser (CSS code and images). The only thing that needs reloading when you hit subsequent pages is the dynamic XHTML code, which weighs in at around 5 kbytes, compares to 40 kbytes in the proposed code.
Now, I think our students will like us. This result is even better than the pages that we have today. They render quickly and effortlessly even on old equipment or on extremely slow links.
I havn't been able to convince the faculty to make my code the "default" yet, but they might get the idea once people start noticing that our pages load much more quickly than the rest of the faculty pages.
So, using standards isn't always about making things render nicely in all browsers. It gives you a while heap of nice side effects that isn't worth sneezing at.
It's irritating the way the world is enslaved to such an awful spyware-magnet standards-flouting browser as MS Internet Explorer.
Microsoft declared IE6 SP1 as the last standalone browser for lame-ass reasons. The truth is, they're only truly integrating IE into the next Windows Operating System for the first time, to prove their 'point' in the anti-trust case that they couldn't remove the browser from the OS.
If IE really was such an integral part of the current slew of windows versions, how come it takes ridiculously long to load when you enter a URL into the address bar of an explorer window, and that the people at LitePC was able to remove IE from the Windows operating system?
Bunch of liars. Guys, help educate everyone and have people switch to either Mozilla or Opera -> Makes Windows boxes more secure and gets rid of the need to buy those stupid superflous pop-up killers. (you can pick up viruses or spyware just by surfing a maliciously coded website and hitting the wrong button)
None of my family and friends use IE anymore after I educated them about the dangers of IE.
- CSS level 1: Not full support despite MS claiming so. E.g.background-attatchment: fixed; works only on the <body element.
- CSS level 2: Quite a mess, lots of things are broken, e.g. the infamous issues with the box model, and lots of things are not implemented, e.g. position: fixed;
- XML support is flaky at best, it tends to complain about DTDs even though they are valid.
- Other nasty quirks such as when having a <?xml
... ?> declaration, then it ignores the doctype and reverts to quirks mode with all the broken box models and such.
- Violation of the HTTP specification by ignoring the media type received from the server. Internet Explorer will most of the time second-guess the media type instead.
h tml#sec7.2.1
I design according to the standards and using Mozilla and Opera 7 as the design references, and then adjust the stylesheets for IE's buggy behavior, so that it renders fine there as well.http://www.w3.org/Protocols/rfc2616/rfc2616-sec7.
while true; do eject; eject -t; done
*cough*
Read the EFF's Fair Use FAQ
Try the opposite approach: start by getting it to work in Mozilla, then check it in other browsers. Along the way, use the W3C Validator. If you can't make it work in IE/Win and still validate, there may be a better way to do what you want that is standards-compliant AND works in IE/Win in addition to what you're used to. When that's not the case, use conditional comments (google if you don't know what they are) to let you write code specifically for IE/Win (or specifically for everything else).
$x='S24;r)>63/* h@<5+oZ)32"5cz';$me='phroggy'x$];
$x=~y+ -xz+\0-Tx+;print$_^chop$me for split'',$x;
Web standards are not a validator. Remember HTML and XML and thier bastard child XHTML are a DESCRIPTIVE LANGUAGES. Every element has SEMANTIC value. Something no validator can check. I've seen too many XHTML sites made by people who clearly have no idea how to implement the standard to make this conclusion. A validator only means it's parsable, it does not mean that a document complies philosophically with the W3C. You'd be surprised at the number of XHTML sites using tables for layout.
Photos.
Check out how slashdot made out...
...no attributes
.
URI:
Encoding: iso-8859-1
Doctype: HTML
Errors: 407
Revalidate With Options
:
Show Source Outline
Parse Tree
Validate error pages Verbose Output
* Note: The URI you gave me, , returned a redirect to
* Line 71, column 115: cannot generate system identifier for general entity "alloc_id"
* Line 71, column 129: cannot generate system identifier for general entity "site_id"
* Line 71, column 139: cannot generate system identifier for general entity "request_id"
* Line 161, column 62: cannot generate system identifier for general entity "group_id"
* Line 161, column 76: cannot generate system identifier for general entity "atid"
* Line 241, column 74: cannot generate system identifier for general entity "tid"
* Line 241, column 156: cannot generate system identifier for general entity "mode"
* Line 241, column 184: cannot generate system identifier for general entity "threshold"
This page is not Valid HTML!
Line by line of errors
---
Nice!
407 lines of errors...
Why worry? Each of us is wearing an unlicensed "nucular" accelerator on his back.
Sig changed for readability by G.W.
First, a reminder that this is 2003, not 1998, which was the year IE4 and Netscape4 were introduced. Since then, Mozilla has come, and with it Netscape 6 and 7. Also, we've seen the arrival of Konqueror (and Safari) and Opera.
Netscape 4 is dead: don't worry about it beyond getting your sites to still be legible in it.
Gecko based browsers, Konq, and Opera all do very well with W3C standards.
IE, however, has not had a major rendering revamp since version 4. The biggest change was for IE6, which is actually less compliant than previous versions. Sure it fixed some things, but broke many more.
Among web designers I know, IE is quickly gaining the hatred that had previously been reserved for Netscape4, because they know that NN4 is irrelevant, and the hatred has to go somewhere: the least compliant browser out there... IE.
Now, why is IE the least compliant? Because MS doesn't see the need to make it compliant. They have their precious market share, which is all they care about... not the users, not the developers which must coddle to IE because it works the way MS sees fit, not the standards bodies which MS continually ignores while attempting to participate.
The only way to break IE and move to standards is to use them, and explain to users why sites don't work: it's not the site's fault, it's the browser's.
Given all this, most people who have a clue about W3C standards would say you're doing your development backwards. You'd probably save a lot of time if you coded to the standards first, then hacked up the code for IE.
Do not use style sheets to adjust the font size and the spacing between lines. I am not alone in having a high resolution laptop screen and I've seen too many pages that are unreadable. I adjust the settings in my browser to increase the font size so I can read it. However, when I get to one of these pages where they make the font size really small I adjust the font size so it's big enough to read. However, the font is larger but the spacing between the lines is the same, so all the words are crowded together. I hate this standard and it should be avoided at all cost
I know most of the /. crew thinks of web design as a frivolity [the people who manage /. certainly do] but adopting CSS [yes, even for layouts] is important for a number of reasons. It introduces structure to the content that makes it easier to generate, maintain and manipulate. It means that people using old/weird clients [yes, even line-mode browsers] can still use your site. It means that search crawlers have a better chance of getting good info from your site. It means that engineers won't have to support wonky javascript for rollovers or browser sniffing. It also means that programmers never get that Friday at 4:30 pm phone call from angry marketroids who are upset that something is a pixel off. Isn't that worth it?
For designers this is important as well, as it can make your job easier in some ways. It can also make it more difficult, explaining to your client/marketing person/product manager that it's not going to look identical in every browser is a tough sell at this point. Also, web design is finally becoming its own discipline. As designers we are now responsible for helping our clients and coworkers structure their information in ways that is more flexible and useful. We're not painters anymore, we're part of the construction team.
Is support perfect across all clients? Nope. Will it ever be? Hell no. Is it good enough? YES.
Here's some links that show off the potential of CSS:If you want the largest audience possible, then using the latest web standards, such as promoted by Zeldman, is not what you want to do. The reason for this is because not all web browsers in current use work with these standards. And there are many reasons people won't or can't upgrade those browsers.
There is a way to make web pages so that they can use standards, and still work on older browsers. However, you might not like the end result. What you get on the older browsers is a very poor presentation. For example, if you define the look of your page in cascading stylesheets, when viewed on a browser with no support for CSS, you get crap.
Boundary conditions are even worse. If the browser is a version that tries to support something, and does it wrong, you can get even worse that crap. It might not work at all.
Mixing standards can cause problems as well. Here is an example. Lots of designers seem to like blue backgrounds for the side rail menus. But lots of web browsers default to blue for hyperlink text. If you specify the color of the text in a stylesheet, but specify the background color of a table cell (or worse, the whole page), in HTML, then you can end up with a situation where some of what you specify is acted on, and some is not. You'd end up with blue text on a blue background, and therefore unreadable.
It would be great if everyone could upgrade to the latest browser. But if you are trying to reach the widest audience possible, you do have to consider that many in that audience will be using older computers which have smaller drive space, smaller RAM space, slower CPUs, and can only run older versions of operating systems and browser software. While Linux might well be a great replacement for old versions of Windows on those machines, you still have the problem if shaving a recent version of some Linux distribution down to fit, and getting a huge obese browser to run on a tiny, slow, machine.
Here is an example of a real web site done in a way that displays terrible on some browsers. You can see what it looks like in Netscape 4 in PNG, or JPEG, or true color GIF (works on Netscape 2 and later) formats. If you scan very close in the blue area on the left (this does not work with the JPEG image), you can see that the colors are #5a61a9 for the background, and #5b61a9 for the text (specified by their HTML in the body tag, so they intentionally did this). By radically exaggerating the red plane (e.g. everything #5a and below is made #00, and everything #5b and above is made #ff), you can see (PNG, JPEG) the text was really there. And you'd think that a state government would be concerned enough about making their site available to all audiences, including the economically disadvantaged who can just barely even get a computer and internet access. But no, they don't actually care (I talked to these people, and they really don't care). Here is another crappy web site. By comparison, this site and this site look fine in this older browser.
now we need to go OSS in diesel cars
If you are having trouble convincing management that your site needs to be comply with web standards and you are at all involved with Federal contractors, academia, or any kind of service agency, drop me a line; I am a developer for the Program on Employment and Disability, and we do a lot of work with Section 508/W3C WCAG guidelines in addition to encouraging XHTML, and a big chunk of that is trying to make policy wonks and PHBs aware of these issues in terms that mean things to them. (especially if there is a legal risk to not writing compliant pages, as there is for many people that may not realize it).
This PHP code (and following head tag) put at the very top of any HTML page will tell Mozilla that the .html page following is actually application/xhtml+xml.
Then if you make ANY little mistake at all in your (X)HTML code, it will completely fail on you, as if it was a script, showing you the exact error and where it lies. It's been a priceless way to check my XHTML syntax without always linking over to w3.org
etc. (not sure why slashdot comment is adding ; before html xmlns