The new Facebook Interface

July 23rd, 2008

Facebook has always impressed me with its user interface. The adjective that I would use to best describe its interface is “restrained”. Workflows are always simple, colors are muted, icons are simple in presentation, and you’re never far from what you need to do. It’s quite a compliment to think of its interface as “restrained” when it’s dishing out data to the scope of what Facebook is dishing out.

Facebook recently announced an interface redesign, and you can see the fruits of their labor here : http://www.new.facebook.com

It’s really a workflow redesign above all things, and a pretty broad one at that. Just like any redesign, I’m sure there will be publish backlash and outcry, but overall I’d say it’s a nice improvement.

To online interface designers, Facebook’s interface carries a lot of weight. The sheer number of users they have combined with their primary market (which is essentially a vocal tech-savvy younger crowd) provides a good insight into what works and what doesn’t. When they change something their users don’t like, everyone knows it.

They lead the charge in social interaction, and you can bet that any tricks they have up their sleeve will propagate quickly among other apps of its kind.

---

Overall

The application overall feels less “tight”, and that’s mostly due to the lack of containers and hard lines connecting to their containers (nearly all containers have a good amount of padding). The width has changed from 799px to 940px. Since the side navigation has been completely removed, this provides an enormous space improvement for content (646px vs. the full 940px).

Applications have also taken something of a back seat. Profiles no longer advertise their apps with the icons, and application information has been banished into the Boxes tab. It also appears that applications have the ability to add tabs to your profile page, but I haven’t seen any instances of that so far.

Toolbar / Navigation

The focus here (and with most of the redesign) seems to be on your content, and less on the application itself. The persistent left navigation is gone, and the toolbar is as minimal as possible. Account settings, privacy, and log out have been buried under the lock icon.

The burying of “log out” is definitely a bold step, and many UI designers would definitely cry foul. I think it’s great, though… almost akin to “start -> shut down” or “apple -> shut down”, and with a web app like Facebook, I don’t think people log out all that often. I could be wrong, though.

The home icon mouseover on “facebook” matching the home icon next to home is a nice touch of visual affirmation.

It peeves me a little that the buttons across the top are inconsistent in their behavior, though. The “Applications” button triggers a drop down, while the rest jump to a page.

Speaking of drop downs, it seems they have a server side process to generate this crazy single tone invert of an image to create a “hover” state for it. Seems strange to do for a result that doesn’t really add anything to the experience (indeed not changing it would have looked better), but there you go.

Home

Lots of white space here. It would be nice to see some visual separation in the commonly used actions up top, or even just remove that section altogether. I know who I am, I know my avatar, update status is already on the right, and so are links to bookmarks such as photos, videos, links, and notes. Really this is the only new addition to the page, and I think it’s a bit useless.

The sidebar is wider, and now includes a sponsor, and is now rounded… which is strange. It remains the only rounded element I can find in Facebook and I think it’s rather ugly.

My Profile

BAM. Here’s where most of the change is, and where the most time planning workflows was spent, I think. Welcome to the new facebook.

Actions & Tabs

Instead of trying to fit everything on one page, it’s now split up into tabs, giving your photos and boxes (custom application inserts) equal weight to the likes of your information. This allows each bit of your profile some breathing room, personal information in particular.

Since the wall is the default tab (more on the new wall in a bit), it’s reinforcing the notion that what people are doing is more interesting than who people are. Your personal info is buried under a tab. Facebook is capitalizing on the fact that they pull in photos (who needs flickr?), status updates (who needs twitter?), and friending / connections and present a nearly perfect interface for displaying this information.

Again, the common actions are up top, but this time it’s more fleshed out, providing the ability to update status, write a note, add photos, add video, etc without leaving the page. Strange the “Home” page doesn’t have this.

I love the concept of being able to quickly get data into facebook with this one little toolbar. In the old view, it’s difficult to figure out exactly how to, for instance, get photos into facebook. Now it’s super easy to tell how to get information into the app, and I’m quite partial to the ability to take a picture via webcam. The ajax interaction here is superb.

The New Wall

I love the new wall. Essentially it’s just the regular wall with the mini-feed thrown into it, but it’s amazing how much that helps. What this results in is a decidedly “me-centric” view that provides an enormous amount of context to what’s going on between you and your friends.

