CSS, I have decided, is the work
of the devil. Over the
past few weeks I’ve battled against the horrors of
designing the layout of web pages using CSS (Cascading
Style Sheets) and fun it ain’t.
Now, maybe you are wondering what on earth possessed
me to try to lay out web pages using style sheets rather
than good old HTML? If you are surprised by my decision
then I may deduce that you are not at the cutting edge
of web design. Because really hip web designers use CSS
I am working on a fairly complex web page design
with the help of Dreamweaver (nope, I haven’t
sunk as low as Notepad!). The layout in the bottom
window includes three columns centred on the page.
The code of the page design includes some HTML
and some special ‘tags’ which will
be processed by my chosen Blog (CMS) software.
But the layout of the columns themselves has been
defined in the form of CSS code (a portion of which
is shown in close-up) which is stored in a separate
My introduction to the ‘CSS for everything’ school
of thought dates from the day I decided to have a go at
setting up a CMS (Content Management System) to run a sort
of complicated set of linked blogs. My goal was to have
multiple sections on a site I run about '80s pop
music: one section given over to news, another to reviews
plus a blog for myself and a different blog for my collaborator,
As the two of us would be contributing to the site on
a regular basis, I didn’t want the pages ‘hard
coded’ in HTML. Instead, I wanted them to be generated
dynamically. Peter and I should both be able to add new
text and pictures independently of each other. I wanted
our posts to be displayed in their own sections (Peter’s
posts in Peter’s Blog, Huw’s posts in Huw’s
Blog) but I also wanted the newest posts from all the sections
(news, reviews, Peter’s Blog and Huw’s Blog)
to be grouped together on the front page.
Up to now my experience with blogs has
been limited to ‘ready
to run’ systems such as Blogger. These are fine if
you just want to write a single standalone blog. But in
order to publish a ‘multiblog’ with linked
sections, you have to take control over everything by installing
and configuring CMS software from scratch…
Source of Confusion
Thus it was that I started searching for a free CMS that
would do what I wanted. As I knew next to nothing about
this type of software, I barely knew even where to start
looking. The Open Source CMS site http://opensourcecms.com/ was invaluable. This includes ‘live’ installations
of dozens of CMS packages ands gives you the ability to
log into their admin panels and have a good poke around
behind the scenes.
Having played around in the innards of several well known
systems such as Drupal,
known as Mambo) I quickly realised that while they may
be able to do what I wanted they also do far too many other
things. Full-blown Content Management Systems such as these
provide a huge range of features which may include things
such as forums, advertising management, interactive polls,
collaborative documentation (Wikis), walking the dog, feeding
the cat and all manner of other stuff. All I wanted was
a way of setting up multiple linked blogs. As far as I
am concerned, anything else merely adds to the complication.
So I then tried out a dozen or so dedicated Blog systems.
However, most of these didn’t offer a multiblog facility.
While it is, in fact, quite possible that they may, even
so, have allowed me to create multiple linked sections
(by filtering the content of pages according to ‘categories’),
my inexperience made it impossible to decide whether they
really would do what I wanted. I rejected many of them
on the basis that after twenty minutes of using them it
wasn’t obvious to me how to create independent linked
the scenes at Pivot. One of the attractions of this system
was undoubtedly its easy-to-use administration tools…
Eventually, I whittled down my choice to three - b2evolution,
Pivot. And finally I chose Pivot. I’ll explain my
reasons for this next month. For now though, let me return
The Good, The Bad and The Ugly
Whereas most of us who design and manage web sites probably
only use CSS for styling text, the really à la
mode web designers use it for the complete page layout. In a
CSS-heavy web site, there may be styles to position blocks
of text and images in precise locations on the page. Even
multi-column layouts - the kind of thing that is traditionally
done using HTML tables - can be done using CSS. When you
create pages in a CMS/Blog system, it is pretty much assumed
that you will be using CSS for the layout. There are good
reasons for this. In particular, since a CMS generates
HTML pages on-the-fly, adding data (for example, the posts
to your blog) to the basic page definition (HTML), it makes
sense to minimise the amount of work that goes into HTML
generation. If most of the layout information is in a stylesheet
file, relatively little HTML needs to be generated whenever
a page is viewed. Moreover, the layout of all the pages
can be altered simply by editing the CSS file.
OK, that’s the good stuff out of the way. Now let
me get around to the bad…
If you really want to get the goat of a CSS fanatic,
just try singing the praises of tables. In the CSS lexicon, ‘table’ is
a term of abuse. The main criticism seems to be that HTML
tables (which have long provided one of the fundamental
means of formatting text and graphics on a web page) are
inflexible; they are ok for fixed grids, not much good
for overlapping content and, moreover, they are embedded
into each individual web page so they can’t easily
be changed unless you rewrite the HTML.
By contrast, CSS can define tabular layouts in the form
of layers (DIVs). Unlike tables, layers are highly flexible
- they can overlap one another and align against other
layers. And, best of all, the entire layout definition
resides in a separate CSS file. You can have one CSS file
to define hundreds of HTML pages. The advantages are obvious.
Well, aren’t they….?
In theory, they may be. Bit in practice it is the disadvantages
that stand out far more obviously than the advantages.
Put simply, CSS is a pig to use.
What You See Is What You Code?
I’ve discovered - much to my surprise - that many
professional web designers despise WYSIWYG tools almost
as much as they hate HTML tables. Hand coding is, they
say, preferable. I’m sorry, but if they really feel
that to be the case then something somewhere has gone profoundly
wrong. I mean, designers should be designing, shouldn’t
they? So what the heck are they doing messing about with
|“The end users don’t
care whether the pages are made out of HTML, XML, PHP,
CSS or bits of papier mâché stuck together
with chewing gum…”
How can we explain this antipathy to WYSIWYG?
It could be that the anti-WYSIWYG fraternity is using
the wrong WYSIWYG tools. It could be that the tools themselves
aren’t up to the task of coping with some types of
design. Or it could be that the designers are spending
too much time thinking about coding and not enough time
about designing. I tend to think that the last two explanations
are the most likely: WYSIWYG tools are indeed poor at working
with some types of design - notably those which make extensive
use of CSS layouts; and designers should be concentrating
on design rather than the technologies that lie behind
them. Since visual design is most easily accomplished with
HTML that’s what designers should be using.
I remember the first wave of geek-HTML coders who despised
HTML editing tools of any sort and boasted that they did
it ‘in Notepad’. I am depressed to see that
this austere ‘code first, design last’ attitude
seems to have made a comeback.
The plain fact of the matter is that, as far as the end
users are concerned (the people who actually visit your
web site) the technologies that go into designing the pages
are of no concern whatsoever. They don’t care whether
the pages are made out of HTML, XML, PHP, CSS or bits of
mâché stuck together with chewing gum. All
that matters is what the page looks like when it appears
in the browser. From that perspective, the only major difference
between CSS and HTML is that CSS layouts are harder to
do. Take multiple columns. These are trivial to create
in HTML. But in CSS, a three-column layout is one of the
signs of the master.
Just to test if my prejudices on this matter were wrong
and that CSS layers really have superseded HTML tables
out there in the big wide world, I took a look at some
big sites with complex layouts and regularly updated content.
Take a look for yourself:
Surprise, surprise, it’s all done with tables!