Springload is a web design and development company based in Wellington, New Zealand. Their site is simple, understated, and illustrates their work perfectly.

This design was featured on the Sunday 20th of May 2012. It falls under the category of Portfolio, and has a layout style of Two Column.

If you'd like, you can visit this site, or view all our other featured designs.

"Crown Company", a simple yet elegantly beautiful company brand/logo with the intent of portraying it's meaning to the best of its abilities with a Crown.

This design was featured on the Sunday 20th of May 2012. It falls under the category of Logo, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

Controlled is a pixel perfect graphical user interface that is crafted from vector shapes, layer styles and hi-res textures.

This design was featured on the Sunday 20th of May 2012. It falls under the category of Element, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

For a conference focused on mobile design, Go Beyond Pixels really hits the spot!

It combines various styles and colours into a long one-page design, with amazing detail invested into tiny elements.

This design was featured on the Saturday 19th of May 2012. It falls under the category of Software, and has a layout style of One Column.

If you'd like, you can visit this site, or view all our other featured designs.

A look at the typography changes used in this logo design. A great insight into the tweaks needed for the final effect.

This design was featured on the Saturday 19th of May 2012. It falls under the category of Logo, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

This is a menu design concept for Conversocial - the final version was slightly modified from this but I always liked this particular snap. The app itself is scalable so the menu needed to be able to collapse a little depending on screen size.

This design was featured on the Saturday 19th of May 2012. It falls under the category of Site Navigation, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

This PSD contains three different styles of to-do list, each with a unique look and feel, and intricate detail. It’s also included as a high resolution “retina ready” PSD for use on mobile devices.

This design was featured on the Friday 18th of May 2012. It falls under the category of Web App, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

Bright, colourful, and making great use of space within the design. The map located in the footer is also a unique touch!

This design was featured on the Friday 18th of May 2012. It falls under the category of Charity, and has a layout style of Grid.

If you'd like, you can visit this site, or view all our other featured designs.

A logo concept with style, colour, gradient, and simplicity.

This design was featured on the Friday 18th of May 2012. It falls under the category of Logo, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning. We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?

There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Who’s This For?

I’ve gotten a lot of commenter feedback lately from designers who struggle with the basic methods and concepts of layout in CSS. The general consensus among many of those new to CSS is that they simply “fiddle” with the code until everything finally works.

Having been there quite a few times myself, I know that this is an immensely frustrating period of your professional growth. Knowing that the answer is right there in front of you and not being able to figure it out is excruciating and time consuming.

If this sounds familiar, hopefully I can help ease you out of this period with some solid and practical advice for how to handle some common layout scenarios. If you’re a CSS ninja who can code a website blindfolded, this article probably isn’t for you. If you’re a designer who just wants a better understanding of how to take what’s in your Photoshop file and turn it into CSS, you’re in the right place. Let’s get started.

Horizontally Center an Element

The first scenario that we’ll attack is by far one of the most common: centering an element horizontally in the viewport or browser window. To get started, let’s bust out a simple div and give it some basic styling.

As you can see, by default, our div pops up in the top left of the viewport. The trick here is that we need the div to stay in the center of the window, no matter what the window’s size is currently. That means that we can’t use absolute positioning to place it at a specific point because that won’t be centered on any other possible window sizes.

Instead what we need to do is leverage the “auto” value that can be applied to margins. Here’s how this works:

As you can see, applying a single line of CSS tossed our box straight to the center of its parent, which in this case is the body. To accomplish this, I used a bit of CSS shorthand. If you need a refresher, margin shorthand starts at the top and works its way around clockwise.

You can shorten this even further if you only have two values that you need assigned. In this case, the first slot will apply to the top and bottom margins while the second slot will apply to the left and right margins. Here’s another look at our centered div, this time with the margins declared using three separate but perfectly equivalent methods.

As you can see, our element is void of top and bottom margins, but the left and right are set to auto, which keeps the item perfectly centered.

