科技博客 响应式设计 HTML5 信息流

从科技博客改版看新 Web 设计、技术应用和信息流整合理念趋势

本文从 Techmeme Leaderboard 梳理了 Top100 资讯网站,最终筛选Mashable!PandoDailyThe Next Web 这三家(以下分别简称 MA 、PD、TNW)作为出发点,分享我个人的 2013 设计、技术、内容整合趋势的预测。

设计:

响应式设计(Responsive Web Design)将被全面采用

2013 之前,网站设计首要考虑的是屏幕分辨率的问题,大体会将网站分为电脑桌面版和手机 WAP 版本,使用不同的二级域名访问或者链接跳转,也有 WebApp 形式的移动版,存在的问题是电脑、手机访问的体验、可用性都存在巨大差异。

近两年移动设备飞速发展,在路上床上,茶余饭后使用手机或平板设备浏览资讯网站,与使用电脑浏览的频率基本一致,36 氪网站有 25% 读者是通过移动设备访问的,这个比例还在增加,移动设备中一半属于平板。平板屏幕横屏和桌面电脑分辨率一致,竖屏却更接近手机分辨率的比例,这时响应式设 计需求就体现出来了。现代的网站应同时、实时响应和兼容桌面、平板、手机的不同分辨率的排版。

从访问统计中可以看出,不同阶段移动设备型号有 1000~3000 种,屏幕分辨率大体分几种,但个别差异也很大。网站设计,特别是内容为主的网站,响应式设计能够很好满足最基本的阅读需求。MA,PD,TNW 最新改版都采用了响应式设计,Techmeme Leaderboard 前 100 家网站,有超过 10% 是响应式设计排版,我相信明年这个数字会有很大幅度增长。36 氪从最近两次改版均采用响应式设计,科技博客内应用目前在国内尚属首家。
 

技术:

HTML5 趋于标准并被大幅度采用,包括 pushState、localStorage、Full-Screen API等技术增强浏览体验


 

尽管 HTML5 还没有很完善的标准化,但不少特性能够大幅度提升用户浏览体验,科技博客以内容为主,技术上的尝试会更加前卫,现代浏览器性能和对 HTML5 特性的支持越来越完善,让网站表现更像一个 App,可以满足一些更加个性化的需求,而且会越来越多。

访问 PD 首页,脚本会在后台自动预加载文章列表内容,当你点击查看文章的时候,实际内容已经加载完毕,可以非常快的查看页面内容,包括图片,浏览体验有很大幅度提 升;TNW 在切换文章的时候,同样可以达到接近实时的效果,同样是采用了 HTML5 技术; MA 使用了 HTML5 离线缓存增强浏览体验,使用 Infinite Scrolling 方式载入更多内容。36 氪新版尝试了 Turbolinks 技术,第一次加载页面后,访问其他页面无需重复执行 Javascript 脚本,无需重绘 CSS ,页面渲染速度比通常快 2~3 倍(由于兼容性等细节问题改技术已暂停使用),另外查看 36 氪文章页面,可以通过热键进入全屏阅读模式。

HTML5 语义化标签也开始被采用,目前语义化标签还不会被搜索引擎增加排名权值,但仍然可以让搜索引擎更好地识别内容。
 

内容:

使用推荐机制驱动信息流排序


 

这是一个信息爆炸的时代,各种信息如潮涌袭来,读者获取信息的方式也发生了巨大的改变,越来越多的读者通过微博、推送等快餐形式消费内容,RSS 订阅用户更多抱怨更新频繁、数量太多无法适从。

MA、PD、TNW 改版均开始将最新文章放到侧边栏,主体栏目采用编辑推荐、热门精选方式展现新文章,其中 MA 还首次采用了社会化分享驱动排序,推荐文章,热门文章由 Facebook、 Twitter ,Google Plus 等分享数据作为主要依据。36 氪此次改版也类似的尝试,首页第一屏主要为推荐内容,包括编辑推荐、热门自动推荐和主题化推荐。侧边栏除首页导航之外,我们还新增了“推荐”和“分类浏 览”页面,推荐页面采用读者阅读文章后表示“喜欢”和点击数据、评论数量和实效性等综合排序罗列出你不应该错过的重要文章;分类浏览页面,我们将文章按主 题细分到领域,精确到具体内容相关的话题进行整理,这样你可以通过两三次点击即可查找到你感兴趣的话题,发现更多你需要的内容。36 氪关注创业,报道创业公司,这方面的内容会有最高的排序和展现机会。

技术上的改进一定程度减小内容浏览的负担,如使用新的加载方式更快载入内容,使用快捷键浏览等。36 氪目前支持 ← → 方向键翻页和浏览上下篇,使用 t、b、/ 跳转页面顶部、底部、返回首页。

总结

网站改版并不是一年一度的惯例,更多是改进以往不足的地方,同时对新的方式进行探索的过程。36 氪这次改版是从去年 8 月份开始策划的(查看原型图),9 月份开始设计,11 月份设计交付后才开始正式的开发,11 月 24 日开始线上测试并于 12 月 8 日两周年正式上线。PD、MA、TNW 的最近的改版也都花费了 3 个月左右的时间。网站后端,PD 和 TNW 继续采用 WordPress 平台,36 氪和 MA 一样,基于 Ruby On Rails 框架开发。


 

 


 

 


 

那些快被玩烂的app推广方式:再不用就没机会了!
五年Twitter上情感分析的结果:2008年后总体幸福度呈下降趋势,圣诞节是每年的亮点

留言

您的信息会被保密处理. 必填字段 *

现在就与BNA技术专家交流

400-021-7895

App开发 · 小程序开发 · 网站 · 电商 · 微信 · 系统定制 · 网络营销

技术强团,源码输出,高端定制,0预付开工
潜心致力于技术开发,为用户提供卓越的互联网工具
一手源码工厂-合同保障-免费技术服务