Five Useful Design Techniques and Coding Solutions For Web Designers

Advertisement

As designers, we have to create an intuitive user experience, solve design problems and provide a beautiful and functional user interfaces. Unlike print design, we don’t have the luxury of designing in a static area; rather, our canvas is ever-changing in its content, browser width, page length and more. We do need to be able to code to some extent and be able to build a design around a structure of code. Yet, with these complications comes an opportunity for unique functionality, interactive effects and better user experience.

In this article, we’ll look at five useful coding solutions that we’ve stumble upon recently. All of these solutions enhance a website’s design, not just the code. These solutions affect the user interface and the user’s interaction with the design, and they can make for a more usable and interactive website.

1. Bar Graph Effect For Multiple Items

This effect (pictured below) can be a great way to add some oomph to a Web page, and make it more user-friendly. Its functionality goes beyond just being a cool trick, though. By organizing any set of items on a page — such as tags, categories, comments, product count — a designer can enhance user interaction, provide useful content clues and improve usability. By seeing a count of items such as tags and product types, the visitor can quickly get an idea of what the website mostly consists of. This is a great way to make quick connections with targeted visitors.

For comment counts, visitors can quickly see where the discussions are at. Highlights on highly commented posts can reinforce user-to-user interaction.

Pictured below are two examples of this design. The left organizes tags, and the second ranks the most commented posts on a blog. Be sure to visit both websites to see the full functionality and CSS effects.

Bar graph effect for number of comments or tags.
Left, Dribbble1 (number of tags). Right, Engadget2, (most commented posts).

How Is It Done?

Recreating this solution is really quite easy. We have to do three things:

  1. Lay out the full list of features,
  2. Create the effect in plain (X)HTML and CSS,
  3. Pull in the counts dynamically and put them into our static version.

Breaking the feature down into simple, specific steps give us the beginnings of a solution. We now have a direction to follow.

List the Bar Graph’s Features

To get started with the first step, let’s lay out exactly what this design does. By laying out the steps in writing, we can sort it out into coding terms.

  1. Dynamically pull in a number count (tags, comments, category count, etc.);
  2. Determine the items with the highest count (perhaps the 10 most commented categories, as opposed to all of them);
  3. Create a horizontal bar corresponding to the count (or a vertical bar for a different look);
  4. Organize the bars in order of quantity.

Recreating the Design (Static)

Now, let’s create the design, only without any dynamic data or automation. We’ll leave out pulling in the number count from a database or other source and make up our own numbers for now. We also won’t create a way to determine the highest results or organize them in descending order; instead, we’ll make up our own numbers, manually organize them and use only 10 for now. After that, we’ll redo this in plain (X)HTML and CSS and do all that dynamic stuff.

The (X)HTML:

<div class="block">
	<a href="#" style="width: 100%">Web Interface Design (27)</a>
	<a href="#" style="width: 92.59%">Photoshop Tutorials (25)</a>
	<a href="#" style="width: 74.07%">CSS Tricks (20)</a>
	<a href="#" style="width: 66.66%">Showcases & Inspiration (18)</a>
	<a href="#" style="width: 51.85%">WordPress (14)</a>
	<a href="#" style="width: 48.15%">JavaScript (13)</a>
	<a href="#" style="width: 37.04%">Free Resources (10)</a>
	<a href="#" style="width: 29.63%">Reviews (8)</a>
	<a href="#" style="width: 29.63%">Interviews (8)</a>
	<a href="#" style="width: 25.93%">Typography (7)</a>
</div>

The CSS:

html, body {
	background: #eee;
	font: normal 13px/1.5em Arial, Helvetica, sans-serif;
}
* {
	margin: 0;
	padding: 0;
}
.block {
	width: 400px;
	margin: 100px auto;
}
a {
	display: block;
	padding: 5px;
	margin-bottom: 2px;
	background-color: #666;
	color: #fff;
	text-decoration: none;
}
a:hover {
	background: #9764a0;
}

The above code will create this static mock-up:

Static Bar Graph Effect

Note that we’ve added some basic styling, just to experiment with how hovers could work. For the most part, though, this version is very basic so that you can customize it as you want.