Things To Keep In Mind

There are some important things to remember about using the auto margins trick. First of all, you must have a specific width declared for the element that you’re centering. The height declaration is not necessary, you can allow the content to determine the height if you wish, which is the default setting, but the width must always be set.

It’s important to note that while this trick will work on most block level elements, not just divs, it won’t help you out with vertical centering. As an example, let’s throw a paragraph inside of a div, then attempt to center that paragraph in the space.

div {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: auto;
}
 
p {
  width: 60%;
  margin: auto;
  font: 14px/1.5 Helvetica, sans-serif;
}

</ br>

As you can see, I have auto margins set both on the paragraph and its parent div. This centered everything nicely horizontally, but it didn’t have any effect on the vertical position.

Center An Absolutely Positioned Element

The method above works to automatically center one item inside another, but the method assumes that you’re using the default positioning context: static. If you have absolute positioning applied, this method goes out the window.

Using the absolute and relative positioning methods we learned last week, we can apply a simply formula to solve this issue.

Here we see that on an absolutely positioned item contained inside of a relatively positioned item, we need to set the left property by plugging some numbers into this formula. Here’s a test case:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
}

</ br>

Let’s see if we can center the black box horizontally. Using our formula, we can see that the left property needs to be set to 100px.

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
  left: 100px;
}

</ br>

With this code, we’ve set the distance between the left side of the box and the edge of its parent container to 100px, which centers it perfectly.

With Fluid Width

The method above only works if the parent container has a static width. Given the popularity of responsive design though, more and more containers are going the fluid route lately. This means that we’ll need another way to center the child that isn’t dependent on the width of the parent.

To accomplish this, we need to use a percentage for the left value. The obvious answer is to use 50%, but that won’t really work because you’re not accounting for the width of the element that you’re centering. To make it work, we need to add in a negative left margin of half the width of the child element.

Using this logic, we apply a left margin of negative fifty pixels along with a left value of 50% and our div is once again perfectly centered on the x-axis.

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -50px;
  left: 50%;
}

</ br>

It’s important to note that this would also work if our child element had a fluid width. We use the same steps as before and come up with something like the following:

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 70%;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -35%; /* Half of 70% /*
  left: 50%;
}

</ br>

Dead Center an Element

Now that we have a few simple and complicated centering methods in our tool belt, it’s time to tackle the puzzle of perfectly centering an element both horizontally and vertically.

Fortunately, to pull this off, we can use the same method that we just learned, we just have to account for height. This time around we’re also going to center both the parent and the child both vertically and horizontally. Here’s the code to pull it off:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  position: absolute;
 
  margin: -150px 0 0 -150px;
  left: 50%;
  top: 50%;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

</ br>

There are a few things that you need to notice here. First, this time both the parent and the child are absolutely positioned. From here, I used our negative margins trick with the left property on the container div, then did the same for the box div.

The result is that our content is completely centered and will stay that way as the browser changes size in any direction (even vertically!). Click on the image below to tinker with a live demo.

Centering Text

For my next trick, I’ll teach you something cool about centering text. We’ll start with a simple h1 element inside of a container div.

Now, I’m sure that you already know how to center this text horizontally in the space. It’s typically one of the first things you learn in CSS. Just set the text-align property to center.

.container {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: 50px auto;
}
 
h1 {
  font: 40px/1 Helvetica, sans-serif;
  text-align: center;
}

</ br>

Easy right? But now let’s say we want to center this line of text vertically as well. If this were a paragraph, we would probably take the methods above into account, but since it’s only a single line, we can use a nifty trick.

All we have to do is set the line-height property to the height of the container. I accomplished this below using the shorthand font syntax.

.container {
  height: 200px; /*Set line-height to this value*/
  width: 400px;
  background: #eee;
  margin: 150px auto;
}
 
h1 {
  font: 40px/200px Helvetica, sans-serif;
  text-align: center;
}

</ br>

Centering a Background Image

