A Case for Responsive Résumés
Issue № 353

A Case for Responsive Résumés

by
Published in CSS, HTML, Layout & Grids, Mobile/Multidevice, Responsive Design

Finding a job is easy. As a job seeker, having your résumé in .pdf format is all you’ll ever need. Creating a clean résumé in HTML5/CSS3 which scales well to different viewport sizes is a futile exercise.

Article Continues Below
Article Continues Below

All lies! Here are four reasons why it’s a great idea to author your résumé in HTML:

  1. Static résumés become quickly outdated. A single, unified URL assures a recruiter or agency that your résumé is always up to date.
  2. A potential employer may view your résumé on a smartphone. Tethering our résumés to .pdf format is outmoded. Do you really want to trust a stiff, unresponsive .pdf to represent you?
  3. Editing .pdf files can be a painful experience.
  4. A DIY HTML résumé shows potential employers how much you love what you do, which can never hurt your chances.

Let’s look at the requirements for our responsive résumé.

  • It must be easy to maintain.
  • It must look spiffy.
  • It must scale well to smaller devices.

It must be easy to maintain#section2

Evaluating document maintainability comes down to this: how efficiently can we locate and update various parts of the document? The easiest way to achieve maintainability is to create minimal, clear markup. So that’s exactly what we’re going to do.

Examining the source, you’ll notice nothing shocking. After a simple header, we’ve established two columns, and each column houses various article elements. In just a few lines of HTML, our markup is complete.

It must look spiffy#section3

Your résumé needs to look as awesome as you are, so we’ll call the CSS cavalry for assistance. Using the mobile-first approach, we define responsive rules for smaller viewports (less than 520px wide). Why did I choose 520 pixels as the media query breaking point? This particular design looks a bit too condensed at sizes smaller than 520px. The number is completely arbitrary and specific to your own design.

A little flair isn’t a bad thing, so I added a simple CSS transition toward the bottom of our media query which adds a nice touch in supporting browsers. Browsers that don’t support transitions will ignore it. Enlarge your webkit browser from small (less than 520px) to large to view the transition.

.date-ranges {
    width: 15.4639%;
    transition:all .3s ease;
    -o-transition:all .3s ease; 
    -moz-transition:all .3s ease;
    -webkit-transition:all .3s ease;    
}

It must scale well to smaller devices#section4

Resize the demo and test liberally. Our design is mobile-friendly and still retains its good looks.

Where can I use this?#section5

If you have space on a server, you can store your résumé there, so that you can point a recruiter or agency to your always-current URL. LinkedIn users know that, at the time of this writing, no field exists in a user profile to add a résumé or CV URL. For now, we’re stuck with the old meat and potatoes document upload. Sadly, this is the case on many other popular job-hunting sites as well. And that’s exactly why I’ve written this article, to freshen the stale air we’re breathing.

As many grizzled job veterans know, a sharp résumé and near-flawless interview may still leave you short of your dream job. Competition is fierce and never wanes. But finding new ways to distinguish ourselves in today’s unforgiving economy is vital to a developer’s survival.

About the Author

Andy Hoffman

Andrew Hoffman is a front-end developer at IBM. He loves cycling, awkward humor, and complex analogies. He tweets about code and obscure life observations at @antibland.