For instance, let’s take this exchange:

The context is obvious. I know exactly what Kris was talking about here. The filtering out of noise (stuff that I don’t care about, ie, the friend feed) and adding in signal (stuff I do care about, ie, anything that has to do with me) makes this timeline almost feel like it’s telling a story. Fantastic.

However, let’s take a look at how this would be presented in the old Facebook layout:

The information is in two different places, and context is ruined.

To be honest, I never really cared for facebook due to the sheer amount of information given to me (such as the feed on the home page). I don’t like spending time sorting out what is and isn’t important to me… I’d rather be presenting that which pertains to me directly, then given the option to find out more information if I care to. The My Profile page does exactly that; plus, I can view other peoples’ profile pages, and consistency in the way the information is displayed allows me to know what to expect. Fantastic.

The Look

Comparing wall posts, the new version is decidedly better. There are fewer calls to action, less meta, the dates are grouped and the time is grey (faded into the background). Gone are the hard lined borders, instead opting for a greyish-blue background hue that I personally find noisy.

The avatars are enough to set off wall posts, but if they needed to distinguish them more (based on feedback or whatever) there are better ways. Perhaps it just seems noisy to me because I don’t do much in facebook, so incoming wall posts is a majority of what I have; but good design should scale

Editing the size of a status message is kind of a strange option– I think this feature isn’t fully fleshed out– but I do like that drop out animation.

Visually, the actions up top lack cohesion. They act like tabs, but don’t look like tabs (there’s no connection to the container they control), and if you click “Add Photos” you’ll see yet another tab style, this time it’s centered instead of left aligned. The effect is cute but super noisy, and in an interface that is almost completely devoid of gradients, this stands out as tacky.

Summary

Facebook has always been a relatively simple application, which is a supreme compliment to the interface designers, because they’re working with tons of interactions with tons of information. This latest interface seems to bust open all of the frames and containers, and put more focus on the data that is most important to you.

They’ve done some really great things: They’ve kept the single color hue scheme; kept the simple icons; made it more apparent how to get information into the app; dramatically increased the usefulness of your wall; buried your personal information a bit; and opened up the layout to use the full 940px.

However, the app feels a little floaty without the Facebook containers we’ve all come to know and love, and sometimes it feels as though everything is screaming for your attention. This is a common falling down point for single-page apps chock-full-o-ajax (like the new My Profile page is). Hopefully they can find a way to give the My Profile page a bit more focus in a second revision.

They still have a few interaction dead ends. I believe that the following rule should always be followed: If I, as a user, can view content and it’s possible for me to contribute, then it needs to be obvious how I can contribute. I don’t want to have to navigate somewhere else to find my actions. The context is already developed, so let me take it a step further by contributing data.

Take the following page:

From here I see pictures of me… fantastic! I’d like to contribute by adding pictures of me to this page! Too bad. There’s no easy way to do this.

Same goes with this page :

What is this? Applications? How do I get more stuff in this page?

In addition, once you remove that box, the entire tab goes away. How do you get it back? Install an application? But I already have the application installed, all I did was remove the box. Now what? It’d be much better to keep it there with a description of what the tab is, and how to add things to it. My favorite example being Cultured Code’s Things for OS X:

I’m definitely looking forward to the launch of this workflow redesign; it’ll be interesting to see how their multitude of users react. It will be more interesting to see, then, how their designers react to the feedback.

The “me-centric” approach is something I see taking off in the next year or so. So many companies have been pushing social interaction, but things can get a little noisy with the sheer amount of data flying around.

Putting a “what does this have to do with me?” filter on all of that data is something I think is sorely lacking in many social interaction-based applications. I hope to see Facebook drop the Home page completely in lieu of the “me-centric” Profile page, and turn the Home page into a “what’s the buzz?” type of page.

So what do you think? Is it a decent redesign, or were you hoping for something more? Does it feel quite finished to you? Do you know any good examples of “me-centric” social interaction sites?

I have a Flickr account.

July 15th, 2008

So I found this cool new photo sharing service called “Flicker”, except without the “e” so it’s “Flickr”. I suppose “Flicker” was taken already. If it stores photos, shouldn’t it be called “Shuttr” or something, instead?