The last thing that we’re going to learn to center is a CSS background image. To get started with this, we’ll create another container div, but this time we’ll keep in empty and toss in an image using CSS.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
}

</ br>

As you can see, the default place for an image to appear if no repeat is set is the top left. It turns out though that you can move it to one of nine different preassigned slots. These are shown below:

We accomplish this movement through the use of the background-position property. Simply call this property and set any of the values listed above.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
  background-position: top center;
}

</ br>

As an alternative, we can use the shorthand syntax for this. Simply toss in one of the values at the end of your stream of values on the background property.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}

</ br>

Conclusion

There you have it! You should now be completely confident in your ability to tackle almost any centering situation with CSS, from dead centering a div to vertically centering a line of text within its container and beyond.

Reach out to us on Facebook or Twitter and let us know if you found this information to be helpful and if you have any questions.

Weightshift is a branding, design and development studio, and their portfolio design beautifully blends simplicity and examples of their work.

This design was featured on the Thursday 17th of May 2012. It falls under the category of Portfolio, and has a layout style of One Column.

If you'd like, you can visit this site, or view all our other featured designs.

Great use of colours and typography to illustrate the important phrasing within the brand name.

This design was featured on the Thursday 17th of May 2012. It falls under the category of Logo, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

A great example of playback button user interface design, specifically for the "Miro" Mac application.

This design was featured on the Thursday 17th of May 2012. It falls under the category of Mac App, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

Client testimonials are a popular website feature. They bring credibility to a company and instill a sense of trust. If your other clients love you so much, I might too!

As a fun experiment, today we’re going to set out to build a cool little quote section that will rotate between multiple different quotes using only CSS. Along the way, we’ll learn all about how to plan and create multi-step keyframe sequences. Let’s get started.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The HTML

To start this project, we need to decide on the structure of our quote. Typically, a client quote will have three pieces of text: the client’s name, where they’re from and what they said.

With this in mind, we can create a quote container that has three different pieces. The header will hold the client’s name, the small element will presumably hold the name of the company the client is from or some other related information, and the paragraph with hold the quote text.

<div class="quote">
  <h3>John Smith</h3>
  <small>Design Shack</small>
  <p>"This is the quote text."</p>
</div>

</ br>

Because we used three different elements, we won’t need any additional hooks and should be able to easily target each piece of the quote in our CSS. As a side note, I arbitrarily chose an h3 here simply because h1 and h2 are typically used up for other purposes. Feel free to change this to whatever you like.

Now that we have our structure figured out, it’s time to expand it into three different quotes. To showcase the versatility of this project, I decided to fill my text with the last words of a few famous people. A little morbid, but as a placeholder it’ll do!

<div class="container">
  <div class="quote">
    <h3>Emily Dickinson</h3>
    <small>1830-1886</small>
    <p>"The fog is rising..."</p>
  </div>
 
  <div class="quote">
    <h3>Oscar Wilde</h3>
    <small>1854-1900</small>
    <p>"And now, I am dying beyond my means."</p>
  </div>
 
  <div class="quote">
    <h3>Thomas Edison</h3>
    <small>1847-1931</small>
    <p>"It is very beautiful over there."</p>
  </div>
</div>

</ br>

Starter CSS

Once you have your HTML worked out, jump over to your CSS and enter something similar to the code below. Basically, I set an interesting background pattern and defined the container that will hold the quotes.

* {margin: 0; padding: 0;}
 
body {
  background: url('dark_geometric.png'); /*http://subtlepatterns.com/?p=1045*/
}
 
.container {
  height: 210px;
  width: 940px;
  margin: 0 auto;
  position: relative;
}

</ br>

Quote Styles

Next it’s time to style the quote divs. I used absolute positioning here so that all three quotes will occupy the same space. By default, they’ll create a vertical stack but we don’t want that at all. In our finished product, one quote will fade out, then another will fade in. Consequently, we’ll want them to be in the same spot.

