This is advice for designers of websites that have a
practical purpose, e.g., forums, shops, documentation. For
purely artistic sites, or simply pointless (vanity) ones (not
that I'm equating the two!), you might find the advice
irrelevant.
If your site has a practical purpose (chiefly to
distribute information and knowledge), then supporting that
purpose must have overriding importance. The aesthetics of
the site are much less important, and are intrinsically
difficult to get right or be certain of due to the nature of
the Web.
Here are some general principles of web design which I
regard as essential:
-
Remember that the web is not like desktop publishing.
Consider, in particular, that the web designer's
rendering (when he's testing his work) is not necessarily
the same as the visitors'. (Note the plural!) There is no
fixed page size or font size to work to, and your
visitors will collectively want to see your work in many
different ways. Indeed, some visitors will not see it at
all, but hear it or feel it – but they will still
read it!
-
Which is more important? — the precise layout of your
site as you see it in your development environment, or
getting the information across regardless of the
visitors' various environments? Whenever there is a
conflict, go for the latter.
-
Separate style from content. This allows the style to
be chosen according to the characteristics of the
rendering environment, and is particularly important when
rendering non-visually – but it is also increasingly
important for the many varied visual environments.
-
Consider the occasional but ultimately certain
unavailability of CSS, JavaScript, Java, Flash, media
queries, SVG, and even images. Your page/site should
remain usable even without these, i.e. do not use
features in ways which make the page unusable by their
absence.
This stance is also useful in case you've accidentally
fouled up your CSS for a visitor, so they can turn it off
– usability should improve, in that case, even if
aesthetics don't. Furthermore, search engines see your
pages as (mainly) text.
You can see that the advice I give is mainly about
not doing something that is unnecessary,
particularly if it would render the page unusable for those
who don't have the feature. This is because most of the
problems I see in websites are solved by taking something out
that accomplished very little.
You might think that following this advice limits your
options (e.g., it leads to a less diverse Web), but I would
say that many of those options (e.g., grand, multi-column,
screen-filling layouts) were never really there in the first
place, and are just fragile illusions (at least, without
CSS3) – the Web was never diverse in that way, and those
options were merely perverse, changing the Web into something
which it shouldn't be. The fact that many people believe such
options exist as normal capabilities of the Web is largely
irrelevant, given that they go against its principles, and
well thought-out international standards exist to support
those principles. (I like to be bloody-minded on this
point.)
Looking at it another way, if you follow my advice, be
prepared to be disappointed with the results. This
is a consequence of setting your expectations of Web design
too high, probably due to being misled about the capabilities
of the Web.
-
Don't set font-size
on
<body>
.
-
Don't set font-size
using
px
or pt
units, only
%
, em
or (occasionally)
ex
.
-
Don't set font-size
on
the main body of text to anything except
medium
.
-
Use <table>
only
for marking up tabular data, not for layout.
-
Don't set CSS properties width
or height
to accomplish layout.
-
Don't attempt a multi-column layout unless you can
detect when there is sufficient space for it.
-
Don't use absolute positioning – at least, not
without a fail-safe media query.
-
Don't rely on JavaScript being supported in your
visitor's browser for your site to remain usable. Do
not make essential functionality depend on it, unless
there really is no other way.
-
Unless your site's purpose is chiefly to display
images, don't rely on image rendering being supported
in your visitor's browser for your site to remain
usable. Choose alt
attribute values carefully. Code image captions so
that they don't have to be displayed if images are
not supported.
-
Don't rely on CSS being supported in your
visitor's browser for your site to remain usable and
aesthetic. Large chunks of low-entropy content (such
as site-wide navigation) should appear after the main
content, or simply not appear on every page.
-
Don't rely on SVG, Flash, or
the-next-big-thing being supported in your
visitor's browser.
-
Don't use browser detection for authorisation.
-
Don't use browser detection to disable
functionality.
-
On the <body>
element, specify all colours, or none at all.
-
Don't specify colours using HTML attributes on any
element other than <body>
.
-
Using CSS on any element, specify all colours, or
none at all. (But you can inherit colours on elements
that are unlikely to be set by a user
stylesheet.)
-
Make the page's title identify the page, while
using the <meta>
description to describe it.
-
Don't make your site exist at multiple, minutely
different URIs. Define one as canonical, and make the
others redirect to it.
-
Never stick anything in your ear smaller than your
elbow.