The (X)HTML and CSS should be self-explanatory, but let’s go over how we created the bars. In our style sheet, we created the basic styles and turned each link into a bar using the display: block property. In this simple example, these are the only links on the page, but to be of practical use, some of these bar links would have to be given a class, to distinguish them from the other links on the page. Alternatively, one could use the :nth-child() selector of CSS3 without defining new classes.

We then went into the (X)HTML and set each bar’s width individually with the style attribute. In the (X)HTML code above, we have specified each width as a percentage. We first assume that the highest value, “Web Interface Design (27)”, is 100%. From there, we calculate the percentages of the others relative to that.

Example: “Photoshop Tutorials (25)”
25 × 100 = 2500
2500 ÷ 27 (our 100%) = 92.59%
<a href="#" style="width: 92.59%">Photoshop Tutorials (25)</a>

Recreating the Design (Dynamically)

We have now figured out the math and the static code, and we just have to put it all together, pulling the code from a database and automatically organizing and creating the bars.

In this example, we’re working with the number of posts in each of our WordPress categories, but the same logic applies to other uses and other programming languages. The code below might seem long, but don’t worry: it’s mostly comments, which explains how to dynamically calculate the percentages and pull the content into the static (X)HTML/CSS.

<!-- In our example, we get a count of categories in WordPress.
Let's first find the category with the most posts.
-->

<?php
	$highest = 0; // Initialize our “highest count” variable
	foreach((get_the_category()) as $category) { // for each category
		$cat_count = $category->category_count;

		// If this category’s count is higher than what we have so far
		// for the highest number…
		if($cat_count > $highest){
			// then re-declare our highest value according to this
			// category’s count
			$highest = $cat_count;
		}
   }
?>

<!-- Below we go through an array of the categories, and for each one
get its name and then its count. We've saved this data in
the $cat_name and $cat_count variables, respectively.

(Because we will get a new category each time the loop runs,
we'll have to process all of our other (X)HTML/CSS code within the loop
for each turn.)
-->
<div class="block">

<?foreach((get_categories(‘orderby=count&order=desc’)) as $category) {
	$cat_name = $category->cat_name;
	$cat_count = $category->category_count;

	// Let's calculate this category’s width
	// (our “100%” is our highest category count number, $highest)
	$width = ($cat_count * 100) / $highest;

	// Finally, echo out our link HTML, including our variables
	// to dynamically bring in the content for the width,
	// category name and count.
	echo '<a href="#" style="width: .'$width'.%">
		.'$cat_name'. (.'$cat_count'.)</a>';
   }
?>
</div>

Demo and Download Files

You can see the demo3 and download the files201594 from our servers.

2. Animation On Article Hover

Now, this is a very nice aesthetic effect, and it is original, too. Visit CSS Tricks5 or check out the image below. The articles have a simple clean look, with only an asterisk separating them. When one hovers over a post, we see its meta data: comments, a “Read on” link and date stamp.

What makes this effect especially dynamic is that it features a hover effect for content, not just images. It’s a cool trick and it has some practical uses, too. By hiding content until it’s needed, the designer puts more emphasis on the content and important features. A website can have the appeal of minimalism but still offer rich functionality.

This design solution also makes important content stand out. As on CSS Tricks, when users hover over a post, an action occurs, drawing the user’s eyes to links that will help them interact with the blog.

6
When you hover over a home-page post on CSS-Tricks.com7, meta content is revealed.

How Is It Done?

This effect might look more complicated than a simple image roll-over, but the same principle applies. With some CSS and a bit of basic JavaScript, we can do the same thing.

Let’s first look more closely at what this effect does. Then we’ll be able to more easily come up with the solution.

  • When any part of a post is hovered over, the effect is triggered.
  • Two pieces of content are revealed, to the left and right of the original image: the date and comments section, and the “Read on” section.
  • On moving the mouse, the post returns to normal.

Seeing how this is similar to image roll-overs is now easier. For image roll-overs, we use JavaScript to change code for onMouseOver and onMouseOut. We’ll do a similar thing here, but use divs instead of images. Also with image roll-overs, we’ll usually replace one image with another. Our action here instead will be just to show and hide content.

The (X)HTML

