网页版简历制作经验分享

Heero.Luo发表于2年前,已被查看3076次

2012年中,因为换工作面试的需要,我得更新旧的简历。但是在Word中排版实在是各种不顺手,于是就发挥了作为前端工程师的优势把简历做成了网页;2014年末想换工作时又对其进行了改版。这份简历曾经受到好几位HR和猎头的好评,所以特地分享制作经验,也算是给想换工作的同行参考。

进入正题之前,先想想HTML简历的好处:

  • 无须下载,直接打开。
  • 可以采用更丰富的设计和更灵活的排版。
  • 可以通过超链接访问其他资源。
  • 可以顺带展示自己设计以及前端方面的技能。

而在此基础上,我还给这份简历定下了以下目标:

  • 一个页面中展示所有内容。
  • Write once, run anywhere. 兼容PC设备与移动设备,最好还能直接打印。
  • 简单实用,最好连JS都不用写。那些用上了各种动画做出来的甚至是做成了小游戏的炫酷简历,其实并不利于阅读。

好了,下面具体讲讲如何打造这样一份简历。

设计

很多程序员会喊:“我是写代码的,不懂设计。”但俗话说得好:没吃过猪肉,总见过猪跑吧。平时逛这么多网站,难道没有几个特别顺眼的?现在浏览器的开发工具非常先进,看上哪个直接扒过来“参考”就行。像简历这种简单页面也不需要先做PSD稿,构思好之后直接写HTML和CSS更为方便。

设计时应尽量使用图形、图像表达内容,这是因为相比大段的文字,人更喜欢看图。这里也贴一下我简历中其中一节改版前后的对比(左旧右新):

尽量用图形、图像表达内容

相比左侧大段密密麻麻的文字,右侧的柱状图让人一眼就能看清技能水平。

字体大小

这年头显示器越来越大,相对地文字就越来越小,现在大部分网站都把标准文字大小设为14px。考虑到简历的内容不多,排版可以宽松一些,因此建议把标准文字大小设为16px,这在屏幕尺寸较小的移动设备上看起来也不会那么吃力。

关于兼容

简历的受众是谁?无非是两类人:HR以及技术工程师。可以确定的是,技术工程师基本上是用Chrome或者Firefox的好同志,并且非常鄙视IE。HR常年耳濡目染,也会逐渐地换上新的浏览器。然而,考虑到那小部分的HR以及极小部分的技术工程师的感受,还是准备一段“温馨”的提示吧:

4oie

实现方法很简单,通过条件注释对IE 9.0以下版本的浏览器,直接用iframe套个提示页面去把原页面挡住:

<!--[if lt IE 9]>
<script>
!function(body) {
body.style.width = body.style.height = '100%';
body.parentNode.style.overflow = body.style.overflow = 'hidden';
}(document.body);
</script>
<iframe src="4oie.html" frameborder="0" scrolling="no" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999;"></iframe>
<![endif]—>

为什么连IE8也要抛弃呢?这是因为它不支持Media query以及一些CSS 3样式,而这恰好是后面说到的多设备适配所必须要用到的技术。

加密联系方式

这一步主要是为了避免被各种骚扰电话、垃圾邮件的扫号软件扫到,这里说的加密并不需要做得很复杂,只要稍微加一点干扰因素即可。比如你的QQ号是1234567,那么在网页上可以这样输出:

<p>QQ:<script>document.write( 'a1b2c3d4e5f6g7h'.replace(/\D/g, '') );</script></p>

至于邮件地址则可以这样(以 abc@126.com 为例):

<p>Email: <script>document.write( ['com', '126', 'abc'].reverse().join('.').replace('.', '@') );</script></p>

电话号码是比较敏感的信息,可以搞复杂点,这里我采用的是base64方案。可能很多朋友还不知道,稍微先进点的浏览器都已经原生支持base64的编码和解码了,分别是调用window.btoawindow.atob两个函数。所以电话号码可以这样输出(以 13800138000 为例):

<p>Phone number: <script>if (window.atob) { document.write( window.atob('MTM4MDAxMzgwMDA=') ); }</script></p>

再者,我并不想任何人都能看到我的电话号码,所以还可以加点限制。比如URL带有某个参数才显示电话号码:

<p id="phone-number" style="display: none;">Phone number: <script>
if (window.atob) { document.write( window.atob('MTM4MDAxMzgwMDA=') ); }
if ( /[?&]show-phone-number(&|$)/.test(window.location.search) ) {
	document.getElementById('phone-number').style.display = '';
}
</script></p>

适配PC与移动设备

首先,通过Media query在不同的宽度下采用不同的布局。

