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. Responsive design techniques 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 CSS3, rather than being baked into the image with PhotoShop.

A complete version of the responsive web résumé is available as a separate document; ironically enough, I have not yet had the opportunity to make this blog responsive (with the exception of the archive page), so I’ve only included a linked screenshot above for now.

The markup for the résumé is minified HTML5:

The HTML

1. <div>
2. <h1><img src=james-moriarty.jpg alt="James Moriarty">James Moriarty</h1>
3. <p>Cell: <a href=tel:1-555-666-7777>555-666-7777</a>
4. <p>Web: <a href=//moriarty.com>moriarty.com</a>
5. Email: <a href=mailto:[email protected]>[email protected]</a>
6. <p id=objective>I am a reserved but ambitious young professional,
7. seeking a career that fits my professional skills, personality,
8. and murderous tendencies. My good birth, excellent education
9. and phenomenal mathematical faculty have allowed me to advance
10. the prospects of several criminal enterprises.
11. <dl>
12. <dt>Education
13. <dd>
14. <h2>Oxford University</h2>
15. <p><strong>Major:</strong> Applied Mathematics<br>
16. <strong>Minor:</strong> Romance Languages
17. </dd>
18. </dl>
20. <dl>
21. <dt>Skills
22. <dd>
23. <h2>Office Skills</h2>
24. <p>Office and records management, database administration,
25. event organization, customer support, travel coordination
26. <h2>Computer skills</h2>
27. <p>Microsoft productivity software (Word, Excel, etc),
28. Adobe Creative Suite, Windows
29. </dd>
30. </dl>
32. <dl>
33. <dt>Experience
34. <dd>
35. <h2>Consulting Criminal
36. <span>London 1892 – present</span></h2>
37. <ul>
38. <li>Development within the criminal underworld
39. <li>Conducted negotiations with several rouge governments
40. </ul>
41. <h2>The Coldstream Guards<span>Army Coach,
42. London 1889 – 1888</span></h2>
43. <ul>
44. <li>Recruiting, training and terrorizing young men.
45. </ul>
46. <h2>Oxford University<span>Professor of Mathematics
47. 1885 – 1888</span></h2>
48. <ul>
49. <li>Published papers in binomials, asteroid dynamics
50. and game theory
51. <li>Intimidated students
52. </ul>
53. </dd>
54. </dl>
55. </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

1. * { box-sizing: border-box; }
2. body { margin: 2.2rem; }
3. div {
4. min-width: 380px;
5. background: url('//css-tricks.com/examples/OnePageResume/images/noise.jpg');
6. font: 16px Helvetica, sans-serif; line-height: 24px; 
7. }
8. h1 {
9. margin: 0 0 16px 0; padding: 0 0 16px 0;
10. font-size: 42px; font-weight: bold; letter-spacing:-2px;
11. border-bottom: 1px solid #999; line-height: 50px;
12. }
13. h2 {
14. font-size: 20px; margin: 0 0 6px 0; position: relative;
15. }
16. h2 span {
17. position: absolute; bottom: 0; right: 0;
18. font-size: 16px; color: #999; font-weight: normal;
19. }
20. p { margin: 0 0 16px 0; }
21. a {
22. color: #999; text-decoration: none;
23. border-bottom: 1px dotted #999;
24. }
25. a:hover { border-bottom-style: solid; color: black; }
26. p#objective { color: #666; }
27. h2 span, p#objective {
28. font-family: Georgia, serif; font-style: italic;
29. }
30. dt {
31. font-style: italic; font-weight: bold;
32. font-size: 18px; text-align: right;
33. padding: 0 26px 0 0; width: 150px;
34. border-right: 1px solid #999;
35. }
36. dl { display: table-row;   }
37. dl dt, dl dd { display: table-cell; padding-bottom: 20px; }
38. 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 image: 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

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

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

1. @media screen and (max-width: 1100px) {
2.        h2 span { position: static; display: block;
3.   }
4.  }
5. @media screen and (max-width: 550px) {
6.        img { transform: rotate(0deg);
7.        }
8.  }
9. @media screen and (max-width: 400px) {
10. dl dt { border-right: none;
11. border-bottom: 1px solid #999; }
12.       dl, dl dd, dl dt { display: block;
13. padding-left: 0; margin-left: 0;
14. padding-bottom: 0;  text-align: left;
15. width: 100%;  }
16.       dl dd { margin-top: 6px; }
17.       h2 { font-style: normal; font-weight: 400;
18. font-size: 18px; }
19.       dt { font-size: 20px; }
20. img { margin: 0; }
21.  }
22. }

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:

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

Conclusion

This completes the presentation of our page, but it is still missing an important component that will greatly benefit its position in search engines… and since the very point of a résumé is for it to be found, that is an aspect I will be addressing in the near future.