I also set the opacity to zero so that all of the quotes will be hidden by default. Opacity is a quirky property that’s really a headache to work with. We’ll talk about this a little more later. The thing to note now is that, you won’t see anything with the opacity at zero so you’ll want to temporarily comment this part out while you style the quote section.

.quote {
  position: absolute;
  margin: 70px 30px;
  height: 80px;
  top: 0px;
 
  opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
}

</ br>

Quote Text Styles

Now that we have the general quote container styled, it’s time to grab each piece of text and style it individually. For this demo, we’ll make the text nice and big so set the h3 to 55px and the small to 18px, then use Helvetica for the font-family.

.quote h3 {
  font: 300 55px/1.2 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}
 
.quote small {
  font: 300 18px/1.0 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}

</ br>

Our task with the paragraph is much more complex. Not only do we need to style it into a box, we need to remove it from the stack and stick it to the right of the other content.

To make this happen, we need to do a number of things so I’ve divided my styles for this into three different steps (shown below).

.quote p {
  background: #fff;
  font: italic 25px/1.5 Helvetica, sans-serif;
  text-align: center;
 
  position: absolute;
  left: 450px; top: -15px;
  padding: 30px;
  width: 400px;
 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 
}

</ br>

For the first step, I handled the “icing” or standard visual stuff. I made the background white, set the font and aligned the text to the center. Next I handled the positioning and size of the actual box through the use of some padding and absolute positioning. I finished this all off with an optional border-radius, which rounds our corners off nicely.

Progress Check

If we check on our progress by making sure one quote is visible, we’re looking pretty good! However, our quote is sitting in a plain old box. We’re missing the little triangle that makes it look like a speech bubble.

Adding the Triangle

To add in that little triangle, we have to turn to the :after pseudo element. Basically, we create an empty element, position it to the left side, and apply some tricky border voodoo.

.quote p:after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -10px;
  border: solid transparent;
  border-right-color: #fff;
  border-width: 10px;
}

</ br>

As you can see, that gives us the effect that we’re going for, pretty neat eh?

Animate That Sucka

Now that we’ve got our visual styling and positioning figured out, it’s time to come up with a way to fade out one quote and pop in another and repeat this process on an infinite loop. We could and should use jQuery, but today we’re trying to figure it out with pure CSS so we’ll turn to keyframe animations.

I’m going to be brutally honest here, I do this type of stuff almost every day and it still took me forever to figure out the proper sequence to use to make the keyframes fade in and out at the right time. I fiddled and fiddled and kept having awkward overlaps and results that weren’t at all what I wanted.

I tell you this so you know that you’re not alone if you still find yourself hitting walls that are difficult to overcome. Eventually, I did get my slow brain to wrap around the concept though.

I’m a visual thinker so I made a crude chart to see how it all works. Basically we want to stack these animations so that only one quote is visible at any given time. To pull this off, we’ll put create a thirty second animation and split it into three parts. The first and last parts will have an opacity of zero and the second part will have an opacity of one.

As you can see, we’ll need to delay the second animation’s start time by ten seconds and the third animation’s start time by twenty seconds. This way, if you draw a vertical line at any point of the chart, no more than one quote is showing at the same time.

Now, when I implemented this, I didn’t like how long it took the quotes to fade in and out. I want a quick fade in, a long period of visibility and a quick fade out. To do this we simply need to add a couple of more keyframes. Here’s the sequence I came up with:

