堂主 - WEB前端开发

专注于互联网 | WEB前端开发 | 以用户为中心的体验 | 家是圆心 | Code is art !

新博客模板!

Tags : 我说   HTML5   效率   作品   重构     6 comments

清明假期前后几天,抽时间做了博客的新模板,同时将博客后台程序由ECMS 6.5升级到了最新的6.6版本。赞叹帝国开发者WC的给力之余,也感觉自己拿ECMS只仅仅做个博客简直就是大材小用了。

设计阶段:

博客模板在配色上借鉴了一个国外的配色网站的模板,具体网址找不到了。当初看到那个网站的界面感觉配色非常好,简洁清淡且功能区划分明确。

这次的模板不同于以往。以往做自己的博客模板都是结构代码随写随寻思样式,基本上是coding+designing并行。而这次是PSD设计图先行,待设计图就位后才开始后续工作。

设计PSD图的时候采用了黄金分割+栅格的技巧,大量运用参考线来找对齐。后续又进行了微调,直至自己感觉满意为止。非设计出身,拍砖请留情啊 : p

参考线.png

黄金分割 .png

栅格.png

分组分层.png

点击这里前去115网盘下载设计图PSD文件

编码阶段

这次博客新模版的制作,尝试的选择了HTML5和大部分CSS2.1+小部分CSS3的组合。虽然技术上实现IE6同其他浏览器浏览器体验相同不是困难事,但这次还是在兼容性方面决定不兼容IE6浏览器:IE6的用户访问博客会默认显示一份未加样式的纯结构页面。并在网页顶部标题下显示一条加粗的提示句:

<!--[if IE 6]>
    童鞋请注意:本博客自新改版后,将不再温馨对待IE6用户。如果您是IE6用户,请选用更安全、功能更好的现代浏览器。
<![endif]-->

这次新模版的布局上,有意的采用了几种不同的布局方式。顶部的导航采用的是最常见的浮动方法;页面中左侧主体内容部分和右侧的侧边栏采用的是定位的方法;页脚部分的“专题列表”区域,针对IE7采用的是利用IE的一个经典BUG实现的“display:inline-block + vertical-align:text-top;”方法的布局;而针对非IE7的标准浏览器则应用了“display:table-cell”的方式来实现同样效果。看上去似乎很找罪受,但个人觉得布局的方式应该尽可能的多尝试,知其优劣,形成自己的理解,毕竟浮动并不是为了布局而生,就像table元素也不是为了布局而生一样。这块应该近期会形成一篇博客,阐述下自己的一些整理和理解性文字。

做前台的时候还无聊了一把,单独弄了一张“纯洁版”首页:没用到一个ID和CLASS选择器的首页。但这只是自身无聊的东西,实际中还是不建议如此的吹毛求疵,因为过多层级的选择器组合对渲染效率并无益处。博客实际中应用的首页也不是这个“纯洁”版本。

另外新模板在写结构的时候也留意了HTML5大纲的生成,做到大纲结构合理、层级清晰:

大纲.png

html5检测结果:

html5-validator.png

 点击这里在本站下载新博客的模板文件 (注:压缩包中的CSS文件已经做了压缩)

跨平台考虑

这次的页面除了兼容PC端主流现代浏览器之外,还考虑到了手机等移动设备用户的浏览需求。虽然自己明知道用手机来浏览我博客的用户可能一年也不会有1个,但还是做了这方面的尝试。运用的相关技术是CSS3的“Media Queries”,实现的效果是当终端浏览器尺寸横向上小于480像素时,会为其提供一个适合手机端浏览的网页:

iphone.png

但遗憾的是,我本身的手机非常老旧几乎不支持上网。手头也没有可以用来开发测试的手机,唯一的工具就是这个模拟手机屏幕分辨率的ProtoFluid。在这里面一切都好,但一次借朋友的M9上网一看又不一样,一问才知道M9的分辨率早就大于480了。只怪自己没这方面的经验,把问题想简单了。所以手机端的模板还要重新来做。查找了些资料(资料来源:http://blog.owncsser.com/),暂时弄出下面的表格,留作后用。

触摸屏

IOS 机型及分辨率
屏幕 型号 说明
320*480 iPhone 3 / iPod Touch  
640*960 iPhone 4 / iPod touch 4  
1024*768 iPad1、2  
Android 机型及常见分辨率
屏幕 型号 说明
240*320   QVGA - 120 dpi
320*480   HVGA - 160 dpi
480*800   WVGA800 - 240 dpi
480*854   WVGA800 - 240 dpi
360*480 Nokia 系列 Nokia 尺寸比较特殊
S60 v5 机型及常见分辨率
屏幕 型号 说明
320*640 N97mini(港行)  
360*640    

普通屏

S60 v3 机型及常见分辨率
屏幕 型号 说明
240*320    
240*480    
640*480    
S40机型及常见分辨率
屏幕 型号 说明
240*320    

 性能优化

 这次重新制作博客专门针对Page Speed和YSlow进行了前端性能优化,GTmetrix中测试得分如下:

评分.png

其中Page Speed是30项检测,YSlow(2)是23项检测。如果采用YSlow的small site or blog(小型网站或博客,15项)的检测,得分是100满分:

yslow-small-site-or-blog.png

这次在提升博客页面加载速度上做了特殊处理。除了按照上面2个性能检测给出的建议优化外,还养成了每篇博文的配图先经由PunyPNG压缩一遍的习惯。

加载.jpg

事实也证明新版博客较之旧版的页面,性能上有了大幅提升,加载速度快了近一倍。

page-load-time.png

 

参与讨论

*

*