Let me explain…

Now, don’t get me wrong. I’m not suggesting that we participate in an exercise of mediocrity; quite the opposite, in fact. I merely suggest that we take a step back and look at interface design on the web as a whole. There’s something so beautiful about it, isn’t there? Perhaps the beauty lies in the very nature of the web; a rare medium in which art and logic can collide. As you well know, the fusion of these two seemingly opposing forces can sometimes end in a gruesome battle between form and function. That simply shouldn’t be the case.

The form of an interface should support the application’s underlying function, and vice versa. The battle that undoubtedly ensues between these two elements is ultimately what damages the design, and any compromise by either party can result only in mediocrity. As the interface designer, it’s your job to cool the tempers on both sides of the development fence, and to facilitate a relationship that fosters that holy center ground, which at times can seem quite elusive and difficult to attain.

A practice of simplicity

The battle is set. The warriors are ready to fight. In the blue corner, Logic eyes its formless opponent with a cold-hearted certainty. You are the mediator, and the time has come for you to tame your design into something everyone can be happy about. Logic is your first adversary. This is the underlying technology and function of your design. It is simple and unforgiving. Treat it as such.

In terms of design, this is the underlying HTML and server-side functionality behind the pages. It needs to be simple, semantic, accessible, and structured in a way that makes sense to the logic of your application. Ask yourself with each snippet of markup that you type in, “What does this ultimately do?” Think about the data of what you’re marking up, and not the appearance of it. We’ll worry about the form of your design later.

A simple example

How would you implement your site’s logo? Before you drop in an <img/> or a <div/>, think about what the logo really is. What does it (logically) do? In fact, it’s a header – it is used to describe or encapsulate the content below it. Use the <h1/> tag – that’s what it’s for. I don’t care about your silly logo or designer font. My name is Logic, and I demand simplicity. Give me what I want:

<h1 class="medazio-logo">Medazio: a completely made up word.</h1>

The visual appearance of our site header is not entirely simplistic, but the HTML markup for it certainly is.

A little complexity, please

How would you implement a design for this comment? As soon as you look at this image, it’s easy to see the layout, the colors, or even the position of the data. Now, take a step back and remove the appearance of the image from your mind. We’re working with the logic of the data, remember? The position and orientation of the data simply doesn’t matter right now. Don’t create classes like commentBottom – you’ll probably kick yourself later when you decide to switch things around a bit. Use something more descriptive of the actual data contained in your markup, like comment-description or comment-meta. In our case, we’ll do something very similar:

<ol class="comments">
  <li class="comment hreview vcard item">
    <p class="description">Lorem ipsum dolor...</p>
    <p class="comment-meta reviewer">
      <img class="photo" src="/path/to/kyle.png" alt="Kyle" />
      <a class="fn url" href="/profiles/kyle">Kyle</a> @
      <span class="dtreviewed" title="2010-02-18T21:49:38-07:00">
        Feb 18, 2010 9:49 pm
      </span>
    </p>
  </li>
</ol>

Notice that we’ve used self-describing class names for most of the data within the comment. The class names in bold are not required, but we’ve added them in order to adhere to the very useful hreview microformat. This helps define your data beyond what can be done with HTML tags and attributes. Additionally, we can append classes together to reduce the need to create extraneous style selectors later on. Logic is now appeased.

And in the red corner…

Meet Art, an element of design not so easily defined as Logic. Logic suffers without Art, its disobedient and relentlessly unpredictable counterpart. It’s not “art” by any traditional sense of the word, no, but it is art nonetheless. It’s bold and daring and difficult. Art is what makes an interface attractive. I dare not attempt to encapsulate the process by which one creates attractive design (it’s a creative process, after all), but I will dabble in the application of it.

Our tool for artistic application is the style sheet. We will use CSS to infuse our structured HTML with our creative ideas. Using the aforementioned examples, let’s see how we can bring our flat and unforgiving concept images into interactive life.

Making the header happen

Remember the logo? Let’s take our cold-hearted HTML and add some “fresh,” CSS-style.

