Building a Responsive Resume Part 2: The Skeleton


  1. The Case of the Responsive Resume
  2. The Skeleton
  3. Interactivity and the PDF

So, where to start? Well, an easy way to start is with a responsive template. Personally, I’m a big fan of the Skeleton template. It’s got enough enough to get us started, and not so much as to bog us down. This is a good chance to think about semantic markup.

Why not download the code before starting so you can follow along at home.

Of course we’ll start off with a header or maybe an hgroup with your name and job title and all that stuff, but let’s look at the basic organization for a the page then at a single work experience entry:

OK, the big thing here, that it seems a lot of people have trouble with, is the article element vs the section element. Basically, the article element should contain a single self-contained item (usually with a header and footer), whereas sections should contain a group of logically or thematically similar items (usually with a header). In those terms, it’s clear that the “work” section should be a section as it is a group so many logically similar items.

Each of those items is self-contained, so it is wrapped in an article tag. We start the article with a header group, and then the dates, a paragraph or two, and then a footer. The footer is a list of skills, so we’ll represent it as such and then we’ll style it later to look good. This is important for a few reasons involving the interactivity of the resume. Speaking of styling, here’s what I did to make the skills look beautiful:

I used a lot of of :before and :afters to get the look I was going for, and a heavy use of the new nth-last-child selectors. The same goes for the dates:

In terms of styling and coloring, I followed quite closely from the style used in the original A List Apart article, which is clean, clear, and easy to edit if you want. Oh, and don’t forget the print stylesheet, remember that we’re trying to replace PDFs and Word docs, here. Resumes are prime candidates for printing, so they’d better look nice when it’s done. I’ve just overridden the basics at the bottom of the CV stylesheet with an @media print query.

One key point, is that I used David Walsh’s trick for displaying URLs in the print stylesheet so you needn’t worry about typing them twice. Make sure you don’t display a URL twice, though, if the link text is already the URL.

Next writing we’ll look at actually adding some dynamism to our online CV so it’s not just a prettied up, accessible PDF.

This entry was posted in Tutorials, Web Development and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">