@-webkit-keyframes "quoteshift" {
 0% {
   opacity: 0;
 }
 2% {
   opacity: 1;
 }
 31% {
   opacity: 1;
 }
 33% {
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}

</ br>

We only need to set up the one sequence, but we apply it to the three separate quotes in three different ways. Basically, the only difference is the delay value, which makes the animation wait a few seconds before beginning.

.quote:nth-child(1) {
  -webkit-animation: quoteshift 30s 0s infinite linear;
}
 
.quote:nth-child(2) {
  -webkit-animation: quoteshift 30s 10s infinite linear;
}
 
.quote:nth-child(3) {
  -webkit-animation: quoteshift 30s 20s infinite linear;
}

</ br>

That’s all there is to it! When the page loads, the first quote will fade in, then fade out as the second quote comes in (and so on).

Browser Compatibility

At this point you’re probably screaming at your computer screen that I’m an idiot who only uses Webkit prefixes. In truth, I only did this to keep things understandable. Now that we’ve got it all figured out, we can use our good old friend Prefixr to expand it out. When we do this, here’s the giant chunk of code that gets spit out:

/*QUOTE ANIMATION*/
.quote:nth-child(1) {
  -webkit-animation: quoteshift 30s 0s infinite linear;
  -moz-animation: quoteshift 30s 0s infinite linear;
  -ms-animation: quoteshift 30s 0s infinite linear;
  -o-animation: quoteshift 30s 0s infinite linear;
  animation: quoteshift 30s 0s infinite linear;
}
 
.quote:nth-child(2) {
  -webkit-animation: quoteshift 30s 10s infinite linear;
  -moz-animation: quoteshift 30s 10s infinite linear;
  -ms-animation: quoteshift 30s 10s infinite linear;
  -o-animation: quoteshift 30s 10s infinite linear;
  animation: quoteshift 30s 10s infinite linear;
}
 
.quote:nth-child(3) {
  -webkit-animation: quoteshift 30s 20s infinite linear;
  -moz-animation: quoteshift 30s 20s infinite linear;
  -ms-animation: quoteshift 30s 20s infinite linear;
  -o-animation: quoteshift 30s 20s infinite linear;
  animation: quoteshift 30s 20s infinite linear;
}
 
/*KEYFRAMES*/
@keyframes "quoteshift" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 2% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 31% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 33% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 
}
 
@-moz-keyframes quoteshift {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-webkit-keyframes "quoteshift" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-ms-keyframes "quoteshift" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-o-keyframes "quoteshift" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}

</ br>

As I mentioned before, our use of the opacity property is a little suspect because opacity support is a mess. Fortunately, Prefixr takes the lead on this and tries to ensure that our code is primed to work on as many browsers as possible. Unfortunately, it does go a little overboard by inserting all of those filter properties where they aren’t necessarily needed, so some clean up might be a good idea.

Selectivizr

We used some advanced selectors in the tutorial, so while we’re on the topic of browser support, I should point out that you’ll need to add Selectivizr and jQuery to your project to make sure older browser understand these.

Keyframe Support

Here’s the kicker, we’ve gone through all of this to make sure that we’ve maxed out our browser support on selectors and opacity, but in the end IE is still going to refuse to play along because there’s no keyframe support until IE 10.

Obviously, JavaScript is going to be the answer here if you’re going to use this in the real world. You can either do the whole thing in JS or simply use it as a backup for browsers that don’t support keyframes.

Demo

Here’s the live demo. Be sure to wait a while when you launch it, remember that the entire animation takes thirty seconds!

Demo: Click here to launch

Conclusion

Keyframes have come a long way since the days when they were only supported by Webkit browsers. However, keep in mind that because of our old friend IE, they’re still more in the realm of “fun to play with” than something you should bank on for important projects.

Leave a comment below and let us know if you enjoyed this tutorial and how you would improve it!

Here at Design Shack, WordPress is our bread and butter, but in the world of blogging platforms, we have lots of love for Tumblr as well. It’s simple, gorgeous, and simply enjoyable to use.

Today we’re going to take a look at what makes a great Tumblr theme. With over 1,300 options in the Tumblr theme garden, it can be difficult to stand out. Why do some themes catch so much attention while others are ignored? Good design holds the answer.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

#1 Type Is Everything

If you want to create a popular theme, or even just an impressive theme for your own personal use, don’t let the type be an afterthought. With Tumblr themes, type is a huge part of the overall visual aesthetic. It defines the personality of the page and grabs the attention of very specific types of browsers.