.medazio-logo {
   width: 223px;
   height: 31px;
   background: url(medazio-logo.png);
   text-indent: -9999px;
}

We’re using image replacement to bump that pesky header text out of the way (make way, fabulous logo coming through). The human eye is appeased by the appearance of our logo, and likewise the eye of the machine (search crawlers, screen readers, etc.) is equally appeased by the semantic structure of our HTML document. Even more exciting is the fact that our style sheet actually supports the logic of our design. We’re achieving the appearance that our design demands without compromising the integrity of its structure or function. Much rejoicing is in order.

Adding style to our comments

Similarly, let’s take the same approach with our comment HTML:

ol.comments {
   margin: 0;
   padding: 0;
}
li.comment {
   list-style: none;
   margin: 0 0 20px 0;
}
li.comment p.description {
   background: #f8f8f8;
   border-bottom: 4px solid #eee;
   margin: 0;
   padding: 20px;
}
li.comment p.comment-meta {
   background: url(chat-arrow.png) no-repeat 37px 0;
   padding: 5px 0 0 0;
}

With a few simple lines of CSS, our sensationally semantic HTML comment becomes exactly what we always dreamed it would be. The best part? Both the technology and the design of our application are meeting in the middle. Better that than we, the designers, having to force the union in a rather rude and unsightly manner.

You, the negotiator

The cruel truth of the matter is that not every design element will be so simple or quite as easy to negotiate as this. These are simple examples of a much bigger concept that takes time and practice to master. You, as a designer, are the negotiator of both logic and art. You are forced into a difficult role in which you must understand both the creative aspirations and the technical limitations of your project. Most design professionals fall on either one side or the other of the art vs. technology skill-set. Forcing yourself into an impartial role between the two is a difficult, yet imperative step in your journey to design bliss.

What is input prompt text?

You’re probably familiar with the concept, even if you don’t know what I’m talking about. Here’s an example:

The prompt text appears inside the form field as soon as the page loads, so users immediately know what it’s for. Simple, right?

Why it Doesn’t Work

There are a number of problems you’ll encounter while implementing prompt text into your forms. Watch out for these caveats when you’re developing your own solution.

1. Input validation — if someone submits the form without first removing the prompt text, your prompt text is submitted in lieu of real data. Fixing this is a pain. Avoiding this entirely is recommended.
2. Prompt style — it’s best to style the prompt text so that it doesn’t look like real form data. Creativity is a virtue, but generally web users will expect light (gray) text and italics. This can be problematic because you’ll have to swap the input style back and forth using JavaScript.
3. Losing focus — when users focus on a form field, don’t type anything, and then click somewhere else, you should always add the prompt text back into the input box. Otherwise, users could miss the intent of the form field entirely. Again, you’ll have to do this with JavaScript, which can be a little tricky.
4. Progressive enhancement — always make sure that users without JavaScript can still understand and interact with your form fields. This is progressive enhancement at its finest.

The Solution

Almost everything related to the problems listed above originates from one basic fact: you’re trying to create both a field and a label using a single HTML element. When you take a step back and think about that, it really doesn’t make much sense, does it? The solution lies in separating the form field from the label entirely. We’ll use a little bit of jQuery to create an elegant solution that dynamically creates these labels and places them over our form fields. Because we’re creating two separate elements, we can use CSS to style them independently. Perfect!

The jQuery:

$(document).ready(function(){
  $('input[type=text][title],input[type=password][title],textarea[title]').each(function(i){
    $(this).addClass('input-prompt-' + i);
    var promptSpan = $('<span class="input-prompt"/>');
    $(promptSpan).attr('id', 'input-prompt-' + i);
    $(promptSpan).append($(this).attr('title'));
    $(promptSpan).click(function(){
      $(this).hide();
      $('.' + $(this).attr('id')).focus();
    });
    if($(this).val() != ''){
      $(promptSpan).hide();
    }
    $(this).before(promptSpan);
    $(this).focus(function(){
      $('#input-prompt-' + i).hide();
    });
    $(this).blur(function(){
      if($(this).val() == ''){
        $('#input-prompt-' + i).show();
      }
    });
  });
});

The CSS:

