Take Advantage of CSS3 to Achieve Subtle Design

I hear this CSS3 thing is all the rage. Resources are flying around the tutorial world and blogosphere providing brilliant examples of creative new ways to design using CSS3 modules. However, it’s easy to over-implement and lose the brilliant subtlety of great user interfaces. Here are three quick tips for using powerful CSS3 techniques in subtle ways.

Preface: It Doesn’t Take Much

People are able to perceive and distinguish very small changes.

The bottom line here is that people are able to perceive and distinguish very small changes that they may not consciously notice or be able to recall. I doubt that this is new information to anyone. It is one of the more well-known concepts put forth by sensation and perception studies. Sometimes, one thing may be pleasing over another. And sometimes, you don’t even know why.

However, keep in mind that web design is a conscious process. Subtle design can be difficult because it is easy to think “that just needs a little more.” Before you know it, the subtlety is lost.

With that in mind, I would like to present three CSS3 techniques that can be used to provide varying forms of subtlety for web design.

1. Transition

Transition is a powerful tool, providing a way for CSS to essentially animate from one endpoint to another. The syntax packs a fairly rich toolset: property, duration, and easing. Each of these pieces can be varied to provide different levels of subtlety. Often, it just takes playing – as effects often do. In other words, play with the values until it seems right. Just don’t drive yourself crazy. It’s easy to get lost tweaking even such a short list of variables.

Example: Color Transitions

It’s not uncommon for navigation items to change color when the mouse is hovering. Transition can make that color change a little smoother.

.nav li a{
	color:#282828;
	text-decoration:none;
	
	-webkit-transition:color .1s ease-in-out;
	-moz-transition:color .1s ease-in-out;
	-o-transition:color .1s ease-in-out;
	transition:color .1s ease-in-out;
}
.nav li a:hover{
	color:#808080;
}

The color change is not subtle here. It’s clearly noticeable. What is subtle is the smoothing of that color change.

The trick to keeping this subtle is the duration. If it’s too long, the effect will be far too noticeable. The navigation can quickly become burdensome to hover over and look amateurish.

View the demo.

Notes about the CSS

In case you haven’t delved into CSS3 just yet, it’s important to note the order in which the browser-specific declarations come. Actually, it’s just important to notice that the non-browser specific declaration comes last in the list. CSS takes the last declaration and makes it more important in the case of a conflict. Once an actual transition spec is released, presumably all browsers will implement the module without needing the proprietary prefix. Thus, your CSS becomes somewhat future-ready at no real cost to the current implementations.

Also, notice that the transitions are in the <a> element style, not its hover. This will provide the transition both on mouse-over and mouse-off.

2. nth-of-type (or nth-child)

The nth-of-type or nth-child selector allows patterns to be declared in a series of elements and apply styles accordingly. For example, in a table, nth-child could color every other row by using :nth-child(odd). Let’s look at an example that may not be quite as clear.

Example: Grouping

We’ll take a pretty standard navigation markup…

<ul class='nav'>
	<li><a href='#'>Home</a></li>
	<li><a href='#'>About</a></li>
	<li><a href='#'>Work</a></li>
	<li><a href='#'>Forum</a></li>
	<li><a href='#'>Blog</a></li>
</ul>

…and apply some styling.

.nav li:nth-of-type(odd){
	margin-top:5px;
}
.nav li:nth-of-type(even){
	margin-top:12px;
}
.nav li:nth-of-type(2n+2){
	margin-right:0;
}
.nav li:nth-of-type(2n+3){
	margin-left:8px;
	margin-right:25px;
}

This will create a staggered-looking menu with a few high items, a few low items, and a couple sets that look paired. The visual difference between this and an in-line menu is clear.

So what’s so subtle about it? The subtlety here is twofold.

1. The higher items look more important. Perhaps this person wanted to showcase his or her portfolio and blog. Those, along with the Home link, have been pushed up to be slightly more prominent. People’s eyes will be drawn to those links first.
2. Notice the grouping. About and Work have been grouped together, as have Forum and Blog. This styling groups similar pages in its navigation. Work and About are both viewable things pertaining to the person while forum and blog are more audience-driven and interactive.

So, perhaps a visitor first sees “Home”. That visitor will probably realize that he or she is already on the homepage. He or she may very well see “Work” next. *click*. After viewing some pieces of work, they may well have seen “Blog” next but perhaps the grouping ends up being stronger and their desire is pulled to “About”. The designer is now driving the visitor using a navigational layout. He or she has provided hints as to where visitors should go, sequentially.

