A friend of mine recently sent me her résumé to look over. I’m definitely not a professional job hunter but I think in these situations any extra set of eyes can help fine tune the final product. As it was, the résumé was a Microsoft Word document, which in itself is fine, but it wasn’t particularly well designed. I thought, we’re going on 2010 here, we might as well take this thing to the web!
I created a really simple design. Then I replaced all her content with good ol’ C’thulu so I have a generic template I can give out to you folks. IlLLUSTRATION CREDIT: Michael Dashow
Really nothing too amazing here, just a clean layout. But also:
- Contact information using microformats
- Main resume area using what I think is the semantically correct definition list (<dl>)
- Literally one page (just an index.html file, with optional images)
- Prints nicely
Print Preview
Of course feel free to do whatever you want with it.
I believe we will be seeing more of the online based resume in 2010. Its more of a way to show your skills and expand upon the text based resume.
Btw, there is some rogue text at the beginning of the demo. First text on the page “ch”. Doh!
I hope the people place more value on privacy. they give to their curriculum vitae only the people need their data. But it is nice to look at all times.
I’ve changed some parts of CSS to make line a bit nicer.
dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; float: left; height: 100px; border-right: 1px solid #999; }
dd {width:597px ; float: left; border-left: 1px solid #999; margin:0 0 0 -1px; padding:0 0 0 26px ; }
dd.clear { float: none; margin: 0; height: 15px; border:0 }
Just found out, that my little addition runs into problems in print, have to fix that :P.
Nice clean layout. Given that you’re already using the hCard microformat to mark up contact information, is there a reason that you chose not to use hResume to mark up the complete resume?
I didn’t know about it. I’m kind of a noob when it comes to microformats. I’ll try and re-do it at some point to accommodate that.
Lest Emily Lewis comes and finds you.
You know she’ll hunt you down.
Just a note, I wouldn’t be leaving a real phone number or plaintext email address on any website. The spambots will grab that in a heartbeat and spam you to death. I would suggest using one of the many obfuscation tools to hide this data from the ‘bots.
I can appreciate that thinking.
I can also say I’ve been dumping my email address anywhere and everywhere all over the internet for years and years and years with reckless abandon. I use Gmail. I get no spam.
I use GMail. I ‘get’ spam but all of it is automatically caught in the ‘Spam’ box, so I never see it. Is that what you mean?
If you mean, you’ve never received any spam at all, well, that’s quite amazing.
Either way, Ben, the idea point still stands. It’s not a horrible idea to use your email everywhere if you have good spam filters (like Gmail).
I also have been throwing my email on websites and gmail takes care of it. If you’re concerned about spam one trick from efftehspam is to encode your characters using hex or decimal characters. You can use the PHP Charset encoder to do the work. It certainly won’t stop all spam, though.
I usually print my email with javascript, I’m pretty sure the baddies can’t read it.
I use Hivelogic Enkoder to obfuscate my emails.
But why Cthulhu ? Are you a fond of H.P Lovecraft ? A fond of the “Call of Cthulhu” RPG ?
I just got done making my resume from scratch in hResume format with some webkit transform magic. http://swy.me/resume
hahaha that intro paragraph is amazing.
Tackled this beast last year, might have a few helpful tips in that old blog post.
I love the filler copy and the slick, clean design.
It looks the part. This isn’t the right place to use a definition list though, as you’re not actually defining anything. You’d be better off using an unordered list and headings within each list item.
I love simplicity of this page
Nice. Plenty will find this helpful.
Pretty good and funny. Good design above all, light and efficient.
This tutorial would have been especially helpful when I had to create an online resume for my Coop program. Unfortunately, they did not allow us to use images in our HTML resumes.
While my classmates were using their Microsoft Word
“Save as Webpage”, I came up with this – simple, but it got me a lot of interviews.
Beautiful. Nice clean layout, clear and distinguishes from others. With lots of unemployed people out there, I’m sure we’ll start seeing many more of these.
I’m thinking of doing the same with my comic book style resume. Would love to have your thoughts and ideas at http://onehalfamazing.com/resume
Very clever, nice work!
Absolutely brilliant Bob. I’m sure the creative folk would appreciate this.
Dude, you have no eyes!
http://SampleResumeTemplate.net/
This is also a very good resume template and my company even used it for a job posting as well
http://MadeBySquad.com/Job/
I have been thinking about this for a little while now, thank you for the delightful tutorial – though I’d like to see hResume mf too.
I use Google apps for my domain emails and have no problem with spam, and as for phone and fax I just use a digital service and never had an issue with spam either.
Though I am thinking of switching to Google voice, I just like the matching numbers.
Is there a reason you chose to use .clear instead of putting clear:both onto all dd’s?
I always get confused when I see this. Is there a reason you chose this method for this page, or do you always do it that way?
The clear: both would have had to have been on the dt’s… but I know what you mean. I tried that and it was great for all browsers except IE 7 and lower. Not sure why, but it was messed up.
I should have expected IE was the reason.
That’s really nice, I think in these days of CMS’s being so easy to use people forget how nice and clean a simple, single page can be. Especially for something like a resume that you don’t want all cluttered with widgets and sidebars and stuff.
Where are your old articles, I can’t find the one I was reading yesterday? Your new site is confusing to me.
Thanks Chris, it’s easy to jump into and it looks, functions great.
Happy New Year Everyone !
Why you are using non-semantic
?
Why u are using non-semantic
Wow! What’s a brilliant idea. You think employers will find this to be creative or not what they want?
I think if an employer doesn’t like this, then I don’t really want to work for them anyway.
Loved the example. Like always, perfection from Chris Coyier!
Thank you very much for your design, it’s nice and clean, just what I was looking for.
Happy New Year!
Marco
A so simple article and so many comments. This is the demostration of a great site with great ideas. Thanks
simple and perfect – thanks for that one!
Hello, this is fantastic. I am using it: http://www.aaronlote.com
Would you like any credit link in the footer perhaps?
microformats are great for all 14 people that use them
Love the opening paragraph on the resume, good stuff.
I have seen others attempt the online resume with reckless abandon and make it waaay too complicated.
I like the simple and clean design, perfect for a resume.
Love the joke in Computer Skills.
It’s a very nice layout; the only thing I’d really change (if I need an online resume) would be to keep the image straight, and aligned. I love the ‘dropped photo’ look, but it doesn’t exactly fit in a professional resume.
Great post. Thanks for sharing. I’ve got a site focused on helping people create resumes. We offer free resume templates for download in Word format but agree that having a searchable online version is the way to go even for the non-tech savvy. You’ve inspired me… I’m thinking I should offer HTML files for download as well. If anyone is interested you can check out my resume advice site here: Resify.com
Great resume, I’d hire that alien. Very clean layout and typography.
It’s a growing trend and I expect we’ll need to still be sending PDFs of our resumes and perhaps links to the online version for the time being. The mobile resume concept is logical.
Nice work, Chris. Have you thought of including a print.css file as well?
It already prints well, see above.
Nice Design,
but it would be better if you used the hresume microformat.
PDF resumes are definately the way forward and the css for mobiles will be much more widely used in the future. Another cool artile chris
andrew
Nice clean layout, Found this helpful.
Consider http://www.wix.com
While it has some “wix” ads, they are not in the way. Free and developed in flash.
http://www.wix.com/freschi/resume
Nice article. Thanks
Hmmm, think this kind of a thing could serve as an about page replacement in specific cases?
Moving everything to a more uniform access like the internet seems to be a good approach, however I wonder how the older generation that hires people like you or me view this. I know my current employer took my well formatted resume and made a playground of notes on it for reference.
as simple as it is it’s actually a very nice online resume.
From some of the resumes I’ve received I’d prefer to see something like this with appropriate links to relevant work.
I really like the idea of an online one page resume especially when it looks that good. I think web professionals would benefit from it.
I recently created myself a résumé in HTML format and did not think about using microformats but its a really great idea, I will rewrite it soon.
And for myself to make the résumé only one file I’ve encoded my files in base64… have you think about using that? if so, why do you choose to not using it?
Here is an example :
http://luclapierre.com/cv_luc_lapierre.html
I wish my resume looked like Cthulhu’s! He’s got MAD skills. ;-)
Really interesting. I had this idea some time ago, first Ive made like your friend, a curriculum in word, but I felt I wanted to put some discrete images to decorate it a bit but it felt like the people from the RH wouldnt enjoy it very much.. So I put it in my web page, having a little more freedom in style.
And good sense of humour by the way..
The resume looks really slick and I love the humorous copy, but it would have been polite to ask me (the artist) permission to use that image before posting it: I would have happily said yes. Just because you found something on the internet doesn’t mean it’s fair game to take, or that the creator wouldn’t appreciate an attribution.
In case anyone’s interested, you can see more of my humorous illustration work at my website, Your Walrus Hurt the One You Love. Thanks, and sorry to be a slightly off-topic downer – you’ve done some really nice work here.
Great art and website, Michael. I enjoyed browsing your website.
I just tried shooting you an email about this but it bounced. Very sorry of course. We can do one of two things, I can replace it, or I can add credits to the article to you. I’ll add credits until I hear back.
Hmm, that’s funny (the bounce, that is.) Credit is fine, thanks! I’m certainly okay with your using it, it’s just nice to be credited for my own work. Thanks for your reply!
Great idea, great article and great site. Thanks!
nice article, great post
Nice idea. But that is a mind flayer, not the great C’thulhu ;)
I’m dreaming of hiring this new employee, but his angles are all wrong. ;-)
I was just looking for ideas on creating my online CV and came across this. it does look very clean and professional.
I don’t really know about microformats though? Can I ask what the benefits are of using these over just a standard design layout?
I think as a designer a CV should be completely different to the standard CV layout you see in word etc. I would like to see more colours and some kind of design aspect about it, but obviously still making it printable and easily readable.
But still a very nice idea for an upgrade to the standard word format.
Awesome resume, thanks for share.