.input-prompt {
  position: absolute;
  font-style: italic;
  color: #aaa;
  margin: 0.2em 0 0 0.5em;
}

The HTML:

<input type="text" title="Enter search keywords..." />

Basically, this script finds any <input> tags that have a title attribute (i.e. <input title="Enter search keywords..." />). For each of these form fields, it takes the title and creates a little <span> tag next to it. The CSS positions the <span> tag so that it appears on top of the form field. The rest is just a little bit of scripting that makes sure to hide and show the labels based on what the user is doing with the input box.

The Result

Here is a demo of the code shown above:

Users without JavaScript enabled will see the normal title tool tips when they hover their mouse cursor over the form field. Please note that you’ll probably have to adjust the margin a bit in the CSS to make sure the labels fit the size of your input boxes. For more information on jQuery and all the great things it can do, visit jQuery.com.

Concerning Accessibility

Accessibility is chiefly important for a web designer (or at least, it should be). When you create your HTML, keep things as simple as possible. Assume that every single user who visits your site will (1) not have CSS support, (2) will disable all images on your page, and (3) will not have JavaScript enabled. If you design your HTML in this fashion, you’ll find that creating accessible content is much easier to do. Once you have an accessible document that works on all systems, you can use the fantastic features of CSS and client-side scripting to really bring your site to life. These “nice to have” features (style, scripting, etc.) are not essential to the structure of your document or the content that’s contained within. When it comes down to it, users are after your content, so that’s priority number one.

A Simple Example

With that in mind, let’s say we wanted to create an image that links to another page (this is so very simple, but it serves as a great example of this technique). Because we’re assuming that users have disabled all images, we certainly don’t want to use the <img/> tag for our link, because those users without image support simply won’t see it. For that reason, our link will look like any other link on the site.

<a class="learnGuitar" href="http://www.mahalo.com/how-to-play-guitar-for-newbies">Learn Guitar</a>

I know…this is really simple, but stay with me; I promise we’re going somewhere with this. Our very simple HTML has passed our criteria: users with CSS disabled will see the link, as will users without images or script. It’s very simply an accessible link on our page, read as easily by normal users as it is by search engines or even people using screen readers. Next, for users who can utilize our “nice to have” features, we’ll add a bit of CSS to make our image appear.

.learnGuitar {
	display: block;
	width: 200px;
	height: 50px;
	background: url('/path/to/learn-guitar.png');
	text-indent: -9999em;
}

As you can see, we’re using the text-indent CSS property to bump our text out of the way, and in it’s place, we’re using background to set an image for our link. All you have to do for your own image is adjust the width, height, and background URL to match. What you get when you’re all done is this:

Learn Guitar

Adding a Hover Image

Easy and accessible CSS image replacement! It looks great, but let’s take it one more level to really make sure users know that our button DESERVES to be clicked. Let’s add a hover style. I’m going to use an image “sprite” for the hover image, which means that both our static and hover states are contained within the same image. Here’s my *single* image that’s used for this type of style:

We’ll adjust our CSS to account for our new hover image. Note that the height and width attributes will not change! The hover-state image will be “clipped,” so that it’s only visible when users move their mouse cursor over our image button.

.learnGuitar {
	display: block;
	width: 200px;
	height: 50px;
	background: url('/path/to/learn-guitar.png') top;
	text-indent: -9999em;
}
.learnGuitar:hover {
	background-position: 0 -50px;
}

Now, when users move their mouse cursor over our image button, the CSS will “slide” the background image so that the hover state is displayed instead of the static state.

Learn Guitar

Crafting your image buttons in this fashion can really save on performance and download times. Perhaps more importantly, your site will be much more “friendly” to visually impaired users using screen readers, and you’ll find that search engines will have an easier time understanding what your links and other content are all about.

Let me know if you have any questions or comments!

Adding jQuery is Easy

