Slashdot Mirror


Web Designer's Reference

jsuda (John Suda) writes "It seems as if everyone and his brother is writing books supporting standards-compliant Web design with XHTML and CSS. I have read and reviewed a half dozen this year alone. People are obviously trying to tell us something - plain HTML has to go! Web Designers' Reference: An Integrated Approach to Web Design with XHTML and CSS, by Craig Grannell, is the latest of these pronouncements." Read on for the rest of Suda's review. Web Designers' Reference: An Integrated Approach to Web Design with XHTML and CSS author Graig Grannell pages 389 publisher Friends of ED rating 8 reviewer jsuda ISBN 1590594304 summary Comprehensive guide to standards-compliant web design

The reasons are clear and compelling: The World Wide Web Consortium, which promulgates Web design standards, has decreed HTML as obsolete. Newer, more compliant browsers, will in time not support the older tags and code; the new standards facilitate much better use by the disabled of screen readers and non-graphic browsers. Not least, the newer code makes writing and revising code easier and more efficient, as well as more capable.

These are certainly good reasons for Web designers to move to the new code. Nevertheless, surveys show that most Web pages are not compliant and that thousands of designers continue to use deprecated code. I confess that I am one of them -- after a number of years learning and getting used to HTML, the need to learn new and more code is onerous. The inertia of habit is a factor, I'm sure.

For those Web designers like me, Mr. Grannell's book is a welcome addition to the literature because it systematically deals with the topics under discussion. In its coverage of XHTML, CSS, Javascript, and complementary coding (like PHP), it provides a nice framework guiding "old dogs" like me into standards-compliant code. Not only does it provide some historical perspectives on these codes, it compares the old with the new in regard to all of the important elements of Web design.

The author is an experienced Web designer and operates a design and writing agency. He also writes articles for a number of computer magazines.

Grannell's goals are to teach cutting-edge, efficient coding, and how to master standards-compliant XHTML 1.0 and CSS 2.1. There are a dozen chapters. He breaks down the elements of Web design into modular components so that one can focus on each element separately, like page structure, content structure, layout, navigation, text control, user feedback, and multimedia. Relevant technologies are explained in context of producing a typical Website.

If one finally decides to move forward, as many suggest, this is a very good volume by which to get your start. For new designers, this is a nice primer to learn what is expected, in an overall sense, of good, advanced Web design.

This is a well-produced book with clear writing, comprehensive approach, dozens of practical examples, and downloadable files with the code examples used in the book. The author writes in a logical sequence much like an engineer would. It is a heavy textbook-like read, only lightly sprinkled with style and personality. It should appeal primarily to novice designers, but has enough advanced information to satisfy an experienced designer who is looking for that fresh start.

And in fact, the structure of the book facilitates the "fresh-start" idea. It starts with a Web design overview, giving an experienced user's tips on what software to use to write code, what browsers to design for, how to build pages from the very top to the bottom. (XHTML, unlike HTML, requires a preliminary document-type definition (DTD) to validate. Only after the introductory section does the first HTML tag appear.)

Like others writing in this area, Grannell firmly advocates designing for standards compliance, usability, accessibility, and last and least, visual design. Marketing Department people may choke on that priority list, but there is no inherent conflict between function and aesthetics; Grannell simply does not spend a lot of time on the aesthetics.

The middle chapters concentrate on modular construction of pages -- the XHTML introduction, the structural elements like text blocks and images, the logical structure of the links and navigation flow, and finally, the stylizing with CSS. Comparisons between pages styled with HTML vs. CSS compellingly demonstrate the benefits and advantages of CSS. There will be no going back once you've decided to upgrade your technical approach.

Basic CSS concepts are explained and illustrated with code samples and screenshots. Grannell describes how to use CSS for text control, navigation, and layouts. There is a broad section on frames and another on forms and interactive components.

The last chapter covers testing and tweaking including how to create a 7-item browser test suite. Strategies overcoming browser quirks are discussed throughout the book. There is detailed technical information, especially in regard to the XHTML introductory section of the page, which I have not seen elsewhere.

