So, would you folks mind specifying briefly those aspects of HTML and/
or CSS design that may have been popular in the past, but should be
avoided now.
Not many really - mostly things were avoided because they didn't work
in the '90s, then weren't understood in the early '00s. Post Firefox
and after IE5 disappeared it's a lot easier to use these features, but
old habits still die hard.
Books:
The Head First series are good first tutorials, and they're good at
teaching "good practice" too. "Head First HTML with CSS & XHTML" is my
favourite HTML book and their JavaScript and Web Design are worth
reading too. As a CSS desk reference, I still like Lie & Bos'
"Cascading Style Sheets".
Websites:
HTMLDog Not perfect, but the best I know
http://brainjar.com/css/positioning/
http://glish.com for some well-done worked examples
Joe Clarks' accessibility book is free on-line
Best practice techniques:
* Fluid design.
This is IMHO the biggie. You don't know how big the user's window is
and you shouldn't try to control it. Fit your content into what they
have made available to you.
* Independence of screen size
Forget this "Best viewed at 800x600" business
* Independence of window size
You don't know how big their screen is, so you certainly
* Using text-based size units to define sizes of boxes and margins.
If you use ems for dimensions (sometimes pixels around images) then
you'll get fluid behaviours naturally.
* Accessibility
Read the Joe Clark text
* Standards compliance
Code according to the standards (HTML & CSS) and validate every time
you view a page. he standard is well-defined and objective, so you can
hope to meet it in a way you just can't for "browser compatibility"
tests.
* Device independence
They might be reading your page on their phone, or even their fridge.
Be fluid, follow the standards.
* Browser independence
It should work well on any browser. All current browsers are good, the
bad browsers aren't the nightmare they were in 2000
* Rational fluid design
Your page needs to work at any size, but it doesn't have to use every
last pixel it's given.
Suppose your page needs 800 pixels to work great. If you view it in a
2000 pixel window it doesn't need to do anything more than this. You
(as a designer) should _know_ how it will behave and make sure that it
doesn't fail, but fluid design doesn't mean that every available space
gets as much content rammed into it as will fit.
* Sensible whitespace
What happens in a window wider than expected? Usability studies show
that text lines of more than 15 words become hard to read, so it's OK
to limit their length to just this (try 55ems as a starting point, for
English). Use text-based units (ems) though, not pixels, or else
fluidity suffers, If the page is viewed in a super-wide window, where
will the whitespace go? Is this sensible? It's often better to throw
it to the right rather than centring no matter what. Expanding the
content width without end is rarely good.
* Avoid horizontal scrolling.
Rarely needed these days.
* Strongly avoid two dimensional scrolling
The problem with horizontal scrolling isn't that it's horizontal so
much as there being two dimensions of scrolling in play
simultaneously. A purely horizontal site might be OK (although a
little surprising, thus confusing) but a page that needs two-axis
scrolling is nasty,
* Remember multiple monitors.
Centring can put you right over the split.
* Floated boxes
Remember the simple thumbnail gallery. A linear series of floated
<div> is a much more fluid implementation than a <table>. It might
look just like a rectilinear grid, but how many columns are there? Is
this the same for all window sizes? Floating boxes is an easy way to
gain a nicely fluid layout, even when all you need is a grid but you
don't know how big a grid.
* Appropriate JavaScript
It should almost never be _essential_
It should _add_ function to a page, You should know what the
JavaScript is for, The page with JavaScript should work _better_ than
a page without. A surprising number of JavaScript image zooms are
quite restrictive for the user, but they "look cool".
* HTML 4.01 Strict
* HTML 4.01
This is still the best version of HTML to use
* Strict HTML doctype
There is no reason to use the other doctypes.
Techniques to avoid:
* Frames. If you need to re-cycle menus between pages, either generate
them dynamically or use SSI.
* Tables for layout.
They were a hack, and they tended to be pixel-sized and thus non-
fluid. Learn better techniques.
* CSS over-enthusiasm
Use <table> whenever you _need_ a grid. It didn't become the "wrong"
way to do something (although it's no longer needed in some cases that
weren't strictly grids to begin with).
* Firefox compatibility
If you have a single-browser only site and you want to support other
browsers, do this by aiming for the _standard_, not another browser.
It doesn't work if you try to "add support for" another browser one-by-
one. Standards are objective, browsers aren't.
* Browser sniffing
Don't make your page vary its behaviour according to the browser in
use. Just get it right according to the standard. Besides which, this
technique is brittle for new browsers you haven't yet encountered.
You _may_ use "feature sniffing" in JavaScript, but sniff on the
availability of a feature, not by identifying the browser's name and
then assuming its feature support.
* The "paper web"
The web isn't paper. Don't pretend it is, you'll make bad websites.
Even if you're a magazine publisher.
There's a lot you can't control on the web, so get used to it. You
can't enforce sizes. You can't usefully suggest exciting new fonts.
You certainly can't add huge backgrounds with large-scale graphic
elements on them and expect things to align.
The web is also a fluid medium, viewed through windows of varying
size. Don't read any of the fashionable texts on "layout grids" and
expect those to work on the web. If they do, they can only do so by
breaking fluid design (and that's much more valuable).
* PSD design
Don't design web pages ion PotatoShop first. This is the antithesis of
prototyping: it doesn't tell you what you need (broad design) quickly
enough, but it does restrict you to unimportant trivial details (was
that 4 or 5 pixels wide?) for ever more. Use crayons, or at least some
paper-based sketching.
* XHTML
Fashion fad, but it doesn't work with IE and so isn't safe to be used.
It's better to stick with HTML 4.01 than it is to wade into the XHTML
C kludges and work-rounds.
* HTML 5
Crazy people