Will this happen every time? Absolutely not. Will it happen sometimes? I would bet so.

That’s the point of subtlety. It doesn’t overwhelmingly influence the user, but it might provide some useful hints or motivations now and then.

3. Gradients

Here’s a simple way to introduce subtlety into a design. Ironically, it’s probably got the most complicated syntax out there. Not only that, but it also has significantly different syntaxes between browsers. Let’s take a look.

Example: Forms

Given a pretty simple contact form (email, message), here’s some styling:

form input[type=text],
form textarea{
	background-image:-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(255,255,255)),
		color-stop(1, rgb(248,248,248))
	);
	
	background-image:-moz-linear-gradient(
		center bottom,
		rgb(255,255,255) 0%,
		rgb(248,248,248) 100%
	);
	
	outline:none;
	border:solid 1px #ccc;
}

That’s quite a full declaration, isn’t it? And that only covers two browsers!

I’m not going to go into all of the syntax, because others have done that for me. Refer to “Understanding CSS Gradients” on Nettuts+ for a better understanding. When you’re finished, let’s talk about subtlety.

The gradient in these text areas is almost imperceiveable. However, if you play with the CSS and take out the border, I assure you it is there.

If you still can’t see it in that second image, take your head and move it to the side of your monitor, so that you are viewing the monitor at a pretty steep angle. See it now? If not, I refuse to be held accountable. I see it, so your monitor must be broken. :)

Anyhow, notice how close the rgb colors are in the css. The top of the text input and textarea are shaded ever-so-slightly. This is one example of very extreme subtlety. While filling out a form, it is unlikely anyone will ever notice this gradient. However, people may find your form just a little more appealing than others; even if they don’t know why.

Bonus: Browser Incompatibility

Well, we’ve almost made it through and entire CSS3 article without discussing browser issues. How did we manage that? For one thing, there wasn’t a lot of emphasis on code. More importantly, though, I was saving the best for last.

Subtle changes probably won’t be missed

If you take a look at the demo for this tutorial in a webkit browser, then compare that to a Firefox browser, you will notice some differences. If you step over to IE, you’ll notice even further differences. One nice thing about the use of subtlety is that if the subtle difference isn’t there, people probably won’t notice. In other words, the color change in the first example still works without the transition; it’s just a little less slick. If the only purpose of using nth-of-type was to group based on commonality, no visitor is going to care if that grouping isn’t there. The menu still works. And the gradient? Remember how hard you had to try to notice it even when being told exactly where it was?

That last demo example will definitely be noticed…

Make it an opportunity for creativity, instead of an insurmountable burden.

Probably the most rational opposition to the “different looks in different browsers” approach to web design is that many (perhaps most) clients will want the exact same website in any major browser. If there is no room for budging on this and you need to pay your electric bill, do whatever you need to in order to get that all-important rounded corner into all IE versions back to the dawn of time.

However, some clients can be educated and swayed as to some advantages of having one design in one place and another somewhere else. For example, accepting a slightly different appearance can dramatically cut down on HTTP requests and excess HTML elements, if a lot of images are being used to create borders and shadows and whatnot. Or, if you’re anything like me, you have some personal projects and enjoy a good challenge (like providing the same “experience” cross browser without always having the same layout). Or, maybe you have two different designs that you really like and can’t decide which one to implement. Here’s an opportunity to implement one in one browser and the other in another, driven out of a single stylesheet.

The overall point here is that browser incompatibility is a fact of the current web when trying to utilize CSS3. So, make it an opportunity for creativity, instead of an insurmountable burden.

But what is subtle about that last demo example?

The subtlety here isn’t exactly a design subtlety. Instead, it’s more of a designer subtlety. In my experience, most people only use one browser. Web professionals forget that sometimes, as we install three versions of five different browsers on every machine we come across.

So, if an IE-only user happens across your site and its content is clear and he or she enjoys the experience, you have succeeded in your design. If another user happens across your site in Chrome and enjoys their experience and the content is clear, you have succeeded in your design. And perhaps that visitor appreciated a few extra tid-bits. Kudos. Most importantly, though, if you ever get the opportunity to sit down and watch this happen simultaneously, you will have succeeded in having some subtle fun.