B2C网站中的Responsive Design

这是前年在(前)公司内部做过的一次技术分享的PPT。直到今天才想起贴到博客上,实属惭愧。

PPT只是提纲,当时讲到的一些细节内容,以及这一年以来的一些新的想法,希望最近能有时间更新到本文中。

 


原创主题《金光碧色》

笔者偶尔会抱怨BlogEngine.NET的主题太少,很羡慕WordPress丰富的主题资源。前段时间手痒想给博客换个新主题,但找遍WordPress TOP20之类的排行榜也没有发现特别满意的,一想到就算找到满意的也得花功夫改写成BlogEngine.NET的格式,倒不如释放一下自己的原创热情。

evis-me_royalgold-theme_screenshot

素材

首先是页面的CSS布局,从零开始搭CSS是很折腾人的,一个CSS布局模板可以省掉很多辛苦。CSS-Tricks网站提供了一个“完美的自适应宽度的布局”: http://css-tricks.com/the-perfect-fluid-width-layout/,其特点如下。

  • 左右两栏式;
  • 在主流浏览器下效果良好;
  • 宽度最小可以缩减到780px,最大可以增加到1260px;
  • 侧边栏保持固定宽度,并与主内容区域同高;
  • 页面内容在极大分辨率下保持居中。

笔者基于这个布局的源码,将侧边栏移到了右边,微调了最小最大宽度,最主要的,加入了一系列包括边框、阴影之类的背景图片。这个“完美布局”模板在使用时有以下几点需要注意。

  • 侧边栏是float:right属性挤过去的,这意味着主内容区域里不能很早就用clear:right或者clear:both来清理浮动,否则会造成清理之后的内容与之前的内容间产生很大片空白;
  • 主内容要设计min-height,以避免侧边栏内容高度大于主内容时,下半截没有背景的情况;
  • 这个模板包含一些针对IE的CSS-hack,在IE下人工改变浏览器宽度时,渲染效果会有不稳定的情况。

然后是背景。只所以这个主题会有金色系这样的配色,主要还是因为偶然找到了这样的图案纹理: http://speckyboy.com/2010/04/08/6-free-vector-seamless-backgrounds-source-files/。矢量纹理的好处是后期加工很方便。

还有就是纯CSS的层叠菜单。Google了很多,最后还是采用了http://purecssmenu.com/提供的代码。笔者针对自己的需要,砍掉了不少代码。

HTML源代码

早期版本的HTML、CSS、切图都可以在Google Code上找到,SVN地址如下:

https://evis-lab.googlecode.com/svn/themes/royalgold/src

《金光碧色》主题

主题为什么取这名字就不要深究了。

在上述HTML版本之后,笔者就将HTML代码合并到BlogEngine.NET的Standard主题中了,后来的开发、除错都是基于ASP.NET页面进行的。从结果来看,主题有如下特性。

  • 金色系配色;
  • 纯CSS(CSS2.1)布局,左右两栏,最窄780px、最宽1000px自适应,侧边栏宽度固定为300px;
  • 纯CSS层叠菜单;
  • 在IE7/8,Chrome,Maxthon2/3下测试通过;
  • 适用于BlogEngine.NET 2.0RC及2.0,之前版本尚未测试。

已知bug:

  • 在IE7/8下,Google广告之类的iframe内容会将弹出来的层叠菜单遮住;
  • 在IE7/8下,任何时间都会出现横向的滚动条。

最新版本的《金光碧色》主题可以从这里下载,解压缩至BlogEngine.NET相关目录即可使用。

如果有哪位朋友有兴趣将主题迁移到WordPress,同样请留言,笔者会提供相应支持。

后记

果然是自己从未尝试过的色系,看久了多少有点眼晕的感觉……

制作主题这种事情,笔者认为最舒服的还是做效果图的阶段。神马Web Standard,神马HTML5、CSS3,业界推广这么长时间了,想做个布局、加个边框之类的,开发量还是这么大,甚至避免不了CSS Hack。这么多年了,多浏览器兼容仍旧是个大问题。有时想想,还是表格布局来的畅快。还有,开发工具还是这么单薄……等等各种抱怨。

说回来,Web页面开发这类工作,还得是设计师和前端工程师合作来做,别太期待团队里出来一个英雄,从美工到前端,加上体验设计,甚至再到后端,把一个网站硬生生的扛下来。领域太广、细节太多、耗时太长。哦,笔者可没说自己是这样的人物。