从版本1.0.0.6上线进入CBT至今断断续续对画廊、博客、屏风三个大部分先后进行了小改大补,最终成形的2.0版本于前段时间正式上线,今天以周记来Mark一下,cheers!
网站优化的主要内容是:
1.提高访问者交互体验;
2.缩小网站体量,减少载入时间;
3.提高对移动设备的友好度。
首先进行的是画廊的修改。
主要从更换了主题。最早使用的<Adirondack>为平铺图片展示,首页即包含12篇最新日志(相册)的特征图片。实际上在主页展示太多篇最新相册的必要性不是很大,过多的图片又降低了载入效率,而且平铺拼图效果实在太花眼。
从了解WP、网页技术开始我就很喜欢推拉门式(slider)的图片展示效果,于是选用了<Panaroma>主题,其在主页以slider形式全屏展示4幅图片,实在很喜欢。
但这个主题有两个主要问题:
1.主页显示图片需要在后台单独设置图片源和URL,不能自动展示最新文章;
2.不知道是我设置的图片源的文件大小问题还是主题模板本身的源码问题,无论是PC还是移动端,载入完成套用该模板的画廊需要半分钟,时间实在太长,完全没有好的体验。
最后在WP免费主题库里搜索到了<Minimatica>这个主题,主页也是slider模式,且显示为最新相册(日志),载入速度也足够快。稍微修改了主题的footer.php,把原来的底边拓展工具栏改为goyuwei.com的HOME和BLOG&LAB链接。
GALLERY重新上线。
接下来是对博客的修改。
原来的<showy>主题倒不是不好用,就是实在不喜欢配色,又懒得改,而且为了进一步提高载入速度和移动设备友好度,最后用回WP最原始最简单的<Twenty Fifteen>主题。
最后是屏风(主页)的重制。
1.0版的屏风是用<Volton>免费html模板改的,这个模板主要的用途是单页的个人展示网页,所以包含了很多信息和图片,基本就是一个单页网站的模板。它改出来做goyuwei.com主页有三个大问题:
1.体量太大,源文件有3MB,除了网页内容需要的图片,还包括我后来自己为了提高移动设备友好度而专门做的index_m移动端主页;
2.屏风里信息太多余,尺寸太大(网页太长),CONTACT、ABOUT这些东西根本不需要专门做几个网页锚点去展示;
3.进入博客和画廊的链接太不清楚,操作上基本相当于进入二级菜单才能点击进入博客和画廊。
后来想起完全可以用“弹出层”的效果来展示CONTACT、ABOUT这些东西,且让博客、画廊的链接按钮直接展示在最显眼的位置。以“弹出层”为关键词,找到了<Tooltip Styles Inspiration>的系列素材。主要修改了配色、文字样式、图标样式,增加了logo、副标题、版权信息这些,得到了源文件仅有600k的2.0版本极简屏风。屏风效果全部用代码实现,唯一需要载入的元素就是8k大小的logo。新屏风因为元素较少而且尺寸不大,所以也兼作移动端访问主页。
在新版上线前后,对1.0板和2.0板主页进行了全页面截图(同比例显示),简单很多,尺寸小很多,自己看起来也顺眼很多其实我挺喜欢极简的。
在1.0.0.6版本之后还修改了很多次屏风代码、WP代码、主题代码,因为运行过程中遇到了几个大的问题,这些问题和解决方法会在之后专门写篇日志介绍,这里就不再赘述。
进入2.0版以后就算是进入稳定运行阶段了。适当的时候,就可以结束CBT,正式开放了。

