说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

设计新闻类网站需要注意的关键点:移动友好、宽带……

HTML文档下载 WORD文档下载 PDF文档下载
设计新闻类网站需要注意哪些问题?新闻网站首先要将移动用户考虑在内,提供良好的移动用户体验;再者考虑到当前移动网络环境,则需删掉不必要、花哨的功能;最后所设计网站要兼容低配置移动设备,保证用户顺畅浏览。

近日Ezequiel Bruni在Webdesigner Depot网站发布了一篇文章《How to design news sites》,讲述了如何设计新闻类网站。下面为该文的译文。

最近,一个朋友建议我写一篇关于新闻网站的分析文章:这些新闻网站正在做的事情中哪些是正确的,哪些是错误的。他表示,在线新体验过于落后,可能有些枯燥,并指出它们应该更好地利用Ajax和相关技术来优化内容发布与站点导航。

首先,我很赞同该观点。我感觉,很多情况下,报纸仍在尽力地保持其原有的报纸体验,但却采用了变化图片的方法。这样做,它们常常严格限制自己以保持熟悉的外表,这样难免限制了视觉效果。该趋势也将暴露出它自身贫乏的用户体验决策,比如让人阅读困难的小字体正文文本。

这些之前有人已经提出过,但对于Web,作为一个视觉媒体,是时刻变化的。它具有复杂、漂亮特点。它的重要性及能力范围甚至超过了很多人所能意识到的范畴。

所以, 当我们知道Ajax技术可帮助完成很多功能,但却看见如此多的新闻媒体正在限制自己发展,不得不让人觉得可惜。

完全取决于移动用户体验

更明确地说,完全取决于针对大部分移动用户的移动体验。现在似乎很多新闻网站还没有将这些用户考虑在内。当然,很多新网站已经针对Android、iOS推出了本地应用,但大量的移动用户将这些应用下载后,就不再访问了。

大部分人往往不会定期浏览某些新网站。我们通常可能会点击由朋友、相关人员、我们所信任的互联网人士分享的链接;我们也会点击社交网络、Email、RSS订阅或其他文章中的链接。这些链接不会引导我们进入一个应用,而是一个网站。所以,每个新网站应该保证在移动设备上是可读的。

那问题是什么?我们为什么不利用众多酷绚的工具来升级这些新网站呢?更何况,iPad和 Galaxy已经具有功能强大的Web浏览器与处理器。

即便如此,这一观点仍存在较大争议,有人认为新网站应尽可能简洁,使用的技术尽可能简单。

宽带

一般情况下,新网站会在每个页面中显示大量信息。首页更甚,包含3至5个不同主题的最新文章,以吸引用户的注意力,此外,还有图片乃至很多的“旋转木马”。在页面顶部增加额外的JavaScript,你的移动浏览器就会下载大量信息。

大量移动用户通常会在没有免费Wi-Fi的地方浏览这些网站,而很多通讯设备的数据套餐都设置了宽带上限。即便使用Wi-Fi,很多平板、智能手机浏览这些Web页也十分慢,所以你有足够的理由删减掉那些花哨、不必要的功能。

并不是每个人都有一个快速的移动设备

当我的朋友说,新网站应该使用Ajax,使其对UX更友好。这时我提醒自己,他用的是iPad,而iPad运行更顺畅、更快速。

近日,我获得了我的首个平板电脑Hipstreet Titan。这是一个便宜的平板,比大家所垂涎的高端平板速度要慢。另外,拥有便宜平板电脑和智能手机的用户群要远远大于拥有昂贵平板和智能手机的人群。

非品牌、山寨、低端处理器:这是大量用户所使用设备的特征,除非移动硬件越来越便宜。

在此类设备中,并不仅仅是Wi-Fi慢。页面渲染也很慢,Java动画更是断断续续。有时,仅仅是上下滚动页面都会成为一种煎熬。偶尔,新网站还会增加一些“旋转木马”效果及大量的图片,这使得网站使用起来十分笨重,使用体验十分糟糕。

针对你的设备选择合适的浏览器,会消除一些浏览痛苦。在我的平板中,我使用移动版的Opera。即便如此,一些没有针对移动设备进行任何优化的网站将激怒使用低端设备的用户,这样将无法保证用户会再次回来浏览你的网站。

有没有体验很不错的网站呢?

