科技助力经济发展

© 2024  TMTforum  沪ICP备15013635号-21
首页 声音 资讯 正文

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

作者：36kr 时间：2013-01-03 0

年底是网站改版最密集的时候，初创公司或成长迅猛的网站尤其需要不断改进以满足用户的普遍需求。科技博客改版最具代表性，从成立之初几人的团队博客成长到具备一定规模的媒体平台，技术需要不断革新，设计体验需要不断完善，内容沉淀和更新数量上的增长，也需要重新考虑内容的整合方式。

本文从 Techmeme Leaderboard 梳理了 Top100 资讯网站，最终筛选Mashable!、PandoDaily、The Next Web 这三家（以下分别简称 MA 、PD、TNW）作为出发点，结合 36 氪 此次改版，分享我个人的 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 框架开发。

TAG：科技博客改版Web设计技术应用信息流

fengsan

海内存知己,天涯若比邻
觉得文章不错，微信扫描分享好友

热门文章

© 2011 - 2020  钛锋网  TMTForum.com  沪ICP备15013635号