Anyway, the URL to my Flickr account is http://www.flickr.com/photos/28643143@N07/. I guess Flickr is too cool to give me flickr.com/buckwilson.

Anyhow, subscribe to it, bookmark it, do whatever you kids are doing these days to keep updated on it.

I’m trying to be more “transparent” with what I do with my time. Tweeting, blogging, Flicking (Flickring? Flickering?), if it’s social, I’ll try it. I’m just a sucker that way.

To be honest I’m just trying to increase my visibility among those who might care. I think I’m a decent enough designer, but the only way I’ll grow is if I connect with people who I view as “holy cow way better than me”. So anyway, if you’re a superstar designer person and you’re reading this, will you be my friend? Heck, if you’re a mediocre design person, you can be my friend, too! We can hang out and watch cartoons and eat Cap’n Crunch.

Oh, and Flickr called me a “Batch”. I thought that was pretty rude.

I’m pretty sure they meant to put “SAVE THIS, BATCH!”.

Jerks.

The Winning jQuery UI Theme

July 11th, 2008

Howdy everyone! Sorry it’s been so long since my last post. I plan to keep regular maintenance on the blog, and I expect you guys to hold me to it.

So the jQuery theme poll was awhile ago, and I still haven’t cranked out the theme, unfortunately. The CSS guy and I kind of fell off of talking to one another; and, while it’s mostly done, it needs a little bit of polish before I release it. It’s coming, though!

In the meantime, I am posting the Photoshop document for you to play with. It is complete, and labelled. As with all of my posted .psd files, feel free to do whatever you like with it. It’d be nice if you linked back here, but I’m not going to require it (mostly because I can’t really enforce it).

Also, I’ll be doing some maintenance on the blog in the next few days… usability issues mostly (I’m still learning Wordpress). Hopefully I’ll get the blog to a point where I won’t have to worry about the site so much, and I can focus on the content. Wish me luck!

jQuery UI Theme Options

June 2nd, 2008

A week or so ago I offered to help with the jQuery project. I’m such a big fan that I felt compelled to give back. While I consider myself decent at JavaScript I’m not even remotely close to being good enough to contribute code to the project. However, I knew that jQuery was going through a site / branding redesign and I wanted to know if I could help with that.

Unfortunately the lead designer heading up that project never got back to me, but the jQuery UI team did catch my offer for help and let me know that I could contribute in the way of a jQuery UI theme! Since then I’ve been spinning my wheels trying to come up with some decent, portable options. I’ll take a vote and see which one is the most popular, and then hand it off to another fellow (another guy anxious to help with the jQuery project) for some CSS magic.

So without further hullabaloo, here are the three mock ups I have so far. I’d love to hear everyone’s feedback!

jQuery UI Theme 1

(click image for larger version)

This theme takes the concept of the “floating tabs” from the current Flora theme. The color scheme is muted, the gradients are soft, and it has a nice polished feel to it.

jQuery UI Theme 2

(click image for larger version)

This theme is a based on the design of the jQuery UI home page. Black, orange and blue, with a nice container for the tabs. This is the most crisp of the three mock ups, but also the least portable.

jQuery UI Theme 3

(click image for larger version)

This theme is the brightest and perhaps the most portable. Someone in the jQuery UI group mentioned they liked the look of Meebo, so I used their interface as an inspiration point for this. I used a similar bright blue / orange combo, but I toned down the gradients, and ditched the rounded corners in favor of something a bit more crisp.

Oops, I forgot…

So I forgot to make the accordion style for each of these. However, I will wait until we green light a certain concept and just develop the accordion as well as all mouseovers for that particular theme.

Thanks!

Thanks to the jQuery UI team for this opportunity, and thanks to Seth for the CSS help. Again, I would love feedback on all accounts! Be sure and cast your vote as well!

Hiatus Almost Over…

May 30th, 2008

Howdy everyone!

I just wanted to check in and let everyone know that I have not abandoned this blog in the least. I have left my day job, sold my company moved across the country, and am in the process of settling into my typical routine.

In addition, I am working with the jQuery UI team to create some more themes for that project. I’m thrilled to be able to contribute to a library that has renewed my interest and passion for client-side scripting and has allowed me to rapidly prototype as well as create some pretty hefty apps with ease.