You’ll need to include a few JavaScript libraries in order to use jQuery tabs at all. These libraries can be somewhat cumbersome for users on slower connections to download, and it’s definitely the major disadvantage of using a library like jQuery to add this sort of functionality to your site. The best things we can do in this case is try to minimize the effect of serving this JS library to our clients. First of all, I would recommend always using the “minified” version of the jQuery script. It’s much smaller in size than the standard version, which obviously will reduce the amount of time needed to load your site when users first visit it. The only difference between the minified and the standard library is that the good folks at jQuery have removed all sorts of characters in the document, which makes it less readable, but makes the file size much smaller. If you want to delve into the depths of the jQuery library, you can download the standard version and take a gander offline, but don’t force your users to download the full version if you don’t have to.

Additionally, Google (here) and Microsoft (here) have both set up distribution networks to serve these libraries to your users. Don’t waste bandwidth and your clients’ time by forcing users to download these libraries from your servers! Chances are, Google/Microsoft have the resources to serve these files to you users faster and more reliably than you can, so please utilize these free services. Additionally, users have a much greater chance of already having a cached version of these files when you used the shared location. Sweet!

Add the library references to your <head/> to get started.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

The Tabs Markup

What’s so wonderfully beautiful about jQuery tabs is the simplicity of the HTML. Even more, users who aren’t using JavaScript will visit your site and see a perfectly formatted and functioning page. Use this as a template for your tabs HTML:

<div class="ui-tabs">
	<ul class="ui-tabs-nav">
		<li><a href="#tabs-1">Tab One</a></li>
		<li><a href="#tabs-2">Tab Two</a></li>
		<li><a href="#tabs-3">Tab Three</a></li>
	</ul>
	<div id="tabs-1" class="ui-tabs-panel">
		<p>Content one.</p>
	</div>
	<div id="tabs-2" class="ui-tabs-panel">
		<p>Content two.</p>
	</div>
	<div id="tabs-3" class="ui-tabs-panel">
		<p>Content three.</p>
	</div>
</div>

Add Some Style

This is where my template really starts to differ from jQuery’s version. The CSS jQuery would have you use is not simple enough for me, so I created my own version of the CSS that will give you a very basic frame onto which you can apply your own design. Here’s what I like to start with:

.ui-tabs {
	zoom: 1;
}
.ui-tabs .ui-tabs-nav {
	list-style: none;
	position: relative;
	padding: 0;
	margin: 0;
}
.ui-tabs .ui-tabs-nav li {
	position: relative;
	float: left;
	margin: 0 3px -2px 0;
	padding: 0;
}
.ui-tabs .ui-tabs-nav li a {
	display: block;
	padding: 10px 20px;
	background: #f0f0f0;
	border: 2px #ccc solid;
	border-bottom-color: #ccc;
	outline: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
	padding: 10px 20px 12px 20px;
	background: #fff;
	border-bottom-style: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
	cursor: default;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	clear: both;
	border: 2px #ccc solid;
	padding: 10px;
}
.ui-tabs .ui-tabs-hide {
	display: none;
}

Now Make it Do Something

Now that you have your tabs there, you’ll have to initialize them with a simple jQuery statement in order for them to work. Just add this line of JavaScript anywhere on your page.

<script type="text/javascript">
	$(document).ready(function(){
		$(".ui-tabs").tabs();
	});
</script>

The Result

Once you’ve added each of these elements to your page, you should get a very simple tab structure that awaits your styling genius. Just modify the CSS to apply your own design!

Now you’ve got it. Good luck, and happy styling.

Rounded corners are all the rage; they have been for some time now. There are pure CSS approaches to implementing this type of design, but occasionally your clients demand that your user experience be consistent across all browsers. Whether it’s time to stop using HTML and images for rounded corners is still a matter of debate. Nonetheless, I think every designer finds themselves doing this from time to time.

Say No to Images

I’ve found that many designs contain various types of rounded box styles on the same page. In my previous tutorial, this would demand that you create a separate corner image for each style of box. If you have a box with a red background, you’ll need to create a corner image with red corners. That makes sense from a visual perspective. From a data perspective, however, it’s not the best approach. If you think about it, the only thing you’re really “downloading” when you download a corner image is the curvature of your box’s edge. Wouldn’t it be better if we could somehow reuse that data on every box style everywhere else in your design?

