the design axiom/why css will never catch up with design
With time comes experience, and with experience comes a sense of caution. You slowly lose that gullible edge and you learn to see hypes and promises from a different perspective. And sometimes you hit an obvious truth that has been laying there all along. A few weeks ago I joined a small freelance project, a real eye-opener for someone like me, who still believed that browser legacy and vast differences in platforms/vendors were the main challenges of css development.
As someone who experienced the rise of css3, there once was a time I bought into the hype. I was told that css3 was going to make our jobs easier, after all it was conceived to fill a few obvious design gaps that proved quite demanding to achieve with css2.1 (if you're wondering what I'm talking about, just think rounded corners, drop shadows and other (by now) simple visual effects). And for a while the future looked quite rosy indeed. If you were able to do cutting edge front-end development (ie not having to worry about legacy browsers and all round css support) development was actually quite easy. At least, for a short while.
But with css3 gaining more momentum every day, and with an ever increasing range of browsers/versions supporting the newly introduced properties, a different reality is slowly developing. If you still believe rounded corners and drop shadows will pose the main challenge of visual web design in the years to come, better take some time off to reconsider the future of your job.
the design axiom
Graphical design is a complex balance of functional and aesthetic requirements that compliment each other to create both a distinctive and pleasant experience. For a graphical web designer, these requirements are often a real burden on their creative freedom, so creativity comes from multi-dimensional rule-bending and playing around with smaller details. After all, from a functional point of view a button should always look like a button and when you're designing for a specific client you need to stick to a strict graphical styleguide, so you can't do much there to really distinguish yourself.
That's why you'll see that many design trends in web design are often focused on smaller visual cues. Just think of rounded corners, vertical stripes, obvious transparency effects, text-shadows, flaps and whatnot. These are all design-hypes of the recent past that defined modern (generic) site designs, up until the point where everyone was using them and designers were forced to find something new to play around with. If you're looking at the near future, expect subtle animations, uneven drop shadows, triangles and similar elements to pop up all around the web.
So recently I was faced with two interesting design challenges in the small freelance project I mentioned earlier. Simple visual tidbits on paper, but once I sat down to put them into practice it quickly became obvious that even with the current css3 propositions it would be quite a challenge to get them to work. Here's what I was supposed to do:
- 1. make a transparent search box in a full-width header that has a background color. Underneath the header is a (moving) background image which should shine through the transparent part of the search box.
- 2. create a box with a transparent background which uses the color multiply effect from Photoshop. Again the box lies on a moving background image.
The first challenge is tricky because you can't cut holes in a background, especially not if this needs to be done by a deeper-lying (dom-wise) element (the search box positioned within the header). The second challenge is simply impossible to do in css, though some tricky canvas wizardry might help you out there.
css left in the dust
One key problem is that css development is currently aimed at fixing existing shortcomings. We look at design elements that are hard to accomplish with our current css standards and we try to find solutions to fix those shortcomings. But once these solutions exist, there is only a very short period of time where we can happily use them to make our job easier. At the same time, these very elements are become stale and boring at a frighteningly fast rate.
That's the exact moment when designers set out to find new elements to distinguish themselves from their peers, starting the whole cycle anew. Mind you, it's not that we suddenly lost the need for rounded corners and drop shadows, but these elements simply degraded from actual eye-catchers to common design elements. So even if css design could almost immediately match designer's demands, it still wouldn't fix our problem. It's even impossible to try and outsmart designers by adding new graphical options they haven't been using so far, as the bottom line is always the same: once a design trend picks up, designers will look elsewhere for inspiration and the trend will pass just as quick as it surfaced.
conclusion
The web is here to stay and browser competition is more alive than ever. A couple of years ago development was slow, but these times seem to be officially over. In the coming years we'll see many design hypes as sites and companies will invest more energy in trying to distinguish themselves from the competition. css standards will face the impossible task to keep up with these trends and css developers will still need to enter hacky territory to create that one visual effect that others will find hard or even impossible to accomplish. Until the code is broken of course, and a new design trend is needed.
The bottom line for the front-end developer is clear. Even though the css spec will keep expanding, designers will continue to come up with elements to challenge the reigning design standards, to set their designs apart from the competition. And the harder something is to accomplish, the more exclusive a design will be. It's an interesting realization that offers both job security and a lifelong career of stress and challenge. Hopefully you are ready to face that challenge.
Gone are the days I believed that css development would be made easier by new, upcoming standards. The only thing that changes is the base standard of web designs, which will continue to grow more complex and challenging. It's actually a rather comforting realization, but one that is necessary to keep yourself from getting disappointed by the work people are putting into the css-X spec. They do a great job though, even when they are constantly two or three steps behind the demand.
Comments
michael stephan
great article! I agree, things are only going to get more complex.
Nikolay
I'm still an amateur with CSS, but I've come to realize one thing; at the beginning I was thrilled to make designs with eye-catching components and wanted to use every single parameter that could be added to an element, but after some time has passed, I understood that a good design is not an overly decorated one. Google's homepage is probably one of the simplest looking web pages a company of such calibre could offer, but it stands out. The real goal of designers should not be to create impossible to decode designs, but instead, to make something extremely simple that is at the same time functionally pleasing and is easy to be distinguished by a common user.
Niels Matthijs
Sure, but maybe Google isn't the best example as they do some seriously complex stuff with their logos (animation, javascript, Pacman games ...).
And usually these small eye-catchers are the things that are hardest to accomplish, and they stand out exactly because no other sites are doing them.
Nikolay
I agree about the logos Niels, but I just wanted to zero in on the fact that their homepage is, for the most part, just a logo, search bar and two buttons (+ the header with the menu bar and the footer with four links). The code behind Google's website could be one of the most insane things out there, but the design is simple. I suppose one important thing for a great design is a nice, simple and easy to distinguish logo, a complementary color scheme and an easy interface (and not some unnecessarily complex visual enhancements that to a great extend do nothing). I think the designer of a corporate website (or website supposed to provide some service) should not try to impress the visitor with cool visual effects, since that is not really what the visitor cares about. Instead, the designer could aim to make the design such, that would push the visitor to come again and again, and easily know what to do when he visits the website.
tobewan77
I have to go with the analogy that a crappy carpenter can have all the tools in the world but can't built a bird house, but give a very competent carpenter a few simple tools and he can build almost anything. Some of the new tool sets in the development of CSS standards have really opened doors in ways that haven't even been explored. Think how much transparent png support has enabled layering of elements. Seems to me that the flexibility allows almost infinite possibilities even without new tricks being developed.
ckozl
i think you would agree that there are a finite (however huge) set of visual effects you can achieve in the real world.. so therefore you could say the same thing about any aesthetic not just the web/css one...
what i am saying is that creativity isn't actually creation, its recombination in the sense that you have merely opened the eyes of the unseeing and once they have see they can't un-see or un-know.
your frustration is with yourself and your constant struggle to stay "fresh" not with the nature of css
Jason Gross
Really what you have described here is a constant state of the web and really a lot of professions. As professional designers and developers we will always seek out the latest and greatest methods that allow us to push the envelope of what we can accomplish with our tool set. This just happens to be CSS3 and HTML5 at the moment, in a few years it will be something different and then followed up by yet something new.
What concerned me about this article is that you introduced the examples of the search bar and the box that simulates a multiply blend mode as project needs. None of these effects are going to make your search bar functional so I would use caution when saying that a project needs these things. I think advancement in CSS and HTML will sometimes assist us in what we need to do in such a way that media queries are a much needed alternative to browser sniffing. In other ways these advancements will open the door for new things we can do such as rounded corners, drop shadows, and other visual effects.
Matthew
The problem is that your CSS knowledge probably doesn't equal your design knowledge.
For instance: "create a box with a transparent background which uses the color multiply effect from Photoshop. Again the box lies on a moving background image."
Your conclusion: "The second challenge is simply impossible to do in css, though some tricky canvas wizardry might help you out there."
Actually, there's no canvas wizardry needed. What you can do is pre-render your effects on separate layers, and crop the layer using CSS on your foreground element. As the background element moves, so does your foreground rendered effect, making it APPEAR as though a Photoshop live "multiply" effect is being applied.
Maybe, in your argument, you would say this is a proof that CSS can't cut it. But I would say, echoing other comments, that what we are gaining is a much broader tool-set that allows a much greater flexibility. The incorrect position would be that EVERYTHING as far as effects should be rendered and designed using CSS. That's silly. I think you make a good argument that makes me re-consider how hard I push CSS3 to designers, but really, the two can happily co-exist and compliment each other.
George Katsanos
Thank you for the article Niels. I'd like to see some printscreens of what needs to be achieved to understand it's complexity (technically). I see the thought behind it: Human nature, always wanting more etc etc, BUT, as written before, I do believe that a design does not need to be overly decorated in order to be good. On the contrary, what we witness in the Design world for the last 5 years is a 180 degrees turn from full-flash-animated to clean cut, typography-based, lightweight layouts. I'd go one step ahead saying round corners are not "in-fashion" anymore. But the most important thing I would like to note is that what CSS3 brought was not only fancy stylish stuff like shadows and corners, but really basic layout stuff like the Multi-column layout and Media queries which with the carpenter analogy above, could be seen as Swiss Knives of the Designer. To sum up, <em>if you can't make a good design with the tools you got now, then you're obviously heading the wrong direction:)</em>
Xacto01
Physical tools such as the hammer nail and saw have only evolved so much, but architectural design has managed to evolve through time. Of course we have advances in technology that allow architects to try new things, but the real magic comes with the architect's talent to design things unimaginable with the understanding of the limitations.
Niels Matthijs
To make one thing absolutely clear: I'm not a designer and I never claimed to be one, nor will I ever claim to be one. I'm on the receiving end of the design phase, getting Photoshop files and wireframes with the challenge of transforming those to proper html/css. The actual design work is done by others.
Also, the article is not about using too many design elements within one single design. I'm perfectly aware that using every single Photoshop effect available on one single button is not a sign of great design, on the contrary. I'm a big fan of Antoine de Saint Exupéry after all.
But even within minimalistic designs, it's nice to have at least one or two eye-catchers. That doesn't mean they have to be complex visual constructs, but they usually pose some kind of challenge in css where boundaries will need to be crossed. That's basically what I'm getting at here.
If you want the stay with the carpenter analogy, give the man a hammer, three sticks and some nails, but he'll never be able to make this particular construct
My Name
Your description isn't very clear but this sounds totally doable.
What's the image that uses multiply? Typically when designers send those to me they just use it to pull out the color, usually white. It's pretty simple to convert those to transparent .pngs that look identical.
There are many things that CSS can't and won't do, but just like any other tool you should understand and accept those limitations and know when they don't apply.
d5tryr
Someone who claims to not be a designer, finds a limitation of a medium, and then claims that it therefore 'will never catch up with design'?
All mediums have limitations, good design is understanding those limitations and building something that is useful and beautiful in spite of them.
As for carpentry analogies, you may want to watch this you tube video about How to build the impossible triangle from three equal boards of wood.