34 Reader Comments

  1. I find the easiest place to upload / host a resume is on the Public folder in Dropbox. Just have your URL redirect to your HTML file’s public link. You get free, sizable storage space. You can also easily host and link to all your other projects on there.

  3. Excellent idea, though honestly, I don’t think I would have the guts to submit an application without a PDF version. We were in hire mode here where I work, and someone submitted just a cover letter. I assumed he had forgotten the resume at first, until I realized he purposely left it off. Not a great first impression.

  7. some of the more massive “creative” agencies out there are so boggled down by bureaucracy that you MUST submit a PDF (or god forbid, a DOC) resume.

    Their loss.

  9. Since a lot of developers look to ALA for support, perhaps it would be better if the CSS example followed the best practice of listing the non-prefixed property last:

    .date-ranges {
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -webkit-transition:all .3s ease;
    transition:all .3s ease;
    }

  11. I disagree with the first three points.

    An HTML resume, just like any other needs to be updated. If you’re working with an agency, they’re going to have your resume in their system so that all of the agents have ready access to it. They’re not going to go check your website every time to see if it’s been updated. If you’re working with an agency, you should still tell them every time you make an update.

    Saying that a PDF is “stiff and unresponsive” isn’t fair. PDF and HTML resumes have a common purpose but they just do it differently. It’s like comparing a Monet to Avatar – both forms of art but different mediums.

    If editing a PDF is a painful experience, then I don’t want you on my team. You don’t actually edit a PDF, you export your Word document to that format. It takes about three clicks.

    Personally, I expect a resume to be attached with the cover letter. If I like what I read, then I will be happy to click your link and excited to see you back up your words with a stellar web version.

  12. Most companies that I’ve applied to in the last half decade or more that are large enough to have an HR department, or HR person, has specific requirements for resume submission. For example, while many accept PDF, Word and Text, I’ve seen some don’t accept PDF.

    If applying to a job that doesn’t have those requirements this is the ideal way for an individual to keep an updated resume available for public consumption. If however one is applying to a job via an online application process/site, it’s quite likely that some less creative-feeling format will be required. Though I generally dislike Word, I keep my resume in that format because of the utility.

  13. I was actually experimenting with this very idea a long time ago when I was writing too many versions of my resume. Something else fun to add to the project is the use of contentEditable. I added that to the body tag and now a recruiter can view the page, change whatever they like and print it out. Here’s my proof-of-concept: http://jacopotarantino.com/demo/webres/ . Feel free to contact me with questions or for collaboration.

  15. @chrismorata Including a print stylesheet here makes a lot of sense. I, too, haven’t received any complaint from agencies or employers using this method of application. In fact, some of the more _hip_ companies I’ve dealt with seemed to applaud the effort.

  16. @Thomas Hardy I’m happy that many, such as yourself, are stepping forward with long-since completed response résumés. My feeling was that a good handful of us were already creating responsive résumés, but that few had documented the experience for others to share.

  18. I whole-heartedly agree with the article as I recently upgraded my cv in a similar way, but @chrismorata is right – you have to look at printed stylesheets. But more than this you can also tailor them for “print to pdf” as many companies only take pdfs. My own personal style was to add on a qr code link to the online version that only appears in the printed version.

    However the most important lesson I learnt: remove all text/box shadows before making a pdf as otherwise you get nasty black rectangles all over!

    cv: http://philingrey.com/cv/
    print to pdf version: http://philingrey.com/cv/cv.pdf
    source: http://github.com/pci/cv/

  21. FF 13.0 on Win Vista here, no problems. Just for kicks I checked it with FF 3.5.3 on Ubuntu 8 and FF 8.0.1 on Win XP, no problems either.

  22. I’m not sure if I completely agree with the reasons why we should build responsive resumés. It feels somehow like the first pageflip sites to present print magazines on the web. I found it way more important to think about how to actually bring your message to life. This is only technology, folks.

    And yes, it works.
    Landed my dream job at adidas with a (responsive) digital resumé.
    http://towardsfocus.com/journal/florianisallin/

  25. Recently I completed a responsive folding grid framework so I applied it to my resume.

    “My Responsive Resume”:http://resume.randallelliott.com

    The framework’s grid is abstracted from the mark-up living only in the CSS and LESS files. It’s based on things I like and leverages work by Joni Korpi, The Goldilocks Approach, The Semantic Grid System and time-tested design geometry like the Golden means and Fibonacci sequence.

  27. Kudos to @dpellenwood and @Randall for actually including a global background for their pages – this ALA demo did not.

    FYI I tried for years to maintain and market-shop an online H/XHTML resume and typically got cross-eyed looks. Even today in my market region (deep-south USA) I get constant requests for my “most recent resume in Word format”. Unbelievable that they don’t even seem to know what to do with an .odt 😐

    Now, I am game to try it again but rather doubt I will get respect without the .doc

  28. This utterance should become a thing of the past if we have anything to say about it. I’m currently in talks with Linkedin to give users the ability to supply a URL-based résumé on their profile pages.

  29. Responsive HTML5 resume can be made better by using frameworks such as zurb’s foundation and twitter bootstrap. These boilerplates are very convenient. Let you have a try!

  30. You can add a link to your responsive resume in your LinkedIn profile. In the profile, there is a place to list 3 websites. Use one of those for your html resume. Be sure to rename the label, and there you have it.

  31. Thanks for the cool idea, and a great way to make your resume be an example of work abilities. Going to give it a go when I redo my site!

    However, I disagree that editing PDFs is hard. Open InDesign, make change, export.

    Heck, I think you can even export the text out of InDesign into HTML. Your PDF and webpage do have to sync, and you will still need a PDF (or gasp, .DOC) for those HR depts who don’t grok ye olde interwebs.

  34. Super late to the party here, but I found this article after your Accessibility article!

    I made a tool called txti, and one of the ideas for usage was being able to create mobile-ready resumes that are super quick to load. You can edit using Markdown syntax on literally any device and make a custom url: http://txti.es

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

I am a creative.

by
A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career