As an example, consider how the headline in the theme shown above differs from that shown below. You have sleek and understated compared to bold and intense. Even if all other design features were constant, the type alone would drastically set these themes apart.

One excellent way to boost the appeal of your theme through type is to integrate various font services. For instance, the Candor theme shown below features Typekit and Google Web font integration. This gives users the ability to customize the type far beyond what would typically be available in a blog environment.

#2 Challenge the Status Quo

As a designer, it’s extremely important to keep your audience in mind and throughout this post I’ll continually discuss some of the quirks and intricacies of the unique user base that Tumblr enjoys.

One thing that draws people to Tumblr is that it’s a place where you can easily find something that’s very different than the traditional blog model. The popularity of themes like Organ shown below proves that this is the case.

This theme is completely out of realm of what you would expect in a blog page. There are plenty of others that follow this path as well. The theme below for instance, shows one post at a time and requires users to use their arrow keys to navigate.

The unique ideas go on and on. The theme below takes all of the posts and sticks them into a messy stack of Polaroids, which arrange into a neat grid when you hover over them.

The obvious implication here is that if you want to design a popular Tumblr theme, one great way to go about it is to create something unlike anything else that’s out there. These users really appreciate creativity and will download your theme like crazy if that’s what you’re offering.

#3 Customization Options Rock

Take a look at these three Tumblr theme previews and see if you notice a trend:

As I’m sure you saw, the customization options are a big deal. They’re touted above all else and the designers call out to you with impressive numbers: 60+ ways to customize, 80+ options, etc.

Once again, we see that the Tumblr user base is an expressive bunch. Not only do they want you to give them a great looking theme, they want to be able to make it their own. Earlier we saw an example of some built-in font customization options. Start here and then go much further. Provide color options, work in a personalized header or sidebar with information about the author, let the user rearrange the columns; the possibilities are endless.

As you customize, just remember that the theme should also be great with no effort. Make sure the personalization options are there for those who are interested, but don’t get in the way of those who aren’t.

#4 Go Responsive

To be honest, I didn’t expect the Tumblr theme market to be so current with modern web design practices. In my search I came across a number of responsive themes like the one shown below.

The fact that responsive Tumblr themes exist and are gaining in popularity shows that the Tumblr user base is either decently educated in web design or are at the very least, interested in making their blog as cross-platform as possible.

Your typical blog owners will probably visit their own page on their tablets, smartphones, laptops and desktops and they’ll definitely go for themes that look great on all of these devices. Responsive design is everywhere and a time is already approaching when it will become more of an expectation than a bonus feature. Are you ready for that day?

#5 Pay Attention To Trends

As we’ve already shown, Tumblr users seem pretty well aware of recent design trends. You can use this to your advantage to create themes that will be instantly popular. As an example, consider the popularity of Pinterest and how it has led to the wildfire like spread of masonry style layouts. Tumblr theme designers didn’t take long to jump on board this train and start dishing out themes that utilize a layout and aesthetic that appeals to Pinterest lovers.

If you’re looking to create a popular theme, look around the web and find some practices that are becoming very popular but haven’t necessarily caught on in the Tumblr market yet. What will the next layout fad be?

#6 Make a Beautiful Background

Minimal, white background themes flood the Tumblr theme market, many of which are super popular. It’s becomingly increasingly difficult to stand out in that niche though as all of the options start to look the same after a while.

One solution that proves extremely successful for some designers is to run to the opposite end of the spectrum and invest a lot of time into building a stunning background for their theme.

Tumblr themes tend to utilize a ton of whitespace so the background graphic can be a very important place to showcase creativity and a unique aesthetic.

Bottom line: don’t underestimate the power of a good background in earning you downloads. Even if you don’t have a graphic that can stretch all throughout a page, you can pour you effort into a header graphic with similar results.

#7 Come Up With a Visual Theme