If you are a designer or developer, I highly recommend checking jQuery out, even if you’re not much into JavaScript. Once it clicks, you’ll be able to do some pretty tremendous stuff quickly and cleanly.

For interested parties, I, along with my fantastic wife, will start up a personal blog as well and we will be blogging to keep in touch with friends and family back in Texas (and all over, really). In about a week I will be posting regularly again (hopefully about twice a week) and get this blog going! I have some articles queued up but not complete, including more JavaScript tutorials, design tutorials, design inspiration, icon creation, and UI tidbits!

Thanks to everyone for their fantastic support!

Confirm Password, Idiot.

April 3rd, 2008

One common trend in interface design (both web and otherwise) is to assume the user is a complete and utter fool, and our job as interface designers is to protect that user from their own stupidity. Interfaces designed around this notion become large and cumbersome, with everything screaming for the user’s attention; and put up so many roadblocks that the user gets frustrated and flat out gives up.

Software is funny that way, really. No one designs a hammer to be Smash-Your-Finger-Proof, and in doing so, then that would most likely detract from the purpose of a hammer : namely, putting gigantic holes into sheet rock (at least that’s the result I get, sadly). Imagine if your drill simply would not drill unless you were holding it perfectly level. You’d keep trying, but the drill would let out a *BZZT* and flash red, with a nice message somewhere letting you know how much you suck at drilling.

Any user-driven web business can tell you how important it is to get the conversion from “browsing your site” to “using your site”, and it typically begins with a sign up form. Whether it’s an eCommerce site where users directly impact revenue, or a social site where users generate the content, the barriers to entry to create a “user” should be a small as possible. Why is it, then, in all of the money spent to track and attempt to reduce these barriers, that I’m still being “protected” by sign up forms, asking me to confirm my password, in case I screwed up typing it? You’d think this is the easiest barrier to tear down.

Hey we think maybe you’re awful at typing. Could you try typing your password in again, just in case?

It’s not as though it is some irrecoverable problem if the user were to mis-type their password. At worst, they wouldn’t figure it out until they attempted to log into their account the next time they use your site, right? (You should be logging them in automatically when they sign up) Well, the software has their emaill address, so we can easily email them a secure link to reset their password if things were to go awry.

I would seriously like to see the logging stats larger companies have on the percentage of users who receive the “Aha! Just as we thought! Your passwords do not match! You’d better thank us now for putting in the confirm password input!” error. Out of all of the web forms I’ve filled out, I’m pretty sure I have only gotten it myself once or twice, and it was probably because I mis-typed my password in the confirm password box.

So I’m making it a point not to require someone to confirm their password when signing up. If it’s good enough for Facebook, who gets nearly 1 million sign ups per week, it’s good enough for me.

“What’s your email?” “What’s your password?” should be enough information to get someone up and running, then you can mine for more data as it’s pertinent to the experience. What a wonderful world that would be.

Creating a Nice Slider With jQuery UI

March 29th, 2008

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

One drawback of a slider is the user not knowing what he’s selected as there’s no discrete output. If you are sliding to scale something, you can eyeball something, but wouldn’t it be nice if the slider provided some feedback to the user (”50%”) as the user was fiddling with it? I’m going to show you how to do just that with the jQuery UI library.

Check out the demo here

The necessary dependencies :

• jQuery Slider & UI Base
• jQuery

The code I used is as follows :

HTML

<div id='container'>
	<div class="slider_container">
		<div class='small_label'></div>
		<div class='slider_bar'>
			<div id="slider_callout"></div>
			<div id='slider1_handle' class='slider_handle'></div>
		</div>
		<div class='large_label'></div>
	</div>
</div>

CSS

