The unpushed envelope

Roger points to a survey by Sean Fraser that tests entries from the CSS Reboot for validation errors. The results (including exclamation marks) are:

71.8% of the websites failed validation for HTML Markup! for CSS! or, for both!

That is somewhat disheartening but at least it provides some grist for the mill for Joe’s failed redesigns.

Personally, I’m not as concerned about validation errors in CSS-based redesigns as I am by the prevalent mindset. Most reboots and redesigns invariably involve ripping all the markup out and rebuilding everything from scratch. So much for separating structure and presentation.

The CSS Zen Garden has been around for years now. It has succeeded in showing that CSS-based designs don’t need to be ugly. It’s also a testament to the fact that you can style the same markup document in completely different ways. But very few people seem to be making the most of this freedom.

In fact, the trend that I see in the myriad CSS galleries out there is a move towards more print-like designs that are very fixed and constrained. Even as, on the server side, the general shift seems to be towards a more open, user-defined flow of data, the front end attitude seems to be going in the opposite direction. Designers seem less willing to hand over more control to the user. How very Web 1.0.

Yes, I am talking about liquid layouts to a certain extent and yes, they are harder to implement well. Still, shouldn’t redesigns of personal sites (the bulk of CSS Reboot) be just the kind of place where we can embrace design challenges?

But this is about more than the hoary old fixed vs. liquid chestnut. It’s about recognising the potential of the tools we have at our disposal. CSS is perhaps the most remarkable tool of all. The ability to alter the presentation of a website without altering its structure should have opened up the floodgates of design creativity.

I’m not talking about subtle realignments either. I want to see sites that look different depending on the time of day, the location of the designer, or even the weather. Never mind device-independence, CSS provides everything-independence.

CSS hasn’t revolutionised web design. The reason lies not with the technology (which is revolutionary), but with the designers using it. Most designers have simply swapped the old technology (tables and font tags) for the new technology, without fully exploring what’s so completely new.

I’m as guilty as anyone. Having a web site that offers a choice of a handful of (mostly liquid) designs skins was a nice start when I first implemented it. Four years on, I was hoping for it be a passé idea. I don’t think that’s the case, sadly. But that’s no reason for me not to be exploring other avenues opened up by the power of CSS.

It’s almost as if CSS provides too much power. Maybe it makes designers uncomfortable. Perhaps that’s why the focus is on rounded corners, drop-shadows, wet-floor reflections and other graphical trends (bevel and emboss, anyone?) instead of seeing the bigger picture.

It’s a tired old cliché, but it’s true: design is about communication. It seems to me that a lot of web designers have conflated communication with control (in much the same way that marketeers confuse branding with perception).

I hope that things will change. I hope that some young guns will take up the challenge, stop following the crowd, and really push CSS to its fullest potential. I hope that the publication of a book like Transcending CSS will help inspire a new spirit of exploration. Don’t let me down, Malarkey.

Responses

Related posts

Making the Patterns Day website

The joy of getting hands-on with HTML and CSS.

Declaration

HTML. JavaScript. Why not both?

Components and concerns

Gotta keep ‘em separated.

Ubiquity and consistency

Under-engineering, over-engineering, wombling free.

Classy values

Semantics and such.

Related links

Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four

A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!

Tagged with

CSS Anchored Positioning

An interesting proposal for defining how one element could be “anchored” to another, and how that positioning could be expressed declaratively instead of having to write a whole load of JavaScript. Melanie’s looking for use cases so share ‘em if you have ‘em.

Personally, I’m not convinced that a new element is needed but I’m open to the suggestion.

Tagged with

MSEdgeExplainers/explainer.md at main · MicrosoftEdge/MSEdgeExplainers

This is great! Ideas for allowing more styling of form controls. I agree with the goals 100% and I like the look of the proposed solutions too.

The team behind this are looking for feedback so be sure to share your thoughts (I’ll probably formulate mine into a blog post).

Tagged with

Web Typography News #43: Typesetting Moby-Dick, part 2

Great typography on the web should be designed in layers. The web is an imperfect medium, consumed by countless different devices over untold numbers of network connections—each with their own capabilities, limitations, and peculiarities. To think that you can create one solution that will look and work the same everywhere is a fantasy. To make this more than just one nice book website, the whole project and process needs to embrace this reality.

Tagged with

Same HTML, Different CSS

Like a little mini CSS Zen Garden, here’s one compenent styled five very different ways.

Crucially, the order of the markup doesn’t consider the appearance—it’s concerned purely with what makes sense semantically. And now with CSS grid, elements can be rearranged regardless of source order.

CSS is powerful and capable of doing amazingly beautiful things. Let’s embrace that and keep the HTML semantical instead of adapting it to the need of the next design change.

Tagged with

Previously on this day

19 years ago I wrote Live 8: music, politics and network theory

I have just one or two things I need to get off my chest and then I’ll stop banging on about Live 8.

19 years ago I wrote That was Live 8

I couldn’t take any more punishment. The cumulative effect of Joss Stone, The Scissor Sisters and Velvet Revolver drove me out of Hyde Park. If I had stuck around to endure the pain of Robbie Williams and Mariah Carey, I fear that my exploding head

20 years ago I wrote Have t-shirt, will travel

I just finished coding an e-commerce site with Message. The Rapha website, selling cycling apparel, has launched just in time for the Tour de France.

22 years ago I wrote Home

I’m back and I’m tired.