One tactic that seems to work pretty well is to decide on a metaphor or theme for the template that you’re building (here “theme” refers to a specific aesthetic such as “desert” or “fantasy”). This is a great way to get your mind “into the zone” from a creative point of view and leads to some interesting results that users love.

For inspiration, look over the “Space Traveler” theme below. This gorgeous piece of design uses planetary orbital charts and compass rose graphics to create a positively charming aesthetic.

What visual idea can you run with that will make your theme both unique and enticing? Consider places that you’ve been, specific film or literature genres, foods; anything that you can turn into a specific look.

#8 Choose a Target Audience

No matter what you’re designing, it’s vitally important to keep your target audience in mind. This gets tricky when you’re designing general use templates though because your intended audience is pretty much anyone! Aside from the Tumblr user aspects that we’ve already been discussing, how can you further target your design to a specific set of users?

One of the best answers is simply to pick a group of people and intentionally target them. If I’m a photographer for instance, I might run a Google search for Tumblr themes for photographers. Now, tons of generic themes might work perfectly for what I need, but what I’ll find in my search is likely those themes that explicitly state that they’re for photographers, like the one below.

Spend some time looking through Tumblr and finding a market that isn’t well represented, then build a theme for that group of people. Think about specific professions like realtors or app developers and ask yourself what types of features they would gravitate toward.

#9 Icons Icons Icons

Thus far we’ve talked about how both type and background graphics play a huge role in the personality of your theme, another area of the design that fits this description is icons. Tumblr uses icons to differentiate between post types, which has led to a lot of creativity in this area on the part of designers.

Icons can really help define the aesthetic that you’re going for and many designers use them generously throughout their designs, not simply in post type indicators.

Whether you’re using a prebuilt icon library or crafting one yourself, remember that this is a key area where you can make your work stand out from the competition. Take the time to get it right and you’ll be glad you did.

#10 The Download is in The Details

As a Tumblr user myself, the themes that really impress me are those from designers that really gave a lot of attention to the finer points of the design. Subtle textures and patterns, shadows in all the right places, barely noticeable edge highlights, these little touches go a long way toward making your design seem professional and attractive.

No matter what aesthetic you’re going for, be it vintage, skeuomorphic, minimal or wacky, don’t rush through it just to have something to upload. Slow down and really polish off the minor details that you wouldn’t think anyone one notice. Trust me, they will.

What Are Your Tumblr Design Tips?

After reading through this article, you should have a lot of insight into what goes into the creation of a successful and attractive Tumblr theme. Following these ten tips will help you create your own themes that will race to the top of the download charts.

Now that you’ve read what I think, I want to hear your input. What attracts you to a Tumblr theme? Is it any of the things that I listed here or something else entirely. I want to know!

Inspiration comes from the perception that the creator of imaginary friend must have a high level of intelligence and creativity. The see-saw, skewed to the left, the other part rise up with a person on top of it.

This design was featured on the Wednesday 16th of May 2012. It falls under the category of Logo, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

An example section of a registration form with gorgeous subtle details. It’s split into two columns — a three step overview of the process on the left, and form fields, and upload box, and progress bar on the right.

This design was featured on the Wednesday 16th of May 2012. It falls under the category of Site Navigation, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

Doover is wonderful, professional and easy to use template with lots of options and configurations. This theme has been created for people who want to save their own time for create nice and great looking page.

This design was featured on the Wednesday 16th of May 2012. It falls under the category of Corporate, and has a layout style of Grid.

If you'd like, you can visit this site, or view all our other featured designs.

This design was featured on the Tuesday 15th of May 2012. It falls under the category of Element, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

A gorgeous portfolio site with various different layout types. Plenty of variety as you scroll down, with subtle textures that add depth to the design.

This design was featured on the Tuesday 15th of May 2012. It falls under the category of Portfolio, and has a layout style of Two Column.

If you'd like, you can visit this site, or view all our other featured designs.