We need to wrap a div element around the entire post, and we can manage that as a single step. We can then apply the JavaScript events to it: MouseOver and MouseOut. For each, we simply set the content’s display property (defined by a CSS id) to none or inline. Instead of using inline-attributes, it’s better to separate JavaScript and CSS, e.g. using jQuery.

<div class="post">

<h2>A Blog Post Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim est ultrices neque fermentum convallis. Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus. Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt lorem nec nisl egestas gravida vel et massa. Donec arcu nisl, venenatis ac suscipit dignissim, egestas auctor lectus. Quisque vulputate fermentum felis sed tristique. Ut enim felis, faucibus ac fermentum rutrum, posuere id nulla. Duis lectus dolor, eleifend in tincidunt eu, sagittis sed sapien. Duis id purus id magna facilisis luctus. Mauris sodales arcu ut arcu laoreet id pulvinar ligula hendrerit.</p>

<!-- This is what appears when not hovering -->
<p id="postimg" class="center">
<img src="triangle.png" alt="Triangle" />
</p>

<!-- This is what appears on hover; hidden otherwise. -->
<p id="hiddencontent" class="center">
Posted on 9/15/10 | <a href="#">23 Comments</a>
<img src="triangle.png" alt="Triangle" />
<a href="#">Continue Reading…</a>
</p>

</div>

<script type="text/javascript">
$('.post').mouseover(function() {
	$('#hiddencontent').css('display', 'inline');
	$('#postimg').css('display', 'none');
});

$('.post').mouseout(function() {
	$('#hiddencontent').css('display','none');
	$('#postimg').css('display', 'block');
});
</script>

The CSS

Here, we’ve just done some basic styling: centered our div, styled the h2 tag, played with fonts, etc. The thing to note here is the #hiddencontent div. Because we need to hide our content on page load, we must set it in the CSS to display: none.

html, body {
	background: #eee;
	font: normal 14px/1.6em Arial, Helvetica, sans-serif;
}

#hiddencontent {
	display: none;
}

h2 {
	margin-bottom: .5em;
}

.center {
	width: 500px;
	text-align: center;
}

Below is our mock-up of the design (top is before the hover, and bottom is after). It’s just some basic CSS and JavaScript, and the code is easy enough to work around when implementing in WordPress or elsewhere.

Demo and Download Files

You can see the demo8 and download the files201594 from our servers.

3. A Color For Each Category

This technique gives each category on a website a different color (see Emprnt1210 for a full implementation). This is a great way to color-code a design to give it better organization and easier navigation. For now, let’s figure out how to repeat this effect with WordPress and categories, as on Emprnt.

The same solution could be applied to other items: roles (authors have one color, editors another); authors (assign colors based on posts, tags, etc.); highlighting popular posts (highlight posts that have 150 to 200 page views with one color, and then 75 to 150 with another, and so on). The experience will vary according to your application. For example, by color-coding categories, you aid navigation and usability. By color-coding popular posts, you help users see which posts are getting the most attention.

Different color for each category11
Emprnt1210 uses CSS and a bit of code to create a different color for each category as a post is published.

How Is It Done?

To pull this off, we need to pick a color for each category, identify each category’s id and then match each id with a CSS class that specifies the color and any other basic styling. First, let’s take care of the static (X)HTML and CSS:

Recreating the Effect (Static)

The (X)HTML:

<div class="block">
	<div class="post cat_1">
		<h2>A Blog Post Title</h2>
		<small>Category 1</small>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Pellentesque dignissim est ultrices neque fermentum convallis.
		Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
		Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
		lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
		venenatis ac suscipit dignissim, egestas auctor lectus.</p>
	</div>

	<div class="post cat_2">
		<h2>A Blog Post Title</h2>
		<small>Category 2</small>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Pellentesque dignissim est ultrices neque fermentum convallis.
		Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
		Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
		lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
		venenatis ac suscipit dignissim, egestas auctor lectus.</p>
	</div>

	<div class="post cat_2">
		<h2>A Blog Post Title</h2>
		<small>Category 2</small>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Pellentesque dignissim est ultrices neque fermentum convallis.
		Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
		Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
		lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
		venenatis ac suscipit dignissim, egestas auctor lectus.</p>
	</div>

	<div class="post cat_3">
		<h2>A Blog Post Title</h2>
		<small>Category 3</small>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Pellentesque dignissim est ultrices neque fermentum convallis.
		Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
		Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
		lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
		venenatis ac suscipit dignissim, egestas auctor lectus.</p>
	</div>

	<div class="post cat_1">
		<h2>A Blog Post Title</h2>
		<small>Category 1</small>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Pellentesque dignissim est ultrices neque fermentum convallis.
		Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
		Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
		lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
		venenatis ac suscipit dignissim, egestas auctor lectus.</p>
	</div>