Well, you can! How gloriously fantastic! Well…don’t get all excited just yet. There are a few limitations to this. This will only work when your rounded box appears on a solid color. For instance, the text you’re reading right now is on a solid white background. We can easily add rounded boxes to this page because of the solid color. This doesn’t really work if your background is an image or a gradient color.

Meet the Sprite

So, you have a solid background color, and you’re ready to add some rounded corner boxes to your page. The only really important thing here is your corners image. In Photoshop or an image editing software of your choice, create a square image. Basically, your image is all four box corners stuck together, so make it symmetrical. Fill your image with the background color of your page, and then delete a circle out of the middle of the square. It’s that easy! Here’s what it should look like when you’re done:

In case you’re not Photoshop-savvy, I have created a few templates that you can download and use.

• TransparentCorners-10.psd – 10×10 pixel corner image template
• TransparentCorners-15.psd – 15×15 pixel corner image template
• TransparentCorners-20.psd – 20×20 pixel corner image template

The Markup

Now that we have this nice fancy reusable transparent corner image, it’s time to create the HTML that will be used to house our beautiful box and its contents. Here’s the basic setup:

<div class="box red">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>This is your box content. Lorem ipsum dolor sit amet.</p>
</div>

Pretty simple, right? We have an outer “box” <div/>, a <div/> for each corner, and then our content that will appear inside the box.

The Style

Our HTML doesn’t do much by itself. Most of the work to be done is going to be done in our CSS style sheet. In an attached style sheet, add the following CSS:

.box {
	position: relative;
	padding: 1em;
}
.red {
	background: #cc0000;
	color: #fff;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url(/path/to/cornerImage.png) no-repeat;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: 100% 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 100%;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: 100% 100%;
}

As you can see, we’re really trying to keep this simple. Basically, we have an outer “box” style, a “red” style that sets the box’s background color to red, and finally individual “corner” styles that will automatically position themselves at the edges of our content, regardless of the height/width of that content. Groovy.

The Result

I’ve created a simple “white” background corner image for use on this page. What you get when you put all of this together is a very flexible corner system that requires very little HTML and CSS to implement:

And the coolest part…

It’s Reusable!

The coolest part about using transparent images for our corners is that we can apply these corners to just about anything on our page that we want to. For instance, I could create some additional box styles (other than “red”) by adding a bit of CSS.

.red {
	background: #cc0000;
	color: #fff;
}
.blue {
	background: #00cc00;
	color: #fff;
}
.green {
	background: #0000cc;
	color: #fff;
}
.gray {
	background: #dedede;
	color: #666;
}

After changing our box’s class (class="box blue", class="box green", etc.), we would get:

That’s really cool, but this doesn’t even touch the limits of how you can apply this. In addition to solid color boxes, we could also apply this to photos and gradients (which would be much harder in a more traditional corner system). Our corners really don’t care what type of content they’re applied on, they only really care about the background color. Let’s try it out on some different page elements (accompanying HTML and CSS are included for each style):

The Mini Profile

HTML:

<div class="box photo">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<h3>My Profile</h3>
	<img src="kyle.jpg" alt="Me" />
</div>

CSS:

.photo {
	width: 200px;
	padding: 0;
}
.photo h3 {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	margin: 0;
	font-size: 1em;
}

The Gradient

HTML:

<div class="box blueGradient">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>Notice the gradient background image!</p>
</div>

CSS:

.blueGradient {
	background: url(gradient-image.png) repeat-x;
	color: #fff;
}

We’ve accomplished all of the styles you see above using a single image and some fancy CSS footwork. This really minimizes the impact of your corners on page download times, especially if you’re using a number of different styles on a single background color. No scripts, no confusing HTML, simple markup, and a single image. Happy styling.

The Idea

First of all, I will say that this approach only really works if you know the maximum size of your comment data. On ThumbSticks.com, for instance, users can’t enter comments that are over 300 characters in length, so I have a good idea of how large each comment box could possibly get. Rather than splicing my comment box into multiple images (which is more flexible, but decreases page performance and increases download times), I decided to create a single image that is used to wrap each comment chat bubble:

The Image