当然有。现在似乎大部分新闻媒体仍依靠本地应用,只有少数的“勇者”开发了不错的响应式网站。

The Boston Globe

因为The Boston Globe是一个很流行的网站,所以这可能是一个很典型的案例。该网站的响应式设计受到设计社区的极大宣传与赞扬。


尽管页面中包含着大量信息,但设计仍保持着相对整洁、干净。链接足够大,保证用户可以轻松点击;放置小的图片,以节省空间。

整体达到了一种这样的效果:看起来像报纸,但仍采用网站的工作方式。他们专注于排版、意象及简洁的设计,使该网站可以在我的平板中轻松被浏览。

The Onion

The Onion的布局在某些方面看起来与The Boston Globe十分相似:伴随着你缩小窗口,三列变为两列、一列。它可以顺畅工作,这一点很重要。我的平板可以处理它。到目前为止,这是任何网站一个很大的卖点。


Time Magazine

如果你想看关于另一个经典使用响应式三列新闻布局的案例,可以点击查看Time Magazine网站。


Breaking News

Breaking News完全放弃了报纸的外貌特征,更像一个APP应用。它本质是一个RSS阅读器,点击网站中的文章标题,将链接到其他新闻网站,但该网站所采用的响应式设计方式可以很容易地被任何新闻组织采用。


该网站针对移动设备进行设计时,他们并没有冷落桌面用户。在我1600×900像素的显示器中,仍可以顺畅地浏览整个网站。

如设计出更好的新闻类网站呢?

首先,我们要更好地关照到移动用户。值得强调的是,很多人所阅读的新闻往往来自外链接。你不可能依靠本地应用为读者提供移动体验。

还有一个事实不得不提,iOS和Android是目前两大最流行移动平台,但它们并不是唯一的平台。在设计新闻网站时,应该考虑到那些使用老旧、不知名品牌手机的用户来说,让他们也可享受到服务。

如果你的网站用于公开信息内容,那所发布的信息应尽可能的与平台独立。只有做到这点,才能进行进一步的创新与提升。

对于新闻网站,你认为什么因素至关重要?你最喜欢的新闻网站有哪些?喜欢的原因是什么?欢迎在评论中发表自己的观点。

原文链接:How to design news sites

