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

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

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

几十亿美元当头,你现实世界信息是否还会安全? 华为V3服务器挑战小型机,多路高端市场汹涌 迟到的祝福:Ruby生日快乐!编程快乐! 无缘CEO Stephen Elop将执掌微软硬件业务部门 又一API聚集地 3scale成立API Codex 你应该放弃的八大设计元素 Tropo与华为达成合作 Tropo API首次可供中国电信客户使用 抢先看:2014即将召开的Web Design大会 小米盒子2视频推送测试及解决播放优酷视频卡的问题 《近匠》UPYUN——从开发者变为服务者 移动开发者必须了解的10大跨平台工具 不差钱:30+收购案,170亿美元投资,IBM再度出手收购Cloudant 微软反击谷歌:Windows授权费降七成+硬件要求减少一半 [测试] 你的HTML5知识够金质吗? 基于OpenStack的虚拟机在线迁移 当64bit遇上8核心:高通发布Snapdragon 615 深圳Maker Faire创客市集:国内外创客组团来参展 腾讯正式发布QQ浏览器微信版 摩托罗拉今年推智能手表,有望提高续航能力 众筹未来必拥抱众智 果合报告:iOS趋势及手游开发六大核心策略 无视OpenStack的前车之鉴,SAP等毅然支持Cloud Foundry 轻松搞定TB级数据,开源GraphLab突破人类图计算“极限值” 英特尔至强E7 v2处理器:2倍性能提升,3倍内存容量,4倍I/O带宽 著名工业设计师Yves Béhar:“我们并不需要三星智能手表。” 跨平台的.NET运行环境 Mono 3.2.7发布! Google石博盟:抓住全球化和移动化的机遇 ShareSDK针对Unity发布社交化组件 2014 CocoaChina开发者大会将公布触控奖学金等高校合作计划 中低端智能手机热销,未来市场或主打价格战 Facebook开源flint:一个用D语言编写的C++静态代码分析器 数据维护问题,请大家多多帮忙!在线等待! 请问如何取得用户在控制面板的国别设置中所设的国家或地区是什么? SaxException:File "c:\xml\reports.xml"not found MOV large fs:0 1234h是什么东西? 网页上浮动图片怎么做阿?急~~~ 无模对话框 我到底错在哪? 问一个很简单的问题?如何做一个链接到框架页! 这是不是病毒? 新作一系统需要用条形码输入,用asp.net作,需要与条形码输入器的硬件进行交流吗?条形码的硬件选用什么比较好?价格是多少? 请问各位大虾,那里有COM以及COLLECTION对象编程的文章和例程? 一个保存文件对话框的问题 一个很菜的问题,实在不会 sql语句怎么写? 关于服务器端和客户端通信的问题,急,请各位大虾帮忙 error LNK2001: unresolved external symbol "public: char __thiscall bcdtoasc::secondchar(char)" (?secondchar@bcdtoasc@@QAEDD@Z) 文本框的问题 关于 ACCESS 添加记录的问题? 为什么我在数据窗口中的sql语句中使用参数有错误?提示invalid和不完整! 在UNIX下如何编译C++程序 请教一个COM对象创建的问题 如何获取DropDownlist的SelectedItem.Text? lirun(笨笨狗)请进来领分 怎么得到数据库中的id值。 有点痛,不知道是什么病,大家帮忙看看 GOOGLE被中国"冷处理" 请介绍一本好一点的Winsock函数编程的书,电子书或者纸书都可以 关于全局CDatabase; mysqldump备份数据库时总是出错? 谁有http://211.100.6.72的源代码最好有附带的数据库连接说明。200 在2000server上安装oracle的问题,求教! 怎样深层理解delphi的类变量 数据库中日期范围怎么比较? 如何将Access的数据导入SQL-server 散分了,高手请进---.net不能够bug ???怎样在Delphi中对导出到Excel文件单元格进行划线???? 在VB中如何进行程序的数据输入有效性验证? 请上次回答我NT问题的同志进来拿分,上次只给了100 如何学winzip那样,在弹出菜单中增加一个新的项目 英国有好点的软件公司吗? 高分求救水晶报表问题? 从数据库中取最新的第10~第20条纪录的sql语句如何写啊?各位大侠帮忙啊 记录集问题 sco unix下可以运行tcpdump吗? 无法启动X,出现cound not init font path element unix:7100,removing from list...could not open default font 'fixed' 请问是否可以在VC++下编写一个声音程序,如何编写?(只要能发出一个或两个音符就可以了) 程序员今年还可以报吗? 在flash里面,用什麼命令,可以把gif變成矢量圖?? 怎么用TC编写一个显示320*240的16色位图的程序? 用什么函数可以得到msflexgrid的行号(row的值)? 请朋友们帮忙推荐几本PB8的关于B/S和三层结构编程的书 云南是地震多发区吗? 这段作文材料如何理解?阅读下面材料,从中提炼一个有意义的话题,然后围绕话题,写一篇不少于800字的议论问.老酋长病危,找来村中三个年轻人,要他们尽可能爬到神山最高处,回来报告见闻,以 什么口什么词组成什么词语 云南地震频发的原因? 求一篇经典的作文素材,运用范围广的.上语文课前有课前活动,老师让讲作文素材,就是脱稿讲一个素材,然后分析可以从哪些方面写,每个方面简单分析一下.我的语文老师特别挑,我找不到好点 单能组成什么词 求达人说一下这个词的意思 英语翻译我的冬天这个冬天我过得很开心,因为我能做许多我想做的事情,我常常和朋友一起玩电脑游戏,打羽毛球和购物.但是也有很多作业要做,这让我很烦恼.我的朋友帮助我学习英语,我们一 为什么有机肥使用过多也会增加土壤中的硝酸盐含量?我是个新手,没什么可答谢的,只是诚恳的请教您, "牛人,酷,达人,给力 生猛,搞定,"等词是什么意思 一篇作文里角度太大太广算不算好作文比如:题目就为感动,然后写被父母感动,被好人好事感动,被…感动,这样可以吗 做一个效果好的太阳能热水器,选择做集热器的材料最好是什么1·做一个效果好的太阳能热水器,选择做集热器的材料最好是( ).A.塑料 B.玻璃 C.金属 D.陶瓷 达人这个词怎么来的 写一篇广玉兰的短文 请给这个长方形材料配两个圆,使它可以制成一个圆柱,选择什么样的圆?有几种不同的情况? 量体温的温度计的读数——在口腔内的和腋下放置时、读数是否有相应的增减变动?增减多少? 求写一篇作文,叫身边的能人,范围很广,可以是家人,同学等等.老师要求写同学,我们班有一个女生叫陆倩,毛笔字和钢笔字写的都非常好,求大家举几个例子,就是描写她的字写得好体现在哪里,我 小明家有一块长方形铁皮,爸爸想利用这块铁皮做一个圆柱形的桶.为了不浪费铁皮,他应该选择第几号圆形铁长方形的长是 12.56 宽是 5.6 一号直径是2 二号直径4 三号直径是5 求清晰的解题思路. 什么是植物有机活性碱 这个词怎么来的? 一个两个字的词语七个字母的有多少重可能?一共有四个字,前面两个是爱情,后面两个字是七个字母的. 请问古代时的:儿子.怎说?还有爸爸妈妈. 下列物质中,不属于人的排泄废物的是:A尿液 B粪便C汗液D呼出的二氧化碳 分子式为CnH2n+2O的所有醚 拉风是什么意思.和它的由来是什么 有谁知道的请快回答我啊 分子式为CnH2n+2O 的醇类有a种结构 而分子式为CnH2nO2 的羧酸类有b种结构则a和b的关系是A a>b B a=b 拉风的起源是什么拉风这个词的准确含义,来源是什么? 女人在哪里小便 4个3mm白色发光二极管 + 2个3mm红色发光二极管并联 接3.7V 500mah锂电要接多大的电阻? 由来是什么 什么生肖是英雄 酸雨的主要成分是硫酸和硝酸,但是雷雨发庄稼,NO2溶于水生成硝酸,降落到土壤内形成硝酸盐被植物吸收这不是也是有好处的吗? 起源呢?拉风和出风头的不同点是什么? 世界上有多少名人伟人的生肖是属鼠的? 有5只杯口全部向上的杯子,每次将其中4只同时“翻转”,能不能经过若干次翻转,使杯口全部向下,为什么? 海峡两岸的同胞都()祖国早日统一 老师()我们好好学习,将来报效祖国 爸爸出差3天了,我()他早点回来 一代英豪的生肖是什么生肖 机制木炭是先炭化后成型吗? 什么是抗酸成分?什么是抗碱成分例如Na2HPO4--Na3PO4哪个是抗酸成分 请问如果精子与卵子结合了,身体会有感觉么请问如果精子与卵子遇到了,身体会有感觉么 机制木炭怎样炭化 五孔一开关插座怎么接线 墙里有6跟线 3蓝2黄一红开关控制灯的 插座后面总共有6个孔 抗酸抗碱的用英语怎么说形容词啊 急求诗词达人帮忙~~~~~朋友想追一女孩,让我替他作一首诗,诗最好是古典唯美一点的,其中要包含“文芬”二字!谢谢!不要现代诗啊~~~~~ 怎么读温度计的读数啊? 2.人体血浆中最重要的缓冲对是 ,其抗酸成分是 ,抗碱成分是 自由自在 用来形容哪个生肖合适 关于温度计的精确读数玻璃管内径越细和下端玻璃泡的容积比相差越多,由于温度变化而引起玻璃管内液面位置的变化也就越明显,温度计对温度的反应越灵敏请问是为什么呢= =能详细些么不 在CH3COOH-CH3COONa缓冲对中,抗酸成分是 ,抗碱成分是 取100mL 18.3mol/L的硫酸与Zn反应,当Zn完全溶解时,生成气体在标准状况下占有的体积为22.4L,将所得溶液将所得溶液稀释成1L,测得溶液的氢离子浓度为1mol/L,求所生成的气体中二氧化硫与氢气的 云南省是地震多发地吗? 直流降压电路 我想把输出5V 500MA的电源降压到1.5V 300MA的输出应该怎么用什么电的路好配件 请问甲烷在200个大气压、100摄氏度下是什么形态,液体还是固体? 我国西南地区是地质灾害的多发区,在云南贵州于什么等省接壤地带,形成了什么什么什么为主的灾害系统? 一顿石灰石需要多少煤 为了使低层住户的窗户全年都有阳光照射 深圳两幢居民之间的距离应依据()日的楼影来计算我急用 限在今天晚上做出来 云南是地震的多发区么? 什么叫“潮”?这个词是怎么发明的? 月亮被太阳光照射的那面完全暴露出来,这一日,叫什么
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