Basically, my chat bubble boxes can shrink to any size, but they can’t grow beyond the height of this image. If you know exactly how large your data can get, this is a really simple solution to implement. All that I need to show my chat bubbles is a bit of HTML and CSS.

The Nitty-Gritty

HTML:

<div class="bubble">
	<div class="bubbleHeader"></div>
	<div class="bubbleInner">
		<p>Lorem ipsum dolor sit amet.</p>
	</div>
</div>

CSS:

.bubble {
	width: 477px;
	background: url('/path/to/commentBg.png') no-repeat;
	background-position: 100% 100%;
}
.bubbleHeader {
	height: 20px;
	background: url('/path/to/commentBg.png') no-repeat;
	background-position: 100% 0;
}
.bubbleInner {
	padding: 0 20px 10px 37px;
}

Make sure you change “/path/to/comment.Bg.png” to reflect the actual path to the background image you’re using. Once you’ve dropped this into your design, you should see something that looks a little like this.

Good luck, and happy styling!

The truth of the matter is that a web document is a compilation of various highly organized computer languages (XML, HTML, CSS, JavaScript, etc.). The web designer has the difficult task of considering the “art” of the design as well as the technical architecture of it. A truly skilled web designer has the ability to think both creatively and logically. A designer bridges the gap between design and development, which is sometimes a very difficult task; a task made far more feasible by the utilization of simplicity.

A Simple Example

I use the word “simplicity” in a very generic sense; it’s a very broad term, so I’d like to use a few examples to show how simplicity can be a great aid in web design. Take, for instance, the anchor tag (<a/>). The anchor tag is at the very foundation of HTML; it is the most basic implementation of the concept of the internet: the hyperlink. It’s so simple in and of itself, how could designers possibly do anything at all to mar it’s glorious simplicity?

Here are two anchor tags. They appear quite identical, but the behavior of each is remarkably different. Which one is better?

A Simple Link A Simple Link

Did you notice a difference? At first glance, they are identical, but the interactive behavior of each link is quite different. Move your mouse cursor over each link, and notice the difference in clickable area on each link. On the first anchor tag, only the text “A Simple Link” is hyperlinked. The padded area around the link is not. The second link, however, is fully hyperlinked (the entire padded area is clickable).

Visual Interactivity

This is a demonstration of the fundamental elements of simplicity in design. A user who visits your site doesn’t care how you’ve formatted your CSS and HTML, or how you’ve scripted page behavior to allow for access to your data. The user only cares about navigating to the content they’re interested in. When a user sees a visual element on the page (such as the links above), they want to move their mouse pointer to that element and click. If a particular page element has some level of interactive behavior associated with it, the entire element should react to that behavior.

Logical Simplicity

Treating page elements in this fashion can also help eliminate extraneous HTML and CSS. Again, using the example above, let’s look at the source code of these two different links and examine their differences.

<style type="text/css">
.complexLink {
	display: block;
	width: 15em;
	padding: 1em 0;
	margin: 0 2em 2em 0;
	float: left;
	background: #f0f0f0;
	border: 1px #e0e0e0 solid;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	text-align: center;
}
.complexLink:hover {
	border-color: #c0c0c0;
}
.complexLink a {
	color: #555;
}
.complexLink a:hover {
	color: #d56e1c;
	text-decoration: none;
}
</style>
<span class="complexLink"><a href="...">A Simple Link</a></span>

<style type="text/css">
.simpleLink {
	display: block;
	width: 15em;
	padding: 1em 0;
	margin: 0 2em 2em 0;
	float: left;
	background: #f0f0f0;
	color: #555;
	border: 1px #e0e0e0 solid;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	text-align: center;
}
.simpleLink:hover {
	color: #d56e1c;
	border-color: #c0c0c0;
	text-decoration: none;
}
</style>
<a class="simpleLink" href="...">A Simple Link</a>

The code above relates to the first and second links, respectively. At first, the two links seemed almost identical, but now the differences are really starting to show. Not only is our more complex example (the first link) more difficult for the user to interpret, but it’s also more work for you as the designer because you have more elements, layers, and styles to deal with.