</div>

As you can see, we’ve given each post two classes: post and cat_#. This example has only three categories, with their classes named cat_1, cat_2 and cat_3, but keep in mind that these numbers will change according to our category ids later.

The CSS:

html, body {
	background: #eee;
	font: normal 13px/1.5em Arial, Helvetica, sans-serif;
}

* {
	margin: 0;
	padding: 0;
}

h2 {
	margin-bottom: .5em;
}

small {
	font-size: 9px;
	line-height: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
}

.block {
	width: 500px;
	margin: 50px auto;
}

.post {
	padding: 15px 0 15px 15px;
	margin-bottom: 2px;
}

.cat_1 { border-left: 10px solid #cb005b; }
.cat_1 small { color: #cb005b; }
.cat_2 { border-left: 10px solid #0064cb; }
.cat_2 small{ color: #0064cb; }
.cat_3 { border-left: 10px solid #cb7700; }
.cat_3 small{ color: #cb7700; }

At the top we have basic styling, and toward the bottom we have our category-specific styling. We have given each category’s unique class a colored border and name. With our static (X)HTML and CSS, we should get the following mock-up:

Recreating the Effect (Dynamically)

Doing this dynamically in WordPress is not difficult at all:

<div class="block">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

	<div class="post cat_<?php foreach((get_the_category()) as $category)
			{echo $category->cat_ID . ' ';}
			?>">
		<h2><?php the_title(); ?></h2>

		<small><?php the_category(', ') ?></small>
		<?php the_content(__('Continue reading', 'example')); ?>
	</div>

<?php endwhile;?>
<?php else : ?>
	<h2 class="center">Not Found

	<p class="center">Sorry, but you are looking for something that isn't here.

	<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

</div>

For our essential piece of code, we just need to dynamically place the category id number inside <div class="post cat_#">. Note that the ids will likely not be 1, 2 and 3 (as in our static example), so we’ll have to adjust. Find your category ids13, and adjust the CSS class names accordingly. For example, if a featured category has an id of 24, then the corresponding CSS class to create that category should be cat_24.

Note: with this solution, if a post has multiple categories, the post will default to the color of the first listed category.

Demo and Download Files

You can see the demo14 and download the files201594 from our servers.

4. Interesting Image Captions

This last solution is simple but often overlooked. Image styling and positioning are important in any type of Web design, and attractive captions are also a must. There is really no set HTML standard for image captions, so creating seemingly simple effects requires a bit of creativity.

Clean and interesting image captions.
Left, Boagworld16. Right, UXbooth17

The (X)HTML

To group caption text and images, we need to place them in a div. Then, we’ll style the div and its components.

<div class="image-caption">
<img src="images/testimage.jpg" alt="Test Image" />
<p>Here is the image caption text, and a link18.</p>
</div>

Remember, the div must be identified by a class, because we’ll be displaying images and captions multiple times throughout the website. The above code is a great starting point and could yield a number of different solutions. Below are a few CSS options and examples.

CSS Examples

.image-caption {
	width: 240px;
	background: #fff;
	padding: 3px;
	border: 1px dotted #aaa; }
.image-caption img {
	border: 1px solid #aaa; }
.image-caption p {
	clear: both;
	font: normal 9px/1.45em Verdana, Tahoma, sans-serif;
	color: #444; }
.image-caption a {
	color: #444;
	text-decoration: underline; }
.image-caption a:hover {
	font-style: italic; }

Above is a very simple image caption style: clean, organized and minimal. The “Polaroid” look, if you will.

.image-caption {
	width: 240px;
	position: relative; }

.image-caption img {
	border: 1px solid #333; }

.image-caption p {
	position: absolute;
	bottom: 5px;
	width: 232px;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	background: #000;
	padding: 5px;
	color: #fff;
	clear: both; }

.image-caption a {
	color: #fff;
	text-decoration: underline; }

.image-caption a:hover {
	font-style: italic;
}

Above is a simple overlay technique for captions. The most important properties here are position: relative under .image-caption, and position: absolute, bottom: 5px and width: 32px under .image-caption img. The bottom would usually be set to 0, but in our case we adjusted it to 5px because of the added padding. Same goes for the width: we adjusted it to accommodate the added padding and image border.

.image-caption {
	width: 240px;
	background: #fff; }
.image-caption img {
	border: 1px solid #aaa; }
.image-caption h1 {
	padding: 0 5px;
	font: bold 10px/1.4em Arial, Helvetica, sans-serif;
	color: #cc0000; }
.image-caption p {
	clear: both;
	padding: 0 5px 10px;
	font: normal 9px/1.45em Verdana, Tahoma, sans-serif;
	color: #444; }
.image-caption a {
	color: #444;
	text-decoration: underline; }
.image-caption a:hover {
	font-style: italic; }

To add other styles (such as the image title here), just add them to the CSS under the .image-caption class, and then remember to add <h1>Image title</h1> where desired in the mark-up.

It takes minimal yet creative CSS to create some pretty cool effects. Experiment with a few other things, such as CSS3 rounded corners, different positioning, border styles and more. Below are more resources and techniques to get interesting image captions, some with plain (X)HTML and CSS and others requiring JavaScript and WordPress.

Demo and Download Files

You can see the demo19 and download the files201594 from our servers.

Other Neat Solutions

5. Print Layouts For The Web

Print-inspired layouts can be a refreshing change from standard Web layouts. While not suitable to all website types, this technique is definitely catchy for those that pull it off. Of course, with Web design, we must use code to create the look we’re going for. How can we create Web designs that resemble print layouts efficiently — with unconventional layouts and interesting typography — and code them in a way that still adheres to web design best practices?

Print design layouts on the web.26
This Web page27 has a layout and design that look more like a print piece than a traditional website.

Because print-inspired designs can vary so much, there are many various coding solutions available. But there are best practices. Below are just a few of the things to consider.

Web Design Must Be Fluid, While Print Does Not

One reason print design can look so creative is that the content doesn’t have to adapt to varying widths and lengths. On the Web, though, text, images and other content change all the time, sometimes straining the layout. There are a couple solutions to this. First, as in the example above, if the content is set and won’t change (such as blog posts), then feel free in designing around the text. Line height, letter spacing and other elements can be adjusted precisely to play around the images and background and then be left alone.

For non-static content, some thinking may be required:

  • Fixed-width designs are probably best if possible. Then, the designer will only have to expect the content to change vertically. (For a different approach, you could set a fixed height and then worry only about varying widths.)
  • With well-organized and properly nested code, content that expands or contracts should not be a problem; it might just take some brainstorming to consider design solutions that would look good in a couple of different scenarios.
  • Learn how to use (X)HTML and CSS together, avoid div-itus as much as possible, and always look for ways to make code shorter and smarter.

Coding and positioning a print-inspired design can be difficult, but never impossible. However the content varies, for the most part it will stay within a certain range in each section, which is helpful. For example, an “About us” blurb will not suddenly jump from 200 to 1000 words, but it might increase in height by a few lines of text.

Organized and Reusable CSS

Make CSS classes and ids as reusable as possible by making them as general as possible. Then, apply area-specific styles directly on the page where they need to be applied. Always be thinking of ways to better organize and reuse CSS in the mark-up. Without consistency in the layout, this can be difficult and therefore requires more attention.

Get Inspired

Devising one unique coding solution for a print-inspired Web design is difficult indeed, and so the only real solution is to learn best coding practices and use them to create the most efficient solution for that particular design. For some print-design inspiration on the Web and some live coded examples, check out a few of the showcases below.

Heart Directed28
Heart Directed29 is a showcase of print-inspired blog posts and other website designs.

Cold Heat Unique Showcase30
Coldheat has a general Web design showcase and a a special section31 for unique layout designs.

Unique Blog Post Designs32
This post on WebdesignerDepot33 showcases several blog posts with a unique print look.

Further Resources

Below are a few more related articles, some from right here on Smashing Magazine and others from around the Web. All share some great ideas and techniques you can experiment with.

Conclusion

Without calling ourselves “developers,” we, designers, can add some nice effects and added functionality with a bit of extra coding knowledge. None of these effects are difficult to figure out, but each can really add to a website. Some create an attractive visual experience, while others provide visitors with more information or functionality. Whatever the purpose, each has its proper use.

We’d love to cover more coding solutions that are unique, useful or just interesting. Please feel free to suggest more examples of advanced techniques in the comments below. Hopefully, we’ll be able to include them in a future article.

(al)

↑ Back to topShare on Twitter

Kayla Knight is a full-time freelance web designer and developer, and likes to blog a lot too. She also created and runs Freelance Mingle, a social network for freelancers.

  1. 1

    FIRST!

    -195
  2. 2

    :-)

    -85
  3. 3

    Boost Inspiration

    October 7, 2010 12:50 am

    Thanks for sharing these useful techniques.

    -2
  4. 4

    Love this sort of ‘how they do it’ article. Really enjoyable read, not because I necessarily want to use any of these features in my next design, just because I love knowing how things work…

    And it’s a lot easier when it’s presented this way rather than trolling through source code myself…

    28
  5. 5

    i like! :-)

    2
  6. 6

    Thanks. Color for each category was very useful.

    5
  7. 7

    This is great!!! Love the way you show how its done dynamically…. Color For Each Category and Bar Graph Effect is really amazing.. Thanks for sharing

    10
  8. 8

    Michel Bozgounov

    October 7, 2010 4:54 am

    Really like the article! Concise, interesting, practical… Thanks, Kayla & Smashing Mag! :)

    4
  9. 9

    Great collection, the first one in particular will be getting used.

    4
  10. 10

    love the article hover effect! epic!

    3
  11. 11

    Interesting..Thanks for sharing these useful techniques. :)

    3
  12. 12

    Great stuff, well presented. Thanks.

    1
  13. 13

    These are great tips and great examples you pulled out. Nice article.

    -1
  14. 14

    Simply Amazing Post! I’m lovin’ it

    1
  15. 15

    thanks for this. i might try to use one or two on my blog.

    1
  16. 16

    A few years ago I already did the 3. A Color For Each Category but not for WordPress, but this does not matter.
    It is really simple to achieve. You could even add a light gradient in css3 to play around ;-)

    1
  17. 17

    You can simplify that .js for #2 considerably.

    $(‘.post’).mouseover(function() {
    $(‘#hiddencontent’).css(‘display’, ‘inline’);
    $(‘#postimg’).css(‘display’, ‘none’);
    }).mouseout(function() {
    $(‘#hiddencontent’).css(‘display’,’none’);
    $(‘#postimg’).css(‘display’, ‘block’);
    });

    Even more, assuming you’re setting your display:inline in CSS:

    $(‘#hiddencontent’).hide();

    $(‘.post’).hover(function() {
    $(‘#hiddencontent’).show();
    $(‘#postimg’).hide();
    }, function() {
    $(‘#hiddencontent’).hide();
    $(‘#postimg’).show();
    });

    And one step further:

    $(‘#hiddencontent’).hide();

    $(‘.post’).hover(function() {
    $(‘#hiddencontent, #posting’).toggle();
    });

    18
  18. 18

    Interesting article :D i was looking for something related to image with captions…

    1
  19. 19

    Wow this is sooo useful! Thanks so much!

    0
  20. 20

    This is a great article Kayla. And what great timing. Just five minutes ago *NO LIE* I was wondering how the “different color for each category” design was created! Now I know =]

    0
  21. 21

    Regarding #4. Interesting Image Captions

    I think it can be done much Simpler.
    using the :before and :after pseudo selectors
    And pass in the Title via the content:attr(title), and the rel

    This is very light and requires no extra HTML markup needed.

    0
  22. 22

    #2 could be further simplified by using the :hover selector on a div or some such

    blah blah blab bah blah

    div.wrapper > p.details, div.wrapper:hover > p.simple { display: none }
    div.wrapper:hover > p.details, div.wrapper:hover > p.details { display: inline-block }

    this way it doesn’t require javascript to execute before things are show correctly, it won’t be blocking the page at all, and should lead to a faster experience.

    3
  23. 23

    Nice article, just one comment: be careful with hover since touch devices do not have it. It is fine as a gimmick and if you have an alternative path to the same function, but never rely on the hover capability.

    10
  24. 24

    An old fan of Kayla… :)

    2
  25. 25

    Great post and very timely for me since I’ve been thinking again about (finally!) creating my personal site.

    One quick point, though: you can easily add a post’s category as a class using the post_class template tag — no need for a foreach() loop.

    http://codex.wordpress.org/Template_Tags/post_class

    3
  26. 26

    @ Speider:

    “This isnt a kids website, no one really cares you commented first.”

    37
  27. 27

    I really enjoyed this article and would love to learn more tricks like these.

    1
  28. 28

    In the first example, you have $highest == $cat_count. Think this should be a single equals.

    0
  29. 29

    So much for good natured humor. Judging by the dislikes on other comments, people don’t care for the positive comments, either.

    -45
  30. 30

    Re: 1. Bar Graph Effect For Multiple Items

    The current code will not work if you are trying to implement it in WordPress. There are a few errors that need to be fixed.

    Most importantly, on line 15: $highest == $cat_count;

    This is the incorrect operand. It should be: $highest = $cat_count;

    You also should use get_categories() instead of get_the_category() on lines 7 and 30. get_the_category() only returns the categories for a single post. get_categories() will return all the categories.

    Also the output on line 41 is missing a the % symbol in the inline style tag. Without this, your CSS will not work.

    And finally, you need to sort the order of the categories from highest to lowest. The current code does not sort, so you won’t get the highest count as the first item.

    On line 30, it should be:
    foreach((get_categories(‘orderby=count&order=desc’)) as $category)

    Regarding the XHTML and CSS code. A more semantic way would be to use lists instead of a block. For example:

    <ul>
    <a href=”#”>Web Interface Design (27)</a>
    <a href=”#” rel=”nofollow”>Photoshop Tutorials (25)</a>


    </ul>

    Then style the CSS accordingly.

    I’ve implemented this modified version using lists on my blog:

    http://www.takadesigns.com/blog

    9
  31. 31

    Great Concepts

    0
  32. 32

    Thanks for sharing this post.I like this post.It contains good collections of coding solutions for web designers.

    0
  33. 33

    really great article for designer.

    0
  34. 34

    What is funny about pointing out the fact that you left the first comment? What is useful about comments that dont relate to the content (i.e. “I like it :-)”)

    16
  35. 35

    And a great advantage of your approach: since you hide #hiddencontent with js instead of CSS, users without js will still be able to see all content!

    4
  36. 36

    I’m still trying to figure out why there are only 35 comments, but 101 thumbs down. Does someone have a lot of relatives?

    Please have a sense of humor and let it slide. :) As for someone posting a kudos to the author, why thumbs down on them?

    -26
  37. 37

    Nice article; good job.

    I would use more semantic HTML, for example:

    #1
    <ol>
    <li>Web Interface Design (27)</li>
    <li> .. </li>
    </ol>

    No inline styles, but calculate width with js. Since ‘Web Interface Design’ isn’t a hyperlink but you just want a nice hover state, simply style li:hover ( and for older browser use $(‘li:hover’).css() ).

    #2
    See comment Greg Johnson

    #3
    <ol id=”articles”>
    <li class=”cat_1″> .. </li>
    <li class=”cat_2″> .. </li>
    </ol>

    Since you can style #articles li, you do not need a post class on every and the relation between posts is now established.

    3
  38. 38

    really usefull for me,
    thanks a lot

    0
  39. 39

    I know speider is both a joker and a well known writer, I must admit I was pretty amused, Sven knows this too and also seems to not take it seriously ;-)

    0
  40. 40

    Like the article, apart from the last example, which had no real meaning; wasn’t really any kind of pattern…

    1
  41. 41

    The article hover thingy is nice, but be careful, it may be probably a no-no as far as many mobile device browsers have little to no way of hovering the article, thus the hidden data will remain hidden for the user. No good.

    As mobile devices become more and more popular today I think it’s important to take it’s limitations into consideration when making designs.

    3
  42. 42

    I love how you structured this post with easy to follow code & css. Keep up the excellent work.

    0
  43. 43

    @speider – Because not everybody that read the comments will leave their own, maybe they don’t have anything smart to say and they’re not “first”, so they don’t leave anything, but if they don’t like your comment they can simply click the thumb down.

    @Thomas – Who is speider?

    @SmashingTeam – Great article. And you should fix the comment “edit” lightbox, add more z-index to it since the thumbs rating is on top of it.

    3
  44. 44

    $width = ($cat_count x 100) / $highest;

    What the hell is that? Multiplying in PHP is done with “*”, not “x”.

    1
  45. 45

    Excellent post guys. I like how you didn’t stop with just the explanation and provided a dynamic way to re-create. Just the quality I expect from this site. Good stuff Kayla.

    0
  46. 46

    Thanks for sharing… there are a couple of techniques I will use right away!

    0
  47. 47

    wow, sorry speider, no one seems to have a sense of humor but you gotta realize that we’ve been conditioned by former idiots to automatically reject the “FIRST!” comment because some people can really be that stupid (as in trolling or even worse they’re serious!).

    anyways, maybe a j/k or would’ve helped…

    5
  48. 48

    Why would you downvote this?? Just becaus someone says they like it doesn’t mean it’s unrelated. Shouldn’t it be taken more of as a “Thanks for posting!”.

    1
  49. 49

    You could even get rid of the JS altogether and just use the CSS “:hover” pseudo-class…

    (hutch shows a great example a few comments down)

    0
  50. 50

    Sarfaraz A. Hanfi

    October 8, 2010 1:20 pm

    I like this post thanks for sharing these useful techniques. Bar Graph Effect For Multiple Items its great. i will use my site.

    0
  51. 51

    hahaha but what IS funny is how everyone is thumbing down your posts. good try at redemption.

    6
  52. 52

    They’re only digital check marks, not knife stabs, so it’s no big deal. ;) An attempt at humor that died quickly.

    There’s an old saying in the advertising business; “there is no bad publicity!”

    Now over a hundred people know me AND I was first! ;)

    -2
  53. 53

    Next time. ;)

    -4
  54. 54

    This was interesting post i will give u A+ for superb article ..

    keep posting

    0
  55. 55

    Maybe it’s just me, but at #1, the line 41 is causing unexpected T_VARIABLE syntax error.
    And I think in line 36 there should be “*” operand instead of “x”.

    0
  56. 56

    I would improve the first one like this: http://jsfiddle.net/Dk6JV/
    More semantic html and I pulled the numbers a bit over the border via absolute positioning :)

    Regards,
    Tom

    1
  57. 57

    Fixed! :) Sorry about that… “pseudo-code” to “real-code” mistake!

    2
  58. 58

    Be aware that will not work in some older browsers.

    0
  59. 59

    Nice article, thanks for sharing it!

    0
  60. 60

    Great article, I loved the part about the Print layouts for web and the bar graphic for multiple items.

    On a side note – I’ve noticed that my RSS reader (igoogle) is not updating with every post you guys make. Is this just me, or is this something I can fix?

    0
  61. 61

    I’ve been using the color-coded categories at my website for a long time now. You don’t even need to code in category classes in your posts–WordPress automatically populates your post element with a number of classes, including “category-[slug]“. An example:

    class=”post-1333 post type-post hentry category-blogging-writer category-writer tag-blogging tag-editorial-calendar tag-wordpress”

    What you’d need to do a bit of hacking for, though, is getting the category over at the body class–which is doable by adding a filter.

    1
  62. 62

    Good tutorials and articles. Thanks for sharing

    0
  63. 63

    Excellent collection. Carry on.

    -1
  64. 64

    When “Engadget” changed design, I was really curious about bar graph style. so searched in the google few days for a this. Thanks Kayla for the great post. now it’s my turn for creativity~

    0
  65. 65

    Thank you for this :) Thumbs up!

    0
  66. 66

    WOW!! impressive and fantastic post, Kayla! I want to test everything. Thanks so much, you have motivated me to try more things.
    cheers,
    @RolandoPeralta

    1
  67. 67

    Thanks for sharing this post.I like this post.It contains good examples of solutions of web designers.

    0
  68. 68

    Such an awesome article.

    0
  69. 69

    Great concept & good collection of coding for dedigner

    0

↑ Back to top