One-page resume in CSS3

Recently, I came across a really nicely done one-page resume on Scribd, and wanted to try to recreate it using the latest web technologies (no Adobe Acrobat, Microsoft Word, or OpenOffice allowed). Turns out with a few sprinklings of CSS3, it's pretty straightforward. Let's peel back the covers and take a look.

(If you want to skip straight to the result, you can click here)

Planning

First, let's take a look at what features our exemplar uses that we want to try to emulate:

• grid layout (header plus 2-column flow)
• pseudo-tabular formatting (Experience and Education sections)
• 2-column bulleted list (Software section)
• custom typeface on headings

Grid Layout

This one was actually pretty easy, and didn't require any sophisticated CSS hackery at all:

/* set up a simple grid layout */
.resume { width: 860px; margin: 0 auto; }
.leftCol { width: 480px; }
.leftCol, .rightCol { display: inline; float: left; padding-right: 20px; }
/* end grid layout (see? I said it was simple) */

So we just set our .resume class to a specific width, then use the "margin: 0 auto" bit to center it horizontally on the page. We fix the width of the left column, set both left and right columns to float, and include 20px of padding to push them slightly apart. Simple, effective, and cross-browser compatible!

Tables Without <table>

If asked, most modern web developers will tell you that the practice of using <table> tags to do page layout belongs back in the "dark ages" of the Internet, but there are some things that are really hard to do without it. Knowing this, the W3C gave us a really nice solution... the CSS Table Model. In a nutshell, it gives you three new values for the CSS display property: table, table-row, and table-cell. Used together, they can turn hackish markup like this:

  
2008—present
  

    Senior Computer Scientist

    White Oak Technologies, Inc., Silver Spring MD
  

... into this, slightly-more-verbose-but-less-hackish markup:

  2008—present
  
    Senior Computer Scientist

    White Oak Technologies, Inc., Silver Spring MD
  

Even better, we can employ some CSS class names and get basic semantics:

/* new table-display style: works in pretty much all modern browsers except IE before v8 */
.expJob, { display: table-row; }
.expDate, .expDetail { display: table-cell; }
.expDate { width: 7em; }
.jobTitle { font-weight: bold; display: block; }
.jobLoc { font-style: italic; }

  2008—present
  
    Senior Computer Scientist
    White Oak Technologies, Inc., Silver Spring MD
  

So is this a bleeding-edge, CSS3 feature? Not actually, no. It's from CSS 2, and since Internet Explorer 8 was released, it's been supported in all current-generation browsers. As is often the case with these types of things, only IE6 & 7 are the spoilsports. The thing is, though? I'm not inclined to care that much if my site looks a little different in some older versions of IE. The default, unstyled behavior isn't bad, it's still readable, just not quite as visually appealing:

Old and Busted:

New Hotness:

This is an example of Graceful Degradation (albeit not a very impressive one), which is a pretty good idea to use when designing sites with features that aren't ubiquitous across all browsers.

Liquid Columns

So after those last two, not-all-that-new CSS techniques, here's something that is a new CSS3 feature. So-called "liquid" layout basically just means that you write the content (say, a magazine article), then make it flow into the layout you want to give it later on. Historically this has been somewhat problematic in the Web world, but that's changing. One of the agents of that change comes in the form of the new CSS Multi-column Layout Module. In this instance, we want the bulletted list under the "Software" heading to flow across two columns, making better use of the space available in the resume's right column. This can be easily accomplished with two CSS properties, column-count and column-gap (currently, these are only in the latest releases of Firefox and Webkit-enabled browsers like Chrome and Safari, so we'll include the vendor-prefixed versions):

/* new super-cool CSS3 multi-column layout;
  only in Mozilla/Webkit for now,
  but it degrades to a regular list just fine */
ul.software {
  column-count: 2; column-gap: 2em;
  -moz-column-count: 2; -moz-column-gap: 2em;
  -webkit-column-count: 2; -webkit-column-gap: 2em;
}

  
software
  
packages
  
I
  
grok

Most browsers will render this as:

Non-liquid (single column):

Current versions of Firefox and Webkit, which both support multi-column layout, will instead do this:

Liquid! (two columns):

This is another case where the default behavior looks fine, and the new CSS features just make it a little bit nicer. The cool kids call this Progressive Enhancement, which is really just Graceful Degradation seen from the other side of the river. The only difference in these two techniques is whether you design the enhanced behavior first and then patch the fallback rendering (graceful degradation), or design the default case first and then enhance it where possible (progressive enhancement).

Fancy Font

Finally, let's take a look at our typefaces. In an inversion of their common perception as Johnny-come-latelies, Internet Explorer has had the ability to include custom fonts in a web page for quite a few versions. This is a feature that the other browsers haven't fully embraced until fairly recently, and even now, every browser's implementation of the font-face at-rule is just different enough to cause anyone headaches. There's been quite a bit of traction in the past year, though, and I recently discovered a great site that has taken the collective findings of great web font pioneers like Paul Irish and others to make custom web fontography almost (not quite, but almost) a no-brainer: fontsquirrel.com.

Browsing FontSquirrel's list of available free font kits, I found ChunkFive, which looks like a pretty good match for the font in the resume we're trying to match. FontSquirrel provides hundreds of @font-face kits for free download, so we just grab the kit for ChunkFive, extract it to a folder on our web server, and link to it with a single line in our header:

<link rel="stylesheet" href="/fonts/chunkfive/stylesheet.css" type="text/css" charset="utf-8"/>

With the cross-browser details abstracted away for us by this stylesheet, all it takes to use the new font is an ordinary CSS font property:

.header h1 { font: 32pt/24pt 'ChunkFiveRegular', Arial, sans-serif; }
h2 { font: 1.7em/1em 'ChunkFiveRegular', Arial, sans-serif; }
h3 { font: 1.2em/1em 'ChunkFiveRegular', Arial, sans-serif; }

For any browser that doesn't support @font-face yet (notably including most mobile browsers), the ChunkFive font kit suggests providing fallbacks to Arial and sans-serif, so we do just that. Just like that, we take the look of our resume from blah:

... to Bam:

Et Voila!

Having done all of the above, here's my final product. (If you don't have a browser that supports off of these features, you can see a PDF version here). If I had more time and creativity, I would have made a phony resume for Peter Parker instead, but you get the idea.

Once I'd gotten this far, I realized several things that would make it even better:

• It would've been pretty cool (although ultimately kind of pointless) to create the header logo on the fly in Canvas
• This format doesn't include the number of years of experience on skills / technologies / software
• It also doesn't have "accomplishment" bullets on experience / education sections.
• There should be a way to get a full list of jobs instead of just the few selected ones I chose here.
• Maybe add a Publications section (including this blog, of course)...?
• Use more semantic markup, in particular Microformats.

Microformats will give your data some computer-processable meaning, which sites like Google are starting to use to good effect. But we'll save that for another day. The rest of these quibbles are just stylistic choices, really. A one-page resume isn't designed to carry every single piece of information a potential employer or client needs to make a decision, it's to grab their attention. I think this does that job pretty well.