Now Repeat

It might be somewhat trivial to look at an anchor tag in such depth, but this type of design methodology extends into every aspect of web development. From HTML to CSS, from JavaScript to server-side programming, simplicity is an essential element of a good design. You’ll find that adopting this mentality can increase your productivity, lower the costs of site re-design, and expedite efforts to troubleshoot and resolve rendering problems in your web application. Less really is more.

Take a moment, take your time, and think about each and every element that you design as an independent function of logic and art. Think about the best way to approach every control, and apply uncompromising simplicity wherever possible.

What is absolute positioning?

Absolute positioning can be frustrating if you don’t have a sound grasp on what it is and how it works. Let’s start at the very beginning.

Every block element on a page (<div/>, <table/>, <p/>, etc.) has a CSS property called position. By default, the position for these block elements is set to static. Static block elements appear in a stack on the page, from top to bottom. Here’s an example:

<div>Div One</div>
<div>Div Two</div>
<div>Div Three</div>

If you change an element’s position to absolute, however, its placement on the page is very different. The placement for an absolutely positioned element is relative to the parent of that element. What does that mean? Let’s see what happens if we take the same code from our last example and make our block elements position: absolute.

<div style="position: absolute;">Div One</div>
<div style="position: absolute;">Div Two</div>
<div style="position: absolute;">Div Three</div>

The outcome is very different! You can’t tell, but the first and second <div/> tags are actually hiding behind the third <div/> tag. Whenever you set an element’s position to absolute, it is automatically shown at the top-left corner of the parent element (* see notes about relativity below). This isn’t very useful now, but we can apply this technique to create a variety of simple and effective layout styles.

Positioning

Our last example wasn’t very practical simply because all of our <div/> tags were stacked on top of each other. Using the top, bottom, left, and right properties, we can position absolute elements anywhere we’d like. Let’s try it out.

<div style="position: absolute; top: 10px; left: 10px;">Div One</div>
<div style="position: absolute; top: 10px; right: 10px;">Div Two</div>
<div style="position: absolute; bottom: 1em; left: 50%;">Div Three</div>

Now that’s a little more practical. The first and second <div/> tags are positioned using pixels from the top, left, and right sides of their parent element (the gray box). I positioned the third <div/> tag a little differently just to demonstrate how you can use all the different measurement units that CSS has to offer in order to position absolute elements (px, pt, em, and %).

Relativity

The most difficult and confusing aspect of absolutely positioned elements is figuring out relative positioning. Unless you specify otherwise, your absolute <div/> tags will be positioned relative to your entire HTML document (i.e. the very top left corner of your browser window). Basically, when your browser is trying to render an absolutely positioned element, it traces upward through your HTML hierarchy until it finds a parent element that uses relative positioning (position: relative). If you haven’t set any elements to position: relative, then the <body> tag is used by default. Always set the outer element to position: relative:

<div style="position: relative;">
	<div style="position: absolute; top: 1em; right: 1em;">Contact Us / Register / Log Out</div>
</div>

Relative Parent Height

If you place an absolutely positioned element on a page, it does not have a layout height associated with it. That means that even though your absolute DIV is 150 pixels tall, it will not bump the rest of your page down by 150 pixels. Here’s an example:

<div style="position: relative;">
	<div style="position: absolute; height: 2em;">Div One</div>
</div>

The easiest way to avoid this is to set the parent element’s height to a fixed value. This should clear up any layout height issues because you’ll always have space for your absolute elements. For instance:

<div style="position: relative; height: 3em;">
	<div style="position: absolute; height: 2em;">Div One</div>
</div>

Absolute vs. Floating

Absolute positioning shouldn’t be used in every case. Often times, I will use it to build out a header on a page where there is a logo, search, some utility links, etc. These types of controls are pretty consistent and don’t change in size, and absolute positioning comes in quite handy. There are, however, some disadvantages to using absolute positioning. Most importantly, absolutely positioned elements don’t appears as part of the normal layout flow in your document. They have a fixed position, which often confines them to a fixed width or height. If you can’t predict the size or consistency of the content in a particular page element (for instance, a page content area where article text appears), then absolute positioning is probably not the best option.

