demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Responsive Web Résumé Example

Build A Responsive Web Resume

mobile / responsive design

Estimated reading time: 5 minutes, 7 seconds

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 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 as a separate document. 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 rogue 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('//css-tricks.com/examples/OnePageResume/images/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, 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 an important component that 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 will be addressing in the near future.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.