There are three welcome reference appendices at the end covering XHTML tags and attributes, Web color coding, and a very comprehensive entities chart noting currencies, European characters, math symbols and more.

Much of this material is covered elsewhere in the growing set of publications about standards-compliant code. This book has the virtue of having a useful overall perspective on Web design and acts as a framework for new designers and converting designers to renew and upgrade their technical approaches.

You can purchase Web Designers' Reference: An Integrated Approach to Web Design with XHTML and CSS from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

29 of 416 comments (clear)

  1. Standards, Schmandards.. by jimmyCarter · · Score: 4, Funny

    Bring back the BLINK tag!

    --

    -- jimmycarter
    1. Re:Standards, Schmandards.. by Inkieminstrel · · Score: 5, Informative

      Done and done. .blinktag
      {
      text-decoration:blink;
      }

  2. Oblig by Anonymous Coward · · Score: 5, Funny

    Haha, a web design book being reviewed on Slashdot. Oh, the ironing is delicious.

    1. Re:Oblig by Inkieminstrel · · Score: 4, Funny

      the ironing is delicious.
      I get this image of cooking french toast on an iron. Ooh you could fill the iron with syrup which would drizzle all over the toast when you pushed the steam button.

      Sorry, I skipped lunch.

  3. Yeah, I'm getting ready... by ilikeitraw · · Score: 4, Funny

    ... to launch my CSS3 compliant site.
    I setup my cron to push the site live in 2007.

  4. Elaboration? by Capt'n+Hector · · Score: 5, Insightful
    Strategies overcoming browser quirks are discussed throughout the book.

    For ANY web designer who has at least some experience with html/css, this is the single most difficult aspect of web design. That is, getting the page to work in all the popular browsers takes the most time and really has no logic to it. What I would like to see is a book that skips all the fluff that we've seen before and goes straight to browser bugs. If they can be avoided in the first pass at making a web site it makes perfecting the final presentation all that much easier.

    --
    Quid festinatio swallonis est aetherfuga inonusti?
    Africus aut Europaeus?
    1. Re:Elaboration? by DrEldarion · · Score: 4, Insightful

      If they can be avoided in the first pass at making a web site it makes perfecting the final presentation all that much easier.

      Which is funny, because the easiest way to make everything show up perfectly is to use plain HTML, which goes directly against the purpose of the book.

    2. Re:Elaboration? by telbij · · Score: 4, Informative

      What I would like to see is a book that skips all the fluff that we've seen before and goes straight to browser bugs.

      Absolutely. There are a million tutorials that will teach you all about CSS in theory, and once you have a reasonable base knowledge you can actually go into the W3C spec itself and dig into the details, but when it comes time to make your pretty new XHTML/CSS2 page work in IE you better have a boatload of knowledge.

      After 5 years, and the thankful death of NS4 and IE5 (for the most part), I can debug my XHTML/CSS pages extremely efficient, but good references are still necessary. My two favorites:

      CSS-discuss mailing list wiki
      &
      Position is Everything

  5. Baby + Bathwater by 99BottlesOfBeerInMyF · · Score: 5, Insightful

    Newer, more compliant browsers, will in time not support the older tags and code;

    Yeah that's a great idea. Lets just stop supporting a simple markup and make it impossible to view all the legacy HTML in existence. While we're at it let's force everyone to change to a newer, more complicated standard, even if they have no need for it.

    Now I'm all for using CSS and XHTML, but that is because it makes things easier to maintain for me. Calling for browsers to stop supporting HTML, however, is taking it about three steps too far.

  6. Web standards are stupid. by Anonymous Coward · · Score: 4, Insightful

    If the developers of Netscape Navigator had this fanatical devotion to the W3C that seems to be popular lately, we wouldn't have tables, scripts, or any kind of styles (neither nor CSS). None of that was in the standard (HTML 2.0) at the time.

  7. XHTML is a bad solution by Enrico+Pulatzo · · Score: 4, Interesting

    I don't understand why designers and technologians keep preaching XHTML. It's at best a kludge. Until you start serving XHTML documents with the correct mimetype (application/xhtml+xml I believe) XHTML provides no benefits over plain old HTML (provided you stick to the spec). Until then, User Agents will continue to accept whatever crap you throw at them, and since you're not using real XML you won't see any errors (except for the rendering).

    I coordially invite someone to give me one reason why XHTML (in its current form, served as text/html or text/xml) is better than HTML 4.0 strict? Is closing my link and meta tags really that life-changing?

    1. Re:XHTML is a bad solution by imputor · · Score: 5, Informative
      A couple reasons...

      The main is that XHTML really FORCES you (if you want your page to pass W3C validation) to seperate design from content in a way that facilitates the ease of updating pages.

      A side effect of this is smaller filesizes. A recent conversion from HTML to XHTML+CSS for a client of mine brought their homepage size down from 25k to 9k. This to me is reason enough to use XHTML+CSS.

      A side effect of this is better code/content ratio.... a side effect of this is better search engine placement.... a side effect of this is...

      So using XHTML over HTML actually has a cascading (mind the pun) list of benefits, completely independant of the technical mumbo-jumbo of the whole "XHTML is supposed to be XML" stuff.

    2. Re:XHTML is a bad solution by Enrico+Pulatzo · · Score: 4, Insightful

      XHTML doesn't force you to do anything. I can make a page that passes a validator that's 8 nested tables deep that happily passed the w3c validator. There's absolutely no forcing there.

      The only thing that XHTML forces you to do is stop using the font tag. That's pretty much it. Everything XHTML can do HTML 4 does and does it better (cuz existing UAs grok its mimetype).

      The real promise of XHTML is the same as XML: being able to mix and match namespaces into a super-document. However, no user agents (except for some special builds of Mozilla) really accept embedded XML dialects (for an example, see SVG+XHTML on Mozilla's SVG site). This is changing in Firefox 1.1, but it won't have any real effect on the marketplace until the majority of user agents support it.

      Short version: XHTML disables the use of the FONT tag and some attributes that should be done in CSS anyway.

  8. Re:How to Suck in 21 days! by Anonymous Coward · · Score: 4, Informative

    I need to take a screenshot for future use of this perfect example of both ignorance and apathy.

    You obviously have no experience with CSS. In comparison with more modern markup, coding and styling plain old HTML is like making spaghetti _one_ noodle at a time.

  9. Re:Gilding the lilly by tehshen · · Score: 5, Informative

    Super quick whizzbang explanation:

    <b> and <i> are visual tags: they make text look bold or italicised without altering the meaning of the sentence they are in. <strong> and <em> are logical tags: <strong> provides emphasis in web page readers, as well as looking bold, for example. <em> does the same, but renders differently in text browsers. There are other italic tags such as <cite> that are used for citing references, for example.

    This page says it better than I do.

    --
    Guy asked me for a quarter for a cup of coffee. So I bit him.
  10. plain HTML has to go ! by cablepokerface · · Score: 5, Insightful

    And why is that? So people can screen scrap easier because you're content is xml parsable?

    I lived by those rules not long ago; tableless design, css driven, no client side javascript events in the html (but put there by an initialization function), classnames never revealing structure information, separating structure classes with lay-out classes in different css, xhtml 1.1, etc.

    Where did it get me? Not sure but sticking to all those rules sure costed me much more time then needed. And what for, because browers require that a page validates in a few years? Forget it, not in a decade, not in two.

    Advice, stick to clean html that makes sense, think of your customers, think of your bandwith and don't let that w3c run your web development.

  11. Re:Web standards!!?? by ShinmaWa · · Score: 4, Informative

    Wouldn't Amaya (W3C's browser) be compliant? Granted, it sucks horribly, but I'd be surprised if it wasn't totally compliant.

    Then suprise is your meal of the day. Amaya not only failed the acid2 test, but actually did much worse than even Firefox. Here's a screenshot for your amusement.

    --
    The /. Effect: Thousands of users simultaneously accessing a site to not read its content.
  12. Re:How to Suck in 21 days! by Flutty · · Score: 4, Insightful


    Just a comment as someone who is a "content manager" ie the poor person who has to put the words onto the web designers pages.

    Using a database to feed a web site makes things so much easier. Global updates, automatic sorting and reusable elements in other parts of the web. Just because something does not make sense to a coder does not meant it is useless to mere mortals.

    >>> all the complicated PHP scripts and ASP pages serving as frontends to database of choice, to serve up what's essentially static information.

  13. Re:How to Suck in 21 days! by kaiidth · · Score: 4, Interesting

    Interesting... I thought that, right up until the time that I tried authoring and maintaining a medium-size site (back in the .com days) and earned myself a rude awakening.

    In my experience (YMMV) it is far, far easier to create an infrastructure capable of doing everything you want and to serve content dynamically within that infrastructure, than it is to edit more than a very few pages by hand. Now there is a good argument for serving static (cached) versions of dynamically created files where this is possible, and a lot of sites do just that.

  14. There is a lot to that. by jd · · Score: 5, Insightful
    It is stupid to re-create, on the fly, essentially identical information that probably won't look right on many browsers anyway. It would make more sense to put that time and effort into getting the page to work well than in getting it to use the latest technology.


    Having said that, using PHP and other dynamic mechanisms to "code around" browser bugs, by implanting "patched" tags or using alternative mechanisms where something is seriously broken, is definitely the most practical solution.


    You can use Apache SSI's to detect the browser and then #include the appropriate page, but that is extremely expensive on maintenance. It is much more practical to embed markers wherever you might need to deviate from the "correct" HTML and simply use a script to search & replace.


    For those pages that genuinely do have dynamic content, you can have a background engine generate static pages every so often, which you then serve, avoiding a continuous rebuild. However, you run the risk of race conditions, where you try to serve a page that is part-way through a rebuild. The result will be the display of a broken page, which is definitely a Bad Idea.


    Really, the "correct" design is to use a mix of approaches. Use static methods for static content, use dynamic methods for dynamic content, use pre-built pages where downloads are more frequent than updates. Hammers are great for nails, but you wouldn't use them in place of a saw or a screwdriver.

    --
    It's a small world and it smells funny; I'd buy another if it wasn't for the money; Take back what I paid (SoM)
  15. Re:Web standards!!?? by telbij · · Score: 4, Interesting

    Why is this the case? In authoring the post, I was of the impression that Firefox is 100% compliant.

    The reason is because the spec is incredibly difficult to implement. Mozilla is damn close to full compliance, but the fact is that the CSS spec suffers from varying levels of vagueness when it comes time to actually sit down and implement a rendering engine.

    The real problem is that it's impossible to anticipate all the ways that people might attempt to use CSS, and the gray areas can really only be standardized by browser makers after years of web development by the public at large. CSS 2 is really just starting to hit its stride now that Netscape 4 is effectively dead, but it won't be able to take another quantum leap until IE6 is dead (assuming IE7 makes good on their standards-compliancy promises).

    Sadly, web design is one of the most difficult technical disciplines because browsers grew like cancer in the 90s and now the browser makers are all obligated to support all that cruft. IE has some truly mind boggling bugs that will probably have to remain because people depend on that buggy behaviour.

    Ah, well, that's job security for me.

  16. Re:How to Suck in 21 days! by INeededALogin · · Score: 4, Interesting

    database backed webpages are a trap and a bottleneck. Notice that Slashdot generates static pages from comments. Databases are not a limitless resource and notice how many webpages get sucked into the "No more connections" trap when you visit them from Slashdot.

    Now people will argue that a server is not scalable either, but you can always have 5000 servers serving up that same static data. You really can't expect 5000 servers to access a single database and expect the database to survive.

    Databases are needed for some webpages, but don't throw them in as a simple shortcut.

  17. Re:What's the need? by man_of_mr_e · · Score: 4, Interesting

    Many things are wrong with current HTML. Well, ok, not CURRENT HTML (4.01) but everything before that.

    Since XHTML is just a reformulation of HTML 4.01 into XML, and XHTML 1.1 is just a modularization of XHTML, technically nothhing is wrong with HTML as it exists today. But what about how it exiists tomorrow?

    XHTML allows for the easy expansion of the language. Right now, DOCTYPES are the only way to define what version of HTML you're using, which makes it an all or nothing proposition. What if you want to use HTML + SUPERCOOLHTML-Extended? XHTML 1.1 allows you to basically define your own syntax, and more importantly allow the standards body to do so easily).

    This way you only have to use as much of the standard as you want to, and if there are two competing standards you can actually choose which one (or ones) to use in a way that the browsers can understand.

    Now, i'll grant you that for the typical "my cat fluffy" site, they don't give a rip. HTML 4.01 is just fine. But did you know that HTML 4.01 strict doesn't have font tags? It doesn't have the target attribute on links. It doesn't have a lot of stuff you're used to that are going away.

    It's best to get used to XHTML now, HTML won't be improved, but XHTML will.

  18. They'll get my bold tag... by Cr0w+T.+Trollbot · · Score: 5, Insightful
    ...when they pry it out of my cold, dead mouse!

    That said:

    "Newer, more compliant browsers, will in time not support the older tags and code
    Garbage. The amount of code necessary to support basic HTML is so tiny amidst the vast beasts major broswers have become that there's no reason to dispense with it. And why use anything else when straight, primative HTML is still the most effective tool for conveying simple information?

    Crow T. Trollbot

  19. Re:How to Suck in 21 days! by goodgoing · · Score: 5, Informative

    What I like to do:

    On local development server:
    - Create database to store data
    - Create scripts to make the pages
    - Create .htaccess mod_rewrite rules to make the pages look static (blah.php?pageID=24&whatever=1 becomes blah-24-1.html)

    Then I use wget to save a static version of the website, then upload the static version to my webserver. Some advantages:

    - Less resources needed on server
    - HTML template easily changed if required
    - Extremely fast script development time, since there are no security checks required
    - More secure than PHP scripts on a server could ever be

    Obviously this method won't work for websites that require user input (like polls), but I think not having to worry about the security of live scripts is awesome.

  20. Re:How to Suck in 21 days! by rainman_bc · · Score: 4, Informative

    Uhm, with some caching it doesn't matter. Cached content feeding from a database is fine IMO...

    --
    09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0
  21. Re:How to Suck in 21 days! by Slack3r78 · · Score: 4, Insightful
    For years practitioners used the Web and its language, HTML, as a free format and layout platform for forms and documents (often as paint for software applications).


    Are you forgetting the NS4/IE incompatibilities and proprietary tags that plague the web to this day?

    The fact is, when W3C came along, the web was seriously broken. Those of us that are so outspoken on standards are generally those that have been on the web long enough to remember how broken it was when non-standard HTML ruled the day.
  22. Re:How to Suck in 21 days! by StabbyTHings · · Score: 4, Insightful

    Now people will argue that a server is not scalable either, but you can always have 5000 servers serving up that same static data. You really can't expect 5000 servers to access a single database and expect the database to survive.

    Of course other people may argue that the solution would be to take those 5000 servers and divide them up: run a database service across a few hundred of them, have a few thousand web servers that do the real request processing and then let the rest of the machines be web-facing machines that cache the results for a few seconds to decrease load on the real webservers.

    --
    UK Webhosting http://xeriom.net
  23. Re:How to Suck in 21 days! by cloudmaster · · Score: 4, Informative

    Yeah, it's impossible to add extra database servers.

    It's also unlikely that one could find a database server that can cache the results of identical queries when the data hasn't changed, significantly speeding up access to nearly-static data.

    It's downright insane to consider using proper cache-control headers and a caching proxy in front of a web server farm.

    It's sure too bad that these solutions can't be solved by merely hiring a competent sysadmin who's willing to relocate, 'cause that's be far too convenient. :)

    It'd probably be easier to teach everyone in the company good HTML.