Slashdot Mirror
Designing With Web Standards
Jeffrey Zeldman is one of the best technical writers whose work I've had the pleasure of reading. He is obviously well-educated with regard to the subject, and his passion for the work really shows through. Still, he never comes across as a zealot -- his style is even-handed, thoughtful, and easy to comprehend.
The first part of the book ("Houston, We Have a Problem") is the reason I give a rating of "9" rather than "10." Zeldman spends a perfect length of time on background and history of Web standards (why they're here, and what designers did before they emerged). However, this section seems to suffer from what many technical books suffer from: a case of "We'll see this soon"-itis. While this is perhaps unavoidable in such a treatise, it is nonetheless apparent. Still, it's only marginally distracting.
The meat of the book comes with "Designing and Building." Zeldman first talks about modern markup, then explains the variations on XHTML (i.e. Strict, Transitional, Frameset) and how each ought apply to your design. Here we see more theory than practice, though, but this is welcome -- it lays the foundation for a more cerebral look at distinguishing markup from design. Once Zeldman explains the nuances of that topic, we moveon to the redesign of a Web page constructed with a hybrid table/CSS design complete with all the excellent effects we hope to see in modern pages.
After working through this redesign, Zeldman talks in more detail about the CSS box model (and the browsers that break it), typography, and some of the quirks that Web designers must deal with. Next he touches a bit on Web accessibility--a must-read for everyone, whether you think so or not.
While Zeldman isn't incredibly thorough here, he doesn't need to be--it's a book on Web standards, after all, and this chapter serves to show how accessibility can still be achieved within those standards. He also suggests a couple of other books for more information.
Finally, Zeldman walks the reader through a redesign of zeldman.com, basically as a hands-on summary of the book, and as a guide for future projects. Also included is a "Back End" (i.e., appendix) showing some excellent information about each major browser.
Too often, a book or Web site on XHTML/CSS will dwell only on the "how"--this book shows the "how" and still explains the "why": Here's how you set up an id'ed element; here's why we do that, rather than using a class. It's already opened my eyes to many things I thought I had a handle on, but now realize that I only knew in a cursory fashion.
So, ask yourself: Do you want to design a Web site that will work for everyone, regardless of their platform? Do you want to make sure your Web site is future-proof? If so, you need this book.
You can purchase Designing With Web Standards from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
You code. And code. And code. You build only to rebuild. You focus on making your site compatible with almost every browser or wireless device ever put out there. Then along comes a new device or a new browser, and you start all over again.
You can get off the merry-go-round.
It's time to stop living in the past and get away from the days of spaghetti code, insanely nested table layouts, tags, and other redundancies that double and triple the bandwidth of even the simplest sites. Instead, it's time for forward compatibility.
Isn't it high time you started designing with web standards?
Standards aren't about leaving users behind or adhering to inflexible rules. Standards are about building sophisticated, beautiful sites that will work as well tomorrow as they do today. You can't afford to design tomorrow's sites with yesterday's piecemeal methods.
Jeffrey teaches you to:
* Slash design, development, and quality assurance costs (or do great work in spite of constrained budgets)
* Deliver superb design and sophisticated functionality without worrying about browser incompatibilities
* Set up your site to work as well five years from now as it does today
* Redesign in hours instead of days or weeks
* Welcome new visitors and make your content more visible to search engines
* Stay on the right side of accessibility laws and guidelines
* Support wireless and PDA users without the hassle and expense of multiple versions
* Improve user experience with faster load times and fewer compatibility headaches
* Separate presentation from structure and behavior, facilitating advanced publishing workflows
I have over 70 freaks, do you?
Ref:Amazon has the same price as bn.
Spend 50 cents more and get free shipping.
So, all those things in the book are great and all, but what about Flash? You can do no wrong with flash, you know.
Until Slashdot fixes the funny modifier, use insightful or interesting. The poster knows your intentions.
He also has an excellent list of related resources and links on design and accessibility:
http://zeldman.com/externals/
Your amazon ID is too similar to mine. Get a different ID! (plus you beat me to the punch, bastard!) Ref: Here's my link anyway...
You mean it's not enough to make sure it works in IE6 on Windows XP?? I wish more web "developers" were concerned with standards. Not only does it make their job easier, it makes it easier to use their sites (assuming the browser developers are equally concerned with standards).
This is my sig. There are many like it, but this one is mine.
Standards are for pussies
Don't you Microsoft people do anything but read slashdot all day?
Trolling is a art,
YES!!!
Do you want to make sure your Web site is future-proof?
ABSOLUTELY!!!!!!
If so, you need this book.
oh
An Indian-American Hindu committed to non-violent thought/speech/action alarmed by the global explosion of radical Islam
Eric Meyer on CSS. I finished Zeldman's book about a week ago and am now going through Eric Meyer on CSS. Zeldman tells you what needs to be done, and gives some examples, Eric Meyer gives you a bunch of practical examples. Guess this is why can be purchased as a pair at Amazon...
I agree that he is an excellent tech writer. However, I thought his first book was much better than this one.
A Review Can Be Found Here
Although I am not very good at web design... what I have learned, I learned from this guy. He rocks.
Davak
The only standards you need to follow are the W3C Web Standards They even have a validator for your convience if you need to make sure that your code is valid. I did that at my summer internship and over the course of a summer was able to make our 1000+ page website 99% w3c complient. It might take you a few days to get in the rythym of doing things, but once we had our site up to html 4.01 standards, we never had a problem with any browser compatability issues, and we tested all the way back to Netscape 4.7.
Since when does the web have standards?
The Blaster Master Fighting for Truth, Justice, and Evil Pie since 1979
"the"
Standards aren't for pussies. Weiners are for pussies. Standards are for those of us who aren't weiners, but possibly have one.
This is my sig. There are many like it, but this one is mine.
I happened across this site the other day... it really shows off what CSS can do. No idea how it looks in IE, but in Firebird it's pretty amazing. Pick a design from the left and note that it's all style sheets...
http://www.csszengarden.com/
Where is the completely compliant web site that thet reviewer was designing prior to reading this book? It would be pretty darn interesting to see what it looks like.
"I'd rather be a lightning rod than a seismometer." -Ken Kesey
A Web page that was HTML 3.2 compliant is not standards-compliant at all these days.
How do we know the W3C won't change the standard AGAIN in three years?
And at less than 500 pages, just how well can it cover those same "standards"? [joke mode on] Maybe they used CSS to do the page layout, and set the default font to xxxxxxxx-small? [joke mode off]
Bookpool is always cheaper!
The book clearly states your message - and multiple ways of insuring it, using the w3c validator, and tools such as HTML Tidy; also accessibility guidelines (required for gov't sites for example)
A main strength of the book and something that separates it from every other design or tech book is its focus on the PRACTICAL BUSINESS REASONS for being standards-compliant, not just the warm fuzzy feeling.
And I think he makes the case much better than nearly every programming book that claims you'll save time and money using language X.
It seems to me that the larger problem with web standards' adoptions is that many managers would prefer to just have crap, so long as they can have it "right now", and forego the longterm financial savings that web standards coding can provide. I would like to see a book on how to implement a web standard or two that will really save a lot of time right from the beginning, versus the kinds of major changes that take weeks to months to implement -- weeks & months that no small-business manager wants to pay for.
stuff |
I like standards. I like accessibility and usability. I hate Zeldman's site. It's like hypocrisy in motion. If I lectured on web design and make sites usable, I might improve my site from where it is.
Zeldman makes life tough on older viewers, disabled, and newbies. His labels are quippish and arrogant, his colours too similar, fonts too small and not resizeable in the most prominent browser out there.
Take a look around and you'll probably find better books on standards. Or, if you must, take the gospel of Zeldman and water it down with a little Jakob Nielsen.
Linux - because it doesn't leave that Steve Ballmer aftertaste.
Forgive me if this sounds clueless, but most people who are given the
task of setting up a web site are going to be looking at ways to not
have to do it from scratch. There are a lot of CMS (Content
Management Systems) out there, some free, some not. What *I* really
need is an O'Reilly book about CMS that helps wade through all the
stuff that's out there right now so the reader (me) can make an
informed decision about which way to go.
I did a quick check of the O'Reilly web site and all their CMS info
revolves around XML and Java. This does not help me.
I read the book, and the book review, and I can't disagree more. There was NO plot development, the characters were flat and uninspiring, the writer clearly has never been to any of the locations he wrote about, and the ending was absolutely anti-climactic. I mean, COME ON! Where's the zip? Where's the spice?
Am I the only one who noticed that his website is Supported by XDate Speed Dating, 30Dates Speed Dating, and for free online dating, xdate.com?
Maybe he should take a break from writing and get out to the bar a bit more.
Tuus crepidae innexilis sunt.
Just open up MS-Word and use File-->Save As
web page
Voila! You have now created the perfect web page in ten seconds!
Microsoft takes care of all of the standards stuff so you don't have to worry your pretty little head about that. No really...don't worry.
No...don't do "View Source"
NO! Don't! EVERYTHING IS OK!! STEP AWAY FROM THE KEYBOARD
Taking a few extra steps to ensure standards compliance is well worth it.
I've found that standard compliant web pages tend to be more interoperable between browsers (sadly, there will still be differences). This makes it easier for you since you won't have to work as hard to find ways to make your site look good in several browsers. It makes it easier for viewers because they can use the web browser they like the best.
The only problem is that there are a lot of people who still browse on old hardware that has Netscape 4.x on it. Netscape 4.x tends to mangle CSS pretty badly.
"You spoony bard!" -Tellah
It will be standards-compliant to its specified version number. If you're compliant with HTML 4.01 today, you will be 5 years from now even if the current spec is XHTML 23. You may not be up-to-date, but you're compliant with the specified version, and a client will be able to render the page with the appropriate DTD and so forth. (afaik)
... the maddening differences between Internet Explorer, Mozilla/Firebird/Netscape 6x-7x, Opera, Netscape (butchered v4x), Safari and of course, Lynx? If the developers of all the different browsers out there read this book, would they even agree on how to execute and implement it? Not likely as long as the Suits they work for all have their own adjendas.
To add to this, one can follow all the rules making pages comply yet still provide poo usability due to ill-thought layout and navigation on top of a good framework.
For starters, if you're not familiar with him, here is Jacob Nielsen's site. He is usability guru formerly from Sun.
Dogma - "let's just say we'd like to avoid any empirical entanglements."
Microsoft browsers follow standards MUCH closer than Netscape. Mozilla is good, but still has some problems. Tables and Styles just do not work in Netscape 4.0, and have limited use in 6.0 and above. I find that 40% of my design time goes to formatting (using supposed standards) for IE 6, and the rest goes to trying to manipulate Netscape/Mozilla/Macs into displaying the proper way.
Well don't tell his wife, he got married lately. (Congrats!)
Why waste a mod point on an AC?
The Blaster Master Fighting for Truth, Justice, and Evil Pie since 1979
I would say this book is as close to a 10 as possible.
:)
The first historical overview mentioned is very nice, but can be skipped. However I feel it is an important part of the book, and gives weight to the arguments on why using the standards way later on. It also gets designers new to the web up to date on what has passed, and highlights mistakes that were made (so we can possibly avoid them again).
Otherwise I agree fully with the author, the book is indeed both well written, has a nice flow and really gives good arguments why this is the right way, and how to do it the right way. The authors attitude is never arrogant, and the solutions are always practically oriented and work well in real-life (unlike a lot of other books on HTML and CSS).
My take on this book is that if you want to read one book on web design this should be it. Of course after having read this book you probably change your mind and start looking for other literature by the same author
life+universe+everything=42
... someone could spring and buy a copy for our hosts?
Granted, some parts of the W3 standards are worth breaking (wrap attributes in textrea inputs, for instance), but c'mon.
J
Reading tech books from start to finish is quite underrated. I find that if you don't read every word in a tech book, one often misses important information that can save a lot of time.
Don't you Microsoft people do anything but read slashdot all day?
Dude, what else am I going to do? Anytime I try to open Word, Excel, or Visual Basic, it crashes. The only thing I can load is Internet Exploder.
Just because I doubt myself does not mean I find your position compelling.
Unfortunately, very few sites out there that work in all browsers correctly are compliant.
I guess it's a toss up: have a little validator button proudly displayed somewhere on your site and have a few display errors in Internet Explorer or have a messily coded site that is slow, but works.
Quid festinatio swallonis est aetherfuga inonusti?
Africus aut Europaeus?
Couldn't you see the rather obvious box for selecting different text contrast/size? He uses alternate stylesheets. That even works in IE6. So no problem in the "most prominent browser".
But it's easier to complain...
Obviously this rambling is from someone who picked up PHP last night coding their web site down in mommy's basement while watching Monty Python and eating either day old pizza or szechuan chicken in heavy sauce (can't figure out which) and drinking Jolt cola.
I do ALL of my development on a PowerBook with Camino (Mozilla based) and the only browsers I have to tweak for are Netscape 4 and IE 5. Mostly for Netscape 4.
If you know what things the different browsers can handle and what makes them puke it's not that bad. You end up with some legacy width and height tags for Netscape 4, but the CSS aware browsers will ignore them.
You also want to sniff the browser to feed it CSS that it can handle, I have found that some tag's will destroy a page in Netscape 4 and IE 5, so there a 3 CSS files for NS_4, IE_5 and everything else.
Don't get me wrong, I will never get Netscape 4 to look the way I want, but according to my logs, I don't need to.
And then when XML-only browsers pop up, all these old pages become unviewable.
Yes. Just like you can't view a WordStar 6.0 document in a Web browser.
Free hint: XML is not HTML. It's close, but it's not the same. Any HTML document that is conformant to a given HTML specification can be rendered by any competent HTML browser that's conformant to that specification. If you don't believe me, I can find some very, very old web pages that far predate the 4.01 standard, yet are conformant to the standard of their time, and Firebird renders them perfectly.
Saying "yeah, and when XML-only browsers pop up, all these old pages become unviewable" is a trivial statement. If it's XML-only, then it's not a freaking HTML browser, and it makes no sense to complain that an XML-only browser can't grok HTML. Just like it makes no sense to complain that Firebird can't render WordStar 6.0 documents.
Standards are nice. It's a cryin' shame nobody follows them though. Sure, it takes considerably longer to make your site standards-compliant and geeze, we can't cut into our bottome line, can we? We gotta get that site out right away. Screw Mac users. Or screw AOL users. Let's just code for IE. It's a nice dream but unfortunately I don't see it being used in the real world.
Another unfortunate tidbit...I work for one of those places. I know the aggrivation of trying to get compliance through to people who just won't listen. *sigh*
"He uses statistics as a drunken man uses lampposts...for support rather than illumination." - Andrew Lang
Our faculty of the university at which I work has decided on a new layout for their web pages. This was done and delivered to us by a PR agency. I feared that it might be bad, but that fear didn't even come close to what I had to witness.
Imagine having to tell our users (many of which are using GNU/Linux or Macintosh) that our web site only works reliably in Windows with Internet Explorer 6.0 and above. Just because a PR agency can't develop web pages. It's impossible. I had to do something about it.
So when I implemented the layout for our department (scheduled to go live later this month), I scrapped everything they had done. I took a printout of their page (as it looked in Internet Explorer) and marked up what colors and fonts they had used.
Then I set down and wrote the same thing using XHTML/1.0 Strict and CSS1. This was about two days work, but the finished result now validates using w3c's validate tools, and it works reliably in all browsers I've managed to try, all the way back to Mosaic and Netscape 3, with or without images (yes, Lynx, Links, w3 and other text browsers work very well indeed too).
Not only did I get the pages to validate. By using CSS, I was able to get rid of several images they had been using with their design. The overall size of a page, including graphics and CSS, now weighs in at about 35 kbytes. This is compared to around 120 kbytes with the proposed code.
And even better, most things can be cached by the browser (CSS code and images). The only thing that needs reloading when you hit subsequent pages is the dynamic XHTML code, which weighs in at around 5 kbytes, compares to 40 kbytes in the proposed code.
Now, I think our students will like us. This result is even better than the pages that we have today. They render quickly and effortlessly even on old equipment or on extremely slow links.
I havn't been able to convince the faculty to make my code the "default" yet, but they might get the idea once people start noticing that our pages load much more quickly than the rest of the faculty pages.
So, using standards isn't always about making things render nicely in all browsers. It gives you a while heap of nice side effects that isn't worth sneezing at.
It's irritating the way the world is enslaved to such an awful spyware-magnet standards-flouting browser as MS Internet Explorer.
Microsoft declared IE6 SP1 as the last standalone browser for lame-ass reasons. The truth is, they're only truly integrating IE into the next Windows Operating System for the first time, to prove their 'point' in the anti-trust case that they couldn't remove the browser from the OS.
If IE really was such an integral part of the current slew of windows versions, how come it takes ridiculously long to load when you enter a URL into the address bar of an explorer window, and that the people at LitePC was able to remove IE from the Windows operating system?
Bunch of liars. Guys, help educate everyone and have people switch to either Mozilla or Opera -> Makes Windows boxes more secure and gets rid of the need to buy those stupid superflous pop-up killers. (you can pick up viruses or spyware just by surfing a maliciously coded website and hitting the wrong button)
None of my family and friends use IE anymore after I educated them about the dangers of IE.
If there was nothing useful in this book, then statements like that wouldn't be made.
If it was such a dead issue, it wouldn't be a huge event when a major site (news.com, espn.com, wired.com) finally adopts a modern standard and aims for compliance.
This book would have been useful in '99, sure, but it's far from a moot point now.
Let's show this prehistoric bitch how we do things downtown.
...Lynx
*cough*
Read the EFF's Fair Use FAQ
Well isn't all that .asp .net stuff that standard, doesn't everyone have IE. Well then they should be required to or they can't use my web site. I don't want to be bothered with things I can buy from Microsoft. They invented the Web didn't they, no that was Gore, but they wanted to, so we should let them own it.
Can't wait till we need to apply for visas for our Passport access to other countries.
First of all it's mentioned in the chapter "99.9% of websites are obsolete (which was previously an essay) that in the future sites will either be built with flash or web standars. using flash for site design (not just small elements, or segments) is typically a bad idea because: 1. flash is not viewable by spiders/robots that popular search engines use. therefore your content isn't ranked highly. 2. flash content is not viewable on most mobile platforms (cell phones/pdas/ etc.) 3. flash content is largly unavaiable to the disabled public (people that use screen readers etc)
Microsofties don't believe in ignoring the standard... They believe they ARE the standard.
I just visited the site in Firebird 0.6 on Windows, IE6 on Windows, 0.6.1 on FreeSBD, and lynx on FreeBSD. It looks fine. What browser are you using?
Back when I was coding in ColdFusion I used to think that Netscape was the chief offender of standards. I used IE primarily and then came back and re-tooled for all the rest. Opera being often the easiest with a few quirks.
When Mozilla reached 1.0 I switched to it... I have never looked back. The support for PNG is better, transparent PNG graphics drive IE nuts sometimes. IE still leaves gaps around graphics and tables that you have to hammer out to a minumum but cannot eliminate. I think it has a lot to do with interpretations of the box model... padding, margin, border and such... Someone isn't doing their homework to comply. Personally the Mozilla way makes better sense to me. Netscape 4.7 sucked... no question about it, it was stagnent for a long time and didn't grow with technology standards. Gecko has made some great strides that are now leaving the MS browser lagging though in a a few areas.
but if it's the first IT book you've read completely, isn't it a little presumptuous to write reviews? I certainly didn't consider myself a movie critic after watching my first movie.
I'm not saying your review is wrong or bad, but maybe get some experience in what you're doing before preaching to others?
Web standards are not a validator. Remember HTML and XML and thier bastard child XHTML are a DESCRIPTIVE LANGUAGES. Every element has SEMANTIC value. Something no validator can check. I've seen too many XHTML sites made by people who clearly have no idea how to implement the standard to make this conclusion. A validator only means it's parsable, it does not mean that a document complies philosophically with the W3C. You'd be surprised at the number of XHTML sites using tables for layout.
Photos.
Yes, this point is yours as far as my opinion counts. I found it after 10 seconds searching for something to change the style.
... the page tried to give me a cookie as i closed the page! I want to get asked for every cookie a site wants to give me, so it is my own fault, but i don't consider it a good page anymore. Sorry Zeldman.
Another thing, which really upsets me
That's a nice troll you've got going there.... and that redirect to goatse.cx is just the icing on the cake.... shame the mods are going to take it all away from you, all that you've worked so hard for.
Check out how slashdot made out...
...no attributes
.
URI:
Encoding: iso-8859-1
Doctype: HTML
Errors: 407
Revalidate With Options
:
Show Source Outline
Parse Tree
Validate error pages Verbose Output
* Note: The URI you gave me, , returned a redirect to
* Line 71, column 115: cannot generate system identifier for general entity "alloc_id"
* Line 71, column 129: cannot generate system identifier for general entity "site_id"
* Line 71, column 139: cannot generate system identifier for general entity "request_id"
* Line 161, column 62: cannot generate system identifier for general entity "group_id"
* Line 161, column 76: cannot generate system identifier for general entity "atid"
* Line 241, column 74: cannot generate system identifier for general entity "tid"
* Line 241, column 156: cannot generate system identifier for general entity "mode"
* Line 241, column 184: cannot generate system identifier for general entity "threshold"
This page is not Valid HTML!
Line by line of errors
---
Nice!
407 lines of errors...
Why worry? Each of us is wearing an unlicensed "nucular" accelerator on his back.
Sig changed for readability by G.W.
What's it called when someone tells you do do something, and then does the opposite?
Oh yes, that's hypocrisy.
"Ask not what your country can do for you." --John F. Kennedy
if, after reading it, the reviewer didn't realise how important it is to include hyperlinks to stuff refered to in his text - like zelman.com.
It would have been less useful in 1999 because no browsers in 1999 were adequately standards compliant (not even fully HTML 3.2 compliant).
The author of the book is one of the Web Standards Project (WSP) who persuaded browser makers to support standards.
Do not use style sheets to adjust the font size and the spacing between lines. I am not alone in having a high resolution laptop screen and I've seen too many pages that are unreadable. I adjust the settings in my browser to increase the font size so I can read it. However, when I get to one of these pages where they make the font size really small I adjust the font size so it's big enough to read. However, the font is larger but the spacing between the lines is the same, so all the words are crowded together. I hate this standard and it should be avoided at all cost
The original idea behind the web was that it was a simple distributed application for sharing information at places like CERN. They didn't worry about look-and-feel issues because they didn't think there would be any. If you're just using the web to share your informal notes on your latest particle physics experiment, you don't care exactly what your document elements look like, as long as the overall organization is clear to the reader. Thus the very first HTML specification says things like:
HTML was also designed to make web pages easy to author. Which meant that web browsers had to be tolerant of small mistakes. Both these principles forced browser implementers to make a lot of choices about presentation without any guidance from the standards.
What the web's inventors didn't anticipate is that the web would become a mass medium. (So much so that most web users don't even grasp that the web and the internet are not the same thing.) When they saw this happening, they starting thinking about presentation issues and inventing style-sheet languages. But it took them years to thrash out new HTML and CSS specifications that dealt with these issues. But at the same time (1995 and thereabouts) Netscape was gearing up to deliver commerical web software. (Microsoft was still in denial about the Internet, and had launched MSN using proprietary client-server protocols.) Netscape wasn't willing to wait even a few months for W3C to deliver preliminary specifications: they saw their window of opportunity closing. So they invented their own. They took a lot of flack for this from people who pointed out that Netscape HTML violated all the rules of good markup. But Netscape wasn't interested in those issues -- they just wanted to deliver a browser that could display pretty web sites.
And of course when Microsoft joined the fray, they had the same attitude, only more so. So all the thousands of newly-minted web designers were indoctrinated to think in terms of tweaking proprietary HTML until it displayed correctly on one or two "preferred" browsers.
It's going to take a long time to reverse this mindset, and I doubt if it will ever disappear completely. It certainly doesn't help that no browser properly supports all the features of CSS2, which is the most important tool of the standard-complying web designer.
i go to zeldman.com using ie5. i change the browser's font size from "medium" to "largest." nothing happens (except that the left-hand navbar button spacing increases a bit). i change the browser's font size to "smallest." nothing happens (except that the left-hand navbar button spacing decreases to zero). need i say more?
I thought the Web was the standard. It came standard on my Dell.
--
"Outlook not so good." That magic 8-ball knows everything! I'll ask about Exchange Server next.
debian woody is stable, bitch!
A.K.A. Designing the anti-Slashdot way.
So, ideally, what we need to do is encourage the companies that generate HTML to use the standards, not teach every single person how to do it. Until that happens, I would think we'll still see a lot of non-standard HTML floating around out there.
--
Get rid of everything Micro and Soft: Buy Viagra and/or Linux
Would using relative font sizes (such as em, as opposed to px) make a difference?
I, for one, welcome our new standardized spider overlords.
Use Macromedia Fireworks. Perfect WYSIWYG with Photoshop-like input. Never touch HTML again unless you're writing some sort of webapp, in which case you should be using a templating system and the HTML should be separate, and you can still use Fireworks.
Three words: NON RECTANGULAR SLICES (part of FWMX2004). God's gift to the Internet, Fireworks is Moses.
Quit wasting your time and get stuff DONE.
# Erik
Just to reiterate for those who seem to think I'm some moron.....
First off, I'm still running on the standard system of if I don't see it straight away, the site's broken. I'm on a decent speed connection, and the average joe on a browser isn't.
Second off, if you're older, your visual response time isn't the same as someone younger, varying on levels of tiredness. It takes more brainpower for an older person to see such things. So, for an older user, they wouldn't notice it right away, get annoyed, and leave.
Third, I'm not colourblind, but for those who are or have difficulties distinguishing near hues, that sight can be a nightmare. It doesn't matter if I can change the style later, I won't necessarily see that the first time.
Lastly, looking at the tags that come up when I mouseover, that sight would be really obnoxious using a text-to-speech browser. Yuck.
Linux - because it doesn't leave that Steve Ballmer aftertaste.
When you see a fancy CSS-based web site, it's important to remember that you don't need CSS to create a pretty web page. In the current state of the art, it's actually easier to create fancy eye candy using legacy HTML. What CSS buys you is a web page that's much easier to design and maintain, and is much less likely to have browser-specific issues. It's particularly important that a well-designed CSS-based page is still usable on a browser that doesn't even support CSS. It's not as pretty, but at least all the content is readable and organized the way the author meant it to be.
Very cool site, thanks! It even works in Netscape 1.0 (yes I tried!)
Thank you. We now return to our regular scheduled programming...
Well, they're de-facto standards until someone pulls out a dusty patent and sues for a few billion dollars worth of royalty.
Then you move on to the next de-facto standard to avoid paying the patent. The side effect is that things are hacked togething in a way designed more for avoiding paying royalties than for maximum efficiency.
Because it would be so terrible if headings/navigation etc. were done as text since they might be shown in a font that was not the approved font for that intellectual property franchise.
But I agree that, in real life, due to Microsoft dominance, standards will never be standard, and there will always be the need for hacks.
Yes, I like it if pussies have standards too.
IIRC geocities liked to "break" peoples pages by putting all sorts of wierd scripting rubbish in them that didn't work.
I know most of the /. crew thinks of web design as a frivolity [the people who manage /. certainly do] but adopting CSS [yes, even for layouts] is important for a number of reasons. It introduces structure to the content that makes it easier to generate, maintain and manipulate. It means that people using old/weird clients [yes, even line-mode browsers] can still use your site. It means that search crawlers have a better chance of getting good info from your site. It means that engineers won't have to support wonky javascript for rollovers or browser sniffing. It also means that programmers never get that Friday at 4:30 pm phone call from angry marketroids who are upset that something is a pixel off. Isn't that worth it?
For designers this is important as well, as it can make your job easier in some ways. It can also make it more difficult, explaining to your client/marketing person/product manager that it's not going to look identical in every browser is a tough sell at this point. Also, web design is finally becoming its own discipline. As designers we are now responsible for helping our clients and coworkers structure their information in ways that is more flexible and useful. We're not painters anymore, we're part of the construction team.
Is support perfect across all clients? Nope. Will it ever be? Hell no. Is it good enough? YES.
Here's some links that show off the potential of CSS:If you want the largest audience possible, then using the latest web standards, such as promoted by Zeldman, is not what you want to do. The reason for this is because not all web browsers in current use work with these standards. And there are many reasons people won't or can't upgrade those browsers.
There is a way to make web pages so that they can use standards, and still work on older browsers. However, you might not like the end result. What you get on the older browsers is a very poor presentation. For example, if you define the look of your page in cascading stylesheets, when viewed on a browser with no support for CSS, you get crap.
Boundary conditions are even worse. If the browser is a version that tries to support something, and does it wrong, you can get even worse that crap. It might not work at all.
Mixing standards can cause problems as well. Here is an example. Lots of designers seem to like blue backgrounds for the side rail menus. But lots of web browsers default to blue for hyperlink text. If you specify the color of the text in a stylesheet, but specify the background color of a table cell (or worse, the whole page), in HTML, then you can end up with a situation where some of what you specify is acted on, and some is not. You'd end up with blue text on a blue background, and therefore unreadable.
It would be great if everyone could upgrade to the latest browser. But if you are trying to reach the widest audience possible, you do have to consider that many in that audience will be using older computers which have smaller drive space, smaller RAM space, slower CPUs, and can only run older versions of operating systems and browser software. While Linux might well be a great replacement for old versions of Windows on those machines, you still have the problem if shaving a recent version of some Linux distribution down to fit, and getting a huge obese browser to run on a tiny, slow, machine.
Here is an example of a real web site done in a way that displays terrible on some browsers. You can see what it looks like in Netscape 4 in PNG, or JPEG, or true color GIF (works on Netscape 2 and later) formats. If you scan very close in the blue area on the left (this does not work with the JPEG image), you can see that the colors are #5a61a9 for the background, and #5b61a9 for the text (specified by their HTML in the body tag, so they intentionally did this). By radically exaggerating the red plane (e.g. everything #5a and below is made #00, and everything #5b and above is made #ff), you can see (PNG, JPEG) the text was really there. And you'd think that a state government would be concerned enough about making their site available to all audiences, including the economically disadvantaged who can just barely even get a computer and internet access. But no, they don't actually care (I talked to these people, and they really don't care). Here is another crappy web site. By comparison, this site and this site look fine in this older browser.
now we need to go OSS in diesel cars
I'm with you 99%.
Uh oh, looks like Master Chief crashed!
It's a moo point. Y'know, like a cow's opinion, no one cares.
I do admire the css Zen Garden, and also David Shea's other online design work. But not so much for the pretty graphics (nice, but not of extreme interest to an artistically challenged dweeb like me) as the way it promotes usable and accessible web content. Most web pages put a priority on presentation over content. Being a technical writer, I have exactly the opposite priority. Shea is doing a good job of promoting web design techniques that let you have it both ways.
If you are having trouble convincing management that your site needs to be comply with web standards and you are at all involved with Federal contractors, academia, or any kind of service agency, drop me a line; I am a developer for the Program on Employment and Disability, and we do a lot of work with Section 508/W3C WCAG guidelines in addition to encouraging XHTML, and a big chunk of that is trying to make policy wonks and PHBs aware of these issues in terms that mean things to them. (especially if there is a legal risk to not writing compliant pages, as there is for many people that may not realize it).
The trouble with that is, Netscape mishandles basic inheritance (which puts the "cascading" in css.) On top of that, Netscape forgets all style information after a form element. So if you want all your content to display in the same font, you have to overload elements like p, ul, li, h1, h2, etc. to accomodate for Netscape instead of setting your font one time on the body and being done with it.
I would do everything you said, in reverse: Write the imported stylesheet first, to get the look you want in modern browsers. Netscape doesn't understand style, so it will ignore it; now make a copy of the css you just wrote, and link it. Fix the stuff that breaks in Netscape, but without overloading any elements - because styling those elements explicitly will take precedence over anything that is supposed to follow inheritance properly in your advanced, imported stylesheet.
Alternatively, depending on how big a sacrifice you are willing to make to the visual experience in older browsers, you could start from scratch in your linked stylesheet and only include very basic style info for Netscape. This is probably preferable if you are doing significantly complex things in your advanced stylesheet, thus making debugging it in NS a painful experience. Check out this article for more on this approach.
You are absolutely correct. The DOCTYPE tag does actually mean something! It indicates the version of HTML.
Just wondering though. Why do people think that a DTD is required to view a document? A DTD is required for validating documents, which is a matter for authoring, not viewing.
In fact, a stylesheet is required in order to view document. That makes sense if you consider that all HTML browsers have a default, built-in style sheet.
OK, I read the book and I agree completely with the message. And I read and enjoy Zeldman's site, it's a great source for what's happening in web design. But his writing style doesn't work on paper. He has a hugely irritating habit of adding unnecessary asides wrapped in parentheses into the main text of the book, often referencing other parts of the book. It's like he's itching to put in a link, but guess what - links don't work on paper. Have you heard of sidebars at all Jeffrey?
My other major beef with the book is the lack of meat. It's a history lesson on the browser wars and a white paper on why web standards are good. A book about building web pages using standards that doesn't get to "CSS Basics" until chapter 9?
If you want to get hands on with web standards, i.e. using css for layout, buy Eric Meyer's book Eric Meyer on CSS. Read chapter 1, do the exercise, suddenly it all becomes very obvious.
Face it, the W3C has done tons more "layout" work for HTML/CSS than they have done "semantic" work.
HTML might be great semantic markup for say a Physics paper, but it's absolutly lousy for anything like a modern website. Just look at a Slashdot page -- there are no <navbar> , <section> , <linkbox>, <header> , or <footer> tags to use. What now?
People use tables and divs for a reason - the semantic stuff is primarily useless.
Ever since I heard of SVG I've heard that it's "catching up" with Flash. When it supports streaming video and gui components to embed in your movie, I'll start to believe it. In the meantime, I'm sticking with Flash.
[Ducks]
Drill baby drill - on Mars
This PHP code (and following head tag) put at the very top of any HTML page will tell Mozilla that the .html page following is actually application/xhtml+xml.
Then if you make ANY little mistake at all in your (X)HTML code, it will completely fail on you, as if it was a script, showing you the exact error and where it lies. It's been a priceless way to check my XHTML syntax without always linking over to w3.org
etc. (not sure why slashdot comment is adding ; before html xmlns
that's all covered in the book. Not a real problem for those who've read it.
Unfortunately, very few sites out there that work in all browsers correctly are compliant.
Mine (Overcaffeinated) is. And it displays the same in everything from Firebird to Explorer to Safari to Konqueror to PDA browsers (no 4.x browsers supported).
It's not about avoiding Explorer, just its glitches. You can do wonders with CSS, and tweak it to work well with most browsers without using hacks. It takes some more time, but it's doable. and in the long run, it pays to have compliant code. Much easier to modify.
The other way is to learn the hacks (there are lots) that hide content from non-IE browsers or target specific versions. Take a look at Zeldman's css and you'll see quite a few of those. That ensures his site looks the same if you look at it with practically anything. I don't find that to be so maintainable, though (when you update your CSS you have to consider all repeated content that is there to be shown for specific browsers) so I go another way: Code your site around glitches. If a layout method produces iffy results in two browsers, don't use it. Try to be as specific as possible in your div alignment (without resorting to absolute positioning). Always specify all margins of an object. So on. It's quite fun, really =)
By the way, my site design was influenced by Zeldman's. I love his work.
Overcaffeinated. Angry geeks.
in fact that fact is mentioned in the book.
I've checked this is IE 6 and Netscape 7.1 and they both do it. So I don't think this is a bug in the browser.
There are no practical "web standards" except for a trivial subset. The vast majority of users have MS-IE browsers, and IE only half-ass fallows "official" standards. A better title perhaps would be, "Living in a Microsoft browser world". You are not going to convert your company to Mozilla. It ain't gonna happen. Besides, there are some Mozilla rendering "oddities" also.
Table-ized A.I.
That makes no sence. Do you expect everyone to be an expert on everything?
Read Zealdman for tips on standards, HTML and CSS, and whoever else for tips on usability. Bloody hell...
What browser where you using? Could you still use the site? Could you override it if you had a disability? Please atleast answer these before you go on some ignorant, illogical, naive rant...OK?
At this point, your only argument is that it's still possible to make the web-site look somewhat perfect on a browser like NN4. But to do that, Zeldman would have to resort back to using spaghetti code and hacks etc. Surely I don't need to point the disadvantages of these out to you? (poor accessibility, bloated code, harder to write and change etc etc.)
HTML was never designed with asthetics in mind. That's what CSS is for. If an older browser doesn't support CSS, then you're right, the user won't see the site as the designer intended. But what the hell is the designer supposed to do? "Sorry guys, I can't use CSS because some people won't get the benefits of it, so it will be better if none of you do"? That's absurd.
My computer doesn't have the power to play the latest games very well. Does that mean that game makers should hold back just for people like me, when there are plenty of others who do have a computer powerful enough to take advantage of what game makers can offer? No.
CSS is like that, because it's an enchantment. People can still use a site without CSS. Just like my computer can play todays latest games, it just not in all their glory.
You can go about making you site look good in a browser that hardly anyone uses, but you will be penalising other people who simple can't just upgrade to work around your problematic code.
There are no practical "web standards" except for a trivial subset. The vast majority of users have MS-IE browsers, and IE only half-ass fallows "official" standards.
Huh?
How did you decide all of this? Have you looked at CSS at all?
- Scott
Scott Stevenson
Tree House Ideas
If you want the largest audience possible, then using the latest web standards, such as promoted by Zeldman, is not what you want to do.
By that logic, nobody should write software for anything but Windows.
I think you've gone overboard in describing how backward compatible one has to be. Netscape 4 has a very small userbase at this point. And a visual browser (ie: not Lynx) that doesn't support CSS text colors is a true rarity.
There's been a long standing chicken and egg problem. Browser makers never beefed up their standards support until web authors started using CSS widely.
- Scott
Scott Stevenson
Tree House Ideas
I take that to mean you consider using a few layers of tables to be "complex". OK, so be it.
Unless you're trying to support Netscape 3 and IE 3, you should be able to replace many (if not most) nested table configurations with CSS box equivalents, even on the older (4.x) browsers. At least that's been my experience.
- Scott
Scott Stevenson
Tree House Ideas
Don't forget to check your site with a lot of different browsers.
Use Lynx to see what a search engine spider can see on your site.
Use PHP (true PHP, not thingies like PHP-nuke) to have a dynamic site with a good interaction.
You can also intercept the user-agent of the visitor to propose different layouts.
Look, I understand needing to use table-based layouts to make sure something looks good in Netscape 4. Heck, I still have a couple sites that are still run that way. I have spent 7 years of my life dedicated to understanding the quirks and idiosyncrasies of table-based designs and 3 years pursuing more modern techniques. Maybe you have forgotten, but laying things out with tables takes a lot of know-how of the quirks of table implementation. The simplest of which is the dreaded blank line caused in Netscape when there is a space between an image and the closing TD tag. I can't tell you how many hours I spent on that one back in 1995. And what about if you use colspans with widths? Better not do it in the first row... And countless other little details that come up when you start trying to achieve liquid (or even just vertically stretching) layouts. Sure, the basic concepts of table-based designs seem remarkably compatible and easy to apply, but in reality you end up relying on a lot of behaviour that is not really documented anywhere and may very well break horribly in future browsers.
Standards aren't a silver bullet, but at least you have some basis for how you can expect things to work. Maybe you still have to go back and tweak things, but future browsers are unlikely to be any WORSE than current generation browsers.
Now you say I don't care about old browser users, but that's not true. I am simply weighing out options. My web site has been consistently under 1% Netscape 4 for the last year (and it was designed with tables, so it looks fine), by contrast, W3schools statistics say 10% of people have Javascript turned off. By not using Javascript, I am making a much bigger impact to my audience size than making sure things look the same in NS4. It's not that I don't care about NS4, it's that I want to give a better experience to the other 99% of my users. And the fact that my pages are 50% lighter is of benefit to everyone. NS4 users get all my content, one block after another. Sure it doesn't look the same, but it downloads fast and all the content is accessible, so in a way I'm guaranteeing access to the absolute lowest common denominator. If their computers are really so slow that they can't upgrade then they probably appreciate the speed at which my pages load.
Also, one other side note about my particular methodology. I have designed a PHP/Apache templating system that runs by means of a simple include at the top of each file and is configured by meta tags in the HEAD element (it also inherits these configurations so it's trivial to configure on a sitewide or directory-wide basis). It's designed to be able to have various versions of the same template that can be used based on arbitrary criteria. For instance, I use it to generate printer-friendly versions of pages without any extra work (other than the initial alternate template creation). If I really needed graphical layout in Netscape 4 it would be quite easy to slap together a table-based version of the template, and parse out my divs into the appropriate places. The well-formedness and good semantics that I achieve by keeping my HTML as pure as possible make this both efficient and relatively easy even without a complicated parser.
One final note: I understand that you have to do what you have to do. Keep in mind, however, that it's not all or nothing. At this time you can easily move most of your font properties into CSS relatively painlessly and clean up tons of FONT tags. With up to 99.9% of browsers supporting the basic CSS-1 font controls (Anything 4+), I can't think of any reason not to. Four years ago I was still using tables for the same reasons as you, but CSS-1 for font styling seemed like a no-brainer even then. Now I just can't bring myself to create an OKAY site that looks 100% in 99.9% of browsers instead of creating a GREAT site that looks 100% in 99.0% of browsers but is full accessible in the rest.
most of you here make it sound as if the way you code is your decision. as if youre working in some babylon of development in which all of those real life factors (timelines, cost, client demands, client stupidity) dont apply. you guys need to tell me where this candyland of fancy code resides so i can apply.
really though, i find that many of the ppl who post to sites like this act as if theyre working under no restraints. arguements about standards almost always lack the attention that must be paid to industry standards vs. best practices.
best practices would be what you are all talking about. no one can deny that complying to web standards would be one of the pillars of best practices in web development. unfortunately, most clients dont give a damn about web standards. in fact, nine times out of ten they could give a damn about the code at all.
Reasons
essentially clients care about two things: speed to market and cost. the thing about that is, those are two corners of the classic quality triagle (speed to market, cost and quality). the rule says you take one corner away and the other two suffer. when you take two of the corners away...forget about it.
yesterday we (here at ye olde agency) were minutes away from delivering a large, dynamically driven sub-site to a wireless carrier. this would be the second site we've made for a wireless carrier, and, like nearly every other project ive worked on, this company wanted it done in an absurd amount of time. how long, you ask? how long was i given to build, test and debug 22 templates? three days. you know what kind of crap you produce with a timeline like that? three days.
in three days time i knew i wasnt even creating code that could be exanded upon when changes may be required. in three days time i was able to test my html in one version of ie and one version of netscape on one platform. after my alotted three days i gave the site over to development. they also had so little time that the two original developers on the project (eventually that number doubled as we were forced to take two ppl off of a project in new jersey to fly them back here to chicago to work) that they were here working from 1pm to 9am everyday. and sure, we *could* kick out a site that *visually* looks okay in that amount of time. we could if the client didnt come back to us with a plethora of changes day after day, all the way up till the day before the site was to launch. do you really think it matters to management (on either side of the fence) that the design and content cutoff was passed weeks prior? in this economy? please. if you dont think that in these days its all about money youre sorely mistaken.
so after building sites for companies that make more money in a month then most small countries make in a year, it doesnt take long for one to realize that the deciding factor in the way you produce your work, be you in design, production or development, is entirely dependant on the amount of time your given. in a previous arguement ive had about this, someone said oh well your just jaded. jaded? hey, when you look back on months and months of work only to realize that in the end youd rather tell people no, i wasnt the poor son of a bitch who was part of *that* ugly-ass project when in fact you built the damn thing...jaded? no, its much more personal then that. this is my job, my life. i didnt fall into this like most people. i actually planned on ending up at a company which allows me to work on sites for microsoft, slate, sears, thermos, morningstar, etc. but now that im here...let me tell you, its very, very hard to reconcile with mediocrity when you know you can produce greatness if you were only given the chance. but i dont get to make those decisions. if you want to, either be a project manager or work for yourself. of course, if you work for yourself, get set to have a whole other world of problems which, not coinidentally, also revolve around money.
when i first started interviewing at agencies back in 97 i read an interview of lynda weinman, creator of the web-safe color pallette, author of many widely read web books. one of the first questions she was asked was, why did you quit your job? 'clients are jerks,' she said. ill never forget that.
Considering that those on the low end of the spectrum can't read our pages correctly anyway, our expansion into CSS will make that content available to ANYONE whose browsers can read basic HTML. So yes, we are expanding the range of people who can access our information. And no, the pages won't be as "pretty" as before but, unlike you, that's not my overrriding goal. My overriding goal is that the content is available and accessible to all.
I've come to accept that you are comfortable with how you do things. It's not how I would do them, but fine. We both have our rationales for why we do things. But I don't care for your implication that because I am not using tables for a purpose for which they were never intended -- layout -- so that the four visitors we saw last quarter who are using Netscape 4.08 get a reasonable approximation of what everyone else sees is somehow dishonorable and elitist. My responsibility is to make sure the CONTENT -- you know, the actual important words and sentences contained within all your font tags -- is available and it makes sense to the end user, no matter what the delivery mechanism is.
Do more users of more recent browsers get a richer visual experience? Sure. But that's a function of using the technology appropriately, not out of any spite for our patients who can't afford the latest and greatest. Do I hide the clinic hours, the medicaid information, and the health information they are looking for so that only people using CSS can see it? Emphatically, no.
And similar pages that don't use tables for anything other than tabular data render even faster....