body { background: #284a6e; }
#container { height: 100px; border: 1px solid #284a6e;}
.slider_container { position: relative; margin-top: 50px; height: 40px;}
.small_label { background: url(minus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_bar { background: url(bar.gif) no-repeat; height: 19px; width: 260px;  float: left; margin: 0px 5px; position: relative;}
.large_label { background: url(plus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_handle { background: url(selector.png) no-repeat; height: 19px; width: 20px; overflow: hidden; position: absolute; top: 1px;}
#slider_callout { background: url(callout.gif) no-repeat; height: 45px; width: 38px; overflow: hidden; position: absolute; top: -50px; margin-left:-10px;  padding: 8px 0px 0px 0px; font-family: "Myriad Pro"; color: #284a6e; font-weight: bold; text-align: center;}

Update: A couple commenters noticed a little outline gremlin in Firefox 3 when using the slider. Just add * :focus { outline:none } to get rid of it. I’m not sure which element the outline is on, so applying it to * can’t hurt

JavaScript

After I recorded the video, it dawned on me that there’s a way to do this that is a bit simpler: by using the ui object passed in by slider, and grabbing the “left” css property of the handle. That way, the callout matches the css handle at all times, with no calculations needed; and you can reserve minValue and maxValue to return values that are useful for your web application.

Thanks to Andrew and John in the comments, I have fixed some bugs with the code. Now you can click on the bar itself and the callout will fire correctly. For this I utilized the “stop” event, checked if the callout was already visible, and displayed it if not.

The code looks like this :

$(function() {
	$('#slider_callout').hide();
	var calloutVisible = false;
	$('.slider_bar').slider({
		handle: '.slider_handle',
		minValue: 0,
		maxValue: 25,
		start: function(e, ui) {
			$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
		},
		stop: function(e, ui) {
			if (calloutVisible == false) {
				$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
				$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
			}
			$('#slider_callout').fadeOut('fast', function() { calloutVisible = false; });
		},
		slide: function(e, ui) {
			$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
		}
	});
});

For reference purposes, here is the code I used in the video :

$(function() {
	$('#slider_callout').hide();
	$('.slider_bar').slider({
		handle: '.slider_handle',
		minValue: 0,
		maxValue: 240,
		start: function(e, ui) {
			$('#slider_callout').fadeIn('fast');
		},
		stop: function(e, ui) {
			$('#slider_callout').fadeOut('fast');
		},
		slide: function(e, ui) {
			$('#slider_callout').css('left', ui.value).text(Math.round(ui.value * (100/240)));
		}
	});
});

Design Inspiration : MSNBC’s Video Page

March 26th, 2008

It seems pretty often that I come across something that inspires the designer in me, so I’m going to make it a point to post them here as often as I can. This way I can share my thoughts with you, my wonderful readers, and perhaps interact with you regarding our thoughts.

Without further ado, my first bit of inspiration is in the form of…

The MSNBC Flash Video Player

Visit the MSNBC Flash Video Player

When I first saw this page in motion, I was pretty impressed by the overall “realism” effect that they were going for. The page has wonderful depth and texture, and it’s super easy to navigate– enticing the user to get lost in its well-structured video hierarchy on the left. However, the thing that struck me most was its use of gradients to create something almost tangible, and the almost complete absence of rounded corners on containers.

Take the navigation bar on the left, for instance. The soft gradients and transparent bar give a nice subtle touch on a mostly invisible design element (it’s only present mainly due to its blurring of the colors behind it). The division is simply a one pixel border and a slight glow at the bottom. At the top a soft gradient represents a nice glare from the top left corner.

The elements in the player have plenty of depth, and there are some great subtle (word of the day) interface elements that give you cues. Increasing the volume not only increases the green slider, but brightens the tones of the green at the same time. Buttons are uniform where they should be, and different where they should be.

However, there’s something to these buttons that adds the realism, and it’s more than gradients, shadows and bevels. If you take a look at the speaker button, it’s non-uniformly textured at the top and the left. It’s difficult to see, but it’s there. This makes the colors not so clean and crisp, and softens and texturizes the button.

The page itself is dark. It’s black. It should be, to display video content well. However, you can’t argue that the page is depressing or dark-feeling, and that’s due to the vivid use of color. The designers took the company’s logo and created an aurora effect across the back that acts almost like a curtain for a reflective stage (where the video is “standing”). All of these metaphors are powerful in building interfaces, especially graphically intensive ones. (see Time Machine and Delicious Library)

The final thing that really stuck out to me was the use of columns that are essentially one deep. You click on a category, and all of the top videos in that category are listed. The designers could have thought “hey we should really provide a way to browse *all* videos here”, but they didn’t. They decided what was most important (recent or top videos) and restricted the result set to that, allowing the navigation to be quick and simple. No intermediate pages, no daunting paginated lists, no sub-tags or categories, just content.

The content is well defined, too: Playlists, Categories, Shows. Examples of playlists are provided to show you the feature. You can add a video to a playlist with just the “plus” button, and you don’t have to sign up for anything.

Visually, the site is pleasing, realistic, and modern. From an interface standpoint, it has taken something typically complicated (see: Google Video) and has made it simple and fun.

Compressing / Minimizing JavaScript with Automator

March 19th, 2008

Compressing your JavaScript is a good idea when moving your JavaScript code to your production server. I won’t go into why (because it makes it smaller, duh) so I’ll just assume we’re both cool that it needs to be done.

My compressor of choice is Yahoo’s YUI Compressor, and it comes in a nice Java .jar that you can download and use ’til your heart’s content. However, because I’m lazy, opening the terminal, typing in the command, and feeding it files is just too difficult for me, so I (with the help of a friend of mine) wrote an Automator Finder plugin so you can just right click a .js file and click “minimize” and it creates a new one with .min.js as its extension.

Now there is no bug checking or error returning in this plugin. It’s about as dumb as it can possibly be. When you download it, be sure and point the .jar to the correct YUI .jar file in the perl script or it won’t work. If you have any suggestions for the plugin, be sure and let me know (that is, when I get my comment system working)!

The perl script is just this :

      #!/usr/bin/perl -w
      $CCMD =
      "java -jar ~/Documents/Code/yuicompressor-2.3.5/build/yuicompressor-2.3.5.jar";
      $CARGS = "-o";

      $FN = shift;
      $_ = $FN;
      s/\.js/\.min\.js/g;
      s/ /\ /g;
      $FN2 = $_;

      `$CCMD $FN $CARGS $FN2`

Without further ado, the download is here: Automator YUI Plugin

Image overlapping content in a rounded corner layout

March 17th, 2008

Every now and again, I run into a complex rounded corner layout that requires a bit of finagling with overflows, z-indices and positions. The most common case is that the image I have used for the top corner is overlapping the content within the content div.

The problem

To see what I mean, check out the demo I put together for illustration purposes. In everything but Firefox 3 beta, the top image overlaps the content within the <div class='content'> div. This behavior is pictured to the right as well.

Now your first thought is that this is a z-index issue, and you wouldn’t be far off (we’ll get to that in a moment), but the cause of the problem is the overflow: hidden attached to the .cap class. If you ditch this (we’ll use the utter magic of Firebug to accomplish this)… voilá, your content is visible. View the previous demo with overflow: hidden removed.

Is this a bug?

I’m honestly not sure what’s going on here, from a rendering standpoint. It seems like the negative margin on the .cap div is throwing off the renderer, disallowing content from being shown within the box model; that is, it’s a rendering bug. Maybe it’s a commonly known bug? I honestly have no idea; as much development work as I do, you’d think I’d keep up with the trends and bugs with their catchy names. If you know of this being a common bug, please let me know! That is… when I get the comment system up and running.

The thing that makes me wonder if this is a bug is the fact that it happens in all browsers (even the WebKit beta, which seems to be at the forefront of CSS compliance). However, it seems to render just fine in the Firefox 3 beta… so who knows? Not me.

The Fix

Now, on to a fix:

The problem for me, is turning off overflow: hidden can sometimes create its own problems. I’m thinking specifically of IE not adhering to the height: property if the height is smaller than 1em (even if there is no text in the div). In order to fix this, you must use overflow: hidden. It’s good practice if you want a div to maintain a static height, anyway. So how do we fix this and keep overflow: hidden intact?

Z-index! As far as crazy css properties go, this one is pretty reliable across all browsers. The only thing you have to remember is to make sure you put a position: attribute on the div. Z-index is completely unreliable if there is no position: attribute of the div it applies to. In most cases, position: relative; will do just fine without screwing up your layout.

In this case, I applied a z-index of 10 (anything higher than 1 is not necessary, but going overboard is fun) to the .content div, which effectively puts it on “top” of the .cap div. See this fix in action.

I know it’s not a terribly common bug, and it’s not a terribly difficult fix to figure out. However, it bugs me every so often, so I thought I’d share what I’ve learned!