As an alternative, you can use CSS floating to create very fluid and flexible layouts without absolute positioning. See my previous article about tableless column design to learn more about floating elements in your design.

The Image

The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. When using CSS to achieve this effect, the static image and the hover image are actually contained within the same image file. Basically, we’re displaying the image and cropping it so that only one image state is displayed at one time. In order to do this, we’ll omit the <img> tag and display the image as a the background-image of an <a/> (anchor) tag instead.

Let’s look at an image that could be used as a CSS hover image.

Simplistic Markup

As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:

<a class="myButtonLink" href="#LinkURL">Leaf</a>

The CSS

As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:

.myButtonLink {
	display: block;
	width: 100px;
	height: 100px;
	background: url('/path/to/myImage.png') bottom;
	text-indent: -99999px;
}
.myButtonLink:hover {
	background-position: 0 0;
}

We’re using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.

The Result

Move your mouse over the image to see the hover in action.

Leaf

And there you have it, a pure CSS approach to image hovers. You can apply this method to links, <div/> tags, and just about anything else you can imagine in your site’s design. Happy styling!

When I use the term “DHTML,” I am referring to “Dynamic HTML.” This is an endearing term that many web designers use to describe the fusion of HTML with other web technologies, such as JavaScript and CSS. By using various technologies in tandem, we can create dynamic controls that allow website visitors to interact with content directly on the page without the need to refresh the site with every subsequent click.

The HTML

As you will soon see, the tab strip is a prime example of a DHTML control. Before we delve into every aspect of the tab strip, let’s first start with the HTML:

<div class="tabStrip">
	<ul>
		<li><a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1">TabOne</a></li>
		<li><a href="javascript:openTab(2);" class="tabLink" id="tabLink2">TabTwo</a></li>
		<li><a href="javascript:openTab(3);" class="tabLink" id="tabLink3">TabThree</a></li>
	</ul>
</div>
<div class="tabContentActive" id="tabContent1">
	This is sample tab content (1).
</div>
<div class="tabContent" id="tabContent2">
	This is sample tab content (2).
</div>
<div class="tabContent" id="tabContent3">
	This is sample tab content (3).
</div>

The HTML is relatively simple. We are using an unordered list (<ul/>) for our tabs, and we are using <div/> tags for our tab content. As you can see, I am giving a unique id attribute to each tab link and to each tab content <div/>. This is important, as we’ll need unique id‘s in order to access these elements with JavaScript.

The JavaScript

We are using only one small JavaScript function for the tab control. Here is the code:

<script type="text/javascript" language="javascript">
	var activeTab = 1;
	function openTab(tabId) {
		// reset old tab and content
		document.getElementById("tabLink"+activeTab).className = "tabLink";
		document.getElementById("tabContent"+activeTab).className = "tabContent";
		// set new tab and content
		document.getElementById("tabLink"+tabId).className = "tabLinkActive";
		document.getElementById("tabContent"+tabId).className = "tabContentActive";
		activeTab = tabId;
	}
</script>

The CSS:

This CSS is a very basic example of what you can do to style your tabs. You can add colors, gradients, and background images to give the control even more design flare.

.tabStrip ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.tabStrip li {
	margin: 0 2px 0 0;
	list-style-type: none;
	float: left;
}
.tabLink {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e8e8e8;
	border: #dadada solid;
	border-width: 1px 1px 0 1px;
	color: #8a8a8a;
}
.tabLinkActive {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e0e0e0;
	border: #c0c0c0 solid;
	border-width: 1px 1px 0 1px;
	color: #0066ff;
}
.tabContent {
	display: none;
}
.tabContentActive {
	display: block;
	clear: both;
	background: #f0f0f0;
	border: 1px #dedede solid;
	padding: 10px;
}

The Result:

In true DHTML fashion, we have combined HTML, JavaScript, and CSS to create a fully dynamic user control that can appear anywhere on the web. I have taken the fundamentals learned in this tutorial and have created a more visually appealing example of this code. Click on the image below to see the demo.

Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here.