爱主题网站改版更新,采用响应式,支持手机平板访问

本次更新离上一次有一年了,期间也有过更新的想法,可是一直抽不出时间,最近闲下来了就把这事给搞了。这次更新的主要目的就是优化用户体验,所以外观上面没有太大的变动,依然沿用了之前的风格。下面具体来说下有哪些更新吧。

重写全站代码,支持响应式

之前一直觉得我们这种类型的网站是不需要手机访问的,所以一直没做。但是在访问统计里面经常会看到有使用手机访问我们网站的用户,并且现在支持手机访问也是一个趋势,所以决定针对手机访问做一些优化。我们采用了响应式的方案,因为这个是我擅长的,并且不需要维护多套代码。但是支持响应式是需要对网站的代码结构和样式进行很多的调整,于是干脆对整站的主题进行了重写,顺带把主题开发的gulp环境也都搞了一遍。

图片延迟加载

因为开发的时候是在星巴克写的代码,调试的时候发现星巴克的WIFI网速真是不理想,每次都要等个十来秒才能加载完成,看了下加载的页面文件总大小是有3M多,初步分析是图片文件太多导致的,并且为了保证retina屏幕显示清晰,缩略图的尺寸设置的比较大,差不多就是2x图的尺寸吧。为了减少加载文件大小,我将缩略图的尺寸稍微改小了一点,测试后加载时间有了一些提高,页面总大小也低于3M了,但是依然不理想。

图片延迟加载并不是什么新鲜技术,原理就是当打开页面以后,先不加载图片(可以先用一张代图),页面全部加载完了以后,利用js技术判断当前在浏览的图片,然后加载当前浏览的图片。也就是原先打开页面需要加载所有图片,现在打开页面不需要加载图片,当屏幕滚动过去的时候再按需加载。修改完成以后测试加载时间极大提高,首屏加载大小小于1M,并且延迟加载可按需加载,没有滚动到的图片不需要加载,减少流量带宽消耗。

主题信息显示优化

在主题信息显示上也做了一些优化。

原先的主题下载、演示是在文章末尾,需要查看演示的话,需要滚动页面到文章末尾才行,更新后在文章开头也可以直接下载、查看演示了。

主题列表原先已经可以直接查看演示了,此次主要更新了显示的方式,将演示和详情移到下面了,避免遮盖住图片。

主题列表的缩略图尺寸也进行了修改,原先的尺寸会对大部分图片进行裁剪,看到的缩略图总是被裁去了一部分,本次更新针对大部分的缩略图尺寸进行了分析,尽量保证大部分的封面图片不被裁剪。

其他优化

  1. 搜索功能优化,页头直接显示搜索框;
  2. 文章详情页样式优化;
  3. 页脚显示优化;
  4. 采用原创Themer框架开发;
  5. 更多细节的优化

猜你喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注