Responsive Web Résumé Example
Part of the Responsive Design Reading List

I recently received a question from a reader regarding development of a single-page HTML résumé, with an example at CSS Tricks cited as a particular inspiration. While Chris Coiyer’s work was excellent, the three years since the original article was published provided an opportunity to improve on the design. In particular:

  1. The markup for the résumé could be simplified and improved (Chris’s technique uses a lot of empty div tags).
  2. could be introduced into the CSS so that the page could be read well on both mobile and desktop browsers.
  3. Effects on the profile photo could be achieved with CSS transforms, rather than being baked into the image with .

A complete version of the responsive web résumé is available on CodePen. The markup for the résumé is minified HTML5:

The HTML

<div>
	<h1>
		<img src="james-moriarty.jpg" alt="Etching of James Moriarty">James Moriarty
	</h1>
<p>Cell:
	<a href="tel:1-555-666-7777">555-666-7777</a>
<p>Web:
	<a href="//moriarty.com">moriarty.com</a>
	Email: napoleon@crime.com
<p id="objective">I am a reserved but ambitious young professional, seeking a career that
 fits my professional skills, personality, and murderous tendencies. My good birth, excellent 
education and phenomenal mathematical faculty have allowed me to advance the prospects 
of several criminal enterprises.
 <dl>
	<dt>Education
	<dd>
	<h2>Oxford University</h2>
	<p><strong>Major:</strong> Applied Mathematics<br>
	<strong>Minor:</strong> Romance Languages
	</dd>
</dl>
<dl>
	<dt>Skills
	<dd>
	<h2>Office Skills</h2>
	<p>Office and records management, database administration, event organization, customer support, travel coordination
	<h2>Computer skills</h2>
	<p>Microsoft productivity software (Word, Excel, etc), Adobe Creative Suite, Windows
	</dd>
</dl>
<dl>
	<dt>Experience
	<dd>
	<h2>Consulting Criminal
	<span>London 1892 – present</span></h2>
	<ul>
		<li>Development within the criminal underworld
		<li>Conducted negotiations with several rouge governments
	</ul>
	<h2>The Coldstream Guards<span>Army Coach,
London 1889 – 1888</span></h2>
	<ul>
		<li>Recruiting, training and terrorizing young men.
	</ul>
		<h2>Oxford University<span>Professor of Mathematics
1885 – 1888</span></h2>
			<ul>
				<li>Published papers in binomials, asteroid dynamics and game theory
				<li>Intimidated students
			</ul>
		</dd>
	</dl>
</div>

As you can see, markup is standard headings and lists. I’ve added a dynamic link for the telephone number, so that it may be called directly from the page, but there’s nothing else special about the code at this stage.

The CSS

* { box-sizing: border-box; }
body { margin: 2.2rem; } 
div { min-width: 380px; 
	background: url('noise.jpg');
	font: 16px Helvetica, sans-serif;
	line-height: 24px;
}
h1 {
	margin: 0 0 16px 0;
	padding: 0 0 16px 0;
	font-size: 42px;
	font-weight: bold;
	letter-spacing: -2px;
	border-bottom: 1px solid #999;
	line-height: 50px; }
h2 { 
	font-size: 20px;
	margin: 0 0 6px 0;
	position: relative;
}
h2 span {
	position: absolute;
	bottom: 0; right: 0;
	font-size: 16px;
	color: #999;
	font-weight: normal;
}
p { margin: 0 0 16px 0; }
a { 
	color: #999; 
	text-decoration: none;
	border-bottom: 1px dotted #999;
}
a:hover {
	border-bottom-style: solid;
	color: black; }
p#objective {
	color: #666;
}
h2 span, p#objective {
	font-family: Georgia, serif;
	font-style: italic;
}
dt {
	font-style: italic;
	font-weight: bold;
	font-size: 18px;
	text-align: right;
	padding: 0 26px 0 0;
	width: 150px;
	border-right: 1px solid #999;
}
dl { display: table-row; }
dl dt, dl dd {
	display: table-cell;
	padding-bottom: 20px;
}
dl dd {
	width: 500px;
	padding-left: 26px;
}

I’m using fairly standard CSS here, with box-sizing set up to make measuring containers easier. Similarly, fonts are measured in pixels for ease of use; ideally the typefaces would be measured in rem or – once browsers begin to support it – vw units. I’ve used Chris’ noise image as a background-image to provide more of a page feel, with the same fonts. The education, skills and experience sections are placed side-by-side through the use of display: table and related values. We’re using position: absolute on the <span> elements inside the headings with position: relative applied so that we can place the <span> content flush right on the same line. Note that you’d need to add vendor prefixes to support the rotation of the image in current browsers.

In the words of Ethan Marcotte, this CSS is effectively the default responsive style sheet for those browsers that don’t yet support media queries. The only responsive portion is the style declaration that we place on the : rather than measuring its width and height in pixels, we measure the picture’s width as a percentage relative to the document it is a part of:

Making A Responsive Image

img {
	float: right;
	padding: 10px;
	background: #fff;
	margin: 0 30px;
	transform: rotate(-4deg);
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
	width: 30%; max-width: 220px;
}

We assign a max-width to the image so that it doesn’t grow too large in comparison to the document at large window sizes. Browsers that don’t support this property will display the image at its native size. Browser that do support max-width should also respond to media queries: for those, we will add breakpoints where the design starts to look bad as the browser narrows, not in response to specific measurements for any particular device:

Adding the @media Queries

@media screen and (max-width: 1100px) {
	h2 span {
		position: static;
		display: block;
	}
}
@media screen and (max-width: 550px) {
	img {
		transform: rotate(0deg);
	} 
}
@media screen and (max-width: 400px) {
	dl dt {
		border-right: none;
		border-bottom: 1px solid #999;
	}
    dl, dl dd, dl dt {
    	display: block;
    	padding-left: 0;
    	margin-left: 0;
    	padding-bottom: 0;
    	text-align: left;
    	width: 100%;
    }
    dl dd {
    	margin-top: 6px;
    }
    h2 {
    	font-style: normal;
    	font-weight: 400;
    	font-size: 18px;
    }
    dt { font-size: 20px; }
   img { margin: 0; } 
}

These media queries are essentially a series of if statements in CSS: if the browser window is 1100 pixels wide or less, we break the span elements from being flush right to place them underneath the headings; at 550px, this rule is joined by rotating the image upright, and at 400 pixels and below, we display most of the resume with block so that the information falls vertically, rather than being arranged horizontally.

Don’t forget to add the "I know what I’m doing" meta tag for responsive design into the <head> of your document, so that your page is scaled correctly on mobile devices: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Conclusion

This completes the presentation of our page, but it is still missing microformat information, which will greatly benefit its position in … and since the very point of a résumé is for it to be found, that is an aspect I address in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/NqaYxy