其次,市场上Retina屏幕的设备(如大部分iPad、部分Macbook、大部分手机)越来越多,像图片这些非矢量内容在这些屏幕上会因为被拉大而失真。所以,在准备内容图片的时候,最好是做成实际显示尺寸的两倍,再通过CSS缩小。而对于装饰性质的小图标,可以用两倍大小的图片(通过background-size缩小),也可以用字体图标。这里我不建议用SVG,因为它的性能比较差,在移动设备上打开会明显地卡了一下。

最后,不要忘了贴上个二维码,方便移动设备扫码访问。

做好这一步,就可以带着iPad去面试了。

打印

其实打印机也是一种设备,按理说这部分内容应该跟上一节放一起的,但是打印设备的情况比较特殊,而且有不少坑,所以就单独作为一节。

打印设备特殊在哪呢?A4纸的尺寸是宽21cm高29.7cm,但是我用Chrome把页面存成PDF(在打印的界面可以存)之后,看到的分辨率是宽595px高842px。这到底是怎么算的呢?研究了一番之后发现这是按72ppi(Pixels Per Inch,即一英寸所含的像素数)换算的:

1in = 2.54cm

21cm / 2.54cm * 72px ≈ 595px

按照Media query的规则,这个宽度在打印的时候明显是进入了手机设备的布局。而16px大小的文字打印出来之后的大小就是:

2.54cm * 16px / 72px ≈ 0.56cm

这文字明显太大了,所以得缩:

@media print {
	body { font-size: 12px; }
}

可这缩了之后,内容相对变小,再用原来小宽度的布局就不合适了,反而是大宽度的布局更好,于是就有了这样的代码:

@media not print and (max-width: 639px) {
	/* ... */
}

然后坑来了,这里的Media query表达的并非“不是打印设备并且宽度不超过639px”,而是“不是宽度不超过639px的打印设备”。(关于这一点可以看看Mozilla的解释说明

这个小问题难不倒我们,把代码改成嵌套的Media query

@media not print {
	@media (max-width: 639px) {
		/* ... */
	}
}

本来以为问题已经解决,但是用微信扫一扫后发现样式异常。原来手机QQ浏览器的内核还不支持嵌套的Media query,顺带查了一下,IE系列全部浏览器也不支持这项特性。

被折腾地没办法了,最后乖乖地写了两个CSS:

<link href="css/style.css" media="not print" rel="stylesheet" type="text/css" />
<link href="css/style-for-print.css" media="print" rel="stylesheet" type="text/css" />

接下来再研究一下打印的样式要怎么写。首先是 @page ,可以用来修改页面容器的版式,最常用的是指定页面的尺寸及边距:

@page {
	size: A4 portrait;
	margin: 2.1cm 1.9cm;
}

其次,某些浏览器默认是不打印背景色和背景图片的,这样一来背景小图标就没了。对于Chrome,可以加上这段CSS代码强制打印背景:

body { -webkit-print-color-adjust: exact; }

再次,要处理链接。要知道打印出来之后,用手指往纸上戳是戳不开网页的。所以诸如“在线地址”、“个人博客”这样的文字链接要么隐藏,要么把链接地址也打印出来。要显示链接地址可以这么写:

a:after { content: '[' attr(href) ']'; }

此外,纸质简历的篇幅不宜过长,可以选择性地隐藏一些内容。比如黑白打印的简历可以忽略图片:

网页版简历和打印版简历对比

最后,大家还要记住一个前提,以上这些都是不兼容IE 6、IE 7、IE 8的,但是落后的打印店可能用的还是XP系统,所以输出个PDF去打印是比较保险的。

简历做完以后

先用各种浏览器看一下有没有露馅,不过更重要的是:请阅读你的简历至少10遍。程序员的表达能力普遍不强,在这个过程中,你可以发现:

  • 各种错别字。比如把“登录”写成了“登陆”。
  • 各种错误术语。比如把“jQuery”写成了“JQuery”,把“iOS”写成了“IOS”。
  • 各种语句不通。
  • 各种表达累赘。

至于放置简历的服务器,可以用Github pages,也可以每年花¥100多租个虚拟主机

成功换工作以后

当你在新公司完成一个有价值的项目时,请及时更新你的简历。为何?因为此时你对项目的记忆最深,要是等到想再跳槽的时候再更新简历,往往在那时候忘记了项目的许多细节。

最后

附上我新版简历的截图(图大,移动网络慎开;请允许我对敏感内容打马赛克)。

评论 (13条)

发表评论

(必填)

(选填,不公开)

(选填,不公开)

(必填)