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

2013-07-19|分类:行业观察|标签:HTML5  科技博客  响应式设计  信息流  
本文从 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 框架开发。


 

 


 

 


 

观点聚焦

用户体验/交互设计

品牌网站创意设计/建设开发
互动minisite主题微网站设计
移动设备视觉体验方案
flash动画/广告/网站设计
edm电子邮件模板设计

新媒体整合营销

线上互动活动策划管理
口碑传播/新闻传播/公关传播
微信微博运营/微信微博营销
媒体采购/SNS平台推广
网站数据统计/分析/挖掘

技术开发

Web开发
BS端应用系统/B2C解决方案
响应式/MiniSite主题
iPhone/iPad应用程序
Android应用程序
在线咨询
上海直通电话 021-60310366