富士康自主研发智能手表 惹苹果发来订单 开发者眼中的iOS 7:重设计过程没想象中那么糟 游戏引擎Unity宣布免费支持Windows Phone 8及Xbox One 蝉游记王益善专访:7人小团队实现App 30万下载量 去除IE 10广告的两种方法 直接拿来用!最火前端开源项目(二) 工作变得简单又高效 试试这八个WebApp 移动周报:生于微信,疯狂猜图的推广经 DataTorrent 将数据分析速度从“实时”提升至“现在时” 华为FusionCube开启全球规模商用 黑暗架构:以最少时间完成系统升级并获客户认可的开发之道 Hadoop Summit 2013见闻:创业与Hadoop 2.0不可阻挡 Facebook的清洁能源改革——革命尚未成功,仍需努力 YARN或将成为Hadoop新发力点 主流编程语言属性一览(多图) 粉碎硬件复杂论:开发者不懂硬件运行的方式怎么可以?! 最新版Chrome OS加入Word和Excel编辑功能 直指微软 传诺基亚将购诺西全部股份,疑为出售手机业务做准备? 优秀技术领导者的修成之道 直接拿来用!最火前端开源项目(三) 第八届开源中国开源世界高峰论坛成功举办 曾经那些主流的API,而今风光已不再! Android 4.3本月9日亮相 新功能汇总 移动游戏的国际化运营技巧 Google的Janus与Facebook的McDipper:将闪存用于数据中心 拥抱开源还是坚守阵地:传统数据库供应商面临抉择 超棒的30款JS类库和工具 立场坚定:惠普仍然密谋回到智能手机市场 6月份浏览器份额:Chrome成市场份额增长最快浏览器 关于PHP的十大误解 你中了几个? 专访西电朱虎明:异构计算硬件架构呈现百花齐放 百家争鸣 Regular DLL中向导生成的winapp对象有什么用? 关于Install shield 的问题 一个高难度问题,特急! 从一个页的Button事件中如何获取在iframe中另一页中选种checkbox的值? 大家一起来帮帮我 我是个新手请教如何在98下安装和设置apache,尽是详细些,最好给介绍些资料 高手请教,有关类的链表指针 如何定义日期类型? 请教高手!如何执行带条件SQL语句? 大家一起来为c#加油阿 追女教训谈 如何用OUTLOOK作多用户使用???? 赐教 有谁知道ramdrive.sys在dos下的详细用法,敬请赐教,倍感感激!! 怎么用Delphi调用MySql(win) 关于frame的问题. 为什么显示不出来???? c#通过INTERNET远程访问数据库都有什么办法?(请高手指点) 有誰能把CDONTS.DLL(電子郵件)的源代碼貼出來嗎?有分送,THANK! 请教 NetColorWolf(NCW) pb7的工具条栏的文字字体! 为什么,我的子窗口调用另一个窗口时,总是新开一个被调用窗口,而且被调用窗口中的ADOTable的connected总是丢失。why 《Delphi淡手辑略 之 数据库篇》:数据安全删除(函数) 请教! 我用setfocus使一个控件聚焦,但我想隐藏光标,不想让它在界面上闪动,怎么办? 用delphi 编防火墙 有谁知道ramdrive.sys在dos下的详细用法,敬请赐教,倍感感激!! 关于Delphi线程构造函数: 简单问题 ADSL代理上网部分站点上不去解决一例. 消息中间件的功能?各位铜人帮忙! 如何改变对话框和窗体的背景色呢? 《Delphi淡手辑略 之 数据库篇》:打印DBGrid中的所有数据(过程) 有关Delphi指针的问题,请高手帮忙!!!!!!! 还是weblogic问题 麻烦帮我检查一下代码,实在想不通 请问大家我新买一台品牌机,再使用时经常死机是怎么回事? 哪里有介绍Active Directory 的中文资料? 怎样在ListView组件的详细显示模式下,让屏幕自动随输出数据滚屏和聚焦在输出的数据上面。 实现接口时出错,分数大大的有 《Delphi淡手辑略 之 数据库篇》:数据集解构成树(过程) 100分求教!!!文章“如何快速自动生成并定制报表”的问题!!! 一个农民上网的代价! 怎样将分割视图在一开始显示的时候就是确定的? Win2000server如何设置成路由器? 存储过程和函数得问题 转帖]!现在各大城市求爱对话写真 如何把XML+XSL的输出结果显示到一个指定的HTML元素里? 有些API中的参数开头是lpsz ,lpsa ....请问什么意思?相关的也说说好吗?谢谢 为何长语句分不了行 我用vs.net正式版开发的留言簿提供全部源码下载 公车上的性骚扰 请问哪里有比较好的关于 OpenGL 的网站或者是论坛啊?小弟的毕业设计课题是关于这个的!(NULL) 一个高难度的问题,特急! 能否解释下下列图这些音乐符号各代表什么意思.特别是房子里的1和2代表什么意思? UC是什么意思 做匀变速直线运动的物体位移随时间的变化规律为x=24t-1.5t^2(m)根据这一关系式可以知道,物体速度为零的时.为什么 围绕一句名言展开写的作文 600字 《听泥土说话》阅读答案课时达标上的 做匀变速直线运动的质点,它的位移时间变化的规律是s=(24t-1.5t*t)m,则质点的速度为零的时刻是 两小儿辩日原文 《听泥土说话》中的阅读答案,越快越好!(1)文中的他两次与泥土对话后分别有什么变化?(2)文中最后一段为什么要写那些和他一起同时发迹的伙伴“掉下来”的事?(3)读完短文后,结合 做匀减速直线运动的质点,它的位移随时间变化的规律是s=24t-1.5t2(m),当质点的速度为零,则t为多少答案是16s.可我算出来是8s. 急求《两小儿辩日》原文!要原文(古文) 《听泥土说话》的阅读答案 父母的教诲:500字作文教诲 两小儿辩日的原文 听泥土说话朗读指导从此,儿子处世如泥土般低调,性情如泥土般内敛,为人如泥土般虚心,对待成败得失亦如泥土般自然、平静和从容.请用着重号在上文中画出朗读重音,并说说理由. 物理致癌因子? 《两小儿辩日》原文和翻译 听泥土说话阅读题文中的“泥土”仅仅是指自然界的泥土吗?请谈谈你的理解阅读全文,仿照地⑧段,在地3段的横线上把句子补充完整请简要分析文中画线句“再把这泥土扔了,就等于扔掉了我 四个5,填三个符号,得2使用加减乘除,使等式成立. 两小儿辩日原文的格式 一物体的运动方程是s=5t+1.5t^2,则物体在时间段[0,1]内平均速度是多少?在1s时的瞬时速度是? 延安我把你追寻小学课文中的这篇课文中的精神指什么.是有三个问题 ,填空类型的.要简明点. 英语翻译如:1.鱼,我所欲也;熊掌,亦我所欲也.翻译:鱼,是我想得到的(东西);熊掌,也是我想得到的(东西).我要10个, 做匀变速直线运动的物体的位移与时间的关系为s=t^2+0.5t,则经过()s他的速度是3m/s 延安,我把你追寻,追寻什么 鱼我所欲也 中心论点到底是哪一句大神们帮帮忙 一质点作直线运动,其位移x(m)与时间t(s)有t(2-t)的关系此质点在头2s内的平均速度等于?第2s末速度 写爸爸的作文500字左右最好以别人托出爸爸的好.最好是最新的.只有1个钟头时间喔.好的话, 有个女生给我发短信带了这样一个符号;-P , 请问大家电气符号代表的意思PG1404 FICO1401 TICA1410 WI1401 LIA1401 FIAO1403 RE 还有一些长的:NG-1401o-40-M1E PA-1401-50-M2E-J 诗人为什么要追寻延安 爱的教育的读书笔记 ‘原文’我认为……300字共15篇 珍珠鸟 课文原文. 《延安,我把你追寻》中的问题2.延河枣园、南泥湾开荒的镢头、杨家岭、温热的土炕、顶天立地的脊梁各象征什么? 来篇以教育为话题的800字作文(高中作文) 鸟的天堂课文原文 《延安,我把你追寻》的问题.1.《延安,我把你追寻》主要写什么?2.《延安,我把你追寻》写到了哪几个地方?3.《延安,我把你追寻》是围绕延安精神写的.请你将这首诗分成三个部分,并概括每个 800字高中作文.《如何看待现代教育》从社会、学校、家庭,的方面去写.(议论文)! 鸟的天堂原文我是日本天皇殿下.我向你们表示感谢/王歧山副总理访问我们大日本帝国 《延安,我把你追寻中》的问题作者在第二节中,连用了四个“追寻你”.诗人为什么追寻延河、枣园、杨家岭和南泥湾呀?用具体的事例说说你的理解.第一个“你”代表_______________;第二个“ 《鱼我所欲也》中体现“性本善”思想的句子是 谁有老舍的《鸟的天堂》原文?我要语文书11册上的原文! 一个物体做匀变速直线运动已知位移方程为X=(5t-2t平方)m该物体运动的初速度为(?) 鱼我所欲也重点句子翻译 珍珠鸟原文, 某物体做匀速直线运动,其方位方程为x=(5t+2t方)m,则该物体的初速度为(),加速度为(),2s之内的位移大小为(),2s末的速度为() 急需人教版语文《说勤》原文 写出uc的缩写语或符号表示的含义 什么(填物理或化学)变化中伴随什么(填物理或化学)变化的发生? 原文是三余勤读 鱼我所欲也,背诵怎么办?五个小时后就要考默写,错一处一巴掌,还要罚写.昨天刚刚学,还没学完.求神人帮助支个招...谢拉! 下列各项中属于化学致癌因子的是( ) A电离辐射 B X射线 C紫外线 D 苯 勤礼碑原文 在matlab中,符号计算中结果出现了conj(),例如出现了,(E*bi*(conj(bi)/conj(A) + conj(bm)/conj(A)))/(30*A) + (3*E*bi*((2*conj(bi))/(3*conj(A)) + (2*conj(bm)),除了conj外,其他字母全部都是已定义的符号.那conj()是什 紫外线是致癌因子吗 书山有路勤为径,学海无涯苦作舟.的原文 鱼我所欲也 重点句子(背诵方面)明天要考试了,求本文在考卷上最经常考到的句子.越多越好【也不要把全文都复制下来 做匀减速直线运动的质点,它的位移随时间变化的规律是S=24t-1.5t的平方,当质点的速度=0,则t为多少?选项A.1.5s B.8s C.16s D.24s 请问还是找不到那些特殊符号, UC是什么意思?一直听说UC,UC是什么意思? 做匀减速运动的质点,它的位移随时间变化的规律是s=24t-1.5t²(m),当质点的速度为零时,则t为多少?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