Domain: webstandards.org
Stories and comments across the archive that link to webstandards.org.
Stories · 41
-
The Web Standards Project (WaSP) Shuttered
hypnosec writes "Aaron Gustafson and two of his fellow contributors, Bruce Lawson and Steph Troeth, have announced the closure of The Web Standards Project (WaSP). It was formed back in 1998 by Glenn Davis, George Olsen, and Jeffrey Zeldman to get browser makers support the open standards established by World Wide Web Consortium (W3C). The project described itself as a 'coalition fighting for standards which ensure simple, affordable access to web technologies for all.' Founded at a time when Microsoft and Netscape were battling it out for browser dominance, WaSP aimed to mitigate the risks arising out of this war – an imminent fragmentation that could lead to browser incompatibilities. Noting that '..Tim Berners-Lee's vision of the web as an open, accessible, and universal community is largely the reality' Aaron noted that it was time to 'close down The Web Standards Project.'" -
IE8 Breaking Microsoft's Web Standards Promise?
An anonymous reader points out a story in The Register by Opera Software CTO Hakon Lie which tells the story of how Microsoft's interoperability promise for IE8 seems to have been broken in less than six months. Quoting: "In March, Microsoft announced that their upcoming Internet Explorer 8 would: use its most standards compliant mode, IE8 Standards, as the default. Note the last word: default. Microsoft argued that, in light of their newly published interoperability principles, it was the right thing to do. This declaration heralded an about-face and was widely praised by the web standards community; people were stunned and delighted by Microsoft's promise. This week, the promise was broken." -
IE8 May Not Pass the Acid2 Test After All
dotne writes "CNET has published an article called Acid2, Acid3 and the power of default. The article predicts that IE8 will not pass the Acid2 test after all: '[Another] scenario could be that Microsoft requires Web pages to change the default settings by flagging that they really, really want to be rendered correctly. Web pages already have a way to say this (called doctype switching, which is supported by all browsers), but Microsoft has all but announced that IE8 will support yet another scheme. If the company decides to implement the new scheme, the Acid2 test — and all the other pages that use doctype switching — will not be rendered correctly.' Microsoft's IE8 render modes have been discussed here previously, and they've caused an uproar in the web development community. According to the scheme, authors must put Microsoft-specific <meta> tags into their pages in order for them to be rendered correctly. I doubt Acid2, nor Acid3 will have Microsoft extensions in them." -
IE8 May Not Pass the Acid2 Test After All
dotne writes "CNET has published an article called Acid2, Acid3 and the power of default. The article predicts that IE8 will not pass the Acid2 test after all: '[Another] scenario could be that Microsoft requires Web pages to change the default settings by flagging that they really, really want to be rendered correctly. Web pages already have a way to say this (called doctype switching, which is supported by all browsers), but Microsoft has all but announced that IE8 will support yet another scheme. If the company decides to implement the new scheme, the Acid2 test — and all the other pages that use doctype switching — will not be rendered correctly.' Microsoft's IE8 render modes have been discussed here previously, and they've caused an uproar in the web development community. According to the scheme, authors must put Microsoft-specific <meta> tags into their pages in order for them to be rendered correctly. I doubt Acid2, nor Acid3 will have Microsoft extensions in them." -
Opera Files EU Complaint Against Microsoft
A number of readers have sent word about Opera Software ASA's antitrust complaint against Microsoft filed with the EU. Here is Opera's press release on the filing. The company wants the EU to "obligate Microsoft to unbundle Internet Explorer from Windows and/or carry alternative browsers pre-installed on the desktop" and to "require Microsoft to follow fundamental and open Web standards accepted by the Web-authoring communities." The latter request makes this a case to watch. Will the Commissioner take the Acid2 test using IE7? -
CSS Turns 10 Years Old
An anonymous reader writes "Cascading Style Sheets celebrate their tenth anniversary this week. The W3C put together the CSS10 site in recognition of this milestone with a Hall of Fame, essays from the past decade, a gallery, and more." I was glad to see the CSS Zen Garden selected for the Hall of Fame, and disappointed (but not surprised) that no browser on my computer correctly renders the Acid2 test. -
Håkon Responds to Questions About CSS and...
You submitted questions for Håkon Wium Lie on June 20. Today we have his answers, not only to the (+5 moderated) questions we sent him, but to a bunch of others he thought would also be interesting to answer.> Where... by bcat24 > > Do you think the W3C development process is too slow? I know that > you guys want everything to be perfect, but it seems to take far > longer than necessary. CSS 3 shows promise and I wouldn't want it > to die a slow death in standardization.
No, I don't think W3C is too slow. W3C isn't the bottleneck, browsers are. The dominant browser on the web hasn't been updated for years, and it doesn't make sense for specifications to get too far ahead. Rather, the CSS Working Group in W3C has focused on specification maintenance and achieving interoperability between implementations. This work is not so glamorous and some people — even within W3C — would prefer if they concentrate on new specifications. However, I think the focus on interoperability (which has resulted in CSS 2.1) has been crucial to the success of CSS.
CSS3 is a set of specifications that are developed more or less independently of each other. The best way to push a specification forward is to implement it. In the past year, we've seen some encouraging CSS3 implementations come along. For example, Mozilla supports multi-column layouts, Opera supports media queries, Prince supports cross-references and Safari supports borders and backgrounds. A few years from now, I think a select group of CSS3 modules will be interoperably supported in all browsers.
> Why is CSS such a good idea but a pain to use? > by rar > > CSS is clearly very useful for separating style from content. But > apparently people tend to have problems when using it for layouts. > Would you say this is because people have not yet understood how to > properly do layout in CSS, or is it CSS that is lacking in this > area? What can be done to improve the situation? --- Would the web > benefit from HTML and CSS being complemented with some kind of > "layout language"?
I think layout and style should be tackled by the same language and the two are intertwined. Trying to split the two is like splitting the HTML specification in two, one specification describing inline elements and the other describing block elements. It's not worth the effort.
I think CSS is capable of describing beautiful and scalable layouts. The CSS Zen Garden has been a eye-opening showcase of what is possible today. If MS IE had supported CSS tables, another set of layouts would have been possible. So, there is still lots of potential in the existing CSS specifications which should be the next milestone. Beyond that, the CSS Working Group has started work on a new CSS3 module for advanced layout. Feedback is welcome.
> CSS Evolution! > by eieken > > Is the wave of webpages designed completely in CSS what you > intially intended when you came up with CSS? Do you see that > changing? Is that good or bad?
I saw a clear need for a web style sheet language when proposing CSS in 1994. I also wanted CSS to fully describe the presentation of a web pages -- not just add some styling. All in all, I think it has turned out quite well. It has taken longer than I expected, but the scale -- due to the growth of the web -- is more than anyone could imagine.
I used "I" too many times in the previous paragraph. It's important to realize that CSS is a community effort rather that one man's work. Bert Bos joined me early and we worked out the initial designs on a whiteboard during the summer of 1995. The www-style mailing lists and the W3C CSS Working Group have also been crucial in ensuring the success of CSS.
If you're interested in the history of web style sheets, you'll find plenty of material in my PhD thesis on the subject.
> Two questions (cut to 1.5 by editor Roblimo) > by Dolda2000 > If you were allowed (perhaps by court order, which wouldn't be > unthinkable) to force Microsoft to do one (1) change in Internet > Explorer, what would that be?
I would force them to support one (1) single web page before shipping IE7, namely Acid2. By using a tiny amount of resources to get Acid2 right, Microsoft can save web designers and users endless amounts of frustration in the future. It would also be an honorable thing to do. This is what Microsoft's W3C representative wrote in 1998:
Microsoft has a deep commitment to working with the W3C on HTML and CSS. We have the first commercial implementation of HTML4, we were the first vendor anywhere to implement even portions of CSS, and we have put a tremendous amount of energy into seeing CSS mature to Level 2. We are still committed to complete implementations of the Recommendations of the W3C in this area (CSS and HTML and the DOM).
May I have one (1) more change? Please? Then I would make IE7 support TrueType downloadable fonts. Microsoft's record in fonts isn't that bad. They made their core fonts available for anyone to use, and IE supports downloadable fonts. Unfortunately, only the proprietary EOT format is supported. A few lines of code would be sufficient to support zipped TrueType fonts as well, and this would unleash a new wave of typography on the web. (To protect yourself, make sure you use a browser where author style sheets can be turned off — Shift-G in Opera). > As a bonus question: What do you think of Slashdot's CSS? ;)
The new design looks great! The style sheets behind the scene are more complex than what the average web page needs. But, we wouldn't expect anything average from Slashdot, would we?
> 6) Opera > by taskforce > > Opera 9.0 seems to offer a lot of decent additions to Opera's > standards pool. How satisfied are you personally with the work the > team has done on implementing standards, and is there anything in > there you feel is superflous and anything you would have preferred > to see which wasn't in there?
I'm very proud of the standards support in Opera 9. Acid2 is an obvious favorite of mine and seeing that smiley face makes me very happy.
Among the more experimental features is support for Audio in HTML5. Web applications can now make sounds in a sensible way! Combined with the canvas element, developers can create Flash-like content without resorting to a proprietary format.
Having support for Bittorrent is also great. From a technical point of view, it makes much sense. Also, it's a political statement of sorts.
During the development of Opera9. Geir Ivarsøy, who founded Opera with Jon von Tetzchner, died after fighting cancer for years. Geir did a spectacular initial CSS implementation in Opera, thus convincing me to join the company. In music, the 9th is legendary. Beethoven, Schubert, Bruckner and Mahler all did 9 symphonies. Opera 9 was Geir's last symphony.
> Included styles, aliases > by Spy der Mann > > I always wanted to have "included" substyles or "aliases" in my > CSS definition, to save redundancy. > > (For includes) > > .class1 { color:#ff0000; } > .class2 { background-color:#ffffff; } > .class3 { include:class1,class2;font-weight:bold; } > > (For aliases) > > @alias color1 #ff0000; > @alias color2 #ffffff; > @alias default_image url('/img/image1.jpg'); > > .class1 { color:color1; } > .class2 { background-image:default_image;background-color:co lor2; } > > This way we could change colors or images for a whole webpage > by editing a reduced number of lines. > > Had you considered any of these ideas in the past? If so, > why were they rejected?Yes, aliases and constants have been considered. As David Wheeler noted, "Any problem in computer science can be solved with another layer of indirection."
CSS is already an indirection. Instead of putting properties and values directly on elements, it associates properties and values with selectors. What you (and others) are proposing is to add another layer of indirection. By doing so, one could possible write shorter, more manageable style sheets. However, there are also some downsides. It requires a new syntactic construct (@alias) and implementations must be able to remember a list of aliases. What if aliases are defined in one style sheet and referenced in another -- should that work? If so, what if the first style sheet isn't available?
For CSS1, the downsides of aliases were considered more significant than the benefits.
> Definition of pixel > by Sara Chan > > The word pixel meant "picture element", but CSS redefined it >to mean something quite different (a particular subtended angle >of view [w3.org]). This causes confusion: CSS pixels are not pixels. >(Indeed, I have seen misinformed comments on Slashdot due to >that confusion.) > > My question is this: why call the subtended angle a "pixel", instead of >something else (e.g. "subangle")? If CSS wanted to use the subtended >angle for something, that is fine, but calling it a pixel seems to follow >the approach of Humpty Dumpty "When I use a word, it means just >what I choose it to mean".
In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of a CSS pixel will sometimes be different. For example, on a laser printer, one CSS pixel can be equal to 3x3 device pixels to avoid printing illegibly small text and images. I don't recall anyone ever proposing another name for it. Subangle? Personally, I think most people would prefer the pragmatic "px" to the non-intuitive "sa".
> Vertical CSS Support > by infestedsenses > > As a developer who works with CSS every day, I find one > complication that continues to bother me in my daily work. > Support for CSS has always been good on the horizontal scope, > but vertical positioning has always been quite complicated. > Alone the procedure to affix a footer to the bottom of a screen > in dependance of the amount of content is unnecessarily difficult, > spawning hackish solutions such as "footerStickAlt" > [themaninblue.com]. Centering an object in the dead center of a > page also requires strange procedures such as this one [wpdfd.com], > which still aren't ideal (try making the viewport really small). The old > table method provided much easier methods for this. What are your > thoughts on this and do you see improvement following in future > CSS revisions?
Indeed, the CSS formatting model allows more control horizontally than vertically. This is due to (typically) having a known width, but an unknown height. As such, the height is harder to deal with.
However, CSS2 fixed positioning allows you to place content relative to the viewport (which is CSS-speak for window) instead of the document. For example, by setting position: fixed; bottom: 0 on an element, it will stick to the bottom. This works in Opera, Safari and Mozilla-based browsers. IE6 doesn't support it, however. It remains to be seen if IE7 will support it.
> About Microsoft... > by Chabil Ha' > > With MS's next browser release (IE 7), you mentioned in other > interviews that their decision to not supprt CSS2 was more a political > decision than a mechanical one. Aside from their obvious desire to > dominate the world, what politics do you think are in play that make > them not want to conform to the standard, and what do you think would > change that landscape so that they would have some initiative to > fully support it?
Great question. It's quite clear that Microsoft has the resources and talent to support CSS2 fully in IE and that plenty of people have reminded them why this is important. So, why don't they do it? The fundamental reason, I believe, is that standards don't benefit monopolists. Accepted, well-functioning, standards lower the barrier of entry to a market, and is therefore a threat to a monopolist.
From that perspective, it makes sense to leave CSS2 half-implemented. You can claim support (and many journalists will believe you), and you also ensure that no-one can use the unimplemented (or worse: buggily implemented) features of the standard. The only way to change the equation is to remind Microsoft how embarrassing it is to offer a sub-standard browser. And to use better browsers.
Another reason for not making a IE too good is that it will compete with Windows. A modern browser is an application platform; the combination of HTML, JavaScript, CSS and DOM allows developers to target the web instead of Windows, Linux, or Mac.
> From linvir > How long since you last used Linux?
I'm using it right now. Ubuntu on a IBM Thinkpad X41 is the environment I live in. Ubuntu rocks -- especially with Opera on top! (And Emacs right underneath.)
> From Rob T Firefly (844560) > Why the curly brackets?
The initial CSS proposal didn't use them, instead relying on newlines to separate statements. TimBL didn't really like that and I therefore borrowed the curly braces from the C programming language. The syntax for comments came along as well. I think it works quite well.
> why not XML? > by slashdot.org > Simple question (hopefully simple answer ;-)): why > did you not use XML?
The simple answer is that the development of CSS preceded XML by a year or so. However, if XML had been available, would we have used it? Probably not. And I suspect Brendan Eich of JavaScript fame would answer the same way on behalf of his language.
XML is a great syntax for structured data, but not suitable for all languages. Still, I think the SGML-based syntax for the FOSI style sheet language.
> Padding > by Anonymous Coward > Why was the decision made to make padding apply outside > of the width of a 'box', rather than inside, which would seem > to make more sense?
It makes sense in some situations, but not in others. For example, when a child element is set to width: 100%, I don't think it should cover the padding of its parent. The box-sizing property in CSS3 addresses this issue. Ideally, the issue should have been addressed earlier, though.
> by nuzak > why not float: > DSSSL had this sort of thing solved before HTML even existed, > let alone CSS. But scheme is too scary and icky, and the W3C > believes in a principle of least power, so CSS has to be fully declarative, > static, and crippled until patched later.
You're wrong about DSSSL -- it didn't support floating text (as in having text wrap around images) at all. And the DSSSL specification only became publically available around 1996, years after HTML.
> by MagicM > How frustrating is it to write a specification knowing > that you're at the browser vendors' mercy?
That's part of the game. I don't think any specification has a birthright to be fully supported by all browsers. There should be healthy competition between different specifications. I believe simple, author-friendly specifications will prevail in this environment.
Microformats are another way of developing new formats. Instead of having to convince browser vendors to support your favorite specification, microformats add semantics to HTML through the CLASS attribute. And style it with CSS.
> New standards > by iamsure > > In your work at Opera, you have clearly paved a path that includes > going beyond the W3C standards. Whether it is WhatWG > implementations, or new functionality specific to Opera (2dgame), > you are pushing into new territory. Can you explain why W3C isn't > sufficient, and why efforts at Opera to expand beyond the standards > differ from Microsoft's embrace/extend model?
It's a fair question. The WhatWG was set up when it seemed as if W3C didn't care much about browsers anymore. That has definitely changed and work items from WhatWG are now channeled into W3C (e.g., XMLHttpRequest).
At Opera, we sometimes include experimental features before they have been standardized. When this happens they are labeled as such, but we still try to document them. For example, we support some Opera-only CSS properties for XML. If these features gain traction, we are happy to work with other organizations to standardize them. If they don't become popular, the features will most likely disappear.
> Beyond HTML > by pr1000 > How far can CSS be taken beyond the web page--that is, > have generalized or non-web specific features for such things > as page formatting or type setting? Do you plan/wish/hope to > take it farther than it currently is?
Yes, I think it's possible to take CSS further in several directions. I'm eager to see CSS being used in paper-based publishing and I joined the board of YesLogic — which makes the Prince XML to PDF converter — to make sure they added my favorite features. Bert and I used Prince to generate PDF from HTML and CSS sources for the third edition of our book. W3C just published a new Working Draft which describes features for printing, e.g., footnotes, cross-references, and even generated indexes.
For mobile units, I think Media Queries will be important. For example, they can express that large images should not be sent to mobile devices.
Another great opportunity for CSS is Web Applications. Just like documents, applications need to be styled and CSS is an intrinsic component of AJAX. The "AJAX" name sounds great, but allow me to propose a few alternate spellings that I find more accurate:
- AJACX: Asynchronous JavaScript, CSS and XMLHttpRequest
- ADJACS: Asynchronous DOM, JavaScript and CSS
- ADHJACS: Asynchronous DOM, HTML, JavaScript and CSS
- AJAHCS: Asynchronous JavaScript, HTML and CSS
- AJACS: Asynchronous JavaScript, HTML and CSS
Opera, Mozilla and Safari developers are collaborating in the WHAT WG and in W3C to make sure we have interoperable specifications for AJAX. I mean, ADHJACS.
> by crush > Is the difficulty of producing a layout that consists of > three or more columns of equal height justification for > adding some new feature to the specification to make this easier?
I don't think so. CSS2 defines a table layout that can be used for this purpose. The problem is, and I'm repeating myself here, that the dominant browser doesn't support it. Adding yet more features to the specification wouldn't help.
> How come, we um, lie?
Right. My name is, um, a bit troublesome to pronounce in English. But I'm a nice person who generally tells the truth. I often tell non-Norwegians that my first name is pronounced "howcome". That's close, but not quite. It does make for a great email address like howcome@opera.com, though.
So I may be a Lie, but I'm just a little white one :-)
-
Håkon Responds to Questions About CSS and...
You submitted questions for Håkon Wium Lie on June 20. Today we have his answers, not only to the (+5 moderated) questions we sent him, but to a bunch of others he thought would also be interesting to answer.> Where... by bcat24 > > Do you think the W3C development process is too slow? I know that > you guys want everything to be perfect, but it seems to take far > longer than necessary. CSS 3 shows promise and I wouldn't want it > to die a slow death in standardization.
No, I don't think W3C is too slow. W3C isn't the bottleneck, browsers are. The dominant browser on the web hasn't been updated for years, and it doesn't make sense for specifications to get too far ahead. Rather, the CSS Working Group in W3C has focused on specification maintenance and achieving interoperability between implementations. This work is not so glamorous and some people — even within W3C — would prefer if they concentrate on new specifications. However, I think the focus on interoperability (which has resulted in CSS 2.1) has been crucial to the success of CSS.
CSS3 is a set of specifications that are developed more or less independently of each other. The best way to push a specification forward is to implement it. In the past year, we've seen some encouraging CSS3 implementations come along. For example, Mozilla supports multi-column layouts, Opera supports media queries, Prince supports cross-references and Safari supports borders and backgrounds. A few years from now, I think a select group of CSS3 modules will be interoperably supported in all browsers.
> Why is CSS such a good idea but a pain to use? > by rar > > CSS is clearly very useful for separating style from content. But > apparently people tend to have problems when using it for layouts. > Would you say this is because people have not yet understood how to > properly do layout in CSS, or is it CSS that is lacking in this > area? What can be done to improve the situation? --- Would the web > benefit from HTML and CSS being complemented with some kind of > "layout language"?
I think layout and style should be tackled by the same language and the two are intertwined. Trying to split the two is like splitting the HTML specification in two, one specification describing inline elements and the other describing block elements. It's not worth the effort.
I think CSS is capable of describing beautiful and scalable layouts. The CSS Zen Garden has been a eye-opening showcase of what is possible today. If MS IE had supported CSS tables, another set of layouts would have been possible. So, there is still lots of potential in the existing CSS specifications which should be the next milestone. Beyond that, the CSS Working Group has started work on a new CSS3 module for advanced layout. Feedback is welcome.
> CSS Evolution! > by eieken > > Is the wave of webpages designed completely in CSS what you > intially intended when you came up with CSS? Do you see that > changing? Is that good or bad?
I saw a clear need for a web style sheet language when proposing CSS in 1994. I also wanted CSS to fully describe the presentation of a web pages -- not just add some styling. All in all, I think it has turned out quite well. It has taken longer than I expected, but the scale -- due to the growth of the web -- is more than anyone could imagine.
I used "I" too many times in the previous paragraph. It's important to realize that CSS is a community effort rather that one man's work. Bert Bos joined me early and we worked out the initial designs on a whiteboard during the summer of 1995. The www-style mailing lists and the W3C CSS Working Group have also been crucial in ensuring the success of CSS.
If you're interested in the history of web style sheets, you'll find plenty of material in my PhD thesis on the subject.
> Two questions (cut to 1.5 by editor Roblimo) > by Dolda2000 > If you were allowed (perhaps by court order, which wouldn't be > unthinkable) to force Microsoft to do one (1) change in Internet > Explorer, what would that be?
I would force them to support one (1) single web page before shipping IE7, namely Acid2. By using a tiny amount of resources to get Acid2 right, Microsoft can save web designers and users endless amounts of frustration in the future. It would also be an honorable thing to do. This is what Microsoft's W3C representative wrote in 1998:
Microsoft has a deep commitment to working with the W3C on HTML and CSS. We have the first commercial implementation of HTML4, we were the first vendor anywhere to implement even portions of CSS, and we have put a tremendous amount of energy into seeing CSS mature to Level 2. We are still committed to complete implementations of the Recommendations of the W3C in this area (CSS and HTML and the DOM).
May I have one (1) more change? Please? Then I would make IE7 support TrueType downloadable fonts. Microsoft's record in fonts isn't that bad. They made their core fonts available for anyone to use, and IE supports downloadable fonts. Unfortunately, only the proprietary EOT format is supported. A few lines of code would be sufficient to support zipped TrueType fonts as well, and this would unleash a new wave of typography on the web. (To protect yourself, make sure you use a browser where author style sheets can be turned off — Shift-G in Opera). > As a bonus question: What do you think of Slashdot's CSS? ;)
The new design looks great! The style sheets behind the scene are more complex than what the average web page needs. But, we wouldn't expect anything average from Slashdot, would we?
> 6) Opera > by taskforce > > Opera 9.0 seems to offer a lot of decent additions to Opera's > standards pool. How satisfied are you personally with the work the > team has done on implementing standards, and is there anything in > there you feel is superflous and anything you would have preferred > to see which wasn't in there?
I'm very proud of the standards support in Opera 9. Acid2 is an obvious favorite of mine and seeing that smiley face makes me very happy.
Among the more experimental features is support for Audio in HTML5. Web applications can now make sounds in a sensible way! Combined with the canvas element, developers can create Flash-like content without resorting to a proprietary format.
Having support for Bittorrent is also great. From a technical point of view, it makes much sense. Also, it's a political statement of sorts.
During the development of Opera9. Geir Ivarsøy, who founded Opera with Jon von Tetzchner, died after fighting cancer for years. Geir did a spectacular initial CSS implementation in Opera, thus convincing me to join the company. In music, the 9th is legendary. Beethoven, Schubert, Bruckner and Mahler all did 9 symphonies. Opera 9 was Geir's last symphony.
> Included styles, aliases > by Spy der Mann > > I always wanted to have "included" substyles or "aliases" in my > CSS definition, to save redundancy. > > (For includes) > > .class1 { color:#ff0000; } > .class2 { background-color:#ffffff; } > .class3 { include:class1,class2;font-weight:bold; } > > (For aliases) > > @alias color1 #ff0000; > @alias color2 #ffffff; > @alias default_image url('/img/image1.jpg'); > > .class1 { color:color1; } > .class2 { background-image:default_image;background-color:co lor2; } > > This way we could change colors or images for a whole webpage > by editing a reduced number of lines. > > Had you considered any of these ideas in the past? If so, > why were they rejected?Yes, aliases and constants have been considered. As David Wheeler noted, "Any problem in computer science can be solved with another layer of indirection."
CSS is already an indirection. Instead of putting properties and values directly on elements, it associates properties and values with selectors. What you (and others) are proposing is to add another layer of indirection. By doing so, one could possible write shorter, more manageable style sheets. However, there are also some downsides. It requires a new syntactic construct (@alias) and implementations must be able to remember a list of aliases. What if aliases are defined in one style sheet and referenced in another -- should that work? If so, what if the first style sheet isn't available?
For CSS1, the downsides of aliases were considered more significant than the benefits.
> Definition of pixel > by Sara Chan > > The word pixel meant "picture element", but CSS redefined it >to mean something quite different (a particular subtended angle >of view [w3.org]). This causes confusion: CSS pixels are not pixels. >(Indeed, I have seen misinformed comments on Slashdot due to >that confusion.) > > My question is this: why call the subtended angle a "pixel", instead of >something else (e.g. "subangle")? If CSS wanted to use the subtended >angle for something, that is fine, but calling it a pixel seems to follow >the approach of Humpty Dumpty "When I use a word, it means just >what I choose it to mean".
In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of a CSS pixel will sometimes be different. For example, on a laser printer, one CSS pixel can be equal to 3x3 device pixels to avoid printing illegibly small text and images. I don't recall anyone ever proposing another name for it. Subangle? Personally, I think most people would prefer the pragmatic "px" to the non-intuitive "sa".
> Vertical CSS Support > by infestedsenses > > As a developer who works with CSS every day, I find one > complication that continues to bother me in my daily work. > Support for CSS has always been good on the horizontal scope, > but vertical positioning has always been quite complicated. > Alone the procedure to affix a footer to the bottom of a screen > in dependance of the amount of content is unnecessarily difficult, > spawning hackish solutions such as "footerStickAlt" > [themaninblue.com]. Centering an object in the dead center of a > page also requires strange procedures such as this one [wpdfd.com], > which still aren't ideal (try making the viewport really small). The old > table method provided much easier methods for this. What are your > thoughts on this and do you see improvement following in future > CSS revisions?
Indeed, the CSS formatting model allows more control horizontally than vertically. This is due to (typically) having a known width, but an unknown height. As such, the height is harder to deal with.
However, CSS2 fixed positioning allows you to place content relative to the viewport (which is CSS-speak for window) instead of the document. For example, by setting position: fixed; bottom: 0 on an element, it will stick to the bottom. This works in Opera, Safari and Mozilla-based browsers. IE6 doesn't support it, however. It remains to be seen if IE7 will support it.
> About Microsoft... > by Chabil Ha' > > With MS's next browser release (IE 7), you mentioned in other > interviews that their decision to not supprt CSS2 was more a political > decision than a mechanical one. Aside from their obvious desire to > dominate the world, what politics do you think are in play that make > them not want to conform to the standard, and what do you think would > change that landscape so that they would have some initiative to > fully support it?
Great question. It's quite clear that Microsoft has the resources and talent to support CSS2 fully in IE and that plenty of people have reminded them why this is important. So, why don't they do it? The fundamental reason, I believe, is that standards don't benefit monopolists. Accepted, well-functioning, standards lower the barrier of entry to a market, and is therefore a threat to a monopolist.
From that perspective, it makes sense to leave CSS2 half-implemented. You can claim support (and many journalists will believe you), and you also ensure that no-one can use the unimplemented (or worse: buggily implemented) features of the standard. The only way to change the equation is to remind Microsoft how embarrassing it is to offer a sub-standard browser. And to use better browsers.
Another reason for not making a IE too good is that it will compete with Windows. A modern browser is an application platform; the combination of HTML, JavaScript, CSS and DOM allows developers to target the web instead of Windows, Linux, or Mac.
> From linvir > How long since you last used Linux?
I'm using it right now. Ubuntu on a IBM Thinkpad X41 is the environment I live in. Ubuntu rocks -- especially with Opera on top! (And Emacs right underneath.)
> From Rob T Firefly (844560) > Why the curly brackets?
The initial CSS proposal didn't use them, instead relying on newlines to separate statements. TimBL didn't really like that and I therefore borrowed the curly braces from the C programming language. The syntax for comments came along as well. I think it works quite well.
> why not XML? > by slashdot.org > Simple question (hopefully simple answer ;-)): why > did you not use XML?
The simple answer is that the development of CSS preceded XML by a year or so. However, if XML had been available, would we have used it? Probably not. And I suspect Brendan Eich of JavaScript fame would answer the same way on behalf of his language.
XML is a great syntax for structured data, but not suitable for all languages. Still, I think the SGML-based syntax for the FOSI style sheet language.
> Padding > by Anonymous Coward > Why was the decision made to make padding apply outside > of the width of a 'box', rather than inside, which would seem > to make more sense?
It makes sense in some situations, but not in others. For example, when a child element is set to width: 100%, I don't think it should cover the padding of its parent. The box-sizing property in CSS3 addresses this issue. Ideally, the issue should have been addressed earlier, though.
> by nuzak > why not float: > DSSSL had this sort of thing solved before HTML even existed, > let alone CSS. But scheme is too scary and icky, and the W3C > believes in a principle of least power, so CSS has to be fully declarative, > static, and crippled until patched later.
You're wrong about DSSSL -- it didn't support floating text (as in having text wrap around images) at all. And the DSSSL specification only became publically available around 1996, years after HTML.
> by MagicM > How frustrating is it to write a specification knowing > that you're at the browser vendors' mercy?
That's part of the game. I don't think any specification has a birthright to be fully supported by all browsers. There should be healthy competition between different specifications. I believe simple, author-friendly specifications will prevail in this environment.
Microformats are another way of developing new formats. Instead of having to convince browser vendors to support your favorite specification, microformats add semantics to HTML through the CLASS attribute. And style it with CSS.
> New standards > by iamsure > > In your work at Opera, you have clearly paved a path that includes > going beyond the W3C standards. Whether it is WhatWG > implementations, or new functionality specific to Opera (2dgame), > you are pushing into new territory. Can you explain why W3C isn't > sufficient, and why efforts at Opera to expand beyond the standards > differ from Microsoft's embrace/extend model?
It's a fair question. The WhatWG was set up when it seemed as if W3C didn't care much about browsers anymore. That has definitely changed and work items from WhatWG are now channeled into W3C (e.g., XMLHttpRequest).
At Opera, we sometimes include experimental features before they have been standardized. When this happens they are labeled as such, but we still try to document them. For example, we support some Opera-only CSS properties for XML. If these features gain traction, we are happy to work with other organizations to standardize them. If they don't become popular, the features will most likely disappear.
> Beyond HTML > by pr1000 > How far can CSS be taken beyond the web page--that is, > have generalized or non-web specific features for such things > as page formatting or type setting? Do you plan/wish/hope to > take it farther than it currently is?
Yes, I think it's possible to take CSS further in several directions. I'm eager to see CSS being used in paper-based publishing and I joined the board of YesLogic — which makes the Prince XML to PDF converter — to make sure they added my favorite features. Bert and I used Prince to generate PDF from HTML and CSS sources for the third edition of our book. W3C just published a new Working Draft which describes features for printing, e.g., footnotes, cross-references, and even generated indexes.
For mobile units, I think Media Queries will be important. For example, they can express that large images should not be sent to mobile devices.
Another great opportunity for CSS is Web Applications. Just like documents, applications need to be styled and CSS is an intrinsic component of AJAX. The "AJAX" name sounds great, but allow me to propose a few alternate spellings that I find more accurate:
- AJACX: Asynchronous JavaScript, CSS and XMLHttpRequest
- ADJACS: Asynchronous DOM, JavaScript and CSS
- ADHJACS: Asynchronous DOM, HTML, JavaScript and CSS
- AJAHCS: Asynchronous JavaScript, HTML and CSS
- AJACS: Asynchronous JavaScript, HTML and CSS
Opera, Mozilla and Safari developers are collaborating in the WHAT WG and in W3C to make sure we have interoperable specifications for AJAX. I mean, ADHJACS.
> by crush > Is the difficulty of producing a layout that consists of > three or more columns of equal height justification for > adding some new feature to the specification to make this easier?
I don't think so. CSS2 defines a table layout that can be used for this purpose. The problem is, and I'm repeating myself here, that the dominant browser doesn't support it. Adding yet more features to the specification wouldn't help.
> How come, we um, lie?
Right. My name is, um, a bit troublesome to pronounce in English. But I'm a nice person who generally tells the truth. I often tell non-Norwegians that my first name is pronounced "howcome". That's close, but not quite. It does make for a great email address like howcome@opera.com, though.
So I may be a Lie, but I'm just a little white one :-)
-
Opera 9.0 Released
Nurgled writes "After teasing us for months with betas and snapshots, Opera Software have finally released version 9.0 of their web browser. The new version features correct ACID2 rendering, native support for the SVG Basic profile, a built-in BitTorrent client, support for Microsoft's designmode and contenteditable extensions, per-site configuration, Atom support, Web Forms 2.0 support, Canvas support (and some Opera-specific extensions), NTLM authentication, some support of parts of CSS3 and lots more. The full changelog is available." p14nd4 adds "And for you *nix users, it hasn't hit their .deb repository quite yet, but there are regular installers available for the major players, including a fixed Ubuntu installer and an x86 Solaris version." -
Do You Care if Your Website is W3C Compliant?
eldavojohn wonders: " Do W3C standards hold any importance to anyone and if so, why? When you finish a website, do you run it to the validator to laugh and take bets, or do you e-mail the results to the office intern and tell him/her to get to work? Since Opera 9 is the only browser to pass the ACID2 test, is strict compliance really necessary?" We all know that standards are important, but there has always been a distance between what is put forth by the W3C and what we get from our browsers. Microsoft has yet to release a browser that comes close to supporting standards (and it remains to be seen if IE7 will change this). Mozilla, although supportive, is still a ways from ACID2 compliance. Web developers are therefore faced with a difficult decision: do they develop their content to the standards, or to the browsers that will render it? As web developers (or the manager of web developers), what decisions did you made on your projects? Update: 05/20 by C : rgmisra provides a minor correction to the information provided. It is stated above that Opera9 is the only browser to pass the ACID2 test, however "This is not true - Safari was the first released publicly released browser to pass the ACID2 tests." -- Sorry about the mistake. -
Do You Care if Your Website is W3C Compliant?
eldavojohn wonders: " Do W3C standards hold any importance to anyone and if so, why? When you finish a website, do you run it to the validator to laugh and take bets, or do you e-mail the results to the office intern and tell him/her to get to work? Since Opera 9 is the only browser to pass the ACID2 test, is strict compliance really necessary?" We all know that standards are important, but there has always been a distance between what is put forth by the W3C and what we get from our browsers. Microsoft has yet to release a browser that comes close to supporting standards (and it remains to be seen if IE7 will change this). Mozilla, although supportive, is still a ways from ACID2 compliance. Web developers are therefore faced with a difficult decision: do they develop their content to the standards, or to the browsers that will render it? As web developers (or the manager of web developers), what decisions did you made on your projects? Update: 05/20 by C : rgmisra provides a minor correction to the information provided. It is stated above that Opera9 is the only browser to pass the ACID2 test, however "This is not true - Safari was the first released publicly released browser to pass the ACID2 tests." -- Sorry about the mistake. -
DOM Scripting
Simon P. Chappell writes "This is an unusual book in a good way. It covers a subject normally the preserve of geeks while being targeted at designers. Not a common approach, but one that Jeremy Keith pulls off rather handily. Mr. Keith is an active member of the Web Standards Project's Scripting Task Force; he not only knows how to script web pages, but he knows how to use that scripting to enhance the page's conformance to standards and even increase a site's accessibility. If you are like me, and have put off working with JavaScript because of the standards issues, then this book is our notification that those days are behind us. If you are a web designer who is interested in using dynamic techniques to enhance your site, but had feared the wrath of the standards police, this book is for you." Read the rest of Simon's review. DOM Scripting author Jeremy Keith pages 341 (12 page index) publisher Apress rating 10/10 reviewer Simon P. Chappell ISBN 1590595335 summary A tour de force that is destined to be called a classic.
I think that it's important to note that this is not a book about Ajax. For those of us feeling overly bombarded with Ajax this and Ajax that, this book is a delightful and refreshing read. Mr. Keith goes beyond the hype and brings us a strong explanation on one of the fundamental pillars of Ajax: working with the Document Object Model (the DOM of the title) using JavaScript. Without DOM Scripting there could be no Ajax, so this is an important addition to the library of any Web Developer who plans to create dynamic Web Applications. Who's it for?
According to the introduction: "This book deals with a programming language, but it isn't intended for programmers. This is a book for web designers. Specifically, this book is intended for standards-aware designers who are comfortable using CSS and XHTML." Mr. Keith is good to his word and his book is wholly targeted at web designers. That being said, I also found that the book was very suitable for programmers, myself included, who have been putting off using JavaScript in any depth. The Structure
The book's structure is fairly standard (no pun intended) and each chapter builds upon the proceeding one. The exceptions to this are the first and last chapters where the history of JavaScript and the future of DOM scripting are discussed, respectively.
Chapter two introduces JavaScript syntax and does a pretty good job considering that it is only 26 pages long. Chapter three then covers the Document Object Model. With the basic concepts of JavaScript and the DOM covered, the rest of the book proceeds to show us how to use them together.
Chapter four works through a basic JavaScript driven image gallery. This gallery is then revisited in chapter six where the JavaScript is upgraded to allow it to degrade gracefully according to the level of JavaScript functionality available in the browser and to ensure that the JavaScript is as unobtrusive as possible. Our final visit to the gallery example is in chapter seven where we learn to create markup on the fly and see how it can be usefully applied to enhance the gallery even further.
Chapter five looks at best practices for web design and how JavaScript and DOM scripting fit into that. Chapter eight takes a break from image galleries and looks at how DOM Scripting can help enhance our existing text content. Enhancement is also the focus of chapter nine, where the intersection and interaction of CSS and the DOM is explored.
Chapter ten is a little bit of fun, taking a look at animation through DOM Scripting. Chapter eleven, called "Putting It All Together" is a case study where a website is created for an imaginary band called "Jay Skript and the Domsters". The name may be corny, but the example is a wonderful display of starting with plain content and enhancing it using only standard compatible techniques. The book wraps up with an appendix of reference information of the JavaScript used in the book. What's to Like?
For a book that is not aimed at programmers, it is a great introduction to programming in JavaScript. Every concept is introduced clearly and the reasoning behind each approach is explained and the justification for it provided.
The book is very comfortable to read. The physical size, the typography, the design and the layout are all excellent. This is not surprising considering the target audience; excellent design is the minimum price of admission to the library of those in the design industry. What's to Consider?
There is very little that I did not like in this book. Although, I think that that it would be useful to point out again, that this isn't specifically written for programmers. If you know JavaScript well, this may not be the book for you. If you have extensive browser scripting experience this may also not be for you. And lastly, if you have no need, desire or interest in standards based scripting, this is absolutely not the book for you.
This is not a reference book. It will teach you a solid core of JavaScript suitable for working with the DOM, but do not think that it will teach you everything that there is to know about JavaScript. While the back of the book does have a small reference section, it is only for the concepts taught in the book. Website
Of course, the book has a website, available at domscripting.com. The site has an active blog and the finished version of the example site for "Jay Skript and the Domsters". Conclusion
This book deserves to be promoted to classic status immediately. It is written clearly, it uses only good principles of programming and adheres strictly to the appropriate standards. What a combination."
You can purchase DOM Scripting from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page. -
DOM Scripting
Simon P. Chappell writes "This is an unusual book in a good way. It covers a subject normally the preserve of geeks while being targeted at designers. Not a common approach, but one that Jeremy Keith pulls off rather handily. Mr. Keith is an active member of the Web Standards Project's Scripting Task Force; he not only knows how to script web pages, but he knows how to use that scripting to enhance the page's conformance to standards and even increase a site's accessibility. If you are like me, and have put off working with JavaScript because of the standards issues, then this book is our notification that those days are behind us. If you are a web designer who is interested in using dynamic techniques to enhance your site, but had feared the wrath of the standards police, this book is for you." Read the rest of Simon's review. DOM Scripting author Jeremy Keith pages 341 (12 page index) publisher Apress rating 10/10 reviewer Simon P. Chappell ISBN 1590595335 summary A tour de force that is destined to be called a classic.
I think that it's important to note that this is not a book about Ajax. For those of us feeling overly bombarded with Ajax this and Ajax that, this book is a delightful and refreshing read. Mr. Keith goes beyond the hype and brings us a strong explanation on one of the fundamental pillars of Ajax: working with the Document Object Model (the DOM of the title) using JavaScript. Without DOM Scripting there could be no Ajax, so this is an important addition to the library of any Web Developer who plans to create dynamic Web Applications. Who's it for?
According to the introduction: "This book deals with a programming language, but it isn't intended for programmers. This is a book for web designers. Specifically, this book is intended for standards-aware designers who are comfortable using CSS and XHTML." Mr. Keith is good to his word and his book is wholly targeted at web designers. That being said, I also found that the book was very suitable for programmers, myself included, who have been putting off using JavaScript in any depth. The Structure
The book's structure is fairly standard (no pun intended) and each chapter builds upon the proceeding one. The exceptions to this are the first and last chapters where the history of JavaScript and the future of DOM scripting are discussed, respectively.
Chapter two introduces JavaScript syntax and does a pretty good job considering that it is only 26 pages long. Chapter three then covers the Document Object Model. With the basic concepts of JavaScript and the DOM covered, the rest of the book proceeds to show us how to use them together.
Chapter four works through a basic JavaScript driven image gallery. This gallery is then revisited in chapter six where the JavaScript is upgraded to allow it to degrade gracefully according to the level of JavaScript functionality available in the browser and to ensure that the JavaScript is as unobtrusive as possible. Our final visit to the gallery example is in chapter seven where we learn to create markup on the fly and see how it can be usefully applied to enhance the gallery even further.
Chapter five looks at best practices for web design and how JavaScript and DOM scripting fit into that. Chapter eight takes a break from image galleries and looks at how DOM Scripting can help enhance our existing text content. Enhancement is also the focus of chapter nine, where the intersection and interaction of CSS and the DOM is explored.
Chapter ten is a little bit of fun, taking a look at animation through DOM Scripting. Chapter eleven, called "Putting It All Together" is a case study where a website is created for an imaginary band called "Jay Skript and the Domsters". The name may be corny, but the example is a wonderful display of starting with plain content and enhancing it using only standard compatible techniques. The book wraps up with an appendix of reference information of the JavaScript used in the book. What's to Like?
For a book that is not aimed at programmers, it is a great introduction to programming in JavaScript. Every concept is introduced clearly and the reasoning behind each approach is explained and the justification for it provided.
The book is very comfortable to read. The physical size, the typography, the design and the layout are all excellent. This is not surprising considering the target audience; excellent design is the minimum price of admission to the library of those in the design industry. What's to Consider?
There is very little that I did not like in this book. Although, I think that that it would be useful to point out again, that this isn't specifically written for programmers. If you know JavaScript well, this may not be the book for you. If you have extensive browser scripting experience this may also not be for you. And lastly, if you have no need, desire or interest in standards based scripting, this is absolutely not the book for you.
This is not a reference book. It will teach you a solid core of JavaScript suitable for working with the DOM, but do not think that it will teach you everything that there is to know about JavaScript. While the back of the book does have a small reference section, it is only for the concepts taught in the book. Website
Of course, the book has a website, available at domscripting.com. The site has an active blog and the finished version of the example site for "Jay Skript and the Domsters". Conclusion
This book deserves to be promoted to classic status immediately. It is written clearly, it uses only good principles of programming and adheres strictly to the appropriate standards. What a combination."
You can purchase DOM Scripting from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page. -
DHTML Utopia
Bruce Lawson submits the review below of Stuart Langridge's Excellent guide to creating dynamic web pages; scalable and sensible., writing "Don't be put off by the title: the DHTML here bears no resemblance to the stupid Web tricks of the late 90s that allowed animated unicorns to follow your cursor or silly Powerpoint-like transitions between Web pages." Read on for the rest. DHTML Utopia: Modern web design using JavaScript and DOM author Stuart Langridge pages 300 publisher Sitepoint rating 8 reviewer Bruce Lawson ISBN 0957921896 summary Excellent guide to creating dynamic web pages; scalable and sensible.
This book is the opening salvo in the latest battle in the Web Standards war -- the battle for unobtrusive JavaScripting, or Unobtrusive DOMscripting as many call it, in order to rid it of all the negative connotations that "DHTML" and "JavaScript" bring. Combined with the non-standard XMLHttpRequest object, it's sometimes referred to as "Ajax". Terminology aside, though, what are the substantive differences between the old-skool and the "modern" of the title?- Graceful degradation. A great example of this is Google Suggest in which the DOMscripting enhances functionality by making the page feel more responsive, but if you don't have JavaScript for some reason, the page still works.
- Separation of structure, presentation and behaviour. The DOMscript deals with the behaviour in the same way as CSS defines the presentation in the brave new Web standards world, and the three remain separate. The html has no JavaScript in it at all -- everything is handled by in separate code files.
- No browser sniffing. This aims to future-proof code by testing for features rather than sniffing for browser name and version. So, before using the TimeTravelCureCancer method, the current browser is tested to see whether it's supported. If it is, the script continues. If it isn't,the script silently fails with graceful degradation.
Chapter 1 has a brief (6-page) overview of the importance of valid code and separating presentation into CSS, and a short description of the unobtrusive nature of Langridge's scripts: no script in the mark-up at all; instead, the .js files contain "event listeners." The reasons why this is desirable are promised later. Chapter 2-4: The basics Now that document.write in the html is no longer needed, you need to know the "proper" way to add text or elements to a Web document. So Langridge gives us a tour of the DOM, showing how to walk the DOM tree and create, remove and add elements to the tree. It's methodical, and by the time I was beginning to get a bit tired of theory and thinking that you'll have to prise document.write out of my cold, dead hands, we get an "Expanding form" which allows us to expand a form ad infinitum to sign up as many friends as you want to receive free beer, without ever going back to the server. (You can see such a thing in action in gmail, when you want to attach multiple documents to an email).
I started to warm to the author and his style. 33 pages into the book, and we get a real-world working example to examine (I like my theory liberally garnished with practice). I also feel a kinship with authors who fantasise about mad millionaire philanthropists giving away beer.
By chapter 3, we've really got going. Apart from one rather pedantic edict (the event is mouseover, the event handler is onmouseover and we should separate the nomenclature, even though it makes no practical difference), the focus here is on real-life browsers. And, as we all know, in Web dev books, real-life browsers means grotesque exceptions to our ideal-world rules .Strangely -- and oddly satisfyingly to this PC user -- the culprit isn't only the perennially despised IE/ Win; shiny Safari comes in for a good bit of stick!
The real-world example here is a data table that highlights the whole row and column of any cell that's being moused-over. Now, in any modern browser except for IE/ Win, the row could be given a hover pseudoclass (IE/ Win only allows :hover on anchors). But as there is (weirdly) no HTML construct for a column, this effect can only be achieved through DOMscripting. What the script does is to dynamically append a class name to every cell in the row and column at run time -- and the pre-defined CSS file determines the styling of that class.
Herein lies an advantage in Unobtrusive DOMscripting: you could just take this script and plug it into a Web site without changing any of the html (except to add a link to the script file in the head). But the script is relatively complex for a newbie to code, and for the techniques to be widely used, I suspect that the billion old-skool cut'n'paste JavaScript sites will need to be replaced with a single, canonical library of modern scripts for people to cut and paste from. For those who find CSS challenging, JavaScript is probably even more complex. . Chapters 5 - 7: blurring the division between Web UI and application UI It's a truism that the Web has set back UI development some years -- in fact, back to the old dumb-terminal paradigm of filling in a screen full of data, pressing the button to send it back to the mainframe and waiting for the next page to be sent -- or the old one returned with errors noted.
Langridge shows that we can make the experience smarter than this, going beyond the traditional JavaScript client-side validation interactivity by adding animation to allow text to fade in and out over time, styling tooltips to be sexier than the default yellow box and which can gently appear into view rather than the browser default on/ off state are examples that struck me.
When I first read these, I thought they were cheesy gimmicks -- the modern equivalent cursor-following unicorn -- until I considered more deeply and realised that many of the UI elements that we enjoy in modern desktop apps are precisely these small, cosmetic effects: abrupt transitions, lack of transparency, sharp edges to UI widgets all feel like old operating systems or clunky Web pages.
It's not all touchy-feely; we get auto-complete text entry, degradable calendar pop-ups, flyout menus and lessons in OOP, encapsulating code for re-usability, and avoiding Internet Explorer memory leaks. Chapters 8- 10: seamlessly working with the Server So far, so client-side. Where Unobtrusive DOMscripting really gets developers juices flowing is the ability to communicate with the server without obviously refreshing the page. Chapter 8 takes you through a variety of methods. Some, like the hacky iframe method or hideous 204 piggyback method are so gruesome that I breathed a sigh of relief loud enough to wake the cat when I finally turned the page to read "XMLHTTP". This method (which is non-standard and introduced by Microsoft) has ushered in the Next Great Web Thing: asynchronous communication with the server. Langridge walks through using the Sarissa library to make a user registration form that checks whether the user name you choose is taken, and if so, suggest some alternatives without refreshing the page.
There's a lot of unresolved accessibility problems with the Ajax method (how does a screenreader alert the listener to the fact that something new has appeared on the page? How do they navigate and hear the new stuff in context?) and while it is laudable that Langridge notes these issues exists, I'd hoped he would have suggested some solutions. He doesn't, but as he's a member of the Web Standards Project's DOMscripting task force I'm guessing it's being worked on.
The project that really kicks ass in this section is a file manager, like the one in most people's Web site control panels, where you can actually drag and drop the icons, like an operating system, and the server does the work. Langridge carefully goes through all of the steps, all of the pitfalls and all of the code needed to make this happen in any modern browser.
It doesn't take a lot of imagination to realise just how this could revolutionise the Web experience. Drag and drop products into a shopping cart. Drag the shopping cart to the checkout icon. Moving money around bank accounts in some integrated internet banking application. The possibilities are huge. Conclusion The whole technique of unobtrusive DOMscripting needs further research before it's ready for prime time -- particularly from an accessibility point of view, but then as an accessibility bore you'd expect me to say that. I think it's beyond question that there's ideas in here that radically enhance the usability of Web-based applications by making them more intuitive and more like the desktop drag-and-drop interface we know from our desktops.
This is a good-humoured, thoroughly-researched book that combines theory with practical learn-by-doing examples. To this reviewer, the code appears scalable and sensible. This book is never going to appeal to the quivering aesthete designers -- probably because it's fundamentally about code. But precisely because it proposes a complete separation of code and design, it facilitates the advancement of the Web.
You can purchase DHTML Utopia: Modern web design using JavaScript and DOM from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page. -
DHTML Utopia
Bruce Lawson submits the review below of Stuart Langridge's Excellent guide to creating dynamic web pages; scalable and sensible., writing "Don't be put off by the title: the DHTML here bears no resemblance to the stupid Web tricks of the late 90s that allowed animated unicorns to follow your cursor or silly Powerpoint-like transitions between Web pages." Read on for the rest. DHTML Utopia: Modern web design using JavaScript and DOM author Stuart Langridge pages 300 publisher Sitepoint rating 8 reviewer Bruce Lawson ISBN 0957921896 summary Excellent guide to creating dynamic web pages; scalable and sensible.
This book is the opening salvo in the latest battle in the Web Standards war -- the battle for unobtrusive JavaScripting, or Unobtrusive DOMscripting as many call it, in order to rid it of all the negative connotations that "DHTML" and "JavaScript" bring. Combined with the non-standard XMLHttpRequest object, it's sometimes referred to as "Ajax". Terminology aside, though, what are the substantive differences between the old-skool and the "modern" of the title?- Graceful degradation. A great example of this is Google Suggest in which the DOMscripting enhances functionality by making the page feel more responsive, but if you don't have JavaScript for some reason, the page still works.
- Separation of structure, presentation and behaviour. The DOMscript deals with the behaviour in the same way as CSS defines the presentation in the brave new Web standards world, and the three remain separate. The html has no JavaScript in it at all -- everything is handled by in separate code files.
- No browser sniffing. This aims to future-proof code by testing for features rather than sniffing for browser name and version. So, before using the TimeTravelCureCancer method, the current browser is tested to see whether it's supported. If it is, the script continues. If it isn't,the script silently fails with graceful degradation.
Chapter 1 has a brief (6-page) overview of the importance of valid code and separating presentation into CSS, and a short description of the unobtrusive nature of Langridge's scripts: no script in the mark-up at all; instead, the .js files contain "event listeners." The reasons why this is desirable are promised later. Chapter 2-4: The basics Now that document.write in the html is no longer needed, you need to know the "proper" way to add text or elements to a Web document. So Langridge gives us a tour of the DOM, showing how to walk the DOM tree and create, remove and add elements to the tree. It's methodical, and by the time I was beginning to get a bit tired of theory and thinking that you'll have to prise document.write out of my cold, dead hands, we get an "Expanding form" which allows us to expand a form ad infinitum to sign up as many friends as you want to receive free beer, without ever going back to the server. (You can see such a thing in action in gmail, when you want to attach multiple documents to an email).
I started to warm to the author and his style. 33 pages into the book, and we get a real-world working example to examine (I like my theory liberally garnished with practice). I also feel a kinship with authors who fantasise about mad millionaire philanthropists giving away beer.
By chapter 3, we've really got going. Apart from one rather pedantic edict (the event is mouseover, the event handler is onmouseover and we should separate the nomenclature, even though it makes no practical difference), the focus here is on real-life browsers. And, as we all know, in Web dev books, real-life browsers means grotesque exceptions to our ideal-world rules .Strangely -- and oddly satisfyingly to this PC user -- the culprit isn't only the perennially despised IE/ Win; shiny Safari comes in for a good bit of stick!
The real-world example here is a data table that highlights the whole row and column of any cell that's being moused-over. Now, in any modern browser except for IE/ Win, the row could be given a hover pseudoclass (IE/ Win only allows :hover on anchors). But as there is (weirdly) no HTML construct for a column, this effect can only be achieved through DOMscripting. What the script does is to dynamically append a class name to every cell in the row and column at run time -- and the pre-defined CSS file determines the styling of that class.
Herein lies an advantage in Unobtrusive DOMscripting: you could just take this script and plug it into a Web site without changing any of the html (except to add a link to the script file in the head). But the script is relatively complex for a newbie to code, and for the techniques to be widely used, I suspect that the billion old-skool cut'n'paste JavaScript sites will need to be replaced with a single, canonical library of modern scripts for people to cut and paste from. For those who find CSS challenging, JavaScript is probably even more complex. . Chapters 5 - 7: blurring the division between Web UI and application UI It's a truism that the Web has set back UI development some years -- in fact, back to the old dumb-terminal paradigm of filling in a screen full of data, pressing the button to send it back to the mainframe and waiting for the next page to be sent -- or the old one returned with errors noted.
Langridge shows that we can make the experience smarter than this, going beyond the traditional JavaScript client-side validation interactivity by adding animation to allow text to fade in and out over time, styling tooltips to be sexier than the default yellow box and which can gently appear into view rather than the browser default on/ off state are examples that struck me.
When I first read these, I thought they were cheesy gimmicks -- the modern equivalent cursor-following unicorn -- until I considered more deeply and realised that many of the UI elements that we enjoy in modern desktop apps are precisely these small, cosmetic effects: abrupt transitions, lack of transparency, sharp edges to UI widgets all feel like old operating systems or clunky Web pages.
It's not all touchy-feely; we get auto-complete text entry, degradable calendar pop-ups, flyout menus and lessons in OOP, encapsulating code for re-usability, and avoiding Internet Explorer memory leaks. Chapters 8- 10: seamlessly working with the Server So far, so client-side. Where Unobtrusive DOMscripting really gets developers juices flowing is the ability to communicate with the server without obviously refreshing the page. Chapter 8 takes you through a variety of methods. Some, like the hacky iframe method or hideous 204 piggyback method are so gruesome that I breathed a sigh of relief loud enough to wake the cat when I finally turned the page to read "XMLHTTP". This method (which is non-standard and introduced by Microsoft) has ushered in the Next Great Web Thing: asynchronous communication with the server. Langridge walks through using the Sarissa library to make a user registration form that checks whether the user name you choose is taken, and if so, suggest some alternatives without refreshing the page.
There's a lot of unresolved accessibility problems with the Ajax method (how does a screenreader alert the listener to the fact that something new has appeared on the page? How do they navigate and hear the new stuff in context?) and while it is laudable that Langridge notes these issues exists, I'd hoped he would have suggested some solutions. He doesn't, but as he's a member of the Web Standards Project's DOMscripting task force I'm guessing it's being worked on.
The project that really kicks ass in this section is a file manager, like the one in most people's Web site control panels, where you can actually drag and drop the icons, like an operating system, and the server does the work. Langridge carefully goes through all of the steps, all of the pitfalls and all of the code needed to make this happen in any modern browser.
It doesn't take a lot of imagination to realise just how this could revolutionise the Web experience. Drag and drop products into a shopping cart. Drag the shopping cart to the checkout icon. Moving money around bank accounts in some integrated internet banking application. The possibilities are huge. Conclusion The whole technique of unobtrusive DOMscripting needs further research before it's ready for prime time -- particularly from an accessibility point of view, but then as an accessibility bore you'd expect me to say that. I think it's beyond question that there's ideas in here that radically enhance the usability of Web-based applications by making them more intuitive and more like the desktop drag-and-drop interface we know from our desktops.
This is a good-humoured, thoroughly-researched book that combines theory with practical learn-by-doing examples. To this reviewer, the code appears scalable and sensible. This book is never going to appeal to the quivering aesthete designers -- probably because it's fundamentally about code. But precisely because it proposes a complete separation of code and design, it facilitates the advancement of the Web.
You can purchase DHTML Utopia: Modern web design using JavaScript and DOM from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page. -
Update on Standards and CSS in IE7
brajesh writes "Chris Wilson has posted on IEBlog about the Standards and CSS in IE7. According to the post, "In IE7, we will fix as many of the worst bugs that web developers hit as we can, and we will add the critical most-requested features from the standards as well. Though you won't see (most of) these until Beta 2". Further,"we will not pass this (Acid2 browse) test when IE7 ships."" -
Safari Passes the Acid2 Test
TigerX writes "The Mac web browser Safari has become the first browser to pass the Acid2 test. Acid2 is a CSS/HTML test suite put out by the Web Standards Project (WASP). Developer David Hyatt had been working on the project for the past few weeks. Details can be found at his blog. The patched Safari is not yet avaliable for public consumption. It is unknown when the patches will appear in a public version of Safari." -
Safari Passes the Acid2 Test
TigerX writes "The Mac web browser Safari has become the first browser to pass the Acid2 test. Acid2 is a CSS/HTML test suite put out by the Web Standards Project (WASP). Developer David Hyatt had been working on the project for the past few weeks. Details can be found at his blog. The patched Safari is not yet avaliable for public consumption. It is unknown when the patches will appear in a public version of Safari." -
Firefox and Opera Fail the Acid2 Test
naylor83 writes "Four weeks ago, Opera's CTO Håkan Lie put forward the Acid2 challenge to the IE developers at Microsoft. The Web Standards Project has now silently published the promised browser test. Somewhat surprisingly, both Opera and Firefox fail to correctly render the test page. Obviously though, they're no where near as lousy as Internet Explorer. More screenshots are available at my blog, as well as at other people's." -
Firefox and Opera Fail the Acid2 Test
naylor83 writes "Four weeks ago, Opera's CTO Håkan Lie put forward the Acid2 challenge to the IE developers at Microsoft. The Web Standards Project has now silently published the promised browser test. Somewhat surprisingly, both Opera and Firefox fail to correctly render the test page. Obviously though, they're no where near as lousy as Internet Explorer. More screenshots are available at my blog, as well as at other people's." -
Firefox and Opera Fail the Acid2 Test
naylor83 writes "Four weeks ago, Opera's CTO Håkan Lie put forward the Acid2 challenge to the IE developers at Microsoft. The Web Standards Project has now silently published the promised browser test. Somewhat surprisingly, both Opera and Firefox fail to correctly render the test page. Obviously though, they're no where near as lousy as Internet Explorer. More screenshots are available at my blog, as well as at other people's." -
The CSS Anthology
Bruce Lawson writes "I've read a lot of CSS books, but this one is the one I wished that I'd read when I was learning, and I suspect that other slashdotters may concur. It is firmly pitched at the coder rather than the designer, takes you from CSS virgin to upper intermediate level, with good attention to the process of (re)designing with CSS, legal issues such as Accessibility (section 508), and assumes that you're not scared of mark-up." Lawson offers this disclosure: "I should immediately disclose that I've worked for two different companies that have published the author, Rachel Andrew, but I have no connection with the publishers, or this book." Read on for the rest of his review. The CSS Anthology: 101 Essential Tips, Tricks & Hacks author Rachel Andrew pages 380 publisher SitePoint rating 8 reviewer Bruce Lawson ISBN 0957921888 summary Structured Q&A guide for CSS beginners
Author's credentialsAndrew is a long-term member of the Web Standards Project (WaSP) and programmer, technical project manager, technical team leader/senior developer and webmaster, according to her own bio.
Who's the book for?The book's subtitle is somewhat misleading. There probably are 101 tips'n'tricks (I didn't count) but it's not the random miscellany that it implies. The information is structured so that a n00b could become proficient by reading the book from start to finish (I tested this out on a colleague). The tips'n'tricks structure does allow you to find what you're looking for in a hurry. The table of contents is easily scanned, and there is an excellent index.
The book doesn't offer advice on how to sex up the beauty of your site. That's fine for me; my current work involves replicating someone else's designs using xhtml and CSS, and as a coder I'm pathologically unable to design the type of showcases that you see at the CSS Zen Garden. A graphic designer might therefore find this book hard work; it jumps straight into a discussion of syntax, and there's occasional geek-directed statements (CSS supports multi-line C-style comments). Similarly, if you're completely new to html, this book probably isn't for you; there's lots of references to pre-CSS ways of working which could potentially be mystifying. Unusually for CSS books, there's a refreshing lack of polemic telling you why you should use style-sheets. If I read another history of the browser wars in a technical book, I shall scream.
So the book's constituency would seem to be those who know how to present information via html, and wish to take advantage of the smaller filesizes, greater flexibility and logical separation of the presentation layer from the mark-up that the (x)html/ CSS combination offers. The logical purity is my personal reason for moving to Web Standards; the trauma of writing text processing applications with VAX Fortran in the late '80s left me with the propensity to weep when I see html as sorely abused I mangled dear old Fortran.
Are you sitting comfortably? Then I'll begin.Anthology kicks off in the conventional way for CSS books - controlling fonts and colours, styling hyperlinks, headings and the like. Each chunk is structured as a problem (How do I remove the indented left margin from a list?), a solution and sample code, and generally a discussion of related applications of the code, compatibility issues, accessibility notes etc. This is a pretty compact method of explication, and the basics of styling, syntax, pseudo-class order and the like are romped through in 40 pages, but not glossed over. The key to this is that Anthology assumes you know what you want to do, and shows you how to do it.
Chapter 4 (Navigation) is where the real meat begins - making navigation menus that are solely html unordered lists (because a menu is logically a list of links) and styling with CSS, adding rollover effects, styling navigation as buttons, changing the styling to a horizontal navbar, or even Amazon-style tabs without changing the mark-up. I suspect that, although these are techniques that can be found in most CSS books, the brevity and simplicity of the explanation will be revelatory to many. Chapter 5 (Tabular Data) may come as a surprise to those who mistakenly believe that web standards disallows the use of html tables, as it shows how to style tabular data - the examples are a spreadsheet and a calendar. Chapter 6 repeats the trick with that most mundane aspect of web development, the form.
Chapter 7 (Browser and Device Support) is about real-world CSS development. Unlike most books which instruct you to test in loads of browsers and leave it at that, this chapter lists all the main permutations of OS and browser (including tips on installing multiple versions of IE/ Win), and begins discussion of the tried and tested hacks to hide styles from Netscape 4, IE etc. All of this information is available on the web -- but for a newbie who isn't yet aware that it's possible to hide styles from certain browsers, it's a great way to introduce them to the murky practices of real-world CSS development. What's also refreshing in a computer book for n00bs is a discussion of how to seek help on lists and forums, with a guide to etiquette.
Chapter 8 (CSS Positioning and Layout) is where the stuff that stumps many a table-based designer begins. Along with fonts and colours etc, CSS can lay out the stuff on your page. I'm unsure about the success of this chapter; the Q&A structure is great if you're looking to build one of the sites that are explained (and the list is pretty comprehensive), but I came to the chapter hoping to cure a couple of bugs I'd found in a project I'd previously semi-successfully laid out with absolute positioning (A.P.).
Generally, I layout using floats as I also write the html, so it's easy to ensure that the markup spits out <div>s (sections) in the left-to-right, top-to-bottom order that I want to lay them out in. Suddenly, I had two projects that required A.P. for the first time, as it was not cost-effective to change the way that the client's CMS spat out the markup, so AP was required to position sections on the page regardless of where they appeared in the markup.
Anthology served me fine until I tested the page in IE and the layout was off. Nothing in the book gave me any pointers, and in the end I gave up Googling and just used a hack which exploits an IE parser bug to serve different co-ordinates to IE, after finding the hack co-ordinates through trial and error:
#APthing {position:absolute; top:34px; left: 758px; width:108px; height:88px;}
* html #APthing {position:absolute; top:19px; left: 785px;} /*for IE */OK, so there may be a simple mistake I'm making -- but then, as far as absolute positioning goes, I'm the kind of newbie at whom this book is aimed, and I imagine that others will make the same mistake that I did. If the book had explained where I was going wrong, or given me the above hack, I'd've spent less time with Google and more time with Guinness.
Chapter 9 (Experimentation, Browser Specific CSS and Future Techniques) is successful, except for one small gripe. I'm glad that the author, although a member of the Web Standards Project, isn't an uber-purist. (I'm of the opinion that a little invalid code, if it's the only way to get the job done, isn't a hanging offense). So she shows how to implement IE-only proprietary CSS that can make colourful scrollbars, should you wish to do this. There's also a Mozilla-only CSS trick to allow curved edges to CSS boxes, which I implemented on my homepage that very evening.
However (here's the gripe), the most useful technique shown is one which allows fully-CSS flyout menus that don't rely on JavaScript. The author notes that it won't work for most people, as IE incorrectly restricts the hover pseudo-class to <a> tags only, while the CSS requires hovering over <li> elements.
Well, Yes and No. There's a well-documented and elegant hack which allows a proprietary Microsoft behaviour to be attached to the CSS that attaches a small JScript that corrects the IE bug, and thus allows this extremely useful CSS-only flyout menu to work in IE. I've used the technique myself when required to mimic the look and feel of a client's site while making it DDA/ADA accessible, and it works perfectly. To me, the omission of the IE hack from Anthology is an unfortunate oversight.
SummaryThere's a couple of flaws in the book, though I suspect that in order to explain them, I've over-emphasised them. All in all, it's a solid, professional no-B.S. way for someone with a code-oriented mind to get them up to speed, satisfactorily and quickly; a motivated reader could be churning out standards-compliant, bandwidth-friendly sites after a few hour's experimentation. Ordering the book from the publisher's website was a good experience and, unusually, they have a money-back guarantee. As I said, I wish that I'd had access to Anthology when I was learning.
You can purchase The CSS Anthology: 101 Essential Tips, Tricks & Hacks from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page. -
Developing a Standards-Compliant Web App?
dogas queries: "I work for quite a large company that is creating quite a large web-based enterprise-level application. We've been in development for a long while, and currently our app is only native to IE 5.5. At this point it would take a *lot* of effort to bring our app up to to be Standards-compliant. Now management wants our app to be more flexible, such that if the customer wants to customize the look-and-feel, it won't be a major undertaking that will kill the structure. Naturally, we're switching to a CSS-based layout, ripping out the IE proprietary Javascript in favor of ECMAScript, and bringing the whole app to XHTML 1.0 Transitional compliance while we're at it. Since we started coding the front end at about the time of the browser wars, we didn't have the luxury of planning to use the W3 standards (especially since they were not complete, and browsers weren't honoring them anyways). I'm wondering what type of priority creating a standards-compliant web app is in other companies, and if that priority is being raised given the benefits of creating pages that separate structure from style from behavior." -
ALA 3 Goes Online
Qbertino writes "Jeffrey Zeldmans Alistapart ("ALA"), a very educative website for everything concerning webdesign, that also heavily promotes web standards, has come back online in it's third incarnation. As you might expect from one of the world leading web designers it works good in all standards compliant browsers and - other than recent attempts at webdesign - doesn't make your eyes bleed ;-)." -
Return of the WaSP
No_Weak_Heart writes "After a brief hiatus, the Web Standards Project (WaSP) has returned. Here's the story at Wired about this grassroots coalition which works to promote the adoption of web standards by authors, tool makers and in browsers. In a related vein, the Boston Globe has a comfy chat with Tim Berners-Lee, the guiding force behind many of those standards." -
Return of the WaSP
No_Weak_Heart writes "After a brief hiatus, the Web Standards Project (WaSP) has returned. Here's the story at Wired about this grassroots coalition which works to promote the adoption of web standards by authors, tool makers and in browsers. In a related vein, the Boston Globe has a comfy chat with Tim Berners-Lee, the guiding force behind many of those standards." -
Web Standards Project: Upgrade, Or Miss Out
DShadow writes: "The Web Standards Project launched yesterday a Browser Upgrade Campaign. They feel that the Web is being held back by users who use older versions of browsers. Their solution is twofold. First, they are asking web developers to drop support for old (pre- IE5.5/NS6/Opera5) browsers and code only using the most recent standards. Secondly, they are asking developers to add a bit of JavaScript to web pages that forces browsers to redirect to the a WSP page explaining this. Now, I'm all for using modern technology and phasing out support for the old stuff, but to say that I'd be annoyed when websites start telling me to go away and upgrade my browser (Netscape 4.6) because they don't want to support it would be an understatement. I'll upgrade when I'm ready to, and not a moment sooner." It took me a few reads to realize that they're serious. -
Web Standards Project: Upgrade, Or Miss Out
DShadow writes: "The Web Standards Project launched yesterday a Browser Upgrade Campaign. They feel that the Web is being held back by users who use older versions of browsers. Their solution is twofold. First, they are asking web developers to drop support for old (pre- IE5.5/NS6/Opera5) browsers and code only using the most recent standards. Secondly, they are asking developers to add a bit of JavaScript to web pages that forces browsers to redirect to the a WSP page explaining this. Now, I'm all for using modern technology and phasing out support for the old stuff, but to say that I'd be annoyed when websites start telling me to go away and upgrade my browser (Netscape 4.6) because they don't want to support it would be an understatement. I'll upgrade when I'm ready to, and not a moment sooner." It took me a few reads to realize that they're serious. -
Web Standards Project Blasts Netscape
Spasemunki writes "Mozillazine is running a link to (and commentary on)this letter written by the Web Standards Project, blasting Netscape for failing to deliver on Netscape 5/6 in a timely fashion. They argue that the inability of NS to produce a ready-for-prime-time, standards compliant browser has made it harded to coax other developers into adopting standards, and that the zombie-like continued existance of Netscape 4 in its various .x's represents an ongoing offense to standards compliance. These criticisms have been around for a while, but the WSP sums them up well, and gives Mozilla advocates (myself included) some things to answer to." -
Web Standards Project Blasts Netscape
Spasemunki writes "Mozillazine is running a link to (and commentary on)this letter written by the Web Standards Project, blasting Netscape for failing to deliver on Netscape 5/6 in a timely fashion. They argue that the inability of NS to produce a ready-for-prime-time, standards compliant browser has made it harded to coax other developers into adopting standards, and that the zombie-like continued existance of Netscape 4 in its various .x's represents an ongoing offense to standards compliance. These criticisms have been around for a while, but the WSP sums them up well, and gives Mozilla advocates (myself included) some things to answer to." -
Microsoft's IE 5.5 Flouts Industry Standards
Eric Harlow writes: "Microsoft's newly released Internet Explorer 5.5 is trying to do something Microsoft was worried that Netscape might do -- make the browser a platform. Of course, now that IE has 86% of the market, it can lure developers into using flashy new tools that leave Netscape users out of the dust since the new IE has all kinds of 'IE only' features -- and they haven't managed to fix standard items as CSS." Here's the CNET story; a snippet reads: "Together, the proprietary innovation and the purported faults in standards compliance mean that Web pages created to work for IE--widely considered to be the dominant browser--won't work with browsers from Netscape, Opera Software and other providers."Similarly, jchristopher writes: "The Web Standards project has come out against Microsoft again, this time blasting them for the proprietary "enhancements" found in their recently released IE 5.5 Web browser. Microsoft is up to their tricks again. Meanwhile, the browser still does not fully support CSS1. Here is the press release from the Web Standards Project."
I wish companies would stop touting incompatibility with others as a desirable feature rather than a liability. Would you buy a wrench that said "Works only on Ford"?
-
Microsoft's IE 5.5 Flouts Industry Standards
Eric Harlow writes: "Microsoft's newly released Internet Explorer 5.5 is trying to do something Microsoft was worried that Netscape might do -- make the browser a platform. Of course, now that IE has 86% of the market, it can lure developers into using flashy new tools that leave Netscape users out of the dust since the new IE has all kinds of 'IE only' features -- and they haven't managed to fix standard items as CSS." Here's the CNET story; a snippet reads: "Together, the proprietary innovation and the purported faults in standards compliance mean that Web pages created to work for IE--widely considered to be the dominant browser--won't work with browsers from Netscape, Opera Software and other providers."Similarly, jchristopher writes: "The Web Standards project has come out against Microsoft again, this time blasting them for the proprietary "enhancements" found in their recently released IE 5.5 Web browser. Microsoft is up to their tricks again. Meanwhile, the browser still does not fully support CSS1. Here is the press release from the Web Standards Project."
I wish companies would stop touting incompatibility with others as a desirable feature rather than a liability. Would you buy a wrench that said "Works only on Ford"?
-
Jeffrey Zeldman Bites Back
We got a lot of (shall we say) slightly impertinent questions for Web Standards Project co-founder Jeffrey Zeldman, but that's okay. He reads Slashdot and knows the nature of the beast, and he's hard-core enough to give as good as he gets. So set your humor module to high, then sit back and enjoy Mr. Zeldman's (appropriately impertinent) answers to the 12 questions we forwarded to him.1) Here's my question:
(Score:5, Insightful)
by FascDot Killed My PrIf you're such a hotshot web designer, why have you committed one of the cardinal sins of web design: Putting an "entry page" that does nothing but suck bandwidth and make it difficult to "back" out of a site?
Jeffrey:
I'll answer this one piece by piece.
"If you're such a hotshot web designer."
Never claimed to be. Roblimo wrote that glowing description. It's not surprising that some of you, who have no idea what I do, were pissed off when those words of high praise took you to a very simple, low-bandwidth, personal site.
I wish Rob had said "Zeldman is a co-founder of The Web Standards Project" (WaSP), and had explained what the WaSP does, maybe even mentioning the role we played in getting Netscape to throw out its old rendering engine and begin building Mozilla around the standards-compliant Gecko core. I'm guessing people would have overlooked my supposed "design sins" or their distaste for the color orange on my personal site if they had a better idea about what I actually do.
For those who don't know, the WaSP organized a petition drive to persuade Netscape to throw out its old rendering engine and build its new browser around Gecko. Then-group-leader George Olsen of WaSP, along with ThunderLizard's Jim Heid, got 2,000 developers to sign the petition. Netscape is a company that listens - at least, for the last two years, it has been listening - and you all know the result: an upcoming browser that is designed to fully comply with HTML 4, CSS-1, the W3C DOM, XML, and EcmaScript.
No disrespect to Roblimo either. I dig the guy. And what he said is true in a sense. I *am* a web designer and writer, and a lot of the work I've done over the past five years *has* gotten imitated, for better or worse. For instance, oddly enough, the original Mozilla.org (http://www.mozilla.org) was copied from the simple HTML-and-CSS layout I did The Web Standards Project (http://www.webstandards.org/): from the technique, to the color palette, to the crude four-pixel black outlines around content areas. Don't bother checking; the new Mozilla layout has evolved away from that original look, though it still bears trace elements of the original design. A lot of you probably do remember the original Mozilla layout. I'm sure when Roblimo saw it, he realized it was copied from http://www.webstandards.org and I think that's the kind of thing he was referring to in his overly kind introduction to my work.
By the way, I wasn't upset by what Mozilla did; I was flattered by it. You may think it is ugly design, though I'm sure that none of you said so to Mozilla because you believe in the project. It's weird to me that the same people who dig Mozilla would be rude in their comments to someone who, at least in a small way, helped influence the direction of that browser, and who also influenced the initial DESIGN of that project, but whatever. I also talk with Microsoft, because the goal of WaSP is to get standards in *all* browsers, and the fact that I talk to engineers at that company may make me evil incarnate in your book. I can deal with that. If we get better browsers, I'll be satisfied.
I do get copied a lot and often those copies are better than the original. In that sense "VIEW SOURCE" functions like "OPEN SOURCE." ;) I am happy when someone takes an idea of mine and makes it better (and their own).
"why have you committed one of the cardinal sins of web design"
I've been designing websites for five years. I don't claim to be a genius and I'm far from the best designer on the planet, but your take on cardinal sins of a profession you do not participate in is about as meaningful as my comments on your programming decisions would be.
You are parroting Jakob Nielsen or some other expert whose work you've read. You haven't read my work on the same subject (no problem) and you don't know my work as a designer (no problem). Just as in programming, design is about decisions. A designer never sins. He/she makes informed decisions. If you get to know the work, you may understand why those decisions were made. If you never bother to engage with the work - if you merely believe that all design must conform with a small set of rules written by one or two people - you don't understand the nature of the thing you are criticizing. Especially if you spend all of five seconds looking at it, and then rush to be the first to post a rant. There are rules of grammar, too, and James Joyce threw them all out. True, I ain't him. But I am me. All designers make decisions, and if the entire web looked like http://www.useit.com I don't think that would be such a great thing. Anything that departs from the look of http://www.useit.com is violating at least a few of Jakob's "rules," and that's the nature of the beast.
"Putting [up] an 'entry page' that does nothing but suck bandwidth and make it difficult to "back" out of a site?"
The bandwidth sucked is exactly 4K. I think you can handle it.
The "entry page" is a temporary placeholder while I rethink the front end of my personal site. Notice the words "temporary," "placeholder," and "personal." The previous front page was navigational in nature, and it is archived at http://www.zeldman.com/mozillatest.html . The name refers to the fact that the page revealed a bug in recent builds of Mozilla. I have left it online so the Mozilla folks can use it to track down and fix that bug, which they are doing now.
Recently, I've been focused on WaSP and A List Apart (http://www.alistapart.com/), a web design magazine and mailing list I co-founded with Brian Platz. The content on my personal site (275+ pages) has not been my most recent focus, so I determined a while back that it was silly to stop the visitor with a primarily navigational page. I should explain that some people visit zeldman.com for entertainment like The Ad Graveyard; a completely different audience visits for web design info, such as the Ask Dr Web tutorial; and so on. To accommodate those very different visitors, I initially had a core page that was navigational. I didn't put real content on page one, because I was accommodating maybe six completely different audiences, and there was nothing in all that content that would appeal to ALL of them. On http://www.alistapart.com/ I start with content on page one, because the audience is more unified.
Even that old navigational page (http://www.zeldman.com/mozillatest.html), with all its rollovers etc., was very low-bandwidth. I recently got to look at it while stuck at an airport in Stockholm. The airport had five Windows boxes sharing one 56K modem. I looked at some of my favorite sites, and they were all crawling onto the screen. I was pleased that my own front page loaded instantly. I design for low bandwidth, which explains why my work rarely looks like that of "such a hot shit designer." Back to the point. I haven't yet figured out how to restructure the front end of my site, so I put up a 4K placeholder with a bone-simple rollover and a 6 second refresh to the single page at my site that I have been focusing on lately.
Now you know why I have a temporary entry page; now you know why it does "nothing" (it is temporary, and what it does is redirect you); and now you know that it does not suck bandwidth.
How it "makes it difficult to 'back' out of the site" is a mystery to me, so I can't comment on that clause in your question. Personally I find database driven pages much harder to navigate and back out of than 4K html pages. And with browsers that suck, frames-based pages can also be tough to navigate. My 4K page is frameless HTML.
2) I have a question:
(Score:4, Insightful)
by SkinkaWhat's with that small font www.zeldman.com, haven't you read any (web) usability guides?
Jeffrey:
Yes, I've read them, yes I've written on the subject, yes yes yes.
Along with another WaSP member, I helped influence Microsoft to make ALL web text resizable by the user in IE5/Mac for reasons of accessibility and usability, and we are hoping to get the same from Mozilla. (At the moment, this feature is only available in IE5/Mac. It should be in every browser. It's not in the Windows version of IE and it's obviously not in the current version of Navigator.)
Why small fonts? Personal design decision on a personal site. You can enlarge the type in some browsers, not all. That day is coming.
There are methods of CSS that allow you to resize type in *all* browsers.
Why do I often avoid those methods?
Because they are not supported in most "CSS-capable" browsers.
Absolute font-size keywords are broken in Navigator 4 (all platforms) and IE5/Windows.
Percentages and ems are broken in Netscape 4.
Points are meaningless on computer screens, and the reliance on points in Style Sheets is a widespread authoring error.
Until all browsers support standards, designers will be stuck using pixels or FONT SIZE tags. Or simply making no effort at all to control the appearance and size of type on the web page. If this bothers you, join The Web Standards Project.
(Warning: it is orange. If you "can't get past the color" then I guess you'll have to let big browser companies determine the fate of the web.)
Unless you design web sites every day, you have no idea of the compatibility nightmares involved. But in your own work, I'm sure you have plenty of examples of brain-dead decisions by others that force you to use hacks and workarounds. It's the same in web design.
At the moment, the main text at http://www.zeldman.com/coming.html (the one page in all my work that most Slashdotters seem to have looked at) is laid out with ems. This is wonderful, scalable technology. You can easily enlarge or reduce the type in just about any browser.
Except, of course, that it doesn't work at all in most versions of Navigator 4. If you're using Navigator - and you know you are - you will see large ugly type, not the type treatment I intended. Until we have standards, that's just the way it will be.
3) Not to flame, but...
(Score:5, Insightful)
by mr.nobodyI find it hard to ask HTML questions to someone who has committed the cardinal sin of taking away the status bar with JavaScript.
Jeffrey:
Another cardinal sin.
Hmm. Let's see.
The status bar *does* reveal the url of the page it links to - just like an untreated status bar would do. It also provides ADDITIONAL INFORMATION AND COMMENTARY. I guess that's a bad thing. I can't see why, but I guess I'll take your word for it. URL = good, URL + additional information = bad. Because you say so.
The title tag also provides additional information, but Question #12 told me that that was okay, even good. Whew! That's a relief.
4) where's the interview
(Score:4, Interesting)
by geekpressJeff, I programmed for a web design company in which design issues totally trumped more practical concerns like download time. (In one case, I was forced to create absurdly complex html tables just so that the designer could get his one-pixel rounded corners on his notecard design.) What do you see as the appropriate balance between aesthetics and practical usability?
P.S. That company is now out of business, thank goodness!
Jeffrey:
I almost always design for low bandwidth.
I was creative director at a web firm and had designed a layout with thin black borders (yes I do this same thing over and over again) for a database driven site that would be creating tables on the fly. The design effect would not render in Navigator, but the page still looked fine in Navigator, even without those little black outlines.
It was possible to FORCE Navigator to display the effect by surrounding every table with an additional, empty table. That is sometimes okay, obviously - I've been doing it since we could begin applying rudimentary styling to tables - but on a large page full of data, it would unnecessarily increase the bandwidth per page, force all browsers to burn cycles as they calculated the appearance of complex table-in-table displays, possibly cause display errors, and completely yoke the content to the presentation, making it that much harder to fix later, when we have better browsers.
So I told the company president it was a usability nightmare and a waste of resources and bandwidth and therefore not worth doing.
He told me to do it anyway.
So I quit my job and started my own company.
Rounded edges, high bandwidth, all that stuff can be fine in the right situations, as long as alternatives are provided and rules of accessibility are respected. Usually I persuade my clients to go in the low-bandwidth direction, and I almost always go low-bandwidth on the noncommercial sites I do (zeldman.com, http://www.webstandards.org/ and http://www.alistapart.com/ ).
But high bandwidth is fine for the right audience. Consider http://www.praystation.com, which is a brilliantly designed site by Joshua Davis. It's amazing work. The audience for that site is primarily Joshua's fellow designers, and most of them have T1 or DSL access. Since the site's goal is to push design as far as it can go on the web, and since the audience is known to have fast connections and a desire to see great design, there is absolutely nothing wrong (and lot right) with the higher-bandwidth road taken by this project.
5) Optimism?
(Score:5, Funny)
by ChalstHow hopeful are you that Microsoft can be coaxed into making IE standards compliant? What exactly do you think Microsoft's motive was in not supporting HTML 4.0 completely?
Jeffrey:
It varies by the hour. Sometimes I think they are going to do this and simply have not committed to it because they're not sure they can pull it off. Sometimes I suspect that as the current market leader (guys with the most users) they think they don't have to bother with this. ("Our way *is* the standard." That kind of thinking.) And sometimes I reckon that they're doing this to fuck up Mozilla. ("You're going to support standards? Well, we have more users. You lose.") I don't *know* what they're thinking, but I suspect that different people there are thinking combinations of all the above.
I do know there are engineers there who are committed to supporting standards. Not only because I've met some of them through my work with WaSP, but also because - in the case of IE5/Mac - they've actually pulled it off. Remember, Microsoft (along with Netscape, Sun, invited experts, etc.) helped come up with these standards in the first place. Why would you design blueprints and then not follow them when you build the house? The engineers who participate in the standards process are committed to complying with standards. Some people in management may not be. Or they may be delaying, for short-sighted competitive reasons, or from fear of committing until they are sure they can do it right.
HTML 4 - the LAST HTML - includes dozens of accessibility improvements, and it is insane for any company not to fully support that. Without full support for HTML 4, millions of web users get hurt. That's morally wrong, and it's also just plain bad for business. I think that in time, all browser companies, including Microsoft, will come to see that. I also think the W3C's recent hiring of a conformance manager (http://xmlhack.com/read.php?item=517) signals that the W3C will soon take a more active role in "helping" companies get with the program, support standards, and stop screwing up developers and web users in a game where everybody - including the browser companies - eventually loses.
6) Balancing Technologies
(Score:5, Insightful)
by ProteusAs you are no doubt aware, the technology that drives web site design is advancing rapidly. However, there are still a lot of users who run older browsers, or prefer to use text-only browsers such as Lynx.
Obviously, one wants to reach as large an audience as possible, but not "lag behind" too far. How do you go about balancing the use of newer technology on a site without alienating users of older software, disabled users, and text-only browsers?
Jeffrey:
Using HTML 4, ALT tags, and the TITLE tag goes a long way toward achieving this goal.
So does using CSS for type, instead of FONT FACE and FONT SIZE tags that yoke content to presentation.
I do both these things, and all the other little things you have to do, for instance with framesets. I think there may be some really old (1996) framesets at zeldman.com where I left out full content inside the noframes tags. I'm cleaning that up as quickly as I can. At ALA http://www.alistapart.com/), wherever I used framesets, I included the full text inside the noframes tags, and I also included TEXT versions of all articles.
The next stage is full separation of content from structure, and that means using HTML 4 and CSS (and eventually, replacing HTML 4 with XHTML; and eventually, migrating to XML).
We can't safely do that yet. Gecko is still in development, Netscape 4 has appalling "support" for CSS, IE5/Windows has better but far from complete support, and the only released browser that gets it right - IE5/Mac - has a 6% market share.
SOON. Not soon enough, but SOON, we will look back on this era of stupidity and laugh. Oh, how we will laugh. This is the TRON era and we are striving to reach the MATRIX era.
7) Reverse scenario question...
(Score:5, Interesting)
by Jonny RoyaleHave you ever seen anything come from a browser publisher "extending" a standard (Microsoft, Netscape, other), and thought "Gee, I wish that was in the standard"? Examples?
Jeffrey:
Yes.
LOW SRC was a funky old tag from Netscape (dating back to Netscape 1.1) that allowed you to slip a low-bandwidth image into place, and then have it replaced by the more bandwidth-intensive image when the latter finished downloading. For people with very slow connections, it was a useful hack. It also enabled creative web designers to add a certain amount of "SFX magic" (cough) to even the most primitive pages, viewed by the oldest browsers, under the most adverse conditions. That's gone. Too bad. I miss it.
Because of browser offsets in all released versions of Navigator and most versions of Explorer, I wish the "four horsemen of non-validation" (leftmargin, topmargin marginwidth and marginheight) had made it into HTML 4.0 transitional. We won't need them eventually, but until the browsers are smarter, we still do need them. The W3C is always ahead of what the browsers can deliver, of course; but by discouraging these dumb proprietary tags, the W3C has put us in the position where PAGES THAT WILL NOT WORK without these tags will fail at http://validator.w3.org. That kind of failure discourages developers from building standards-compliant pages. It is a small thing, and it is transitional, but DURING THE TRANSITION, I would have liked to see those four stupid tags get approval with a benevolent sigh.
On the other hand, designers who know what they are doing may include these tags and ignore those validation errors, but don't tell the W3C I said so.
Given the brain-dead way Navigator 4 and IE4/5/Windows handled absolute font size keywords in CSS, I *sometimes* wish font size tags were not discouraged YET. I hate them and hardly ever use them, but (for instance) there's no way to get small type in Linux that is actually READABLE without relying on these dumb old non-standard tags. What I really wish in this case, of course, is that Netscape and Microsoft hadn't fucked up this simple CSS technology. So I take the FONT SIZE tags thing back. Uh, never mind. I just wish Netscape and Microsoft had gotten CSS right the first time.
8) Banners
(Score:5, Interesting)
by TheTomcatThis is only vaguely related to design, but directly related to the web, and functionality.
We all know that banners don't work anymore. The only way a business can profit from banners is to show thousands per day. Most users don't even SEE banners anymore. We avoid them the same way we dig in the couch for the remote when commercials interrupt The Simpsons.
Do you have any suggestions to make future, content-based sites profitable?
Jeffrey:
There are several issues here. One is, a lot of the best work is done as a labor of love, and always will be. Those who need a revenue model before they are willing to even think about working will lose one of the golden opportunities of the web, which is free expression and the building of communities, regardless of financial issues. For instance, Slashdot was born as a community and still is one. Eventually, Slashdot got into a position where it could make money, but Slashdot is true to itself and was not corrupted or changed by any commercial considerations. So it is possible to make a good thing and not blow it when the cash register starts jingling. But a lot of other sites and communities have turned to dreck when money was involved.
We all agree that banners suck - Roblimo even wrote an article for ALA on that subject, back when ALA was just getting launched. With a big enough readership, banners *can* be profitable, as they are at Slashdot. But I agree that most of us just hate 'em.
Sponsorships are another possible means of revenue. "This issue of Webmonkey brought to you by Hewlett-Packard." With an entertaining HP minisite available at the click of a link, for those who care. Kaliber 10000 (http://www.k10k.net) has gotten Apple sponsorship, and all that means is, there's a tiny Apple link in the top right hand corner of the front page. If you click it, you get a popup window with text on why the site's designers like their Macs, and links to some current movies in Apple Quicktime format.
The Cluetrain guys have spoken about this model of corporate sponsorship as well.
I think about it sometimes. For instance, http://www.alistapart.com/ could be "brought to you by" Macromedia or Adobe. But to tell the truth, I don't really pursue this idea because I'm not motivated by money when it comes to creating web content. I simply want to create or choose the right content, and totally control it, and I'm not sanguine that I could do that if I *had* corporate sponsorship. Thinking about it some more is on my to-do list, but it's about 500 layers down in the list. I make enough money designing websites that I don't worry about "revenue models" for my content sites. It is a real issue, though. Just one I haven't bothered with personally, yet.
9) Jeff, your CSS suck
(Score:4, Insightful)
by Nicolas MONNETI quote from your website:
H1 {font: bold 24px verdana, helvetica, arial, sans-serif; margin-top: 0xp;}
H4 {font: 12px verdana, helvetica, sans-serif; margin-top: 0px; margin-bottom: 10px;}So why, tell me, WHY did you use PIXELS (px) instead of POINTS (pt), thereby overriding my painfully crafted DPI settings, rendering your all page unviewable on my Linux machine?
Jeffrey:
Refer to the answer to Question 2. Also refer to this Word from the WaSP column:
http://www.webstandards.org/wfw/ieah.html
The best way to style text - and the way the W3C recommends - is to use relative sizes or absolute size keywords.
Both these methods are completely broken in Navigator 4. Totally frickin' useless. Don't shoot the messenger. Netscape agrees, and that's why they threw out their old rendering engine and started from scratch.
And absolute size keywords are stupidly mis-supported in IE4/5 for Windows, where "medium" means large, and "small" means medium.
Faced with this maddening stupidity on the part of browser makers, designers/developers have two choices:
Do not style text at all. Have a nice day.
*OR* rely on pixels, which work in all "CSS-capable" browsers.
I sadly choose the latter until the browsers fully comply with W3C standards.
As to POINTS versus pixels, points are absolutely meaningless on the web, and the fact that they are used by thousands of developers who should know better proves only how little CSS is understood by the development community.
Certain point sizes may work on your platform in your style sheet. That proves that certain point sizes work on your platform in your style sheet. Cross-platform it is not transportable, and points are print-based units of measurement that have no meaningful relationship to the wonderful world of monitor resolution.
For a good discussion of CSS problems, see Todd Fahrner's "Beyond the Font Size Tag: Practical HTML Text and Styling" at http://style.metrius.com/font_size /livetext.html (Unfortunately, even some of *THESE* techniques do not work in more recent versions of Navigator 4.)
In a few months, there will be exactly two browsers that get CSS-1 right: Mozilla/Nav 6 for all platforms, and IE5/Mac which we have now. Since neither has dominant marketshare, developers will still face huge obstacles when trying to do something as SIMPLE and BASIC as size text on the web. Many will stick with pixels, which are the only CSS technique that actually WORKS across browsers and platforms.
In addition to all these nightmarish problems with our browsers, there are special challenges with Linux, because unless Linux users install additional scalable fonts, you can follow all the rules for good CSS, and avoid "problem" font sizes, and still create pages that look jaggy or are unreadable on a lot of people's machines. I worry about this all the time, but I don't have a solution for it. I have actually gone back to using the stupid The way to advance the medium is to get absolute font size keywords and relative font sizes right in CSS, finish implementing HTML 4, and give us the W3C DOM, XML, and EcmaScript. (And then wait two years for users to upgrade.)
10) Pixel based alignment and HTML
(Score:4, Insightful)
by mcelrathOne of the most disturbing trends that I see in web design these days is the trend toward trying to control layout at the pixel level. As HTML (Hypertext Markup) was not intended to be a graphics language, what is your comment on this?
Jeffrey:
Separation of style and content is the way forward.
The problem is the browsers.
When I revised my "Ask Dr Web" tutorial at http://www.zeldman.com/askdrweb/, along with other pages at http://www.zeldman.com/, to use CSS layouts instead of tables, certain versions of Navigator 4 began crashing.
Actually crashing from basic CSS-1.
I wrote about this at A List Apart, ("The Day the Browser Died") and because of this, Netscape invested some time and resources to fixing some of these bugs in Navigator 4. It didn't catch them all, and it didn't catch them in Linux. These bugs will never be fully fixed in Navigator 4, because Netscape is wisely spending its energy to finish the Mozilla browser. Unfortunately, this means that Netscape users will continue to face serious usability hazards throughout the web until Netscape 6 is released ... *OR* it means that developers will continue to use TABLES for layouts for the next two years (as Jakob Nielsen has predicted).
If you look at these pages - http://www.zeldman.com/steal.html or http://www.zeldman.com/icon.html are other examples - you will see that we are talking about extremely BASIC layouts. An expert from the CSS pointers group actually volunteered hours of her time trying alternate combinations of the very basic CSS on those pages to see if she could find ways to stop Netscape from crashing. She could not; neither could I. Netscape did what it could for its 4.0 users, but it can't do anything more until the next generation is released.
On my personal site I made the tough decision to leave these pages as-is. I don't have time to recode them all using tables.
You can agree or disagree with that decision.
Linux folks can either use the Mozilla or Opera betas to navigate those pages in safety and comfort.
It's worth noting that W3C pages also crashed Netscape 4, for the same reason.
What happens when Netscape's browser is this badly damaged? I get hate mail from people who don't understand the issues involved. I also got a letter of thanks from Netscape's Eric Krock, because good companies WANT us to help them find bugs in their software.
As an example of this, many sites (including yours) use font size=1 to acheive a font that is fairly uniform in pixel size across browsers. Anyone with a high-resolution screen will tell you that this is highly annoying, since it results in an almost unreadable font.
See above for the explanation as to why developers are stuck using 1994 technology to support late-1990s browsers. The same questions, the same answers.
The good thing - the ONLY good thing - about the font size tag is that it is user-resizable. The rest of this has been answered above.
Forcing netscape to use a larger font size often destroys the layout of the page. What's worse, some pages use dynamic fonts and other features to force this on the user.
Right, although in some cases it is justified.
As another example, many pages use the table , and layer to specify the exact size in pixels of portions of the page, and then put a little notice at the bottom ("This site best viewed at 800x600") or some such.
Yes, that is usually a bad design decision. Whenever possible, I use what Glenn Davis (WaSP and Project Cool co-founder) calls "liquid" design ... design that reflows to exactly fit the visitor's monitor. That's almost always a better way to go. Examples of my liquid designs include http://www.alistapart.com/, http://www.the-adstore.com, and most of zeldman.com. If you dig long enough in zeldman.com, you'll come upon pages older than the NYC subways, that simply use BAD design ... though at the time, it wasn't all that bad.
Liquid design is not always appropriate but it is generally best.
What are standards groups doing to fix this?
Nothing. The W3C can't make better or more intelligent designers out of people, and neither can the WaSP, whose sole purpose is to agitate for W3C standards in browsers (and eventually in web authoring tools).
We can try to lead by example. http://www.webstandards.org/ is liquid (aside from the front page, which is "semi-liquid" owing to the large low-rez graphic) and it validates.
MEMBERS of standards groups can write articles on the subject and hope that people read them. Of course, if people "can't get past" a 4k splash page, they will not learn about my articles on the subject.
Will I be looking at pages designed for 800x600 (or worse, 640x480) with my 1920x1440 screen forever? Will persons with laptops at 640x480 be unable to read the web soon? Will standards bodies ever require percentage-of-screen width and height specifiers, or even better, implement table width=30ch to specify sizes in relation to the current font size?
Standards bodies can recommend certain authoring practices, and they can develop standards that make such practices possible, but they cannot enforce good authoring.
11) Evaluate Slashdot
(Score:5, Interesting)
by Pseudonymus BoschWhat would you change, what would you add, what would you remove in Slashdot?
Jeffrey:
It's a community and it works. It has achieved visibility, notoriety, and even commercial success without giving an inch. Pretty awesome achievement. What would I change?
Sometimes the longer threads take a long time to load, due to back-end technology, platform and server issues. The technology works better on Linux than it does on my platform of choice (Mac OS) but, hey, that's okay.
I know you want me to comment on the design. Design is subjective. Black backgrounds and teal are not my favorite color scheme (though I used black backgrounds at the 1995 Ad Graveyard (http://www.zeldman.com/ad.html) and the January 1997 Furbo Filters so who am I to talk? The main thing I was trying to do at Furbo was get CSS to work - and to let people know about Craig Hockenberry's and my Furbo Filters, which were the only Photoshop plugins at the time that dealt with the web-safe color palette - at least to our knowledge.)
I might change the color scheme and some other things if Rob Malda went on a crack run and asked me to redesign Slashdot, but that ain't likely to happen. And I think the design of Slashdot is just fine. It focuses you on the breaking stories, allows you to read more (or not), and provides access to almost everything else on the site via small navigation units. In terms of usability it is damn good, and it has plenty of attitude.
Of course, it commits the "cardinal sin" of teal, but I can get past that.
12) Do you agree with Nielsen?
(Score:4, Interesting)
by Pseudonymus BoschI have no idea about you and your views, but I have read lots of the Alertbox columns by Jakob Nielsen.
Do you agree with him? Do you disagree? What about?
Jeffrey:
I agree with his comments on oral sex and wearing white after Labor Day.
And I like that he can get $25,000 to talk for an hour. I'll do the same for half that amount.
I also agree with Jakob that most websites should be usable by as many people as possible.
What I have done about that is help found The Web Standards Project, so we can actually achieve that goal instead of using duct tape and lasagna to build sites that work for "most" people. And I try to make my pages accessible in spite of the limitations of current browsers and some of the cross-platform issues discussed above.
If you are interested in my views, you can read them at http://www.alistapart.com/, Adobe.com (here, http://www.adobe.com/we b/columns/zeldman/20000320/main.html, for instance), http://www.webstandards.org/ and of course at http://www.zeldman.com/. If you can get past the 4k splash page.
At least you share the use of TITLE attributes in hyperlinks (a good feature that Slashdot shouldn't chomp away).
Thanks! The reason Slashdot chomps title tags is probably because they are not supported in Netscape yet. They are an important usability feature, and in some browsers they also offer nifty low-grade special effects - along with the opportunity for contextual ampliciation or ironic commentary.
jeffrey
Can't act. Can't sing. Can dance a little.
http://www.zeldman.com
http://www.alistapart.com
http://www.happycog.com
http://www.webstandards.org -
Jeffrey Zeldman Bites Back
We got a lot of (shall we say) slightly impertinent questions for Web Standards Project co-founder Jeffrey Zeldman, but that's okay. He reads Slashdot and knows the nature of the beast, and he's hard-core enough to give as good as he gets. So set your humor module to high, then sit back and enjoy Mr. Zeldman's (appropriately impertinent) answers to the 12 questions we forwarded to him.1) Here's my question:
(Score:5, Insightful)
by FascDot Killed My PrIf you're such a hotshot web designer, why have you committed one of the cardinal sins of web design: Putting an "entry page" that does nothing but suck bandwidth and make it difficult to "back" out of a site?
Jeffrey:
I'll answer this one piece by piece.
"If you're such a hotshot web designer."
Never claimed to be. Roblimo wrote that glowing description. It's not surprising that some of you, who have no idea what I do, were pissed off when those words of high praise took you to a very simple, low-bandwidth, personal site.
I wish Rob had said "Zeldman is a co-founder of The Web Standards Project" (WaSP), and had explained what the WaSP does, maybe even mentioning the role we played in getting Netscape to throw out its old rendering engine and begin building Mozilla around the standards-compliant Gecko core. I'm guessing people would have overlooked my supposed "design sins" or their distaste for the color orange on my personal site if they had a better idea about what I actually do.
For those who don't know, the WaSP organized a petition drive to persuade Netscape to throw out its old rendering engine and build its new browser around Gecko. Then-group-leader George Olsen of WaSP, along with ThunderLizard's Jim Heid, got 2,000 developers to sign the petition. Netscape is a company that listens - at least, for the last two years, it has been listening - and you all know the result: an upcoming browser that is designed to fully comply with HTML 4, CSS-1, the W3C DOM, XML, and EcmaScript.
No disrespect to Roblimo either. I dig the guy. And what he said is true in a sense. I *am* a web designer and writer, and a lot of the work I've done over the past five years *has* gotten imitated, for better or worse. For instance, oddly enough, the original Mozilla.org (http://www.mozilla.org) was copied from the simple HTML-and-CSS layout I did The Web Standards Project (http://www.webstandards.org/): from the technique, to the color palette, to the crude four-pixel black outlines around content areas. Don't bother checking; the new Mozilla layout has evolved away from that original look, though it still bears trace elements of the original design. A lot of you probably do remember the original Mozilla layout. I'm sure when Roblimo saw it, he realized it was copied from http://www.webstandards.org and I think that's the kind of thing he was referring to in his overly kind introduction to my work.
By the way, I wasn't upset by what Mozilla did; I was flattered by it. You may think it is ugly design, though I'm sure that none of you said so to Mozilla because you believe in the project. It's weird to me that the same people who dig Mozilla would be rude in their comments to someone who, at least in a small way, helped influence the direction of that browser, and who also influenced the initial DESIGN of that project, but whatever. I also talk with Microsoft, because the goal of WaSP is to get standards in *all* browsers, and the fact that I talk to engineers at that company may make me evil incarnate in your book. I can deal with that. If we get better browsers, I'll be satisfied.
I do get copied a lot and often those copies are better than the original. In that sense "VIEW SOURCE" functions like "OPEN SOURCE." ;) I am happy when someone takes an idea of mine and makes it better (and their own).
"why have you committed one of the cardinal sins of web design"
I've been designing websites for five years. I don't claim to be a genius and I'm far from the best designer on the planet, but your take on cardinal sins of a profession you do not participate in is about as meaningful as my comments on your programming decisions would be.
You are parroting Jakob Nielsen or some other expert whose work you've read. You haven't read my work on the same subject (no problem) and you don't know my work as a designer (no problem). Just as in programming, design is about decisions. A designer never sins. He/she makes informed decisions. If you get to know the work, you may understand why those decisions were made. If you never bother to engage with the work - if you merely believe that all design must conform with a small set of rules written by one or two people - you don't understand the nature of the thing you are criticizing. Especially if you spend all of five seconds looking at it, and then rush to be the first to post a rant. There are rules of grammar, too, and James Joyce threw them all out. True, I ain't him. But I am me. All designers make decisions, and if the entire web looked like http://www.useit.com I don't think that would be such a great thing. Anything that departs from the look of http://www.useit.com is violating at least a few of Jakob's "rules," and that's the nature of the beast.
"Putting [up] an 'entry page' that does nothing but suck bandwidth and make it difficult to "back" out of a site?"
The bandwidth sucked is exactly 4K. I think you can handle it.
The "entry page" is a temporary placeholder while I rethink the front end of my personal site. Notice the words "temporary," "placeholder," and "personal." The previous front page was navigational in nature, and it is archived at http://www.zeldman.com/mozillatest.html . The name refers to the fact that the page revealed a bug in recent builds of Mozilla. I have left it online so the Mozilla folks can use it to track down and fix that bug, which they are doing now.
Recently, I've been focused on WaSP and A List Apart (http://www.alistapart.com/), a web design magazine and mailing list I co-founded with Brian Platz. The content on my personal site (275+ pages) has not been my most recent focus, so I determined a while back that it was silly to stop the visitor with a primarily navigational page. I should explain that some people visit zeldman.com for entertainment like The Ad Graveyard; a completely different audience visits for web design info, such as the Ask Dr Web tutorial; and so on. To accommodate those very different visitors, I initially had a core page that was navigational. I didn't put real content on page one, because I was accommodating maybe six completely different audiences, and there was nothing in all that content that would appeal to ALL of them. On http://www.alistapart.com/ I start with content on page one, because the audience is more unified.
Even that old navigational page (http://www.zeldman.com/mozillatest.html), with all its rollovers etc., was very low-bandwidth. I recently got to look at it while stuck at an airport in Stockholm. The airport had five Windows boxes sharing one 56K modem. I looked at some of my favorite sites, and they were all crawling onto the screen. I was pleased that my own front page loaded instantly. I design for low bandwidth, which explains why my work rarely looks like that of "such a hot shit designer." Back to the point. I haven't yet figured out how to restructure the front end of my site, so I put up a 4K placeholder with a bone-simple rollover and a 6 second refresh to the single page at my site that I have been focusing on lately.
Now you know why I have a temporary entry page; now you know why it does "nothing" (it is temporary, and what it does is redirect you); and now you know that it does not suck bandwidth.
How it "makes it difficult to 'back' out of the site" is a mystery to me, so I can't comment on that clause in your question. Personally I find database driven pages much harder to navigate and back out of than 4K html pages. And with browsers that suck, frames-based pages can also be tough to navigate. My 4K page is frameless HTML.
2) I have a question:
(Score:4, Insightful)
by SkinkaWhat's with that small font www.zeldman.com, haven't you read any (web) usability guides?
Jeffrey:
Yes, I've read them, yes I've written on the subject, yes yes yes.
Along with another WaSP member, I helped influence Microsoft to make ALL web text resizable by the user in IE5/Mac for reasons of accessibility and usability, and we are hoping to get the same from Mozilla. (At the moment, this feature is only available in IE5/Mac. It should be in every browser. It's not in the Windows version of IE and it's obviously not in the current version of Navigator.)
Why small fonts? Personal design decision on a personal site. You can enlarge the type in some browsers, not all. That day is coming.
There are methods of CSS that allow you to resize type in *all* browsers.
Why do I often avoid those methods?
Because they are not supported in most "CSS-capable" browsers.
Absolute font-size keywords are broken in Navigator 4 (all platforms) and IE5/Windows.
Percentages and ems are broken in Netscape 4.
Points are meaningless on computer screens, and the reliance on points in Style Sheets is a widespread authoring error.
Until all browsers support standards, designers will be stuck using pixels or FONT SIZE tags. Or simply making no effort at all to control the appearance and size of type on the web page. If this bothers you, join The Web Standards Project.
(Warning: it is orange. If you "can't get past the color" then I guess you'll have to let big browser companies determine the fate of the web.)
Unless you design web sites every day, you have no idea of the compatibility nightmares involved. But in your own work, I'm sure you have plenty of examples of brain-dead decisions by others that force you to use hacks and workarounds. It's the same in web design.
At the moment, the main text at http://www.zeldman.com/coming.html (the one page in all my work that most Slashdotters seem to have looked at) is laid out with ems. This is wonderful, scalable technology. You can easily enlarge or reduce the type in just about any browser.
Except, of course, that it doesn't work at all in most versions of Navigator 4. If you're using Navigator - and you know you are - you will see large ugly type, not the type treatment I intended. Until we have standards, that's just the way it will be.
3) Not to flame, but...
(Score:5, Insightful)
by mr.nobodyI find it hard to ask HTML questions to someone who has committed the cardinal sin of taking away the status bar with JavaScript.
Jeffrey:
Another cardinal sin.
Hmm. Let's see.
The status bar *does* reveal the url of the page it links to - just like an untreated status bar would do. It also provides ADDITIONAL INFORMATION AND COMMENTARY. I guess that's a bad thing. I can't see why, but I guess I'll take your word for it. URL = good, URL + additional information = bad. Because you say so.
The title tag also provides additional information, but Question #12 told me that that was okay, even good. Whew! That's a relief.
4) where's the interview
(Score:4, Interesting)
by geekpressJeff, I programmed for a web design company in which design issues totally trumped more practical concerns like download time. (In one case, I was forced to create absurdly complex html tables just so that the designer could get his one-pixel rounded corners on his notecard design.) What do you see as the appropriate balance between aesthetics and practical usability?
P.S. That company is now out of business, thank goodness!
Jeffrey:
I almost always design for low bandwidth.
I was creative director at a web firm and had designed a layout with thin black borders (yes I do this same thing over and over again) for a database driven site that would be creating tables on the fly. The design effect would not render in Navigator, but the page still looked fine in Navigator, even without those little black outlines.
It was possible to FORCE Navigator to display the effect by surrounding every table with an additional, empty table. That is sometimes okay, obviously - I've been doing it since we could begin applying rudimentary styling to tables - but on a large page full of data, it would unnecessarily increase the bandwidth per page, force all browsers to burn cycles as they calculated the appearance of complex table-in-table displays, possibly cause display errors, and completely yoke the content to the presentation, making it that much harder to fix later, when we have better browsers.
So I told the company president it was a usability nightmare and a waste of resources and bandwidth and therefore not worth doing.
He told me to do it anyway.
So I quit my job and started my own company.
Rounded edges, high bandwidth, all that stuff can be fine in the right situations, as long as alternatives are provided and rules of accessibility are respected. Usually I persuade my clients to go in the low-bandwidth direction, and I almost always go low-bandwidth on the noncommercial sites I do (zeldman.com, http://www.webstandards.org/ and http://www.alistapart.com/ ).
But high bandwidth is fine for the right audience. Consider http://www.praystation.com, which is a brilliantly designed site by Joshua Davis. It's amazing work. The audience for that site is primarily Joshua's fellow designers, and most of them have T1 or DSL access. Since the site's goal is to push design as far as it can go on the web, and since the audience is known to have fast connections and a desire to see great design, there is absolutely nothing wrong (and lot right) with the higher-bandwidth road taken by this project.
5) Optimism?
(Score:5, Funny)
by ChalstHow hopeful are you that Microsoft can be coaxed into making IE standards compliant? What exactly do you think Microsoft's motive was in not supporting HTML 4.0 completely?
Jeffrey:
It varies by the hour. Sometimes I think they are going to do this and simply have not committed to it because they're not sure they can pull it off. Sometimes I suspect that as the current market leader (guys with the most users) they think they don't have to bother with this. ("Our way *is* the standard." That kind of thinking.) And sometimes I reckon that they're doing this to fuck up Mozilla. ("You're going to support standards? Well, we have more users. You lose.") I don't *know* what they're thinking, but I suspect that different people there are thinking combinations of all the above.
I do know there are engineers there who are committed to supporting standards. Not only because I've met some of them through my work with WaSP, but also because - in the case of IE5/Mac - they've actually pulled it off. Remember, Microsoft (along with Netscape, Sun, invited experts, etc.) helped come up with these standards in the first place. Why would you design blueprints and then not follow them when you build the house? The engineers who participate in the standards process are committed to complying with standards. Some people in management may not be. Or they may be delaying, for short-sighted competitive reasons, or from fear of committing until they are sure they can do it right.
HTML 4 - the LAST HTML - includes dozens of accessibility improvements, and it is insane for any company not to fully support that. Without full support for HTML 4, millions of web users get hurt. That's morally wrong, and it's also just plain bad for business. I think that in time, all browser companies, including Microsoft, will come to see that. I also think the W3C's recent hiring of a conformance manager (http://xmlhack.com/read.php?item=517) signals that the W3C will soon take a more active role in "helping" companies get with the program, support standards, and stop screwing up developers and web users in a game where everybody - including the browser companies - eventually loses.
6) Balancing Technologies
(Score:5, Insightful)
by ProteusAs you are no doubt aware, the technology that drives web site design is advancing rapidly. However, there are still a lot of users who run older browsers, or prefer to use text-only browsers such as Lynx.
Obviously, one wants to reach as large an audience as possible, but not "lag behind" too far. How do you go about balancing the use of newer technology on a site without alienating users of older software, disabled users, and text-only browsers?
Jeffrey:
Using HTML 4, ALT tags, and the TITLE tag goes a long way toward achieving this goal.
So does using CSS for type, instead of FONT FACE and FONT SIZE tags that yoke content to presentation.
I do both these things, and all the other little things you have to do, for instance with framesets. I think there may be some really old (1996) framesets at zeldman.com where I left out full content inside the noframes tags. I'm cleaning that up as quickly as I can. At ALA http://www.alistapart.com/), wherever I used framesets, I included the full text inside the noframes tags, and I also included TEXT versions of all articles.
The next stage is full separation of content from structure, and that means using HTML 4 and CSS (and eventually, replacing HTML 4 with XHTML; and eventually, migrating to XML).
We can't safely do that yet. Gecko is still in development, Netscape 4 has appalling "support" for CSS, IE5/Windows has better but far from complete support, and the only released browser that gets it right - IE5/Mac - has a 6% market share.
SOON. Not soon enough, but SOON, we will look back on this era of stupidity and laugh. Oh, how we will laugh. This is the TRON era and we are striving to reach the MATRIX era.
7) Reverse scenario question...
(Score:5, Interesting)
by Jonny RoyaleHave you ever seen anything come from a browser publisher "extending" a standard (Microsoft, Netscape, other), and thought "Gee, I wish that was in the standard"? Examples?
Jeffrey:
Yes.
LOW SRC was a funky old tag from Netscape (dating back to Netscape 1.1) that allowed you to slip a low-bandwidth image into place, and then have it replaced by the more bandwidth-intensive image when the latter finished downloading. For people with very slow connections, it was a useful hack. It also enabled creative web designers to add a certain amount of "SFX magic" (cough) to even the most primitive pages, viewed by the oldest browsers, under the most adverse conditions. That's gone. Too bad. I miss it.
Because of browser offsets in all released versions of Navigator and most versions of Explorer, I wish the "four horsemen of non-validation" (leftmargin, topmargin marginwidth and marginheight) had made it into HTML 4.0 transitional. We won't need them eventually, but until the browsers are smarter, we still do need them. The W3C is always ahead of what the browsers can deliver, of course; but by discouraging these dumb proprietary tags, the W3C has put us in the position where PAGES THAT WILL NOT WORK without these tags will fail at http://validator.w3.org. That kind of failure discourages developers from building standards-compliant pages. It is a small thing, and it is transitional, but DURING THE TRANSITION, I would have liked to see those four stupid tags get approval with a benevolent sigh.
On the other hand, designers who know what they are doing may include these tags and ignore those validation errors, but don't tell the W3C I said so.
Given the brain-dead way Navigator 4 and IE4/5/Windows handled absolute font size keywords in CSS, I *sometimes* wish font size tags were not discouraged YET. I hate them and hardly ever use them, but (for instance) there's no way to get small type in Linux that is actually READABLE without relying on these dumb old non-standard tags. What I really wish in this case, of course, is that Netscape and Microsoft hadn't fucked up this simple CSS technology. So I take the FONT SIZE tags thing back. Uh, never mind. I just wish Netscape and Microsoft had gotten CSS right the first time.
8) Banners
(Score:5, Interesting)
by TheTomcatThis is only vaguely related to design, but directly related to the web, and functionality.
We all know that banners don't work anymore. The only way a business can profit from banners is to show thousands per day. Most users don't even SEE banners anymore. We avoid them the same way we dig in the couch for the remote when commercials interrupt The Simpsons.
Do you have any suggestions to make future, content-based sites profitable?
Jeffrey:
There are several issues here. One is, a lot of the best work is done as a labor of love, and always will be. Those who need a revenue model before they are willing to even think about working will lose one of the golden opportunities of the web, which is free expression and the building of communities, regardless of financial issues. For instance, Slashdot was born as a community and still is one. Eventually, Slashdot got into a position where it could make money, but Slashdot is true to itself and was not corrupted or changed by any commercial considerations. So it is possible to make a good thing and not blow it when the cash register starts jingling. But a lot of other sites and communities have turned to dreck when money was involved.
We all agree that banners suck - Roblimo even wrote an article for ALA on that subject, back when ALA was just getting launched. With a big enough readership, banners *can* be profitable, as they are at Slashdot. But I agree that most of us just hate 'em.
Sponsorships are another possible means of revenue. "This issue of Webmonkey brought to you by Hewlett-Packard." With an entertaining HP minisite available at the click of a link, for those who care. Kaliber 10000 (http://www.k10k.net) has gotten Apple sponsorship, and all that means is, there's a tiny Apple link in the top right hand corner of the front page. If you click it, you get a popup window with text on why the site's designers like their Macs, and links to some current movies in Apple Quicktime format.
The Cluetrain guys have spoken about this model of corporate sponsorship as well.
I think about it sometimes. For instance, http://www.alistapart.com/ could be "brought to you by" Macromedia or Adobe. But to tell the truth, I don't really pursue this idea because I'm not motivated by money when it comes to creating web content. I simply want to create or choose the right content, and totally control it, and I'm not sanguine that I could do that if I *had* corporate sponsorship. Thinking about it some more is on my to-do list, but it's about 500 layers down in the list. I make enough money designing websites that I don't worry about "revenue models" for my content sites. It is a real issue, though. Just one I haven't bothered with personally, yet.
9) Jeff, your CSS suck
(Score:4, Insightful)
by Nicolas MONNETI quote from your website:
H1 {font: bold 24px verdana, helvetica, arial, sans-serif; margin-top: 0xp;}
H4 {font: 12px verdana, helvetica, sans-serif; margin-top: 0px; margin-bottom: 10px;}So why, tell me, WHY did you use PIXELS (px) instead of POINTS (pt), thereby overriding my painfully crafted DPI settings, rendering your all page unviewable on my Linux machine?
Jeffrey:
Refer to the answer to Question 2. Also refer to this Word from the WaSP column:
http://www.webstandards.org/wfw/ieah.html
The best way to style text - and the way the W3C recommends - is to use relative sizes or absolute size keywords.
Both these methods are completely broken in Navigator 4. Totally frickin' useless. Don't shoot the messenger. Netscape agrees, and that's why they threw out their old rendering engine and started from scratch.
And absolute size keywords are stupidly mis-supported in IE4/5 for Windows, where "medium" means large, and "small" means medium.
Faced with this maddening stupidity on the part of browser makers, designers/developers have two choices:
Do not style text at all. Have a nice day.
*OR* rely on pixels, which work in all "CSS-capable" browsers.
I sadly choose the latter until the browsers fully comply with W3C standards.
As to POINTS versus pixels, points are absolutely meaningless on the web, and the fact that they are used by thousands of developers who should know better proves only how little CSS is understood by the development community.
Certain point sizes may work on your platform in your style sheet. That proves that certain point sizes work on your platform in your style sheet. Cross-platform it is not transportable, and points are print-based units of measurement that have no meaningful relationship to the wonderful world of monitor resolution.
For a good discussion of CSS problems, see Todd Fahrner's "Beyond the Font Size Tag: Practical HTML Text and Styling" at http://style.metrius.com/font_size /livetext.html (Unfortunately, even some of *THESE* techniques do not work in more recent versions of Navigator 4.)
In a few months, there will be exactly two browsers that get CSS-1 right: Mozilla/Nav 6 for all platforms, and IE5/Mac which we have now. Since neither has dominant marketshare, developers will still face huge obstacles when trying to do something as SIMPLE and BASIC as size text on the web. Many will stick with pixels, which are the only CSS technique that actually WORKS across browsers and platforms.
In addition to all these nightmarish problems with our browsers, there are special challenges with Linux, because unless Linux users install additional scalable fonts, you can follow all the rules for good CSS, and avoid "problem" font sizes, and still create pages that look jaggy or are unreadable on a lot of people's machines. I worry about this all the time, but I don't have a solution for it. I have actually gone back to using the stupid The way to advance the medium is to get absolute font size keywords and relative font sizes right in CSS, finish implementing HTML 4, and give us the W3C DOM, XML, and EcmaScript. (And then wait two years for users to upgrade.)
10) Pixel based alignment and HTML
(Score:4, Insightful)
by mcelrathOne of the most disturbing trends that I see in web design these days is the trend toward trying to control layout at the pixel level. As HTML (Hypertext Markup) was not intended to be a graphics language, what is your comment on this?
Jeffrey:
Separation of style and content is the way forward.
The problem is the browsers.
When I revised my "Ask Dr Web" tutorial at http://www.zeldman.com/askdrweb/, along with other pages at http://www.zeldman.com/, to use CSS layouts instead of tables, certain versions of Navigator 4 began crashing.
Actually crashing from basic CSS-1.
I wrote about this at A List Apart, ("The Day the Browser Died") and because of this, Netscape invested some time and resources to fixing some of these bugs in Navigator 4. It didn't catch them all, and it didn't catch them in Linux. These bugs will never be fully fixed in Navigator 4, because Netscape is wisely spending its energy to finish the Mozilla browser. Unfortunately, this means that Netscape users will continue to face serious usability hazards throughout the web until Netscape 6 is released ... *OR* it means that developers will continue to use TABLES for layouts for the next two years (as Jakob Nielsen has predicted).
If you look at these pages - http://www.zeldman.com/steal.html or http://www.zeldman.com/icon.html are other examples - you will see that we are talking about extremely BASIC layouts. An expert from the CSS pointers group actually volunteered hours of her time trying alternate combinations of the very basic CSS on those pages to see if she could find ways to stop Netscape from crashing. She could not; neither could I. Netscape did what it could for its 4.0 users, but it can't do anything more until the next generation is released.
On my personal site I made the tough decision to leave these pages as-is. I don't have time to recode them all using tables.
You can agree or disagree with that decision.
Linux folks can either use the Mozilla or Opera betas to navigate those pages in safety and comfort.
It's worth noting that W3C pages also crashed Netscape 4, for the same reason.
What happens when Netscape's browser is this badly damaged? I get hate mail from people who don't understand the issues involved. I also got a letter of thanks from Netscape's Eric Krock, because good companies WANT us to help them find bugs in their software.
As an example of this, many sites (including yours) use font size=1 to acheive a font that is fairly uniform in pixel size across browsers. Anyone with a high-resolution screen will tell you that this is highly annoying, since it results in an almost unreadable font.
See above for the explanation as to why developers are stuck using 1994 technology to support late-1990s browsers. The same questions, the same answers.
The good thing - the ONLY good thing - about the font size tag is that it is user-resizable. The rest of this has been answered above.
Forcing netscape to use a larger font size often destroys the layout of the page. What's worse, some pages use dynamic fonts and other features to force this on the user.
Right, although in some cases it is justified.
As another example, many pages use the table , and layer to specify the exact size in pixels of portions of the page, and then put a little notice at the bottom ("This site best viewed at 800x600") or some such.
Yes, that is usually a bad design decision. Whenever possible, I use what Glenn Davis (WaSP and Project Cool co-founder) calls "liquid" design ... design that reflows to exactly fit the visitor's monitor. That's almost always a better way to go. Examples of my liquid designs include http://www.alistapart.com/, http://www.the-adstore.com, and most of zeldman.com. If you dig long enough in zeldman.com, you'll come upon pages older than the NYC subways, that simply use BAD design ... though at the time, it wasn't all that bad.
Liquid design is not always appropriate but it is generally best.
What are standards groups doing to fix this?
Nothing. The W3C can't make better or more intelligent designers out of people, and neither can the WaSP, whose sole purpose is to agitate for W3C standards in browsers (and eventually in web authoring tools).
We can try to lead by example. http://www.webstandards.org/ is liquid (aside from the front page, which is "semi-liquid" owing to the large low-rez graphic) and it validates.
MEMBERS of standards groups can write articles on the subject and hope that people read them. Of course, if people "can't get past" a 4k splash page, they will not learn about my articles on the subject.
Will I be looking at pages designed for 800x600 (or worse, 640x480) with my 1920x1440 screen forever? Will persons with laptops at 640x480 be unable to read the web soon? Will standards bodies ever require percentage-of-screen width and height specifiers, or even better, implement table width=30ch to specify sizes in relation to the current font size?
Standards bodies can recommend certain authoring practices, and they can develop standards that make such practices possible, but they cannot enforce good authoring.
11) Evaluate Slashdot
(Score:5, Interesting)
by Pseudonymus BoschWhat would you change, what would you add, what would you remove in Slashdot?
Jeffrey:
It's a community and it works. It has achieved visibility, notoriety, and even commercial success without giving an inch. Pretty awesome achievement. What would I change?
Sometimes the longer threads take a long time to load, due to back-end technology, platform and server issues. The technology works better on Linux than it does on my platform of choice (Mac OS) but, hey, that's okay.
I know you want me to comment on the design. Design is subjective. Black backgrounds and teal are not my favorite color scheme (though I used black backgrounds at the 1995 Ad Graveyard (http://www.zeldman.com/ad.html) and the January 1997 Furbo Filters so who am I to talk? The main thing I was trying to do at Furbo was get CSS to work - and to let people know about Craig Hockenberry's and my Furbo Filters, which were the only Photoshop plugins at the time that dealt with the web-safe color palette - at least to our knowledge.)
I might change the color scheme and some other things if Rob Malda went on a crack run and asked me to redesign Slashdot, but that ain't likely to happen. And I think the design of Slashdot is just fine. It focuses you on the breaking stories, allows you to read more (or not), and provides access to almost everything else on the site via small navigation units. In terms of usability it is damn good, and it has plenty of attitude.
Of course, it commits the "cardinal sin" of teal, but I can get past that.
12) Do you agree with Nielsen?
(Score:4, Interesting)
by Pseudonymus BoschI have no idea about you and your views, but I have read lots of the Alertbox columns by Jakob Nielsen.
Do you agree with him? Do you disagree? What about?
Jeffrey:
I agree with his comments on oral sex and wearing white after Labor Day.
And I like that he can get $25,000 to talk for an hour. I'll do the same for half that amount.
I also agree with Jakob that most websites should be usable by as many people as possible.
What I have done about that is help found The Web Standards Project, so we can actually achieve that goal instead of using duct tape and lasagna to build sites that work for "most" people. And I try to make my pages accessible in spite of the limitations of current browsers and some of the cross-platform issues discussed above.
If you are interested in my views, you can read them at http://www.alistapart.com/, Adobe.com (here, http://www.adobe.com/we b/columns/zeldman/20000320/main.html, for instance), http://www.webstandards.org/ and of course at http://www.zeldman.com/. If you can get past the 4k splash page.
At least you share the use of TITLE attributes in hyperlinks (a good feature that Slashdot shouldn't chomp away).
Thanks! The reason Slashdot chomps title tags is probably because they are not supported in Netscape yet. They are an important usability feature, and in some browsers they also offer nifty low-grade special effects - along with the opportunity for contextual ampliciation or ironic commentary.
jeffrey
Can't act. Can't sing. Can dance a little.
http://www.zeldman.com
http://www.alistapart.com
http://www.happycog.com
http://www.webstandards.org -
Jeffrey Zeldman Bites Back
We got a lot of (shall we say) slightly impertinent questions for Web Standards Project co-founder Jeffrey Zeldman, but that's okay. He reads Slashdot and knows the nature of the beast, and he's hard-core enough to give as good as he gets. So set your humor module to high, then sit back and enjoy Mr. Zeldman's (appropriately impertinent) answers to the 12 questions we forwarded to him.1) Here's my question:
(Score:5, Insightful)
by FascDot Killed My PrIf you're such a hotshot web designer, why have you committed one of the cardinal sins of web design: Putting an "entry page" that does nothing but suck bandwidth and make it difficult to "back" out of a site?
Jeffrey:
I'll answer this one piece by piece.
"If you're such a hotshot web designer."
Never claimed to be. Roblimo wrote that glowing description. It's not surprising that some of you, who have no idea what I do, were pissed off when those words of high praise took you to a very simple, low-bandwidth, personal site.
I wish Rob had said "Zeldman is a co-founder of The Web Standards Project" (WaSP), and had explained what the WaSP does, maybe even mentioning the role we played in getting Netscape to throw out its old rendering engine and begin building Mozilla around the standards-compliant Gecko core. I'm guessing people would have overlooked my supposed "design sins" or their distaste for the color orange on my personal site if they had a better idea about what I actually do.
For those who don't know, the WaSP organized a petition drive to persuade Netscape to throw out its old rendering engine and build its new browser around Gecko. Then-group-leader George Olsen of WaSP, along with ThunderLizard's Jim Heid, got 2,000 developers to sign the petition. Netscape is a company that listens - at least, for the last two years, it has been listening - and you all know the result: an upcoming browser that is designed to fully comply with HTML 4, CSS-1, the W3C DOM, XML, and EcmaScript.
No disrespect to Roblimo either. I dig the guy. And what he said is true in a sense. I *am* a web designer and writer, and a lot of the work I've done over the past five years *has* gotten imitated, for better or worse. For instance, oddly enough, the original Mozilla.org (http://www.mozilla.org) was copied from the simple HTML-and-CSS layout I did The Web Standards Project (http://www.webstandards.org/): from the technique, to the color palette, to the crude four-pixel black outlines around content areas. Don't bother checking; the new Mozilla layout has evolved away from that original look, though it still bears trace elements of the original design. A lot of you probably do remember the original Mozilla layout. I'm sure when Roblimo saw it, he realized it was copied from http://www.webstandards.org and I think that's the kind of thing he was referring to in his overly kind introduction to my work.
By the way, I wasn't upset by what Mozilla did; I was flattered by it. You may think it is ugly design, though I'm sure that none of you said so to Mozilla because you believe in the project. It's weird to me that the same people who dig Mozilla would be rude in their comments to someone who, at least in a small way, helped influence the direction of that browser, and who also influenced the initial DESIGN of that project, but whatever. I also talk with Microsoft, because the goal of WaSP is to get standards in *all* browsers, and the fact that I talk to engineers at that company may make me evil incarnate in your book. I can deal with that. If we get better browsers, I'll be satisfied.
I do get copied a lot and often those copies are better than the original. In that sense "VIEW SOURCE" functions like "OPEN SOURCE." ;) I am happy when someone takes an idea of mine and makes it better (and their own).
"why have you committed one of the cardinal sins of web design"
I've been designing websites for five years. I don't claim to be a genius and I'm far from the best designer on the planet, but your take on cardinal sins of a profession you do not participate in is about as meaningful as my comments on your programming decisions would be.
You are parroting Jakob Nielsen or some other expert whose work you've read. You haven't read my work on the same subject (no problem) and you don't know my work as a designer (no problem). Just as in programming, design is about decisions. A designer never sins. He/she makes informed decisions. If you get to know the work, you may understand why those decisions were made. If you never bother to engage with the work - if you merely believe that all design must conform with a small set of rules written by one or two people - you don't understand the nature of the thing you are criticizing. Especially if you spend all of five seconds looking at it, and then rush to be the first to post a rant. There are rules of grammar, too, and James Joyce threw them all out. True, I ain't him. But I am me. All designers make decisions, and if the entire web looked like http://www.useit.com I don't think that would be such a great thing. Anything that departs from the look of http://www.useit.com is violating at least a few of Jakob's "rules," and that's the nature of the beast.
"Putting [up] an 'entry page' that does nothing but suck bandwidth and make it difficult to "back" out of a site?"
The bandwidth sucked is exactly 4K. I think you can handle it.
The "entry page" is a temporary placeholder while I rethink the front end of my personal site. Notice the words "temporary," "placeholder," and "personal." The previous front page was navigational in nature, and it is archived at http://www.zeldman.com/mozillatest.html . The name refers to the fact that the page revealed a bug in recent builds of Mozilla. I have left it online so the Mozilla folks can use it to track down and fix that bug, which they are doing now.
Recently, I've been focused on WaSP and A List Apart (http://www.alistapart.com/), a web design magazine and mailing list I co-founded with Brian Platz. The content on my personal site (275+ pages) has not been my most recent focus, so I determined a while back that it was silly to stop the visitor with a primarily navigational page. I should explain that some people visit zeldman.com for entertainment like The Ad Graveyard; a completely different audience visits for web design info, such as the Ask Dr Web tutorial; and so on. To accommodate those very different visitors, I initially had a core page that was navigational. I didn't put real content on page one, because I was accommodating maybe six completely different audiences, and there was nothing in all that content that would appeal to ALL of them. On http://www.alistapart.com/ I start with content on page one, because the audience is more unified.
Even that old navigational page (http://www.zeldman.com/mozillatest.html), with all its rollovers etc., was very low-bandwidth. I recently got to look at it while stuck at an airport in Stockholm. The airport had five Windows boxes sharing one 56K modem. I looked at some of my favorite sites, and they were all crawling onto the screen. I was pleased that my own front page loaded instantly. I design for low bandwidth, which explains why my work rarely looks like that of "such a hot shit designer." Back to the point. I haven't yet figured out how to restructure the front end of my site, so I put up a 4K placeholder with a bone-simple rollover and a 6 second refresh to the single page at my site that I have been focusing on lately.
Now you know why I have a temporary entry page; now you know why it does "nothing" (it is temporary, and what it does is redirect you); and now you know that it does not suck bandwidth.
How it "makes it difficult to 'back' out of the site" is a mystery to me, so I can't comment on that clause in your question. Personally I find database driven pages much harder to navigate and back out of than 4K html pages. And with browsers that suck, frames-based pages can also be tough to navigate. My 4K page is frameless HTML.
2) I have a question:
(Score:4, Insightful)
by SkinkaWhat's with that small font www.zeldman.com, haven't you read any (web) usability guides?
Jeffrey:
Yes, I've read them, yes I've written on the subject, yes yes yes.
Along with another WaSP member, I helped influence Microsoft to make ALL web text resizable by the user in IE5/Mac for reasons of accessibility and usability, and we are hoping to get the same from Mozilla. (At the moment, this feature is only available in IE5/Mac. It should be in every browser. It's not in the Windows version of IE and it's obviously not in the current version of Navigator.)
Why small fonts? Personal design decision on a personal site. You can enlarge the type in some browsers, not all. That day is coming.
There are methods of CSS that allow you to resize type in *all* browsers.
Why do I often avoid those methods?
Because they are not supported in most "CSS-capable" browsers.
Absolute font-size keywords are broken in Navigator 4 (all platforms) and IE5/Windows.
Percentages and ems are broken in Netscape 4.
Points are meaningless on computer screens, and the reliance on points in Style Sheets is a widespread authoring error.
Until all browsers support standards, designers will be stuck using pixels or FONT SIZE tags. Or simply making no effort at all to control the appearance and size of type on the web page. If this bothers you, join The Web Standards Project.
(Warning: it is orange. If you "can't get past the color" then I guess you'll have to let big browser companies determine the fate of the web.)
Unless you design web sites every day, you have no idea of the compatibility nightmares involved. But in your own work, I'm sure you have plenty of examples of brain-dead decisions by others that force you to use hacks and workarounds. It's the same in web design.
At the moment, the main text at http://www.zeldman.com/coming.html (the one page in all my work that most Slashdotters seem to have looked at) is laid out with ems. This is wonderful, scalable technology. You can easily enlarge or reduce the type in just about any browser.
Except, of course, that it doesn't work at all in most versions of Navigator 4. If you're using Navigator - and you know you are - you will see large ugly type, not the type treatment I intended. Until we have standards, that's just the way it will be.
3) Not to flame, but...
(Score:5, Insightful)
by mr.nobodyI find it hard to ask HTML questions to someone who has committed the cardinal sin of taking away the status bar with JavaScript.
Jeffrey:
Another cardinal sin.
Hmm. Let's see.
The status bar *does* reveal the url of the page it links to - just like an untreated status bar would do. It also provides ADDITIONAL INFORMATION AND COMMENTARY. I guess that's a bad thing. I can't see why, but I guess I'll take your word for it. URL = good, URL + additional information = bad. Because you say so.
The title tag also provides additional information, but Question #12 told me that that was okay, even good. Whew! That's a relief.
4) where's the interview
(Score:4, Interesting)
by geekpressJeff, I programmed for a web design company in which design issues totally trumped more practical concerns like download time. (In one case, I was forced to create absurdly complex html tables just so that the designer could get his one-pixel rounded corners on his notecard design.) What do you see as the appropriate balance between aesthetics and practical usability?
P.S. That company is now out of business, thank goodness!
Jeffrey:
I almost always design for low bandwidth.
I was creative director at a web firm and had designed a layout with thin black borders (yes I do this same thing over and over again) for a database driven site that would be creating tables on the fly. The design effect would not render in Navigator, but the page still looked fine in Navigator, even without those little black outlines.
It was possible to FORCE Navigator to display the effect by surrounding every table with an additional, empty table. That is sometimes okay, obviously - I've been doing it since we could begin applying rudimentary styling to tables - but on a large page full of data, it would unnecessarily increase the bandwidth per page, force all browsers to burn cycles as they calculated the appearance of complex table-in-table displays, possibly cause display errors, and completely yoke the content to the presentation, making it that much harder to fix later, when we have better browsers.
So I told the company president it was a usability nightmare and a waste of resources and bandwidth and therefore not worth doing.
He told me to do it anyway.
So I quit my job and started my own company.
Rounded edges, high bandwidth, all that stuff can be fine in the right situations, as long as alternatives are provided and rules of accessibility are respected. Usually I persuade my clients to go in the low-bandwidth direction, and I almost always go low-bandwidth on the noncommercial sites I do (zeldman.com, http://www.webstandards.org/ and http://www.alistapart.com/ ).
But high bandwidth is fine for the right audience. Consider http://www.praystation.com, which is a brilliantly designed site by Joshua Davis. It's amazing work. The audience for that site is primarily Joshua's fellow designers, and most of them have T1 or DSL access. Since the site's goal is to push design as far as it can go on the web, and since the audience is known to have fast connections and a desire to see great design, there is absolutely nothing wrong (and lot right) with the higher-bandwidth road taken by this project.
5) Optimism?
(Score:5, Funny)
by ChalstHow hopeful are you that Microsoft can be coaxed into making IE standards compliant? What exactly do you think Microsoft's motive was in not supporting HTML 4.0 completely?
Jeffrey:
It varies by the hour. Sometimes I think they are going to do this and simply have not committed to it because they're not sure they can pull it off. Sometimes I suspect that as the current market leader (guys with the most users) they think they don't have to bother with this. ("Our way *is* the standard." That kind of thinking.) And sometimes I reckon that they're doing this to fuck up Mozilla. ("You're going to support standards? Well, we have more users. You lose.") I don't *know* what they're thinking, but I suspect that different people there are thinking combinations of all the above.
I do know there are engineers there who are committed to supporting standards. Not only because I've met some of them through my work with WaSP, but also because - in the case of IE5/Mac - they've actually pulled it off. Remember, Microsoft (along with Netscape, Sun, invited experts, etc.) helped come up with these standards in the first place. Why would you design blueprints and then not follow them when you build the house? The engineers who participate in the standards process are committed to complying with standards. Some people in management may not be. Or they may be delaying, for short-sighted competitive reasons, or from fear of committing until they are sure they can do it right.
HTML 4 - the LAST HTML - includes dozens of accessibility improvements, and it is insane for any company not to fully support that. Without full support for HTML 4, millions of web users get hurt. That's morally wrong, and it's also just plain bad for business. I think that in time, all browser companies, including Microsoft, will come to see that. I also think the W3C's recent hiring of a conformance manager (http://xmlhack.com/read.php?item=517) signals that the W3C will soon take a more active role in "helping" companies get with the program, support standards, and stop screwing up developers and web users in a game where everybody - including the browser companies - eventually loses.
6) Balancing Technologies
(Score:5, Insightful)
by ProteusAs you are no doubt aware, the technology that drives web site design is advancing rapidly. However, there are still a lot of users who run older browsers, or prefer to use text-only browsers such as Lynx.
Obviously, one wants to reach as large an audience as possible, but not "lag behind" too far. How do you go about balancing the use of newer technology on a site without alienating users of older software, disabled users, and text-only browsers?
Jeffrey:
Using HTML 4, ALT tags, and the TITLE tag goes a long way toward achieving this goal.
So does using CSS for type, instead of FONT FACE and FONT SIZE tags that yoke content to presentation.
I do both these things, and all the other little things you have to do, for instance with framesets. I think there may be some really old (1996) framesets at zeldman.com where I left out full content inside the noframes tags. I'm cleaning that up as quickly as I can. At ALA http://www.alistapart.com/), wherever I used framesets, I included the full text inside the noframes tags, and I also included TEXT versions of all articles.
The next stage is full separation of content from structure, and that means using HTML 4 and CSS (and eventually, replacing HTML 4 with XHTML; and eventually, migrating to XML).
We can't safely do that yet. Gecko is still in development, Netscape 4 has appalling "support" for CSS, IE5/Windows has better but far from complete support, and the only released browser that gets it right - IE5/Mac - has a 6% market share.
SOON. Not soon enough, but SOON, we will look back on this era of stupidity and laugh. Oh, how we will laugh. This is the TRON era and we are striving to reach the MATRIX era.
7) Reverse scenario question...
(Score:5, Interesting)
by Jonny RoyaleHave you ever seen anything come from a browser publisher "extending" a standard (Microsoft, Netscape, other), and thought "Gee, I wish that was in the standard"? Examples?
Jeffrey:
Yes.
LOW SRC was a funky old tag from Netscape (dating back to Netscape 1.1) that allowed you to slip a low-bandwidth image into place, and then have it replaced by the more bandwidth-intensive image when the latter finished downloading. For people with very slow connections, it was a useful hack. It also enabled creative web designers to add a certain amount of "SFX magic" (cough) to even the most primitive pages, viewed by the oldest browsers, under the most adverse conditions. That's gone. Too bad. I miss it.
Because of browser offsets in all released versions of Navigator and most versions of Explorer, I wish the "four horsemen of non-validation" (leftmargin, topmargin marginwidth and marginheight) had made it into HTML 4.0 transitional. We won't need them eventually, but until the browsers are smarter, we still do need them. The W3C is always ahead of what the browsers can deliver, of course; but by discouraging these dumb proprietary tags, the W3C has put us in the position where PAGES THAT WILL NOT WORK without these tags will fail at http://validator.w3.org. That kind of failure discourages developers from building standards-compliant pages. It is a small thing, and it is transitional, but DURING THE TRANSITION, I would have liked to see those four stupid tags get approval with a benevolent sigh.
On the other hand, designers who know what they are doing may include these tags and ignore those validation errors, but don't tell the W3C I said so.
Given the brain-dead way Navigator 4 and IE4/5/Windows handled absolute font size keywords in CSS, I *sometimes* wish font size tags were not discouraged YET. I hate them and hardly ever use them, but (for instance) there's no way to get small type in Linux that is actually READABLE without relying on these dumb old non-standard tags. What I really wish in this case, of course, is that Netscape and Microsoft hadn't fucked up this simple CSS technology. So I take the FONT SIZE tags thing back. Uh, never mind. I just wish Netscape and Microsoft had gotten CSS right the first time.
8) Banners
(Score:5, Interesting)
by TheTomcatThis is only vaguely related to design, but directly related to the web, and functionality.
We all know that banners don't work anymore. The only way a business can profit from banners is to show thousands per day. Most users don't even SEE banners anymore. We avoid them the same way we dig in the couch for the remote when commercials interrupt The Simpsons.
Do you have any suggestions to make future, content-based sites profitable?
Jeffrey:
There are several issues here. One is, a lot of the best work is done as a labor of love, and always will be. Those who need a revenue model before they are willing to even think about working will lose one of the golden opportunities of the web, which is free expression and the building of communities, regardless of financial issues. For instance, Slashdot was born as a community and still is one. Eventually, Slashdot got into a position where it could make money, but Slashdot is true to itself and was not corrupted or changed by any commercial considerations. So it is possible to make a good thing and not blow it when the cash register starts jingling. But a lot of other sites and communities have turned to dreck when money was involved.
We all agree that banners suck - Roblimo even wrote an article for ALA on that subject, back when ALA was just getting launched. With a big enough readership, banners *can* be profitable, as they are at Slashdot. But I agree that most of us just hate 'em.
Sponsorships are another possible means of revenue. "This issue of Webmonkey brought to you by Hewlett-Packard." With an entertaining HP minisite available at the click of a link, for those who care. Kaliber 10000 (http://www.k10k.net) has gotten Apple sponsorship, and all that means is, there's a tiny Apple link in the top right hand corner of the front page. If you click it, you get a popup window with text on why the site's designers like their Macs, and links to some current movies in Apple Quicktime format.
The Cluetrain guys have spoken about this model of corporate sponsorship as well.
I think about it sometimes. For instance, http://www.alistapart.com/ could be "brought to you by" Macromedia or Adobe. But to tell the truth, I don't really pursue this idea because I'm not motivated by money when it comes to creating web content. I simply want to create or choose the right content, and totally control it, and I'm not sanguine that I could do that if I *had* corporate sponsorship. Thinking about it some more is on my to-do list, but it's about 500 layers down in the list. I make enough money designing websites that I don't worry about "revenue models" for my content sites. It is a real issue, though. Just one I haven't bothered with personally, yet.
9) Jeff, your CSS suck
(Score:4, Insightful)
by Nicolas MONNETI quote from your website:
H1 {font: bold 24px verdana, helvetica, arial, sans-serif; margin-top: 0xp;}
H4 {font: 12px verdana, helvetica, sans-serif; margin-top: 0px; margin-bottom: 10px;}So why, tell me, WHY did you use PIXELS (px) instead of POINTS (pt), thereby overriding my painfully crafted DPI settings, rendering your all page unviewable on my Linux machine?
Jeffrey:
Refer to the answer to Question 2. Also refer to this Word from the WaSP column:
http://www.webstandards.org/wfw/ieah.html
The best way to style text - and the way the W3C recommends - is to use relative sizes or absolute size keywords.
Both these methods are completely broken in Navigator 4. Totally frickin' useless. Don't shoot the messenger. Netscape agrees, and that's why they threw out their old rendering engine and started from scratch.
And absolute size keywords are stupidly mis-supported in IE4/5 for Windows, where "medium" means large, and "small" means medium.
Faced with this maddening stupidity on the part of browser makers, designers/developers have two choices:
Do not style text at all. Have a nice day.
*OR* rely on pixels, which work in all "CSS-capable" browsers.
I sadly choose the latter until the browsers fully comply with W3C standards.
As to POINTS versus pixels, points are absolutely meaningless on the web, and the fact that they are used by thousands of developers who should know better proves only how little CSS is understood by the development community.
Certain point sizes may work on your platform in your style sheet. That proves that certain point sizes work on your platform in your style sheet. Cross-platform it is not transportable, and points are print-based units of measurement that have no meaningful relationship to the wonderful world of monitor resolution.
For a good discussion of CSS problems, see Todd Fahrner's "Beyond the Font Size Tag: Practical HTML Text and Styling" at http://style.metrius.com/font_size /livetext.html (Unfortunately, even some of *THESE* techniques do not work in more recent versions of Navigator 4.)
In a few months, there will be exactly two browsers that get CSS-1 right: Mozilla/Nav 6 for all platforms, and IE5/Mac which we have now. Since neither has dominant marketshare, developers will still face huge obstacles when trying to do something as SIMPLE and BASIC as size text on the web. Many will stick with pixels, which are the only CSS technique that actually WORKS across browsers and platforms.
In addition to all these nightmarish problems with our browsers, there are special challenges with Linux, because unless Linux users install additional scalable fonts, you can follow all the rules for good CSS, and avoid "problem" font sizes, and still create pages that look jaggy or are unreadable on a lot of people's machines. I worry about this all the time, but I don't have a solution for it. I have actually gone back to using the stupid The way to advance the medium is to get absolute font size keywords and relative font sizes right in CSS, finish implementing HTML 4, and give us the W3C DOM, XML, and EcmaScript. (And then wait two years for users to upgrade.)
10) Pixel based alignment and HTML
(Score:4, Insightful)
by mcelrathOne of the most disturbing trends that I see in web design these days is the trend toward trying to control layout at the pixel level. As HTML (Hypertext Markup) was not intended to be a graphics language, what is your comment on this?
Jeffrey:
Separation of style and content is the way forward.
The problem is the browsers.
When I revised my "Ask Dr Web" tutorial at http://www.zeldman.com/askdrweb/, along with other pages at http://www.zeldman.com/, to use CSS layouts instead of tables, certain versions of Navigator 4 began crashing.
Actually crashing from basic CSS-1.
I wrote about this at A List Apart, ("The Day the Browser Died") and because of this, Netscape invested some time and resources to fixing some of these bugs in Navigator 4. It didn't catch them all, and it didn't catch them in Linux. These bugs will never be fully fixed in Navigator 4, because Netscape is wisely spending its energy to finish the Mozilla browser. Unfortunately, this means that Netscape users will continue to face serious usability hazards throughout the web until Netscape 6 is released ... *OR* it means that developers will continue to use TABLES for layouts for the next two years (as Jakob Nielsen has predicted).
If you look at these pages - http://www.zeldman.com/steal.html or http://www.zeldman.com/icon.html are other examples - you will see that we are talking about extremely BASIC layouts. An expert from the CSS pointers group actually volunteered hours of her time trying alternate combinations of the very basic CSS on those pages to see if she could find ways to stop Netscape from crashing. She could not; neither could I. Netscape did what it could for its 4.0 users, but it can't do anything more until the next generation is released.
On my personal site I made the tough decision to leave these pages as-is. I don't have time to recode them all using tables.
You can agree or disagree with that decision.
Linux folks can either use the Mozilla or Opera betas to navigate those pages in safety and comfort.
It's worth noting that W3C pages also crashed Netscape 4, for the same reason.
What happens when Netscape's browser is this badly damaged? I get hate mail from people who don't understand the issues involved. I also got a letter of thanks from Netscape's Eric Krock, because good companies WANT us to help them find bugs in their software.
As an example of this, many sites (including yours) use font size=1 to acheive a font that is fairly uniform in pixel size across browsers. Anyone with a high-resolution screen will tell you that this is highly annoying, since it results in an almost unreadable font.
See above for the explanation as to why developers are stuck using 1994 technology to support late-1990s browsers. The same questions, the same answers.
The good thing - the ONLY good thing - about the font size tag is that it is user-resizable. The rest of this has been answered above.
Forcing netscape to use a larger font size often destroys the layout of the page. What's worse, some pages use dynamic fonts and other features to force this on the user.
Right, although in some cases it is justified.
As another example, many pages use the table , and layer to specify the exact size in pixels of portions of the page, and then put a little notice at the bottom ("This site best viewed at 800x600") or some such.
Yes, that is usually a bad design decision. Whenever possible, I use what Glenn Davis (WaSP and Project Cool co-founder) calls "liquid" design ... design that reflows to exactly fit the visitor's monitor. That's almost always a better way to go. Examples of my liquid designs include http://www.alistapart.com/, http://www.the-adstore.com, and most of zeldman.com. If you dig long enough in zeldman.com, you'll come upon pages older than the NYC subways, that simply use BAD design ... though at the time, it wasn't all that bad.
Liquid design is not always appropriate but it is generally best.
What are standards groups doing to fix this?
Nothing. The W3C can't make better or more intelligent designers out of people, and neither can the WaSP, whose sole purpose is to agitate for W3C standards in browsers (and eventually in web authoring tools).
We can try to lead by example. http://www.webstandards.org/ is liquid (aside from the front page, which is "semi-liquid" owing to the large low-rez graphic) and it validates.
MEMBERS of standards groups can write articles on the subject and hope that people read them. Of course, if people "can't get past" a 4k splash page, they will not learn about my articles on the subject.
Will I be looking at pages designed for 800x600 (or worse, 640x480) with my 1920x1440 screen forever? Will persons with laptops at 640x480 be unable to read the web soon? Will standards bodies ever require percentage-of-screen width and height specifiers, or even better, implement table width=30ch to specify sizes in relation to the current font size?
Standards bodies can recommend certain authoring practices, and they can develop standards that make such practices possible, but they cannot enforce good authoring.
11) Evaluate Slashdot
(Score:5, Interesting)
by Pseudonymus BoschWhat would you change, what would you add, what would you remove in Slashdot?
Jeffrey:
It's a community and it works. It has achieved visibility, notoriety, and even commercial success without giving an inch. Pretty awesome achievement. What would I change?
Sometimes the longer threads take a long time to load, due to back-end technology, platform and server issues. The technology works better on Linux than it does on my platform of choice (Mac OS) but, hey, that's okay.
I know you want me to comment on the design. Design is subjective. Black backgrounds and teal are not my favorite color scheme (though I used black backgrounds at the 1995 Ad Graveyard (http://www.zeldman.com/ad.html) and the January 1997 Furbo Filters so who am I to talk? The main thing I was trying to do at Furbo was get CSS to work - and to let people know about Craig Hockenberry's and my Furbo Filters, which were the only Photoshop plugins at the time that dealt with the web-safe color palette - at least to our knowledge.)
I might change the color scheme and some other things if Rob Malda went on a crack run and asked me to redesign Slashdot, but that ain't likely to happen. And I think the design of Slashdot is just fine. It focuses you on the breaking stories, allows you to read more (or not), and provides access to almost everything else on the site via small navigation units. In terms of usability it is damn good, and it has plenty of attitude.
Of course, it commits the "cardinal sin" of teal, but I can get past that.
12) Do you agree with Nielsen?
(Score:4, Interesting)
by Pseudonymus BoschI have no idea about you and your views, but I have read lots of the Alertbox columns by Jakob Nielsen.
Do you agree with him? Do you disagree? What about?
Jeffrey:
I agree with his comments on oral sex and wearing white after Labor Day.
And I like that he can get $25,000 to talk for an hour. I'll do the same for half that amount.
I also agree with Jakob that most websites should be usable by as many people as possible.
What I have done about that is help found The Web Standards Project, so we can actually achieve that goal instead of using duct tape and lasagna to build sites that work for "most" people. And I try to make my pages accessible in spite of the limitations of current browsers and some of the cross-platform issues discussed above.
If you are interested in my views, you can read them at http://www.alistapart.com/, Adobe.com (here, http://www.adobe.com/we b/columns/zeldman/20000320/main.html, for instance), http://www.webstandards.org/ and of course at http://www.zeldman.com/. If you can get past the 4k splash page.
At least you share the use of TITLE attributes in hyperlinks (a good feature that Slashdot shouldn't chomp away).
Thanks! The reason Slashdot chomps title tags is probably because they are not supported in Netscape yet. They are an important usability feature, and in some browsers they also offer nifty low-grade special effects - along with the opportunity for contextual ampliciation or ironic commentary.
jeffrey
Can't act. Can't sing. Can dance a little.
http://www.zeldman.com
http://www.alistapart.com
http://www.happycog.com
http://www.webstandards.org -
Jeffrey Zeldman Bites Back
We got a lot of (shall we say) slightly impertinent questions for Web Standards Project co-founder Jeffrey Zeldman, but that's okay. He reads Slashdot and knows the nature of the beast, and he's hard-core enough to give as good as he gets. So set your humor module to high, then sit back and enjoy Mr. Zeldman's (appropriately impertinent) answers to the 12 questions we forwarded to him.1) Here's my question:
(Score:5, Insightful)
by FascDot Killed My PrIf you're such a hotshot web designer, why have you committed one of the cardinal sins of web design: Putting an "entry page" that does nothing but suck bandwidth and make it difficult to "back" out of a site?
Jeffrey:
I'll answer this one piece by piece.
"If you're such a hotshot web designer."
Never claimed to be. Roblimo wrote that glowing description. It's not surprising that some of you, who have no idea what I do, were pissed off when those words of high praise took you to a very simple, low-bandwidth, personal site.
I wish Rob had said "Zeldman is a co-founder of The Web Standards Project" (WaSP), and had explained what the WaSP does, maybe even mentioning the role we played in getting Netscape to throw out its old rendering engine and begin building Mozilla around the standards-compliant Gecko core. I'm guessing people would have overlooked my supposed "design sins" or their distaste for the color orange on my personal site if they had a better idea about what I actually do.
For those who don't know, the WaSP organized a petition drive to persuade Netscape to throw out its old rendering engine and build its new browser around Gecko. Then-group-leader George Olsen of WaSP, along with ThunderLizard's Jim Heid, got 2,000 developers to sign the petition. Netscape is a company that listens - at least, for the last two years, it has been listening - and you all know the result: an upcoming browser that is designed to fully comply with HTML 4, CSS-1, the W3C DOM, XML, and EcmaScript.
No disrespect to Roblimo either. I dig the guy. And what he said is true in a sense. I *am* a web designer and writer, and a lot of the work I've done over the past five years *has* gotten imitated, for better or worse. For instance, oddly enough, the original Mozilla.org (http://www.mozilla.org) was copied from the simple HTML-and-CSS layout I did The Web Standards Project (http://www.webstandards.org/): from the technique, to the color palette, to the crude four-pixel black outlines around content areas. Don't bother checking; the new Mozilla layout has evolved away from that original look, though it still bears trace elements of the original design. A lot of you probably do remember the original Mozilla layout. I'm sure when Roblimo saw it, he realized it was copied from http://www.webstandards.org and I think that's the kind of thing he was referring to in his overly kind introduction to my work.
By the way, I wasn't upset by what Mozilla did; I was flattered by it. You may think it is ugly design, though I'm sure that none of you said so to Mozilla because you believe in the project. It's weird to me that the same people who dig Mozilla would be rude in their comments to someone who, at least in a small way, helped influence the direction of that browser, and who also influenced the initial DESIGN of that project, but whatever. I also talk with Microsoft, because the goal of WaSP is to get standards in *all* browsers, and the fact that I talk to engineers at that company may make me evil incarnate in your book. I can deal with that. If we get better browsers, I'll be satisfied.
I do get copied a lot and often those copies are better than the original. In that sense "VIEW SOURCE" functions like "OPEN SOURCE." ;) I am happy when someone takes an idea of mine and makes it better (and their own).
"why have you committed one of the cardinal sins of web design"
I've been designing websites for five years. I don't claim to be a genius and I'm far from the best designer on the planet, but your take on cardinal sins of a profession you do not participate in is about as meaningful as my comments on your programming decisions would be.
You are parroting Jakob Nielsen or some other expert whose work you've read. You haven't read my work on the same subject (no problem) and you don't know my work as a designer (no problem). Just as in programming, design is about decisions. A designer never sins. He/she makes informed decisions. If you get to know the work, you may understand why those decisions were made. If you never bother to engage with the work - if you merely believe that all design must conform with a small set of rules written by one or two people - you don't understand the nature of the thing you are criticizing. Especially if you spend all of five seconds looking at it, and then rush to be the first to post a rant. There are rules of grammar, too, and James Joyce threw them all out. True, I ain't him. But I am me. All designers make decisions, and if the entire web looked like http://www.useit.com I don't think that would be such a great thing. Anything that departs from the look of http://www.useit.com is violating at least a few of Jakob's "rules," and that's the nature of the beast.
"Putting [up] an 'entry page' that does nothing but suck bandwidth and make it difficult to "back" out of a site?"
The bandwidth sucked is exactly 4K. I think you can handle it.
The "entry page" is a temporary placeholder while I rethink the front end of my personal site. Notice the words "temporary," "placeholder," and "personal." The previous front page was navigational in nature, and it is archived at http://www.zeldman.com/mozillatest.html . The name refers to the fact that the page revealed a bug in recent builds of Mozilla. I have left it online so the Mozilla folks can use it to track down and fix that bug, which they are doing now.
Recently, I've been focused on WaSP and A List Apart (http://www.alistapart.com/), a web design magazine and mailing list I co-founded with Brian Platz. The content on my personal site (275+ pages) has not been my most recent focus, so I determined a while back that it was silly to stop the visitor with a primarily navigational page. I should explain that some people visit zeldman.com for entertainment like The Ad Graveyard; a completely different audience visits for web design info, such as the Ask Dr Web tutorial; and so on. To accommodate those very different visitors, I initially had a core page that was navigational. I didn't put real content on page one, because I was accommodating maybe six completely different audiences, and there was nothing in all that content that would appeal to ALL of them. On http://www.alistapart.com/ I start with content on page one, because the audience is more unified.
Even that old navigational page (http://www.zeldman.com/mozillatest.html), with all its rollovers etc., was very low-bandwidth. I recently got to look at it while stuck at an airport in Stockholm. The airport had five Windows boxes sharing one 56K modem. I looked at some of my favorite sites, and they were all crawling onto the screen. I was pleased that my own front page loaded instantly. I design for low bandwidth, which explains why my work rarely looks like that of "such a hot shit designer." Back to the point. I haven't yet figured out how to restructure the front end of my site, so I put up a 4K placeholder with a bone-simple rollover and a 6 second refresh to the single page at my site that I have been focusing on lately.
Now you know why I have a temporary entry page; now you know why it does "nothing" (it is temporary, and what it does is redirect you); and now you know that it does not suck bandwidth.
How it "makes it difficult to 'back' out of the site" is a mystery to me, so I can't comment on that clause in your question. Personally I find database driven pages much harder to navigate and back out of than 4K html pages. And with browsers that suck, frames-based pages can also be tough to navigate. My 4K page is frameless HTML.
2) I have a question:
(Score:4, Insightful)
by SkinkaWhat's with that small font www.zeldman.com, haven't you read any (web) usability guides?
Jeffrey:
Yes, I've read them, yes I've written on the subject, yes yes yes.
Along with another WaSP member, I helped influence Microsoft to make ALL web text resizable by the user in IE5/Mac for reasons of accessibility and usability, and we are hoping to get the same from Mozilla. (At the moment, this feature is only available in IE5/Mac. It should be in every browser. It's not in the Windows version of IE and it's obviously not in the current version of Navigator.)
Why small fonts? Personal design decision on a personal site. You can enlarge the type in some browsers, not all. That day is coming.
There are methods of CSS that allow you to resize type in *all* browsers.
Why do I often avoid those methods?
Because they are not supported in most "CSS-capable" browsers.
Absolute font-size keywords are broken in Navigator 4 (all platforms) and IE5/Windows.
Percentages and ems are broken in Netscape 4.
Points are meaningless on computer screens, and the reliance on points in Style Sheets is a widespread authoring error.
Until all browsers support standards, designers will be stuck using pixels or FONT SIZE tags. Or simply making no effort at all to control the appearance and size of type on the web page. If this bothers you, join The Web Standards Project.
(Warning: it is orange. If you "can't get past the color" then I guess you'll have to let big browser companies determine the fate of the web.)
Unless you design web sites every day, you have no idea of the compatibility nightmares involved. But in your own work, I'm sure you have plenty of examples of brain-dead decisions by others that force you to use hacks and workarounds. It's the same in web design.
At the moment, the main text at http://www.zeldman.com/coming.html (the one page in all my work that most Slashdotters seem to have looked at) is laid out with ems. This is wonderful, scalable technology. You can easily enlarge or reduce the type in just about any browser.
Except, of course, that it doesn't work at all in most versions of Navigator 4. If you're using Navigator - and you know you are - you will see large ugly type, not the type treatment I intended. Until we have standards, that's just the way it will be.
3) Not to flame, but...
(Score:5, Insightful)
by mr.nobodyI find it hard to ask HTML questions to someone who has committed the cardinal sin of taking away the status bar with JavaScript.
Jeffrey:
Another cardinal sin.
Hmm. Let's see.
The status bar *does* reveal the url of the page it links to - just like an untreated status bar would do. It also provides ADDITIONAL INFORMATION AND COMMENTARY. I guess that's a bad thing. I can't see why, but I guess I'll take your word for it. URL = good, URL + additional information = bad. Because you say so.
The title tag also provides additional information, but Question #12 told me that that was okay, even good. Whew! That's a relief.
4) where's the interview
(Score:4, Interesting)
by geekpressJeff, I programmed for a web design company in which design issues totally trumped more practical concerns like download time. (In one case, I was forced to create absurdly complex html tables just so that the designer could get his one-pixel rounded corners on his notecard design.) What do you see as the appropriate balance between aesthetics and practical usability?
P.S. That company is now out of business, thank goodness!
Jeffrey:
I almost always design for low bandwidth.
I was creative director at a web firm and had designed a layout with thin black borders (yes I do this same thing over and over again) for a database driven site that would be creating tables on the fly. The design effect would not render in Navigator, but the page still looked fine in Navigator, even without those little black outlines.
It was possible to FORCE Navigator to display the effect by surrounding every table with an additional, empty table. That is sometimes okay, obviously - I've been doing it since we could begin applying rudimentary styling to tables - but on a large page full of data, it would unnecessarily increase the bandwidth per page, force all browsers to burn cycles as they calculated the appearance of complex table-in-table displays, possibly cause display errors, and completely yoke the content to the presentation, making it that much harder to fix later, when we have better browsers.
So I told the company president it was a usability nightmare and a waste of resources and bandwidth and therefore not worth doing.
He told me to do it anyway.
So I quit my job and started my own company.
Rounded edges, high bandwidth, all that stuff can be fine in the right situations, as long as alternatives are provided and rules of accessibility are respected. Usually I persuade my clients to go in the low-bandwidth direction, and I almost always go low-bandwidth on the noncommercial sites I do (zeldman.com, http://www.webstandards.org/ and http://www.alistapart.com/ ).
But high bandwidth is fine for the right audience. Consider http://www.praystation.com, which is a brilliantly designed site by Joshua Davis. It's amazing work. The audience for that site is primarily Joshua's fellow designers, and most of them have T1 or DSL access. Since the site's goal is to push design as far as it can go on the web, and since the audience is known to have fast connections and a desire to see great design, there is absolutely nothing wrong (and lot right) with the higher-bandwidth road taken by this project.
5) Optimism?
(Score:5, Funny)
by ChalstHow hopeful are you that Microsoft can be coaxed into making IE standards compliant? What exactly do you think Microsoft's motive was in not supporting HTML 4.0 completely?
Jeffrey:
It varies by the hour. Sometimes I think they are going to do this and simply have not committed to it because they're not sure they can pull it off. Sometimes I suspect that as the current market leader (guys with the most users) they think they don't have to bother with this. ("Our way *is* the standard." That kind of thinking.) And sometimes I reckon that they're doing this to fuck up Mozilla. ("You're going to support standards? Well, we have more users. You lose.") I don't *know* what they're thinking, but I suspect that different people there are thinking combinations of all the above.
I do know there are engineers there who are committed to supporting standards. Not only because I've met some of them through my work with WaSP, but also because - in the case of IE5/Mac - they've actually pulled it off. Remember, Microsoft (along with Netscape, Sun, invited experts, etc.) helped come up with these standards in the first place. Why would you design blueprints and then not follow them when you build the house? The engineers who participate in the standards process are committed to complying with standards. Some people in management may not be. Or they may be delaying, for short-sighted competitive reasons, or from fear of committing until they are sure they can do it right.
HTML 4 - the LAST HTML - includes dozens of accessibility improvements, and it is insane for any company not to fully support that. Without full support for HTML 4, millions of web users get hurt. That's morally wrong, and it's also just plain bad for business. I think that in time, all browser companies, including Microsoft, will come to see that. I also think the W3C's recent hiring of a conformance manager (http://xmlhack.com/read.php?item=517) signals that the W3C will soon take a more active role in "helping" companies get with the program, support standards, and stop screwing up developers and web users in a game where everybody - including the browser companies - eventually loses.
6) Balancing Technologies
(Score:5, Insightful)
by ProteusAs you are no doubt aware, the technology that drives web site design is advancing rapidly. However, there are still a lot of users who run older browsers, or prefer to use text-only browsers such as Lynx.
Obviously, one wants to reach as large an audience as possible, but not "lag behind" too far. How do you go about balancing the use of newer technology on a site without alienating users of older software, disabled users, and text-only browsers?
Jeffrey:
Using HTML 4, ALT tags, and the TITLE tag goes a long way toward achieving this goal.
So does using CSS for type, instead of FONT FACE and FONT SIZE tags that yoke content to presentation.
I do both these things, and all the other little things you have to do, for instance with framesets. I think there may be some really old (1996) framesets at zeldman.com where I left out full content inside the noframes tags. I'm cleaning that up as quickly as I can. At ALA http://www.alistapart.com/), wherever I used framesets, I included the full text inside the noframes tags, and I also included TEXT versions of all articles.
The next stage is full separation of content from structure, and that means using HTML 4 and CSS (and eventually, replacing HTML 4 with XHTML; and eventually, migrating to XML).
We can't safely do that yet. Gecko is still in development, Netscape 4 has appalling "support" for CSS, IE5/Windows has better but far from complete support, and the only released browser that gets it right - IE5/Mac - has a 6% market share.
SOON. Not soon enough, but SOON, we will look back on this era of stupidity and laugh. Oh, how we will laugh. This is the TRON era and we are striving to reach the MATRIX era.
7) Reverse scenario question...
(Score:5, Interesting)
by Jonny RoyaleHave you ever seen anything come from a browser publisher "extending" a standard (Microsoft, Netscape, other), and thought "Gee, I wish that was in the standard"? Examples?
Jeffrey:
Yes.
LOW SRC was a funky old tag from Netscape (dating back to Netscape 1.1) that allowed you to slip a low-bandwidth image into place, and then have it replaced by the more bandwidth-intensive image when the latter finished downloading. For people with very slow connections, it was a useful hack. It also enabled creative web designers to add a certain amount of "SFX magic" (cough) to even the most primitive pages, viewed by the oldest browsers, under the most adverse conditions. That's gone. Too bad. I miss it.
Because of browser offsets in all released versions of Navigator and most versions of Explorer, I wish the "four horsemen of non-validation" (leftmargin, topmargin marginwidth and marginheight) had made it into HTML 4.0 transitional. We won't need them eventually, but until the browsers are smarter, we still do need them. The W3C is always ahead of what the browsers can deliver, of course; but by discouraging these dumb proprietary tags, the W3C has put us in the position where PAGES THAT WILL NOT WORK without these tags will fail at http://validator.w3.org. That kind of failure discourages developers from building standards-compliant pages. It is a small thing, and it is transitional, but DURING THE TRANSITION, I would have liked to see those four stupid tags get approval with a benevolent sigh.
On the other hand, designers who know what they are doing may include these tags and ignore those validation errors, but don't tell the W3C I said so.
Given the brain-dead way Navigator 4 and IE4/5/Windows handled absolute font size keywords in CSS, I *sometimes* wish font size tags were not discouraged YET. I hate them and hardly ever use them, but (for instance) there's no way to get small type in Linux that is actually READABLE without relying on these dumb old non-standard tags. What I really wish in this case, of course, is that Netscape and Microsoft hadn't fucked up this simple CSS technology. So I take the FONT SIZE tags thing back. Uh, never mind. I just wish Netscape and Microsoft had gotten CSS right the first time.
8) Banners
(Score:5, Interesting)
by TheTomcatThis is only vaguely related to design, but directly related to the web, and functionality.
We all know that banners don't work anymore. The only way a business can profit from banners is to show thousands per day. Most users don't even SEE banners anymore. We avoid them the same way we dig in the couch for the remote when commercials interrupt The Simpsons.
Do you have any suggestions to make future, content-based sites profitable?
Jeffrey:
There are several issues here. One is, a lot of the best work is done as a labor of love, and always will be. Those who need a revenue model before they are willing to even think about working will lose one of the golden opportunities of the web, which is free expression and the building of communities, regardless of financial issues. For instance, Slashdot was born as a community and still is one. Eventually, Slashdot got into a position where it could make money, but Slashdot is true to itself and was not corrupted or changed by any commercial considerations. So it is possible to make a good thing and not blow it when the cash register starts jingling. But a lot of other sites and communities have turned to dreck when money was involved.
We all agree that banners suck - Roblimo even wrote an article for ALA on that subject, back when ALA was just getting launched. With a big enough readership, banners *can* be profitable, as they are at Slashdot. But I agree that most of us just hate 'em.
Sponsorships are another possible means of revenue. "This issue of Webmonkey brought to you by Hewlett-Packard." With an entertaining HP minisite available at the click of a link, for those who care. Kaliber 10000 (http://www.k10k.net) has gotten Apple sponsorship, and all that means is, there's a tiny Apple link in the top right hand corner of the front page. If you click it, you get a popup window with text on why the site's designers like their Macs, and links to some current movies in Apple Quicktime format.
The Cluetrain guys have spoken about this model of corporate sponsorship as well.
I think about it sometimes. For instance, http://www.alistapart.com/ could be "brought to you by" Macromedia or Adobe. But to tell the truth, I don't really pursue this idea because I'm not motivated by money when it comes to creating web content. I simply want to create or choose the right content, and totally control it, and I'm not sanguine that I could do that if I *had* corporate sponsorship. Thinking about it some more is on my to-do list, but it's about 500 layers down in the list. I make enough money designing websites that I don't worry about "revenue models" for my content sites. It is a real issue, though. Just one I haven't bothered with personally, yet.
9) Jeff, your CSS suck
(Score:4, Insightful)
by Nicolas MONNETI quote from your website:
H1 {font: bold 24px verdana, helvetica, arial, sans-serif; margin-top: 0xp;}
H4 {font: 12px verdana, helvetica, sans-serif; margin-top: 0px; margin-bottom: 10px;}So why, tell me, WHY did you use PIXELS (px) instead of POINTS (pt), thereby overriding my painfully crafted DPI settings, rendering your all page unviewable on my Linux machine?
Jeffrey:
Refer to the answer to Question 2. Also refer to this Word from the WaSP column:
http://www.webstandards.org/wfw/ieah.html
The best way to style text - and the way the W3C recommends - is to use relative sizes or absolute size keywords.
Both these methods are completely broken in Navigator 4. Totally frickin' useless. Don't shoot the messenger. Netscape agrees, and that's why they threw out their old rendering engine and started from scratch.
And absolute size keywords are stupidly mis-supported in IE4/5 for Windows, where "medium" means large, and "small" means medium.
Faced with this maddening stupidity on the part of browser makers, designers/developers have two choices:
Do not style text at all. Have a nice day.
*OR* rely on pixels, which work in all "CSS-capable" browsers.
I sadly choose the latter until the browsers fully comply with W3C standards.
As to POINTS versus pixels, points are absolutely meaningless on the web, and the fact that they are used by thousands of developers who should know better proves only how little CSS is understood by the development community.
Certain point sizes may work on your platform in your style sheet. That proves that certain point sizes work on your platform in your style sheet. Cross-platform it is not transportable, and points are print-based units of measurement that have no meaningful relationship to the wonderful world of monitor resolution.
For a good discussion of CSS problems, see Todd Fahrner's "Beyond the Font Size Tag: Practical HTML Text and Styling" at http://style.metrius.com/font_size /livetext.html (Unfortunately, even some of *THESE* techniques do not work in more recent versions of Navigator 4.)
In a few months, there will be exactly two browsers that get CSS-1 right: Mozilla/Nav 6 for all platforms, and IE5/Mac which we have now. Since neither has dominant marketshare, developers will still face huge obstacles when trying to do something as SIMPLE and BASIC as size text on the web. Many will stick with pixels, which are the only CSS technique that actually WORKS across browsers and platforms.
In addition to all these nightmarish problems with our browsers, there are special challenges with Linux, because unless Linux users install additional scalable fonts, you can follow all the rules for good CSS, and avoid "problem" font sizes, and still create pages that look jaggy or are unreadable on a lot of people's machines. I worry about this all the time, but I don't have a solution for it. I have actually gone back to using the stupid The way to advance the medium is to get absolute font size keywords and relative font sizes right in CSS, finish implementing HTML 4, and give us the W3C DOM, XML, and EcmaScript. (And then wait two years for users to upgrade.)
10) Pixel based alignment and HTML
(Score:4, Insightful)
by mcelrathOne of the most disturbing trends that I see in web design these days is the trend toward trying to control layout at the pixel level. As HTML (Hypertext Markup) was not intended to be a graphics language, what is your comment on this?
Jeffrey:
Separation of style and content is the way forward.
The problem is the browsers.
When I revised my "Ask Dr Web" tutorial at http://www.zeldman.com/askdrweb/, along with other pages at http://www.zeldman.com/, to use CSS layouts instead of tables, certain versions of Navigator 4 began crashing.
Actually crashing from basic CSS-1.
I wrote about this at A List Apart, ("The Day the Browser Died") and because of this, Netscape invested some time and resources to fixing some of these bugs in Navigator 4. It didn't catch them all, and it didn't catch them in Linux. These bugs will never be fully fixed in Navigator 4, because Netscape is wisely spending its energy to finish the Mozilla browser. Unfortunately, this means that Netscape users will continue to face serious usability hazards throughout the web until Netscape 6 is released ... *OR* it means that developers will continue to use TABLES for layouts for the next two years (as Jakob Nielsen has predicted).
If you look at these pages - http://www.zeldman.com/steal.html or http://www.zeldman.com/icon.html are other examples - you will see that we are talking about extremely BASIC layouts. An expert from the CSS pointers group actually volunteered hours of her time trying alternate combinations of the very basic CSS on those pages to see if she could find ways to stop Netscape from crashing. She could not; neither could I. Netscape did what it could for its 4.0 users, but it can't do anything more until the next generation is released.
On my personal site I made the tough decision to leave these pages as-is. I don't have time to recode them all using tables.
You can agree or disagree with that decision.
Linux folks can either use the Mozilla or Opera betas to navigate those pages in safety and comfort.
It's worth noting that W3C pages also crashed Netscape 4, for the same reason.
What happens when Netscape's browser is this badly damaged? I get hate mail from people who don't understand the issues involved. I also got a letter of thanks from Netscape's Eric Krock, because good companies WANT us to help them find bugs in their software.
As an example of this, many sites (including yours) use font size=1 to acheive a font that is fairly uniform in pixel size across browsers. Anyone with a high-resolution screen will tell you that this is highly annoying, since it results in an almost unreadable font.
See above for the explanation as to why developers are stuck using 1994 technology to support late-1990s browsers. The same questions, the same answers.
The good thing - the ONLY good thing - about the font size tag is that it is user-resizable. The rest of this has been answered above.
Forcing netscape to use a larger font size often destroys the layout of the page. What's worse, some pages use dynamic fonts and other features to force this on the user.
Right, although in some cases it is justified.
As another example, many pages use the table , and layer to specify the exact size in pixels of portions of the page, and then put a little notice at the bottom ("This site best viewed at 800x600") or some such.
Yes, that is usually a bad design decision. Whenever possible, I use what Glenn Davis (WaSP and Project Cool co-founder) calls "liquid" design ... design that reflows to exactly fit the visitor's monitor. That's almost always a better way to go. Examples of my liquid designs include http://www.alistapart.com/, http://www.the-adstore.com, and most of zeldman.com. If you dig long enough in zeldman.com, you'll come upon pages older than the NYC subways, that simply use BAD design ... though at the time, it wasn't all that bad.
Liquid design is not always appropriate but it is generally best.
What are standards groups doing to fix this?
Nothing. The W3C can't make better or more intelligent designers out of people, and neither can the WaSP, whose sole purpose is to agitate for W3C standards in browsers (and eventually in web authoring tools).
We can try to lead by example. http://www.webstandards.org/ is liquid (aside from the front page, which is "semi-liquid" owing to the large low-rez graphic) and it validates.
MEMBERS of standards groups can write articles on the subject and hope that people read them. Of course, if people "can't get past" a 4k splash page, they will not learn about my articles on the subject.
Will I be looking at pages designed for 800x600 (or worse, 640x480) with my 1920x1440 screen forever? Will persons with laptops at 640x480 be unable to read the web soon? Will standards bodies ever require percentage-of-screen width and height specifiers, or even better, implement table width=30ch to specify sizes in relation to the current font size?
Standards bodies can recommend certain authoring practices, and they can develop standards that make such practices possible, but they cannot enforce good authoring.
11) Evaluate Slashdot
(Score:5, Interesting)
by Pseudonymus BoschWhat would you change, what would you add, what would you remove in Slashdot?
Jeffrey:
It's a community and it works. It has achieved visibility, notoriety, and even commercial success without giving an inch. Pretty awesome achievement. What would I change?
Sometimes the longer threads take a long time to load, due to back-end technology, platform and server issues. The technology works better on Linux than it does on my platform of choice (Mac OS) but, hey, that's okay.
I know you want me to comment on the design. Design is subjective. Black backgrounds and teal are not my favorite color scheme (though I used black backgrounds at the 1995 Ad Graveyard (http://www.zeldman.com/ad.html) and the January 1997 Furbo Filters so who am I to talk? The main thing I was trying to do at Furbo was get CSS to work - and to let people know about Craig Hockenberry's and my Furbo Filters, which were the only Photoshop plugins at the time that dealt with the web-safe color palette - at least to our knowledge.)
I might change the color scheme and some other things if Rob Malda went on a crack run and asked me to redesign Slashdot, but that ain't likely to happen. And I think the design of Slashdot is just fine. It focuses you on the breaking stories, allows you to read more (or not), and provides access to almost everything else on the site via small navigation units. In terms of usability it is damn good, and it has plenty of attitude.
Of course, it commits the "cardinal sin" of teal, but I can get past that.
12) Do you agree with Nielsen?
(Score:4, Interesting)
by Pseudonymus BoschI have no idea about you and your views, but I have read lots of the Alertbox columns by Jakob Nielsen.
Do you agree with him? Do you disagree? What about?
Jeffrey:
I agree with his comments on oral sex and wearing white after Labor Day.
And I like that he can get $25,000 to talk for an hour. I'll do the same for half that amount.
I also agree with Jakob that most websites should be usable by as many people as possible.
What I have done about that is help found The Web Standards Project, so we can actually achieve that goal instead of using duct tape and lasagna to build sites that work for "most" people. And I try to make my pages accessible in spite of the limitations of current browsers and some of the cross-platform issues discussed above.
If you are interested in my views, you can read them at http://www.alistapart.com/, Adobe.com (here, http://www.adobe.com/we b/columns/zeldman/20000320/main.html, for instance), http://www.webstandards.org/ and of course at http://www.zeldman.com/. If you can get past the 4k splash page.
At least you share the use of TITLE attributes in hyperlinks (a good feature that Slashdot shouldn't chomp away).
Thanks! The reason Slashdot chomps title tags is probably because they are not supported in Netscape yet. They are an important usability feature, and in some browsers they also offer nifty low-grade special effects - along with the opportunity for contextual ampliciation or ironic commentary.
jeffrey
Can't act. Can't sing. Can dance a little.
http://www.zeldman.com
http://www.alistapart.com
http://www.happycog.com
http://www.webstandards.org -
Jeffrey Zeldman Bites Back
We got a lot of (shall we say) slightly impertinent questions for Web Standards Project co-founder Jeffrey Zeldman, but that's okay. He reads Slashdot and knows the nature of the beast, and he's hard-core enough to give as good as he gets. So set your humor module to high, then sit back and enjoy Mr. Zeldman's (appropriately impertinent) answers to the 12 questions we forwarded to him.1) Here's my question:
(Score:5, Insightful)
by FascDot Killed My PrIf you're such a hotshot web designer, why have you committed one of the cardinal sins of web design: Putting an "entry page" that does nothing but suck bandwidth and make it difficult to "back" out of a site?
Jeffrey:
I'll answer this one piece by piece.
"If you're such a hotshot web designer."
Never claimed to be. Roblimo wrote that glowing description. It's not surprising that some of you, who have no idea what I do, were pissed off when those words of high praise took you to a very simple, low-bandwidth, personal site.
I wish Rob had said "Zeldman is a co-founder of The Web Standards Project" (WaSP), and had explained what the WaSP does, maybe even mentioning the role we played in getting Netscape to throw out its old rendering engine and begin building Mozilla around the standards-compliant Gecko core. I'm guessing people would have overlooked my supposed "design sins" or their distaste for the color orange on my personal site if they had a better idea about what I actually do.
For those who don't know, the WaSP organized a petition drive to persuade Netscape to throw out its old rendering engine and build its new browser around Gecko. Then-group-leader George Olsen of WaSP, along with ThunderLizard's Jim Heid, got 2,000 developers to sign the petition. Netscape is a company that listens - at least, for the last two years, it has been listening - and you all know the result: an upcoming browser that is designed to fully comply with HTML 4, CSS-1, the W3C DOM, XML, and EcmaScript.
No disrespect to Roblimo either. I dig the guy. And what he said is true in a sense. I *am* a web designer and writer, and a lot of the work I've done over the past five years *has* gotten imitated, for better or worse. For instance, oddly enough, the original Mozilla.org (http://www.mozilla.org) was copied from the simple HTML-and-CSS layout I did The Web Standards Project (http://www.webstandards.org/): from the technique, to the color palette, to the crude four-pixel black outlines around content areas. Don't bother checking; the new Mozilla layout has evolved away from that original look, though it still bears trace elements of the original design. A lot of you probably do remember the original Mozilla layout. I'm sure when Roblimo saw it, he realized it was copied from http://www.webstandards.org and I think that's the kind of thing he was referring to in his overly kind introduction to my work.
By the way, I wasn't upset by what Mozilla did; I was flattered by it. You may think it is ugly design, though I'm sure that none of you said so to Mozilla because you believe in the project. It's weird to me that the same people who dig Mozilla would be rude in their comments to someone who, at least in a small way, helped influence the direction of that browser, and who also influenced the initial DESIGN of that project, but whatever. I also talk with Microsoft, because the goal of WaSP is to get standards in *all* browsers, and the fact that I talk to engineers at that company may make me evil incarnate in your book. I can deal with that. If we get better browsers, I'll be satisfied.
I do get copied a lot and often those copies are better than the original. In that sense "VIEW SOURCE" functions like "OPEN SOURCE." ;) I am happy when someone takes an idea of mine and makes it better (and their own).
"why have you committed one of the cardinal sins of web design"
I've been designing websites for five years. I don't claim to be a genius and I'm far from the best designer on the planet, but your take on cardinal sins of a profession you do not participate in is about as meaningful as my comments on your programming decisions would be.
You are parroting Jakob Nielsen or some other expert whose work you've read. You haven't read my work on the same subject (no problem) and you don't know my work as a designer (no problem). Just as in programming, design is about decisions. A designer never sins. He/she makes informed decisions. If you get to know the work, you may understand why those decisions were made. If you never bother to engage with the work - if you merely believe that all design must conform with a small set of rules written by one or two people - you don't understand the nature of the thing you are criticizing. Especially if you spend all of five seconds looking at it, and then rush to be the first to post a rant. There are rules of grammar, too, and James Joyce threw them all out. True, I ain't him. But I am me. All designers make decisions, and if the entire web looked like http://www.useit.com I don't think that would be such a great thing. Anything that departs from the look of http://www.useit.com is violating at least a few of Jakob's "rules," and that's the nature of the beast.
"Putting [up] an 'entry page' that does nothing but suck bandwidth and make it difficult to "back" out of a site?"
The bandwidth sucked is exactly 4K. I think you can handle it.
The "entry page" is a temporary placeholder while I rethink the front end of my personal site. Notice the words "temporary," "placeholder," and "personal." The previous front page was navigational in nature, and it is archived at http://www.zeldman.com/mozillatest.html . The name refers to the fact that the page revealed a bug in recent builds of Mozilla. I have left it online so the Mozilla folks can use it to track down and fix that bug, which they are doing now.
Recently, I've been focused on WaSP and A List Apart (http://www.alistapart.com/), a web design magazine and mailing list I co-founded with Brian Platz. The content on my personal site (275+ pages) has not been my most recent focus, so I determined a while back that it was silly to stop the visitor with a primarily navigational page. I should explain that some people visit zeldman.com for entertainment like The Ad Graveyard; a completely different audience visits for web design info, such as the Ask Dr Web tutorial; and so on. To accommodate those very different visitors, I initially had a core page that was navigational. I didn't put real content on page one, because I was accommodating maybe six completely different audiences, and there was nothing in all that content that would appeal to ALL of them. On http://www.alistapart.com/ I start with content on page one, because the audience is more unified.
Even that old navigational page (http://www.zeldman.com/mozillatest.html), with all its rollovers etc., was very low-bandwidth. I recently got to look at it while stuck at an airport in Stockholm. The airport had five Windows boxes sharing one 56K modem. I looked at some of my favorite sites, and they were all crawling onto the screen. I was pleased that my own front page loaded instantly. I design for low bandwidth, which explains why my work rarely looks like that of "such a hot shit designer." Back to the point. I haven't yet figured out how to restructure the front end of my site, so I put up a 4K placeholder with a bone-simple rollover and a 6 second refresh to the single page at my site that I have been focusing on lately.
Now you know why I have a temporary entry page; now you know why it does "nothing" (it is temporary, and what it does is redirect you); and now you know that it does not suck bandwidth.
How it "makes it difficult to 'back' out of the site" is a mystery to me, so I can't comment on that clause in your question. Personally I find database driven pages much harder to navigate and back out of than 4K html pages. And with browsers that suck, frames-based pages can also be tough to navigate. My 4K page is frameless HTML.
2) I have a question:
(Score:4, Insightful)
by SkinkaWhat's with that small font www.zeldman.com, haven't you read any (web) usability guides?
Jeffrey:
Yes, I've read them, yes I've written on the subject, yes yes yes.
Along with another WaSP member, I helped influence Microsoft to make ALL web text resizable by the user in IE5/Mac for reasons of accessibility and usability, and we are hoping to get the same from Mozilla. (At the moment, this feature is only available in IE5/Mac. It should be in every browser. It's not in the Windows version of IE and it's obviously not in the current version of Navigator.)
Why small fonts? Personal design decision on a personal site. You can enlarge the type in some browsers, not all. That day is coming.
There are methods of CSS that allow you to resize type in *all* browsers.
Why do I often avoid those methods?
Because they are not supported in most "CSS-capable" browsers.
Absolute font-size keywords are broken in Navigator 4 (all platforms) and IE5/Windows.
Percentages and ems are broken in Netscape 4.
Points are meaningless on computer screens, and the reliance on points in Style Sheets is a widespread authoring error.
Until all browsers support standards, designers will be stuck using pixels or FONT SIZE tags. Or simply making no effort at all to control the appearance and size of type on the web page. If this bothers you, join The Web Standards Project.
(Warning: it is orange. If you "can't get past the color" then I guess you'll have to let big browser companies determine the fate of the web.)
Unless you design web sites every day, you have no idea of the compatibility nightmares involved. But in your own work, I'm sure you have plenty of examples of brain-dead decisions by others that force you to use hacks and workarounds. It's the same in web design.
At the moment, the main text at http://www.zeldman.com/coming.html (the one page in all my work that most Slashdotters seem to have looked at) is laid out with ems. This is wonderful, scalable technology. You can easily enlarge or reduce the type in just about any browser.
Except, of course, that it doesn't work at all in most versions of Navigator 4. If you're using Navigator - and you know you are - you will see large ugly type, not the type treatment I intended. Until we have standards, that's just the way it will be.
3) Not to flame, but...
(Score:5, Insightful)
by mr.nobodyI find it hard to ask HTML questions to someone who has committed the cardinal sin of taking away the status bar with JavaScript.
Jeffrey:
Another cardinal sin.
Hmm. Let's see.
The status bar *does* reveal the url of the page it links to - just like an untreated status bar would do. It also provides ADDITIONAL INFORMATION AND COMMENTARY. I guess that's a bad thing. I can't see why, but I guess I'll take your word for it. URL = good, URL + additional information = bad. Because you say so.
The title tag also provides additional information, but Question #12 told me that that was okay, even good. Whew! That's a relief.
4) where's the interview
(Score:4, Interesting)
by geekpressJeff, I programmed for a web design company in which design issues totally trumped more practical concerns like download time. (In one case, I was forced to create absurdly complex html tables just so that the designer could get his one-pixel rounded corners on his notecard design.) What do you see as the appropriate balance between aesthetics and practical usability?
P.S. That company is now out of business, thank goodness!
Jeffrey:
I almost always design for low bandwidth.
I was creative director at a web firm and had designed a layout with thin black borders (yes I do this same thing over and over again) for a database driven site that would be creating tables on the fly. The design effect would not render in Navigator, but the page still looked fine in Navigator, even without those little black outlines.
It was possible to FORCE Navigator to display the effect by surrounding every table with an additional, empty table. That is sometimes okay, obviously - I've been doing it since we could begin applying rudimentary styling to tables - but on a large page full of data, it would unnecessarily increase the bandwidth per page, force all browsers to burn cycles as they calculated the appearance of complex table-in-table displays, possibly cause display errors, and completely yoke the content to the presentation, making it that much harder to fix later, when we have better browsers.
So I told the company president it was a usability nightmare and a waste of resources and bandwidth and therefore not worth doing.
He told me to do it anyway.
So I quit my job and started my own company.
Rounded edges, high bandwidth, all that stuff can be fine in the right situations, as long as alternatives are provided and rules of accessibility are respected. Usually I persuade my clients to go in the low-bandwidth direction, and I almost always go low-bandwidth on the noncommercial sites I do (zeldman.com, http://www.webstandards.org/ and http://www.alistapart.com/ ).
But high bandwidth is fine for the right audience. Consider http://www.praystation.com, which is a brilliantly designed site by Joshua Davis. It's amazing work. The audience for that site is primarily Joshua's fellow designers, and most of them have T1 or DSL access. Since the site's goal is to push design as far as it can go on the web, and since the audience is known to have fast connections and a desire to see great design, there is absolutely nothing wrong (and lot right) with the higher-bandwidth road taken by this project.
5) Optimism?
(Score:5, Funny)
by ChalstHow hopeful are you that Microsoft can be coaxed into making IE standards compliant? What exactly do you think Microsoft's motive was in not supporting HTML 4.0 completely?
Jeffrey:
It varies by the hour. Sometimes I think they are going to do this and simply have not committed to it because they're not sure they can pull it off. Sometimes I suspect that as the current market leader (guys with the most users) they think they don't have to bother with this. ("Our way *is* the standard." That kind of thinking.) And sometimes I reckon that they're doing this to fuck up Mozilla. ("You're going to support standards? Well, we have more users. You lose.") I don't *know* what they're thinking, but I suspect that different people there are thinking combinations of all the above.
I do know there are engineers there who are committed to supporting standards. Not only because I've met some of them through my work with WaSP, but also because - in the case of IE5/Mac - they've actually pulled it off. Remember, Microsoft (along with Netscape, Sun, invited experts, etc.) helped come up with these standards in the first place. Why would you design blueprints and then not follow them when you build the house? The engineers who participate in the standards process are committed to complying with standards. Some people in management may not be. Or they may be delaying, for short-sighted competitive reasons, or from fear of committing until they are sure they can do it right.
HTML 4 - the LAST HTML - includes dozens of accessibility improvements, and it is insane for any company not to fully support that. Without full support for HTML 4, millions of web users get hurt. That's morally wrong, and it's also just plain bad for business. I think that in time, all browser companies, including Microsoft, will come to see that. I also think the W3C's recent hiring of a conformance manager (http://xmlhack.com/read.php?item=517) signals that the W3C will soon take a more active role in "helping" companies get with the program, support standards, and stop screwing up developers and web users in a game where everybody - including the browser companies - eventually loses.
6) Balancing Technologies
(Score:5, Insightful)
by ProteusAs you are no doubt aware, the technology that drives web site design is advancing rapidly. However, there are still a lot of users who run older browsers, or prefer to use text-only browsers such as Lynx.
Obviously, one wants to reach as large an audience as possible, but not "lag behind" too far. How do you go about balancing the use of newer technology on a site without alienating users of older software, disabled users, and text-only browsers?
Jeffrey:
Using HTML 4, ALT tags, and the TITLE tag goes a long way toward achieving this goal.
So does using CSS for type, instead of FONT FACE and FONT SIZE tags that yoke content to presentation.
I do both these things, and all the other little things you have to do, for instance with framesets. I think there may be some really old (1996) framesets at zeldman.com where I left out full content inside the noframes tags. I'm cleaning that up as quickly as I can. At ALA http://www.alistapart.com/), wherever I used framesets, I included the full text inside the noframes tags, and I also included TEXT versions of all articles.
The next stage is full separation of content from structure, and that means using HTML 4 and CSS (and eventually, replacing HTML 4 with XHTML; and eventually, migrating to XML).
We can't safely do that yet. Gecko is still in development, Netscape 4 has appalling "support" for CSS, IE5/Windows has better but far from complete support, and the only released browser that gets it right - IE5/Mac - has a 6% market share.
SOON. Not soon enough, but SOON, we will look back on this era of stupidity and laugh. Oh, how we will laugh. This is the TRON era and we are striving to reach the MATRIX era.
7) Reverse scenario question...
(Score:5, Interesting)
by Jonny RoyaleHave you ever seen anything come from a browser publisher "extending" a standard (Microsoft, Netscape, other), and thought "Gee, I wish that was in the standard"? Examples?
Jeffrey:
Yes.
LOW SRC was a funky old tag from Netscape (dating back to Netscape 1.1) that allowed you to slip a low-bandwidth image into place, and then have it replaced by the more bandwidth-intensive image when the latter finished downloading. For people with very slow connections, it was a useful hack. It also enabled creative web designers to add a certain amount of "SFX magic" (cough) to even the most primitive pages, viewed by the oldest browsers, under the most adverse conditions. That's gone. Too bad. I miss it.
Because of browser offsets in all released versions of Navigator and most versions of Explorer, I wish the "four horsemen of non-validation" (leftmargin, topmargin marginwidth and marginheight) had made it into HTML 4.0 transitional. We won't need them eventually, but until the browsers are smarter, we still do need them. The W3C is always ahead of what the browsers can deliver, of course; but by discouraging these dumb proprietary tags, the W3C has put us in the position where PAGES THAT WILL NOT WORK without these tags will fail at http://validator.w3.org. That kind of failure discourages developers from building standards-compliant pages. It is a small thing, and it is transitional, but DURING THE TRANSITION, I would have liked to see those four stupid tags get approval with a benevolent sigh.
On the other hand, designers who know what they are doing may include these tags and ignore those validation errors, but don't tell the W3C I said so.
Given the brain-dead way Navigator 4 and IE4/5/Windows handled absolute font size keywords in CSS, I *sometimes* wish font size tags were not discouraged YET. I hate them and hardly ever use them, but (for instance) there's no way to get small type in Linux that is actually READABLE without relying on these dumb old non-standard tags. What I really wish in this case, of course, is that Netscape and Microsoft hadn't fucked up this simple CSS technology. So I take the FONT SIZE tags thing back. Uh, never mind. I just wish Netscape and Microsoft had gotten CSS right the first time.
8) Banners
(Score:5, Interesting)
by TheTomcatThis is only vaguely related to design, but directly related to the web, and functionality.
We all know that banners don't work anymore. The only way a business can profit from banners is to show thousands per day. Most users don't even SEE banners anymore. We avoid them the same way we dig in the couch for the remote when commercials interrupt The Simpsons.
Do you have any suggestions to make future, content-based sites profitable?
Jeffrey:
There are several issues here. One is, a lot of the best work is done as a labor of love, and always will be. Those who need a revenue model before they are willing to even think about working will lose one of the golden opportunities of the web, which is free expression and the building of communities, regardless of financial issues. For instance, Slashdot was born as a community and still is one. Eventually, Slashdot got into a position where it could make money, but Slashdot is true to itself and was not corrupted or changed by any commercial considerations. So it is possible to make a good thing and not blow it when the cash register starts jingling. But a lot of other sites and communities have turned to dreck when money was involved.
We all agree that banners suck - Roblimo even wrote an article for ALA on that subject, back when ALA was just getting launched. With a big enough readership, banners *can* be profitable, as they are at Slashdot. But I agree that most of us just hate 'em.
Sponsorships are another possible means of revenue. "This issue of Webmonkey brought to you by Hewlett-Packard." With an entertaining HP minisite available at the click of a link, for those who care. Kaliber 10000 (http://www.k10k.net) has gotten Apple sponsorship, and all that means is, there's a tiny Apple link in the top right hand corner of the front page. If you click it, you get a popup window with text on why the site's designers like their Macs, and links to some current movies in Apple Quicktime format.
The Cluetrain guys have spoken about this model of corporate sponsorship as well.
I think about it sometimes. For instance, http://www.alistapart.com/ could be "brought to you by" Macromedia or Adobe. But to tell the truth, I don't really pursue this idea because I'm not motivated by money when it comes to creating web content. I simply want to create or choose the right content, and totally control it, and I'm not sanguine that I could do that if I *had* corporate sponsorship. Thinking about it some more is on my to-do list, but it's about 500 layers down in the list. I make enough money designing websites that I don't worry about "revenue models" for my content sites. It is a real issue, though. Just one I haven't bothered with personally, yet.
9) Jeff, your CSS suck
(Score:4, Insightful)
by Nicolas MONNETI quote from your website:
H1 {font: bold 24px verdana, helvetica, arial, sans-serif; margin-top: 0xp;}
H4 {font: 12px verdana, helvetica, sans-serif; margin-top: 0px; margin-bottom: 10px;}So why, tell me, WHY did you use PIXELS (px) instead of POINTS (pt), thereby overriding my painfully crafted DPI settings, rendering your all page unviewable on my Linux machine?
Jeffrey:
Refer to the answer to Question 2. Also refer to this Word from the WaSP column:
http://www.webstandards.org/wfw/ieah.html
The best way to style text - and the way the W3C recommends - is to use relative sizes or absolute size keywords.
Both these methods are completely broken in Navigator 4. Totally frickin' useless. Don't shoot the messenger. Netscape agrees, and that's why they threw out their old rendering engine and started from scratch.
And absolute size keywords are stupidly mis-supported in IE4/5 for Windows, where "medium" means large, and "small" means medium.
Faced with this maddening stupidity on the part of browser makers, designers/developers have two choices:
Do not style text at all. Have a nice day.
*OR* rely on pixels, which work in all "CSS-capable" browsers.
I sadly choose the latter until the browsers fully comply with W3C standards.
As to POINTS versus pixels, points are absolutely meaningless on the web, and the fact that they are used by thousands of developers who should know better proves only how little CSS is understood by the development community.
Certain point sizes may work on your platform in your style sheet. That proves that certain point sizes work on your platform in your style sheet. Cross-platform it is not transportable, and points are print-based units of measurement that have no meaningful relationship to the wonderful world of monitor resolution.
For a good discussion of CSS problems, see Todd Fahrner's "Beyond the Font Size Tag: Practical HTML Text and Styling" at http://style.metrius.com/font_size /livetext.html (Unfortunately, even some of *THESE* techniques do not work in more recent versions of Navigator 4.)
In a few months, there will be exactly two browsers that get CSS-1 right: Mozilla/Nav 6 for all platforms, and IE5/Mac which we have now. Since neither has dominant marketshare, developers will still face huge obstacles when trying to do something as SIMPLE and BASIC as size text on the web. Many will stick with pixels, which are the only CSS technique that actually WORKS across browsers and platforms.
In addition to all these nightmarish problems with our browsers, there are special challenges with Linux, because unless Linux users install additional scalable fonts, you can follow all the rules for good CSS, and avoid "problem" font sizes, and still create pages that look jaggy or are unreadable on a lot of people's machines. I worry about this all the time, but I don't have a solution for it. I have actually gone back to using the stupid The way to advance the medium is to get absolute font size keywords and relative font sizes right in CSS, finish implementing HTML 4, and give us the W3C DOM, XML, and EcmaScript. (And then wait two years for users to upgrade.)
10) Pixel based alignment and HTML
(Score:4, Insightful)
by mcelrathOne of the most disturbing trends that I see in web design these days is the trend toward trying to control layout at the pixel level. As HTML (Hypertext Markup) was not intended to be a graphics language, what is your comment on this?
Jeffrey:
Separation of style and content is the way forward.
The problem is the browsers.
When I revised my "Ask Dr Web" tutorial at http://www.zeldman.com/askdrweb/, along with other pages at http://www.zeldman.com/, to use CSS layouts instead of tables, certain versions of Navigator 4 began crashing.
Actually crashing from basic CSS-1.
I wrote about this at A List Apart, ("The Day the Browser Died") and because of this, Netscape invested some time and resources to fixing some of these bugs in Navigator 4. It didn't catch them all, and it didn't catch them in Linux. These bugs will never be fully fixed in Navigator 4, because Netscape is wisely spending its energy to finish the Mozilla browser. Unfortunately, this means that Netscape users will continue to face serious usability hazards throughout the web until Netscape 6 is released ... *OR* it means that developers will continue to use TABLES for layouts for the next two years (as Jakob Nielsen has predicted).
If you look at these pages - http://www.zeldman.com/steal.html or http://www.zeldman.com/icon.html are other examples - you will see that we are talking about extremely BASIC layouts. An expert from the CSS pointers group actually volunteered hours of her time trying alternate combinations of the very basic CSS on those pages to see if she could find ways to stop Netscape from crashing. She could not; neither could I. Netscape did what it could for its 4.0 users, but it can't do anything more until the next generation is released.
On my personal site I made the tough decision to leave these pages as-is. I don't have time to recode them all using tables.
You can agree or disagree with that decision.
Linux folks can either use the Mozilla or Opera betas to navigate those pages in safety and comfort.
It's worth noting that W3C pages also crashed Netscape 4, for the same reason.
What happens when Netscape's browser is this badly damaged? I get hate mail from people who don't understand the issues involved. I also got a letter of thanks from Netscape's Eric Krock, because good companies WANT us to help them find bugs in their software.
As an example of this, many sites (including yours) use font size=1 to acheive a font that is fairly uniform in pixel size across browsers. Anyone with a high-resolution screen will tell you that this is highly annoying, since it results in an almost unreadable font.
See above for the explanation as to why developers are stuck using 1994 technology to support late-1990s browsers. The same questions, the same answers.
The good thing - the ONLY good thing - about the font size tag is that it is user-resizable. The rest of this has been answered above.
Forcing netscape to use a larger font size often destroys the layout of the page. What's worse, some pages use dynamic fonts and other features to force this on the user.
Right, although in some cases it is justified.
As another example, many pages use the table , and layer to specify the exact size in pixels of portions of the page, and then put a little notice at the bottom ("This site best viewed at 800x600") or some such.
Yes, that is usually a bad design decision. Whenever possible, I use what Glenn Davis (WaSP and Project Cool co-founder) calls "liquid" design ... design that reflows to exactly fit the visitor's monitor. That's almost always a better way to go. Examples of my liquid designs include http://www.alistapart.com/, http://www.the-adstore.com, and most of zeldman.com. If you dig long enough in zeldman.com, you'll come upon pages older than the NYC subways, that simply use BAD design ... though at the time, it wasn't all that bad.
Liquid design is not always appropriate but it is generally best.
What are standards groups doing to fix this?
Nothing. The W3C can't make better or more intelligent designers out of people, and neither can the WaSP, whose sole purpose is to agitate for W3C standards in browsers (and eventually in web authoring tools).
We can try to lead by example. http://www.webstandards.org/ is liquid (aside from the front page, which is "semi-liquid" owing to the large low-rez graphic) and it validates.
MEMBERS of standards groups can write articles on the subject and hope that people read them. Of course, if people "can't get past" a 4k splash page, they will not learn about my articles on the subject.
Will I be looking at pages designed for 800x600 (or worse, 640x480) with my 1920x1440 screen forever? Will persons with laptops at 640x480 be unable to read the web soon? Will standards bodies ever require percentage-of-screen width and height specifiers, or even better, implement table width=30ch to specify sizes in relation to the current font size?
Standards bodies can recommend certain authoring practices, and they can develop standards that make such practices possible, but they cannot enforce good authoring.
11) Evaluate Slashdot
(Score:5, Interesting)
by Pseudonymus BoschWhat would you change, what would you add, what would you remove in Slashdot?
Jeffrey:
It's a community and it works. It has achieved visibility, notoriety, and even commercial success without giving an inch. Pretty awesome achievement. What would I change?
Sometimes the longer threads take a long time to load, due to back-end technology, platform and server issues. The technology works better on Linux than it does on my platform of choice (Mac OS) but, hey, that's okay.
I know you want me to comment on the design. Design is subjective. Black backgrounds and teal are not my favorite color scheme (though I used black backgrounds at the 1995 Ad Graveyard (http://www.zeldman.com/ad.html) and the January 1997 Furbo Filters so who am I to talk? The main thing I was trying to do at Furbo was get CSS to work - and to let people know about Craig Hockenberry's and my Furbo Filters, which were the only Photoshop plugins at the time that dealt with the web-safe color palette - at least to our knowledge.)
I might change the color scheme and some other things if Rob Malda went on a crack run and asked me to redesign Slashdot, but that ain't likely to happen. And I think the design of Slashdot is just fine. It focuses you on the breaking stories, allows you to read more (or not), and provides access to almost everything else on the site via small navigation units. In terms of usability it is damn good, and it has plenty of attitude.
Of course, it commits the "cardinal sin" of teal, but I can get past that.
12) Do you agree with Nielsen?
(Score:4, Interesting)
by Pseudonymus BoschI have no idea about you and your views, but I have read lots of the Alertbox columns by Jakob Nielsen.
Do you agree with him? Do you disagree? What about?
Jeffrey:
I agree with his comments on oral sex and wearing white after Labor Day.
And I like that he can get $25,000 to talk for an hour. I'll do the same for half that amount.
I also agree with Jakob that most websites should be usable by as many people as possible.
What I have done about that is help found The Web Standards Project, so we can actually achieve that goal instead of using duct tape and lasagna to build sites that work for "most" people. And I try to make my pages accessible in spite of the limitations of current browsers and some of the cross-platform issues discussed above.
If you are interested in my views, you can read them at http://www.alistapart.com/, Adobe.com (here, http://www.adobe.com/we b/columns/zeldman/20000320/main.html, for instance), http://www.webstandards.org/ and of course at http://www.zeldman.com/. If you can get past the 4k splash page.
At least you share the use of TITLE attributes in hyperlinks (a good feature that Slashdot shouldn't chomp away).
Thanks! The reason Slashdot chomps title tags is probably because they are not supported in Netscape yet. They are an important usability feature, and in some browsers they also offer nifty low-grade special effects - along with the opportunity for contextual ampliciation or ironic commentary.
jeffrey
Can't act. Can't sing. Can dance a little.
http://www.zeldman.com
http://www.alistapart.com
http://www.happycog.com
http://www.webstandards.org -
Jeffrey Zeldman Bites Back
We got a lot of (shall we say) slightly impertinent questions for Web Standards Project co-founder Jeffrey Zeldman, but that's okay. He reads Slashdot and knows the nature of the beast, and he's hard-core enough to give as good as he gets. So set your humor module to high, then sit back and enjoy Mr. Zeldman's (appropriately impertinent) answers to the 12 questions we forwarded to him.1) Here's my question:
(Score:5, Insightful)
by FascDot Killed My PrIf you're such a hotshot web designer, why have you committed one of the cardinal sins of web design: Putting an "entry page" that does nothing but suck bandwidth and make it difficult to "back" out of a site?
Jeffrey:
I'll answer this one piece by piece.
"If you're such a hotshot web designer."
Never claimed to be. Roblimo wrote that glowing description. It's not surprising that some of you, who have no idea what I do, were pissed off when those words of high praise took you to a very simple, low-bandwidth, personal site.
I wish Rob had said "Zeldman is a co-founder of The Web Standards Project" (WaSP), and had explained what the WaSP does, maybe even mentioning the role we played in getting Netscape to throw out its old rendering engine and begin building Mozilla around the standards-compliant Gecko core. I'm guessing people would have overlooked my supposed "design sins" or their distaste for the color orange on my personal site if they had a better idea about what I actually do.
For those who don't know, the WaSP organized a petition drive to persuade Netscape to throw out its old rendering engine and build its new browser around Gecko. Then-group-leader George Olsen of WaSP, along with ThunderLizard's Jim Heid, got 2,000 developers to sign the petition. Netscape is a company that listens - at least, for the last two years, it has been listening - and you all know the result: an upcoming browser that is designed to fully comply with HTML 4, CSS-1, the W3C DOM, XML, and EcmaScript.
No disrespect to Roblimo either. I dig the guy. And what he said is true in a sense. I *am* a web designer and writer, and a lot of the work I've done over the past five years *has* gotten imitated, for better or worse. For instance, oddly enough, the original Mozilla.org (http://www.mozilla.org) was copied from the simple HTML-and-CSS layout I did The Web Standards Project (http://www.webstandards.org/): from the technique, to the color palette, to the crude four-pixel black outlines around content areas. Don't bother checking; the new Mozilla layout has evolved away from that original look, though it still bears trace elements of the original design. A lot of you probably do remember the original Mozilla layout. I'm sure when Roblimo saw it, he realized it was copied from http://www.webstandards.org and I think that's the kind of thing he was referring to in his overly kind introduction to my work.
By the way, I wasn't upset by what Mozilla did; I was flattered by it. You may think it is ugly design, though I'm sure that none of you said so to Mozilla because you believe in the project. It's weird to me that the same people who dig Mozilla would be rude in their comments to someone who, at least in a small way, helped influence the direction of that browser, and who also influenced the initial DESIGN of that project, but whatever. I also talk with Microsoft, because the goal of WaSP is to get standards in *all* browsers, and the fact that I talk to engineers at that company may make me evil incarnate in your book. I can deal with that. If we get better browsers, I'll be satisfied.
I do get copied a lot and often those copies are better than the original. In that sense "VIEW SOURCE" functions like "OPEN SOURCE." ;) I am happy when someone takes an idea of mine and makes it better (and their own).
"why have you committed one of the cardinal sins of web design"
I've been designing websites for five years. I don't claim to be a genius and I'm far from the best designer on the planet, but your take on cardinal sins of a profession you do not participate in is about as meaningful as my comments on your programming decisions would be.
You are parroting Jakob Nielsen or some other expert whose work you've read. You haven't read my work on the same subject (no problem) and you don't know my work as a designer (no problem). Just as in programming, design is about decisions. A designer never sins. He/she makes informed decisions. If you get to know the work, you may understand why those decisions were made. If you never bother to engage with the work - if you merely believe that all design must conform with a small set of rules written by one or two people - you don't understand the nature of the thing you are criticizing. Especially if you spend all of five seconds looking at it, and then rush to be the first to post a rant. There are rules of grammar, too, and James Joyce threw them all out. True, I ain't him. But I am me. All designers make decisions, and if the entire web looked like http://www.useit.com I don't think that would be such a great thing. Anything that departs from the look of http://www.useit.com is violating at least a few of Jakob's "rules," and that's the nature of the beast.
"Putting [up] an 'entry page' that does nothing but suck bandwidth and make it difficult to "back" out of a site?"
The bandwidth sucked is exactly 4K. I think you can handle it.
The "entry page" is a temporary placeholder while I rethink the front end of my personal site. Notice the words "temporary," "placeholder," and "personal." The previous front page was navigational in nature, and it is archived at http://www.zeldman.com/mozillatest.html . The name refers to the fact that the page revealed a bug in recent builds of Mozilla. I have left it online so the Mozilla folks can use it to track down and fix that bug, which they are doing now.
Recently, I've been focused on WaSP and A List Apart (http://www.alistapart.com/), a web design magazine and mailing list I co-founded with Brian Platz. The content on my personal site (275+ pages) has not been my most recent focus, so I determined a while back that it was silly to stop the visitor with a primarily navigational page. I should explain that some people visit zeldman.com for entertainment like The Ad Graveyard; a completely different audience visits for web design info, such as the Ask Dr Web tutorial; and so on. To accommodate those very different visitors, I initially had a core page that was navigational. I didn't put real content on page one, because I was accommodating maybe six completely different audiences, and there was nothing in all that content that would appeal to ALL of them. On http://www.alistapart.com/ I start with content on page one, because the audience is more unified.
Even that old navigational page (http://www.zeldman.com/mozillatest.html), with all its rollovers etc., was very low-bandwidth. I recently got to look at it while stuck at an airport in Stockholm. The airport had five Windows boxes sharing one 56K modem. I looked at some of my favorite sites, and they were all crawling onto the screen. I was pleased that my own front page loaded instantly. I design for low bandwidth, which explains why my work rarely looks like that of "such a hot shit designer." Back to the point. I haven't yet figured out how to restructure the front end of my site, so I put up a 4K placeholder with a bone-simple rollover and a 6 second refresh to the single page at my site that I have been focusing on lately.
Now you know why I have a temporary entry page; now you know why it does "nothing" (it is temporary, and what it does is redirect you); and now you know that it does not suck bandwidth.
How it "makes it difficult to 'back' out of the site" is a mystery to me, so I can't comment on that clause in your question. Personally I find database driven pages much harder to navigate and back out of than 4K html pages. And with browsers that suck, frames-based pages can also be tough to navigate. My 4K page is frameless HTML.
2) I have a question:
(Score:4, Insightful)
by SkinkaWhat's with that small font www.zeldman.com, haven't you read any (web) usability guides?
Jeffrey:
Yes, I've read them, yes I've written on the subject, yes yes yes.
Along with another WaSP member, I helped influence Microsoft to make ALL web text resizable by the user in IE5/Mac for reasons of accessibility and usability, and we are hoping to get the same from Mozilla. (At the moment, this feature is only available in IE5/Mac. It should be in every browser. It's not in the Windows version of IE and it's obviously not in the current version of Navigator.)
Why small fonts? Personal design decision on a personal site. You can enlarge the type in some browsers, not all. That day is coming.
There are methods of CSS that allow you to resize type in *all* browsers.
Why do I often avoid those methods?
Because they are not supported in most "CSS-capable" browsers.
Absolute font-size keywords are broken in Navigator 4 (all platforms) and IE5/Windows.
Percentages and ems are broken in Netscape 4.
Points are meaningless on computer screens, and the reliance on points in Style Sheets is a widespread authoring error.
Until all browsers support standards, designers will be stuck using pixels or FONT SIZE tags. Or simply making no effort at all to control the appearance and size of type on the web page. If this bothers you, join The Web Standards Project.
(Warning: it is orange. If you "can't get past the color" then I guess you'll have to let big browser companies determine the fate of the web.)
Unless you design web sites every day, you have no idea of the compatibility nightmares involved. But in your own work, I'm sure you have plenty of examples of brain-dead decisions by others that force you to use hacks and workarounds. It's the same in web design.
At the moment, the main text at http://www.zeldman.com/coming.html (the one page in all my work that most Slashdotters seem to have looked at) is laid out with ems. This is wonderful, scalable technology. You can easily enlarge or reduce the type in just about any browser.
Except, of course, that it doesn't work at all in most versions of Navigator 4. If you're using Navigator - and you know you are - you will see large ugly type, not the type treatment I intended. Until we have standards, that's just the way it will be.
3) Not to flame, but...
(Score:5, Insightful)
by mr.nobodyI find it hard to ask HTML questions to someone who has committed the cardinal sin of taking away the status bar with JavaScript.
Jeffrey:
Another cardinal sin.
Hmm. Let's see.
The status bar *does* reveal the url of the page it links to - just like an untreated status bar would do. It also provides ADDITIONAL INFORMATION AND COMMENTARY. I guess that's a bad thing. I can't see why, but I guess I'll take your word for it. URL = good, URL + additional information = bad. Because you say so.
The title tag also provides additional information, but Question #12 told me that that was okay, even good. Whew! That's a relief.
4) where's the interview
(Score:4, Interesting)
by geekpressJeff, I programmed for a web design company in which design issues totally trumped more practical concerns like download time. (In one case, I was forced to create absurdly complex html tables just so that the designer could get his one-pixel rounded corners on his notecard design.) What do you see as the appropriate balance between aesthetics and practical usability?
P.S. That company is now out of business, thank goodness!
Jeffrey:
I almost always design for low bandwidth.
I was creative director at a web firm and had designed a layout with thin black borders (yes I do this same thing over and over again) for a database driven site that would be creating tables on the fly. The design effect would not render in Navigator, but the page still looked fine in Navigator, even without those little black outlines.
It was possible to FORCE Navigator to display the effect by surrounding every table with an additional, empty table. That is sometimes okay, obviously - I've been doing it since we could begin applying rudimentary styling to tables - but on a large page full of data, it would unnecessarily increase the bandwidth per page, force all browsers to burn cycles as they calculated the appearance of complex table-in-table displays, possibly cause display errors, and completely yoke the content to the presentation, making it that much harder to fix later, when we have better browsers.
So I told the company president it was a usability nightmare and a waste of resources and bandwidth and therefore not worth doing.
He told me to do it anyway.
So I quit my job and started my own company.
Rounded edges, high bandwidth, all that stuff can be fine in the right situations, as long as alternatives are provided and rules of accessibility are respected. Usually I persuade my clients to go in the low-bandwidth direction, and I almost always go low-bandwidth on the noncommercial sites I do (zeldman.com, http://www.webstandards.org/ and http://www.alistapart.com/ ).
But high bandwidth is fine for the right audience. Consider http://www.praystation.com, which is a brilliantly designed site by Joshua Davis. It's amazing work. The audience for that site is primarily Joshua's fellow designers, and most of them have T1 or DSL access. Since the site's goal is to push design as far as it can go on the web, and since the audience is known to have fast connections and a desire to see great design, there is absolutely nothing wrong (and lot right) with the higher-bandwidth road taken by this project.
5) Optimism?
(Score:5, Funny)
by ChalstHow hopeful are you that Microsoft can be coaxed into making IE standards compliant? What exactly do you think Microsoft's motive was in not supporting HTML 4.0 completely?
Jeffrey:
It varies by the hour. Sometimes I think they are going to do this and simply have not committed to it because they're not sure they can pull it off. Sometimes I suspect that as the current market leader (guys with the most users) they think they don't have to bother with this. ("Our way *is* the standard." That kind of thinking.) And sometimes I reckon that they're doing this to fuck up Mozilla. ("You're going to support standards? Well, we have more users. You lose.") I don't *know* what they're thinking, but I suspect that different people there are thinking combinations of all the above.
I do know there are engineers there who are committed to supporting standards. Not only because I've met some of them through my work with WaSP, but also because - in the case of IE5/Mac - they've actually pulled it off. Remember, Microsoft (along with Netscape, Sun, invited experts, etc.) helped come up with these standards in the first place. Why would you design blueprints and then not follow them when you build the house? The engineers who participate in the standards process are committed to complying with standards. Some people in management may not be. Or they may be delaying, for short-sighted competitive reasons, or from fear of committing until they are sure they can do it right.
HTML 4 - the LAST HTML - includes dozens of accessibility improvements, and it is insane for any company not to fully support that. Without full support for HTML 4, millions of web users get hurt. That's morally wrong, and it's also just plain bad for business. I think that in time, all browser companies, including Microsoft, will come to see that. I also think the W3C's recent hiring of a conformance manager (http://xmlhack.com/read.php?item=517) signals that the W3C will soon take a more active role in "helping" companies get with the program, support standards, and stop screwing up developers and web users in a game where everybody - including the browser companies - eventually loses.
6) Balancing Technologies
(Score:5, Insightful)
by ProteusAs you are no doubt aware, the technology that drives web site design is advancing rapidly. However, there are still a lot of users who run older browsers, or prefer to use text-only browsers such as Lynx.
Obviously, one wants to reach as large an audience as possible, but not "lag behind" too far. How do you go about balancing the use of newer technology on a site without alienating users of older software, disabled users, and text-only browsers?
Jeffrey:
Using HTML 4, ALT tags, and the TITLE tag goes a long way toward achieving this goal.
So does using CSS for type, instead of FONT FACE and FONT SIZE tags that yoke content to presentation.
I do both these things, and all the other little things you have to do, for instance with framesets. I think there may be some really old (1996) framesets at zeldman.com where I left out full content inside the noframes tags. I'm cleaning that up as quickly as I can. At ALA http://www.alistapart.com/), wherever I used framesets, I included the full text inside the noframes tags, and I also included TEXT versions of all articles.
The next stage is full separation of content from structure, and that means using HTML 4 and CSS (and eventually, replacing HTML 4 with XHTML; and eventually, migrating to XML).
We can't safely do that yet. Gecko is still in development, Netscape 4 has appalling "support" for CSS, IE5/Windows has better but far from complete support, and the only released browser that gets it right - IE5/Mac - has a 6% market share.
SOON. Not soon enough, but SOON, we will look back on this era of stupidity and laugh. Oh, how we will laugh. This is the TRON era and we are striving to reach the MATRIX era.
7) Reverse scenario question...
(Score:5, Interesting)
by Jonny RoyaleHave you ever seen anything come from a browser publisher "extending" a standard (Microsoft, Netscape, other), and thought "Gee, I wish that was in the standard"? Examples?
Jeffrey:
Yes.
LOW SRC was a funky old tag from Netscape (dating back to Netscape 1.1) that allowed you to slip a low-bandwidth image into place, and then have it replaced by the more bandwidth-intensive image when the latter finished downloading. For people with very slow connections, it was a useful hack. It also enabled creative web designers to add a certain amount of "SFX magic" (cough) to even the most primitive pages, viewed by the oldest browsers, under the most adverse conditions. That's gone. Too bad. I miss it.
Because of browser offsets in all released versions of Navigator and most versions of Explorer, I wish the "four horsemen of non-validation" (leftmargin, topmargin marginwidth and marginheight) had made it into HTML 4.0 transitional. We won't need them eventually, but until the browsers are smarter, we still do need them. The W3C is always ahead of what the browsers can deliver, of course; but by discouraging these dumb proprietary tags, the W3C has put us in the position where PAGES THAT WILL NOT WORK without these tags will fail at http://validator.w3.org. That kind of failure discourages developers from building standards-compliant pages. It is a small thing, and it is transitional, but DURING THE TRANSITION, I would have liked to see those four stupid tags get approval with a benevolent sigh.
On the other hand, designers who know what they are doing may include these tags and ignore those validation errors, but don't tell the W3C I said so.
Given the brain-dead way Navigator 4 and IE4/5/Windows handled absolute font size keywords in CSS, I *sometimes* wish font size tags were not discouraged YET. I hate them and hardly ever use them, but (for instance) there's no way to get small type in Linux that is actually READABLE without relying on these dumb old non-standard tags. What I really wish in this case, of course, is that Netscape and Microsoft hadn't fucked up this simple CSS technology. So I take the FONT SIZE tags thing back. Uh, never mind. I just wish Netscape and Microsoft had gotten CSS right the first time.
8) Banners
(Score:5, Interesting)
by TheTomcatThis is only vaguely related to design, but directly related to the web, and functionality.
We all know that banners don't work anymore. The only way a business can profit from banners is to show thousands per day. Most users don't even SEE banners anymore. We avoid them the same way we dig in the couch for the remote when commercials interrupt The Simpsons.
Do you have any suggestions to make future, content-based sites profitable?
Jeffrey:
There are several issues here. One is, a lot of the best work is done as a labor of love, and always will be. Those who need a revenue model before they are willing to even think about working will lose one of the golden opportunities of the web, which is free expression and the building of communities, regardless of financial issues. For instance, Slashdot was born as a community and still is one. Eventually, Slashdot got into a position where it could make money, but Slashdot is true to itself and was not corrupted or changed by any commercial considerations. So it is possible to make a good thing and not blow it when the cash register starts jingling. But a lot of other sites and communities have turned to dreck when money was involved.
We all agree that banners suck - Roblimo even wrote an article for ALA on that subject, back when ALA was just getting launched. With a big enough readership, banners *can* be profitable, as they are at Slashdot. But I agree that most of us just hate 'em.
Sponsorships are another possible means of revenue. "This issue of Webmonkey brought to you by Hewlett-Packard." With an entertaining HP minisite available at the click of a link, for those who care. Kaliber 10000 (http://www.k10k.net) has gotten Apple sponsorship, and all that means is, there's a tiny Apple link in the top right hand corner of the front page. If you click it, you get a popup window with text on why the site's designers like their Macs, and links to some current movies in Apple Quicktime format.
The Cluetrain guys have spoken about this model of corporate sponsorship as well.
I think about it sometimes. For instance, http://www.alistapart.com/ could be "brought to you by" Macromedia or Adobe. But to tell the truth, I don't really pursue this idea because I'm not motivated by money when it comes to creating web content. I simply want to create or choose the right content, and totally control it, and I'm not sanguine that I could do that if I *had* corporate sponsorship. Thinking about it some more is on my to-do list, but it's about 500 layers down in the list. I make enough money designing websites that I don't worry about "revenue models" for my content sites. It is a real issue, though. Just one I haven't bothered with personally, yet.
9) Jeff, your CSS suck
(Score:4, Insightful)
by Nicolas MONNETI quote from your website:
H1 {font: bold 24px verdana, helvetica, arial, sans-serif; margin-top: 0xp;}
H4 {font: 12px verdana, helvetica, sans-serif; margin-top: 0px; margin-bottom: 10px;}So why, tell me, WHY did you use PIXELS (px) instead of POINTS (pt), thereby overriding my painfully crafted DPI settings, rendering your all page unviewable on my Linux machine?
Jeffrey:
Refer to the answer to Question 2. Also refer to this Word from the WaSP column:
http://www.webstandards.org/wfw/ieah.html
The best way to style text - and the way the W3C recommends - is to use relative sizes or absolute size keywords.
Both these methods are completely broken in Navigator 4. Totally frickin' useless. Don't shoot the messenger. Netscape agrees, and that's why they threw out their old rendering engine and started from scratch.
And absolute size keywords are stupidly mis-supported in IE4/5 for Windows, where "medium" means large, and "small" means medium.
Faced with this maddening stupidity on the part of browser makers, designers/developers have two choices:
Do not style text at all. Have a nice day.
*OR* rely on pixels, which work in all "CSS-capable" browsers.
I sadly choose the latter until the browsers fully comply with W3C standards.
As to POINTS versus pixels, points are absolutely meaningless on the web, and the fact that they are used by thousands of developers who should know better proves only how little CSS is understood by the development community.
Certain point sizes may work on your platform in your style sheet. That proves that certain point sizes work on your platform in your style sheet. Cross-platform it is not transportable, and points are print-based units of measurement that have no meaningful relationship to the wonderful world of monitor resolution.
For a good discussion of CSS problems, see Todd Fahrner's "Beyond the Font Size Tag: Practical HTML Text and Styling" at http://style.metrius.com/font_size /livetext.html (Unfortunately, even some of *THESE* techniques do not work in more recent versions of Navigator 4.)
In a few months, there will be exactly two browsers that get CSS-1 right: Mozilla/Nav 6 for all platforms, and IE5/Mac which we have now. Since neither has dominant marketshare, developers will still face huge obstacles when trying to do something as SIMPLE and BASIC as size text on the web. Many will stick with pixels, which are the only CSS technique that actually WORKS across browsers and platforms.
In addition to all these nightmarish problems with our browsers, there are special challenges with Linux, because unless Linux users install additional scalable fonts, you can follow all the rules for good CSS, and avoid "problem" font sizes, and still create pages that look jaggy or are unreadable on a lot of people's machines. I worry about this all the time, but I don't have a solution for it. I have actually gone back to using the stupid The way to advance the medium is to get absolute font size keywords and relative font sizes right in CSS, finish implementing HTML 4, and give us the W3C DOM, XML, and EcmaScript. (And then wait two years for users to upgrade.)
10) Pixel based alignment and HTML
(Score:4, Insightful)
by mcelrathOne of the most disturbing trends that I see in web design these days is the trend toward trying to control layout at the pixel level. As HTML (Hypertext Markup) was not intended to be a graphics language, what is your comment on this?
Jeffrey:
Separation of style and content is the way forward.
The problem is the browsers.
When I revised my "Ask Dr Web" tutorial at http://www.zeldman.com/askdrweb/, along with other pages at http://www.zeldman.com/, to use CSS layouts instead of tables, certain versions of Navigator 4 began crashing.
Actually crashing from basic CSS-1.
I wrote about this at A List Apart, ("The Day the Browser Died") and because of this, Netscape invested some time and resources to fixing some of these bugs in Navigator 4. It didn't catch them all, and it didn't catch them in Linux. These bugs will never be fully fixed in Navigator 4, because Netscape is wisely spending its energy to finish the Mozilla browser. Unfortunately, this means that Netscape users will continue to face serious usability hazards throughout the web until Netscape 6 is released ... *OR* it means that developers will continue to use TABLES for layouts for the next two years (as Jakob Nielsen has predicted).
If you look at these pages - http://www.zeldman.com/steal.html or http://www.zeldman.com/icon.html are other examples - you will see that we are talking about extremely BASIC layouts. An expert from the CSS pointers group actually volunteered hours of her time trying alternate combinations of the very basic CSS on those pages to see if she could find ways to stop Netscape from crashing. She could not; neither could I. Netscape did what it could for its 4.0 users, but it can't do anything more until the next generation is released.
On my personal site I made the tough decision to leave these pages as-is. I don't have time to recode them all using tables.
You can agree or disagree with that decision.
Linux folks can either use the Mozilla or Opera betas to navigate those pages in safety and comfort.
It's worth noting that W3C pages also crashed Netscape 4, for the same reason.
What happens when Netscape's browser is this badly damaged? I get hate mail from people who don't understand the issues involved. I also got a letter of thanks from Netscape's Eric Krock, because good companies WANT us to help them find bugs in their software.
As an example of this, many sites (including yours) use font size=1 to acheive a font that is fairly uniform in pixel size across browsers. Anyone with a high-resolution screen will tell you that this is highly annoying, since it results in an almost unreadable font.
See above for the explanation as to why developers are stuck using 1994 technology to support late-1990s browsers. The same questions, the same answers.
The good thing - the ONLY good thing - about the font size tag is that it is user-resizable. The rest of this has been answered above.
Forcing netscape to use a larger font size often destroys the layout of the page. What's worse, some pages use dynamic fonts and other features to force this on the user.
Right, although in some cases it is justified.
As another example, many pages use the table , and layer to specify the exact size in pixels of portions of the page, and then put a little notice at the bottom ("This site best viewed at 800x600") or some such.
Yes, that is usually a bad design decision. Whenever possible, I use what Glenn Davis (WaSP and Project Cool co-founder) calls "liquid" design ... design that reflows to exactly fit the visitor's monitor. That's almost always a better way to go. Examples of my liquid designs include http://www.alistapart.com/, http://www.the-adstore.com, and most of zeldman.com. If you dig long enough in zeldman.com, you'll come upon pages older than the NYC subways, that simply use BAD design ... though at the time, it wasn't all that bad.
Liquid design is not always appropriate but it is generally best.
What are standards groups doing to fix this?
Nothing. The W3C can't make better or more intelligent designers out of people, and neither can the WaSP, whose sole purpose is to agitate for W3C standards in browsers (and eventually in web authoring tools).
We can try to lead by example. http://www.webstandards.org/ is liquid (aside from the front page, which is "semi-liquid" owing to the large low-rez graphic) and it validates.
MEMBERS of standards groups can write articles on the subject and hope that people read them. Of course, if people "can't get past" a 4k splash page, they will not learn about my articles on the subject.
Will I be looking at pages designed for 800x600 (or worse, 640x480) with my 1920x1440 screen forever? Will persons with laptops at 640x480 be unable to read the web soon? Will standards bodies ever require percentage-of-screen width and height specifiers, or even better, implement table width=30ch to specify sizes in relation to the current font size?
Standards bodies can recommend certain authoring practices, and they can develop standards that make such practices possible, but they cannot enforce good authoring.
11) Evaluate Slashdot
(Score:5, Interesting)
by Pseudonymus BoschWhat would you change, what would you add, what would you remove in Slashdot?
Jeffrey:
It's a community and it works. It has achieved visibility, notoriety, and even commercial success without giving an inch. Pretty awesome achievement. What would I change?
Sometimes the longer threads take a long time to load, due to back-end technology, platform and server issues. The technology works better on Linux than it does on my platform of choice (Mac OS) but, hey, that's okay.
I know you want me to comment on the design. Design is subjective. Black backgrounds and teal are not my favorite color scheme (though I used black backgrounds at the 1995 Ad Graveyard (http://www.zeldman.com/ad.html) and the January 1997 Furbo Filters so who am I to talk? The main thing I was trying to do at Furbo was get CSS to work - and to let people know about Craig Hockenberry's and my Furbo Filters, which were the only Photoshop plugins at the time that dealt with the web-safe color palette - at least to our knowledge.)
I might change the color scheme and some other things if Rob Malda went on a crack run and asked me to redesign Slashdot, but that ain't likely to happen. And I think the design of Slashdot is just fine. It focuses you on the breaking stories, allows you to read more (or not), and provides access to almost everything else on the site via small navigation units. In terms of usability it is damn good, and it has plenty of attitude.
Of course, it commits the "cardinal sin" of teal, but I can get past that.
12) Do you agree with Nielsen?
(Score:4, Interesting)
by Pseudonymus BoschI have no idea about you and your views, but I have read lots of the Alertbox columns by Jakob Nielsen.
Do you agree with him? Do you disagree? What about?
Jeffrey:
I agree with his comments on oral sex and wearing white after Labor Day.
And I like that he can get $25,000 to talk for an hour. I'll do the same for half that amount.
I also agree with Jakob that most websites should be usable by as many people as possible.
What I have done about that is help found The Web Standards Project, so we can actually achieve that goal instead of using duct tape and lasagna to build sites that work for "most" people. And I try to make my pages accessible in spite of the limitations of current browsers and some of the cross-platform issues discussed above.
If you are interested in my views, you can read them at http://www.alistapart.com/, Adobe.com (here, http://www.adobe.com/we b/columns/zeldman/20000320/main.html, for instance), http://www.webstandards.org/ and of course at http://www.zeldman.com/. If you can get past the 4k splash page.
At least you share the use of TITLE attributes in hyperlinks (a good feature that Slashdot shouldn't chomp away).
Thanks! The reason Slashdot chomps title tags is probably because they are not supported in Netscape yet. They are an important usability feature, and in some browsers they also offer nifty low-grade special effects - along with the opportunity for contextual ampliciation or ironic commentary.
jeffrey
Can't act. Can't sing. Can dance a little.
http://www.zeldman.com
http://www.alistapart.com
http://www.happycog.com
http://www.webstandards.org -
Web Design Luminary Jeff Zeldman
While we're waiting for Metallica and Douglas Adams to get back to us, we might as well go back to interviewing "normal" people. This week's (first) guest is Jeff Zeldman, Web designer extraordinaire. Some people in the design business say the best way to learn what the WWW will look like in six months is to keep up with Jeff's famous www.zeldman.com site. Whether or not this is true, he's certainly written one of the best Web design tutorials ever, and is also one of the prime movers behind the Web Standards Project. There is simply no one better to answer any Web design question you care to post below (hopefully confining yourself to one question per post). -
WSP Petitions MS to Make IE Meet W3C Standards
Eric Krock writes "The Web Standards Project has launched a petition drive to pressure Microsoft to fully support HTML 4.0, CSS1, DOM1, and XML in IE." Like it or not, IE is currently the most widely-used WWW browser. Since Microsoft is under a lot of pressure to act (or at least pretend to act) nice nowadays, a large number of polite requests to make their browser products fully support current and future W3C standards just might do some good. -
WSP Petitions MS to Make IE Meet W3C Standards
Eric Krock writes "The Web Standards Project has launched a petition drive to pressure Microsoft to fully support HTML 4.0, CSS1, DOM1, and XML in IE." Like it or not, IE is currently the most widely-used WWW browser. Since Microsoft is under a lot of pressure to act (or at least pretend to act) nice nowadays, a large number of polite requests to make their browser products fully support current and future W3C standards just might do some good.