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

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

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

扁平化设计五大原则 16种折磨开发者的方式 2013年度中国优秀开源项目征集活动正式启动 技术趋势:产品设计向“钱”看 服务器领域:旧时代已过 新时代正在降临 速度与金钱的碰撞:F1赛车将搭上大数据的东风 中国·北京第一届开源大会Hadoop专场侧记:Hadoop已经成为大数据分析平台的标配 Marissa Mayer为何带雅虎重回门户时代? 开发者最爱的三款开发工具 Facebook开源JavaScript库:React 硬件天堂深圳行:从Seeed Studio、Knewone到柴火创客空间 消费应用开发难赚钱?做个企业app store吧 开发开源软件的智慧:够简单,很好用 历届中国云计算大会PPT集萃(终章):架构到实践的全面解析 透过现象看本质:详谈数据可视化 专家观点:HTML5无法彻底抹杀Native应用 Google地图工程主管Raj Shah跳槽至微软在线服务部门 微软证实Windows 8.1引入类“开始”按钮 系统6月26日开放下载 PHP开发者意向调查:移动开发+云服务成为焦点 研发周报:16种折磨开发者的方式 移动周报:Jolla和Sailfish OS,那些你应该知道的事儿 优化技巧分享:把内存消耗降低至原来的1/20 85后程序员:独自一人,完成一个HTML5开源图形库 关于Waze的前世今生,你所不知道的事 代码审查——提高代码质量的终极武器 值得开发者关注的8个HTML5 API 最初设计方案大公开!LINE STAMP 贴图诞生记 安全宝联合华为成立抗D联盟 储备防御带宽达110G 专访中科院贾海鹏:给异构开发者的六个建议 我们死后的遗留数据将会如何处理? 传微软考虑重大重组 或势在必行 如何在我的程序中取得别的程序中某一控件的句柄(hwnd)? 小弟的软件刚发布请各位高手指点!来者都给分 使用存储过程建立数据集时怎样指定数据集参数? 救命:Beta2安装时候出错:在Disk1上找不到源文件。 如何将图标文件存入到一个dll文件中? ********杨家将请进********** 求救!!为什么我一打开windows就出现说缺少dll文件,storm.dll,还有load.exe.是为什么呀? 请大虾出手:MFC的DLL工程, 我实现了把一个dll工程的menu装载到我的主工程,但与其对应的ToolBar怎么调出来呢??我很着急! 在mdi表單中調用設為最大化的子表單時,它首先顯示小的子表單,然后才把它最大化,影響美觀,有何辦法解決? 关于在菜单中陷入文本框 20分求助有关SQL数据库的问题(为什么select...into语句无法执行) 哪有里Crystal Reports可以下载(无内容)? Where the 广东外贸外语学院 关于ODBC客户机端配置的问题 谁能给我一个delphi连接access数据库的实例,小弟万分感谢!!!!!!!!!!!!! 我机器里,98,2000装在C盘,XP装在D盘,现在我想只留下XP,不知道该怎么处理???????????????????????????? 如何实现5M以上的文件的上传 从windows进入unix Oracle 中文输入 是否onkeypress和onkeydown不能同时使用呀? Delphi 5下要做一个多 Y 轴的曲线图形,如何实现? 哪有xteamlindows下载?? 万分感谢!!!!! borland 会不会出一个 C# Builder? 乱码,头大了,不知道为什么pb导入excel怎么办 数据统计问题,请大侠门帮忙!急急急!!! 求解ZModem通讯协议源程序----有谁用过CZModemCore 我也不知道对不对! 最高级的问题?搞一个专业的VC程序员基地~~~~~~ 在研究directshow filter的push模式的兄弟请进 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题;否则我快下岗了 有两个问题,每题40分,马上给分!!!! 如何使用打印机? 在爱情方面谁能做到这一点? 谁有 file cutter v1.4的注册码? 有急用! 搞一个专业的VC程序员基地~~~~~~谁愿意加入????? 最新发现:原来C++Bilder的项目文件(.bpr)是XML格式的! 关于FAT32和NTSF的问题 如何用VC实现Email的发送? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题;否则我快下岗了! 搞一个专业的VC程序员基地~~~~~~需要网页制作高手!! ADO 的用法 m_pRecordset->Fields->GetItem(index)->GetName() 关于CRichEditCtrl的问题之二,取的当前可见行数? 请问在哪里下载IMAIL SERVER???各位帮帮忙!!! 高手请回答,ADO和BDE到底有什么区别,你选择谁?为什么? 高分求教!!!!!!!!!!!!!!!!怎样得到局域网上所有的机器名?(普通WINDOWS网络,用VB?,好象用WNET API可以的) 如何安装com.ibm.bridge2java.*这个包阿? 有人吗???求救! 你也许也会遇到这样的问题? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题!!! 大虾看过来. 蛋白质的那课,什么氨基,羧基,肽键,肽链,空间结构,氨基酸,整课都听不懂啊~就通俗点解释下把,它们之间的关系,通式什么的. 上海哪里有买欧姆龙血压计的吗?母亲节快到了,想给妈妈买个欧姆龙原装进口的机器?上海哪里有买?可以打折吗? 历史是什么,它看不见摸不着 形容读书刻苦的成语( )( )( ) 形容读书刻苦的成语啊给好评 瓦楞纸板耐破强度得到的KPa怎么转化为磅,边压得到结果KPa怎么转换为磅/英寸 形容独自刻苦读书的成语 蛋白质的有关习题 海拔三千米是什么意思 欧姆龙7200和7201,这2个型号有什么区别?哪个型号比较好? 蛋白质的相对分子质量怎么算?(具体点,最好能举个例题) 一个人从空中三千米的高度掉到海里 身体正面接触海水 接触的瞬间会不会将人拍死《平面掉下来》 欧姆龙血压计7200好吗帮朋友问的,想知道欧姆龙7200这款怎么样,用着方便吗,天津到哪里买比较好 一条绳长2米,第一次剪去5/2,第二次剪去的比第一次多3/1米,一共剪去多少米?列式 上帝你在哪里?可是,我看不见你! 一条绳子长2分之1米,用去2分之1后,还剩2分之1.判断 关于蛋白质的一道生物计算题~脑残的我求第一小题的解啊~已知有一种多肽,其分子式为C55H70O19N10其完全水解后只得到下列四种氨基酸:甘氨酸C2~H5~O2~N,丙氨酸C3~H7~O2~N,谷氨酸C5~H9~O4~N,苯丙氨酸C9~ 因为天气不好我们看不见下面的东西 形容读书勤奋的成语 Kgf/mm是什么单位?130Kgf/mm是什么意思? 一根10米长的绳子,第一次剪去它的一半,第二次减去剩下的1/3,第三次减去剩下的1/4,如此继续下去,第五次剪后,剩下的绳子长多少米? 尿干化学分析蛋白质+-是什么意思?尿干化学分析结果,蛋白质的结果是+-参考值是- 不知道是什么意思?大夫没说出什么意思来,问问大家是什么意思? 在比例尺是1:2000000的地图上量得甲乙两个城市之间的距离是7.5cm,如果该画在比例尺为1:3000000的地图上,那麽图上的距离是多少cm? 19.5KN换算成kgf是多少? 蛋白质 什么意思 在比例尺时1:2000000的地图上测的长是4.5cm,如果把长改画在比例尺是1:3000000的地图上,应画多长?要列算式,不要打一些横杠! 有一个绳子10米长,第一次减去一半,第二次减去剩下的一半,剪7次后,剩下多少米 化学上把氨基酸和蛋白质定义为同系物吗 什么东西别人看不到,而自己还可以欣赏到的那? 青海玉数海拔三千米缺氧嘛? -蛋白质什么意思 为啥子鸟晚上看不见东西? 在比例尺是1:6000000的地图上,量得南京到北京的距离是15cm.南京到北京的实际距离大约是多少米? 鱼跃血压计和欧姆龙血压计,哪种校准? 为什么人在黑夜里看不见东西? 小明对小红说能用掉一生三分之一时间的东西是什么 血压计是买欧姆龙的还是鱼跃的? 用什么东西在纸上写字看不见? 大家都在追求什么?世界上什么东西最值得我们花一生时间去追求呢? 我在长沙想买台血压计,有谁知道是鱼跃的血压计好.还是欧姆龙血压计好. 有一根10米长的绳子,第一次剪去一半,第二次剪去剩余的一半,……剪七次后,剩下的绳子长多少米?A 六十四分之一米 B 一百二十八分之一米 C 六十四分之五米 D一百二十八分之五米 人的一生是短暂的,决不能白白把生命浪费掉 这句话对应的名言是什么? 在比例尺是1:2000000的地图上,量得两城市间的距离是6厘米,如果是在1:4000000的地图上,图上距离是多少厘米? 木啊有一根绳子长10米,第一次剪去一半,第二次减去剩余的一半,.剪7次后,剩下的绳子有多长? 真空能不能以绝对压力(绝压,PSIA)为单位?如果不能,下图标出的部分是什么意思? 在一幅比例尺是1比2000000的地图上,甲乙两地间的距离是10厘米,如果在比例尺是1比4000000的图上,这两地间的距离是多少?用正反比例解正反 比例的知识解 一根绳子,第一次用去了一半,第二次用去了剩下的一半多6米还剩3米,绳子长多少米 为这么压力传感器的标称值是psia,而psia是压强单位!我想知道传感器的测量范围这么求! 关于蛋白质的相对分子质量有些蛋白质要考虑二硫键(—S—S—)相对分子质量.蛋白质的相对分子质量的计算中,若通过图示或其他形式告知蛋白质中有二硫键形成时,要考虑脱去氢的质量.一 电子血压计品牌选购?松下血压计比欧姆龙的质量差吗?差在哪里?为什么都说欧姆龙的好我选择松下了 什么东西看不见摸不着但很重要? 想买欧姆龙电子血压计7201一款,性能与价格如何? 欧姆龙血压计怎么样,能不能用的住啊,质量挺好的吗?还有么有其他比较好的品牌?具体哪里有卖的? 什么东西看不见、摸不到, 蛋白质那里完全不懂啊……就是肽键与氨基酸的关系和水分子的关系 某蛋白质由n条肽链组成,氨基酸的平均分子量为a,控制蛋白质合成的基因含b个碱基对,则该蛋白质的分子量约()DNA(基因)中碱基数:信使RNA中碱基数:蛋白质中氨基酸数=6:3:1 这个是怎么看 什么东西对于人来说看不见摸不着但很重要? 在生物高一必修一的第二节的蛋白质的结构和功能中,主要是氨基酸的结构不懂什么氨基羧基连在哪啊,还有肽链、肽键的关系,都不是很清楚, 关于生物蛋白质的计算题.急啊!有图!有一处不理解,就那个求基因的相对分子质量,为什么要减去,减的是什么?就这一问,其余都会.请求解答,多谢. 什么东西看不见却摸不到?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn