The New Generation Web Design

I was just reading this article about the Fahrner Image Replacement technique and I realized that we're really entering into a cool new era of the web. If you haven't bought into the religion of CSS, then you really need to check out the CSSZenGarden which I've linked to before. It's just an inspiring display of different designs completely done using CSS. I've written about it before, but I'm once again off my ass and doing some web development and trying to think how I would want the pages to look like and am once again amazed at CSS.

As a technical web developer, the XHMTL + CSS combination is the most freeing thing you can possibly imagine. As I'm developing my site, I almost don't have to worry about design at all. I worry about the functionality - the different sections of the page are divided up into divs, the headers and the body of those sections are all marked off with h and p tags, and generally everything is kept to the bare minimum of clutter. Then later, I can start fucking with the CSS and make the simple markup look however I want. CSS isn't perfect, and I may need to add spans in as anchors here and there, but I can do that *last* instead of worrying about it while developing my pages. The days of spacer.gif's, tables and embedded design are gone.

The advantages of this are numerous. The pages will look good on any device, are accessible and the dev time is cut considerably since I'm not screwing around with table design, but instead am worrying about functionality. The fantastic thing is how flexible CSS design is - the Zen Garden really shows how completely maleable standard markup is. And have you seen TypePad's design? It's great - it's clean and well designed with bells and whistles like tabs and boxes, and yet it uses almost no images whatsoever and is XHTML compliant. Cool stuff.

XHTML is also pretty great. Even though I'm trying to focus on XHTML-strict, the idea is that even XHTML-transitional is *still* valid XML. That means you can do funky things with it like XSLT transforms, etc. If you look at your XHTML as XML, then you start thinking about id attributes as not just anchors for CSS to grab on to, but also a form of identifying parts of the page for transforming and querying (using XPath) later. And you don't *lose* anything in this process. It's all bonus. You have to pay attention to match your tags and some character encodings, but for that minimal effort you get easier to create pages, more flexible design, etc. It's really great...

I think we're moving into a new generation of Web because of all this. XHTML at first sounded to me like a big loss - harder to mark up for newbies, yet not a lot of benefit in the process. I'm now realizing that it's the XHTML + CSS combo that's really the powerhouse. And because of weblogs, the knowledge and examples of this code are spreading faster than ever.

Weblogs are key to this - I'm looking at how to best use CSS right now and there's a ton of weblogs out there written by design masters who are coming up with various techniques and tricks to get the most out of CSS design. They go into detail the pros and cons of each design decision - pressed on by their peers on other weblogs... The ability to directly learn person-to-person this way is incredible. When has a specific technical problem been so thoroughly and communally examined before in this way? It's almost like a scientific research community - the different design techniques are named for their creators.

So we've got new browsers, next generation specs and new ways of communicating it all so that it gains momentum. It's fantastic... Fun stuff.


Later... I forgot, I got so excited about CSS that I forgot my pet peeves about XHTML: strong and em. Urgh. Why couldn't the guys at W3C abbreviate them like the anchor tag? s and e would be fine, and much more similar to the obvious b and i tags... Strong and em just look so damn ugly on a page.

< Previous         Next >