Camarts 两周年更新记

刚刚过去的 1 月 1 日,是我的摄影网站 Camarts 正式上线两周年的日子,经常关注的朋友们应该已经发现它有了些变化。没错,在它的两岁生日之际,我给它做了一次小更新。现在写一篇博文,总结一下更新的过程。

featured image updating for camarts on two year old


Camarts 基于 WordPress,前端界面是我基于自带的 twentyeleven 主题深度修改、重新设计而成。因为自带的主题代码非常规范,注释也比较清晰,用它来深度修改比重新制作一个主题要轻松得多。在最近这两年时间里,我的网页设计和开发水平提升了不少,对 Camarts 虽然一直有些小修小补,但它总体上仍然反映着我两年前的水平,还有不少 twentyeleven 的影子。以现在的眼光来看,不足是难免的,有些结构和代码幼稚得让我一看就想笑,嘿嘿。很久前我就想把它的框架整体翻新一下,可一直没有完整的时间来做,只好一直拖着。直到两三个月前,在我个人主页(dandyweng.com)的带动下,Camarts 的访问量也增加了不少,这时我才渐渐意识到一个严重的问题:虽然来访的 IP 量上去了,可 PV 量却没比 IP 高多少。这意味着绝大多数访客都只看了一个页面就关掉了——网站粘性太差,这可是个硬伤啊。看来不能再拖了,只好平均每天抽出一两个小时,说做就做!

但是在开工之前,还得先好好想想:Camarts 的粘性为什么差呢?其实我以前也注意过这个问题,观察身边的亲朋好友们浏览页面时,发现他们在看完一个页面之后总会有点迷茫——没有一个东西吸引他们去点开另一个页面。如果不是刻意想多看一些作品,估计就直接关闭页面了。所以,要达到提高网站粘性的目的,优化最大的两个重点就是导航和推荐功能。第一个下手的,就是这个一直让我看不顺眼的 footer。

重新设计 Footer

这是它曾经的样子:

201401091559

先分析一下吧,这个 footer 从 Camarts 两年前上线时到现在就几乎没有变过,使用的是默认主题 twentyeleven 的 footer,所谓“索引”只是用了一个 Tag Cloud 把所有分类和标签乱七八糟地堆在一起而已,让人一看就晕;而“最新作品”那一栏几乎就是个废物——大多数人都已经看过那几篇了,还推荐个啥?看来,只有搜索和最右边的“快速导航”是有用的。

据我的分析和统计,来 Camarts 访客通常可以分为两类:一类是有明确目标,就想看在某地拍摄的照片;另一类没什么目标,只是随便看看打发时间,新 footer 要在有限的空间里,有效地同时满足这两类人的需求,还得把他们吸引住。想了想,可以通过一个随机推荐模块和一个基于地图的中国省份索引来解决这个问题。

开工!果断把它删个干干净净、片甲不留,一切重来,做一个高端大气上档次的新 footer。

删掉之后,页面就变成了这样:

201401091622

高端大气上档次的 footer 首先要够宽。多宽呢?那就全屏吧……

201401091629

嗯,这下够大气了。再填上九张随机推荐的图片和一个地图,高端的感觉瞬间就出现了。当然不能忽略掉重要的交互效果,所以我给鼠标在缩略图上 hover 时增加了一个把图片掀起来的 3D 效果。并让它的背景显示那篇作品的第二张照片,给人一种那里有“一摞照片”的感觉:

201401091632

把地图的省份链接好,没有照片的省份暂时填成深色。开始做中间的两个菜单:

201401091642

再把 Copyright 和搜索框补上,功能全部到位,看起来也高端大气了,可是似乎还不够上档次。

201401091658

接下来给它加上质感、完善细节,马上就上档次了有木有?顺手再做一个图片 AJAX 刷新:

201401091702

再做一下响应式处理并优化