CSS Deserving Of A Showcase
Despite the increased focus on accessibility and simplicity in web design, it’s surprising how often designers resort all to quickly to the likes of table based design, Javascript, or Flash when creating websites. CSS and HTML are acknowledged as the most important building blocks of accessible web design, but they’re also seen as lacking in flexibility. But the idea that a site based purely on CSS and HTML has to be simplistic or unattractive is wrong. Sure, there’s things that you can’t do, and Flash’s increased (but imperfect) accessibility allows for wider flexibility in design, but all things being equal it’s still better to use CSS and HTML where they can provide the required function.
CSS - Pretty and accessible
I’ve spoken about the benefits of CSS design regularly in the past, but to recap - CSS gives you great flexibility in design and page appearance, keeps that appearance entirely seperate from the actual content of the page, and therefore provides excellent accessibility and makes redesigning a site far easier.
As browsers develop, support for deeper CSS functionality has grown extensively. The extensive glitches in support with Internet Explorer 6 can largely be overcome with stylesheets specific to that browser, and Internet Explorer 7, Firefox, Safari and Opera all provide pretty comprehensive CSS functionality. Universal consistency is still some way away, but the small differences between the way these browsers render CSS based designs are usually pretty simple to resolve.
Showcasing the benefits
I’ve decided to make some efforts to showcase designs based on CSS and HTML and nothing else. I want to help people realise how much you can achieve merely with those two technologies. That’s not to say that other technologies don’t have their place, but I definitely think the artistic opportunities available merely from CSS and HTML are overlooked.
The page at www.fogofeternity.com/showcase/cartoon is an opening effort in demonstrating how CSS can be used to make attractive pages with interesting functionality. The main point here is to demonstrate how simple the underlying HTML can be, when you consider how extensively CSS can change the appearance of the page. Look at that page, and its functionality, and consider that the main body of the HTML page, whose appearance the CSS defines, reads:
<body>
<div id=“header”>
<p>A demonstration of some effects possible solely through the use of HTML and CSS. By <a href=“/”>Fog of Eternity</a>.</p>
</div>
<div id=“scene”>
<div id=“tank”>
</div><div id=“jumbo-jet”>
</div><div id=“anime-man”>
</div><div id=“invisible-girl”>
</div><div id=“goth-girl”>
</div><div id=“explosion”>
</div></div>
</body>
Accessible and good looking
The best showcase for the flexibility in CSS design is probably CSS Zen Garden. What’s great about that site is the demonstration of great design with zero changes in the HTML structure of the site. I’d also advise reading the excellent book ‘Transcending CSS‘ to gain a deeper understanding of the benefits, and developments, in CSS based design.
I’ll be looking to take more opportunities in the future to show how extensive the benefits of CSS can be.
