首页 > 产品 > 关键词 > HTML5最新资讯 > 正文

看波士顿环球报是如何借助HTML5实现响应式设计的

2012-01-18 13:47 · 稿源:webapptrend.com

译者注:HTML5真正变革各平台的开发模式前,定需要取得某些根本性的突破。今年的的一大突破就是“响应式设计”的发展。从根本来说,响应式设计需让内容适应任何屏幕尺寸。今年响应式设计最引人注目的案例要数Boston Globe推出BostonGlobe.com。这篇文章转述了ReadWriteWeb与BostonGlobe的开发团队Fliament之间谈话内容,其中详细介绍了开发中遇到的一些问题。希望这篇文章能够给开发者们带来一些心得和体会。

周一,波士顿环球报发布了面向手机的付费网站—BosonGlobe.com。不要把它和官方免费旗舰站点Boston.com混淆在一起。这本身并没有那么有趣。然而,HTML5开发社区对BostonGlobe.com大加赞赏,称赞网站的内容根据屏幕的大小进行调整是种创新,这种创新叫做响应式设计。

响应式设计允许Globe的内容根据屏幕的可用尺寸进行重新调整,在与移动设备、屏幕尺寸和移动设备上的内容显示的这场较量中,这是个胜利。下面是和Globe响应式设计的创始人进行的一次深度讨论。

Filament团队向HTML5跨出了一大步

波士顿环球报得到了Fliament团队的服务支持,Fliament团队隶属于波士顿的一家设计发展公司,这家公司致力于开发辅助功能。下面是ReadWriteMobile和三个Fliament团队的设计师和合伙人之间的谈话全文,这三个人在开发响应式设计中做出了巨大贡献。Mat Marquis在Globe的开发中是主力,ToddParker和ScottJehl是他的搭档。EthanMarcotte,响应式设计之父,这个时候不便发表评论。

通过下面的视频来看看BostonGlobe.com的响应式设计师如何实现的吧。(注:视频播放不了,猜想是网站进行了IP限制。)

这个项目是如何启动的

ToddParker:我想我们应该是在11月正式开始实施这个项目的。界面模板的准备,和设计师打交道一直持续到4月底,然后我们做了一些整体的准备工作一直到夏末,之后项目就进入正式实施的阶段。

技术挑战

我认为,这项技术目前只在博客、文件夹等类似的应用中出现过。都是一些零散的碎片,没有一个完整的体系。我想会有一个用户大胆地说,这个功能对他们来说很重要。因为这项技术比一般的web开发要花费更多的时间和测试,而一般的web开发只需要把几部分拼在一起就OK了。

因此,说到技术难点,我认为应该是媒体查询。很多东西都要涉及到媒体的查询,但是目前下载到的IE版本对此不提供支持。因此,我们首先要做的就是写一段代码实现媒体查询。虽然还有其他的方式能够实现同样的功能,但是对于我们的需求来说实在是太慢了,因此我们创建了响应JS,这是我们实施这个项目必须要解决的第一步,我们在这上面花费了很多时间。

另外一个大的挑战就是,我们正在解决的响应图片问题。到目前为止,我们做的所有工作都采取移动优先的方式。如果你访问Globe的站点,就会发现文章的配图都有1000像素宽,他们非常大并且色彩丰富,像大片一样。而我们在HTML中需要引用较小的图片,这里我们用到一个小技巧,如果你使用平板或者桌面机,并且支持下载响应模式的话,就可以访问高分辨率的图片;如果你使用手机,访问到的就是低分辨率的图片,如果你使用浏览器或者平板,访问到的就是高分辨率的图片。因此,给对应的设备发送相应的图片是我们需要解决的另一个技术难点,在CMS环境中实现这个功能确实花了我们不少功夫。

广告带来的挑战

Marquis:我认为真正的挑战之一就是不知道会遇到什么样的挑战,这些挑战可能是过去没有遇到过的问题。因此,这需要新的解决方案,但是现在没有答案。这会是一项艰巨的任务。

Parker:我认为,在权威地解决这些问题上我们做得还不错。目前仍比较棘手的问题是广告。使用JavaScript实现广告功能,会给页面增加非常多的问题。把这些内容放到沙盒中,并且不把整个页面弄得一团糟的确是一个非常棘手的问题。

Marquis:现在我们有了更好的解决方案。一般原则是,从用户的角度来看越突出,我们就越成功。我们没有留太多空白,也没有占据整个页面的广告,我们只有两个框式广告和两个悬框广告,这些处理起来都非常简单。我们可以把这些放到沙盒中,以免这些广告破坏网页上的其他内容。

Parker:广告带来的挑战除了广告的技术方面的问题,还需要保证广告按照我们的方案能够运行得很好,这的确非常棘手。而另外一个问题就是广告出售的方式并没有按照我们的方案来实施。他们把空白部分出售给广告商。我们覆盖了如此大的范围,根本没有办法区分他们。对于一个7英寸的Android平板来说,这样合适么?对于Kindle来说合适么?因此,我们只添加一个广告,在页面中使用CSS,使它看上去显得别具一格。你看,这就是单一广告的模式。

  • 相关推荐
  • 大家在看
  • 最强蜗牛服务器无响应详细解决办法 三种办法解决服务器无响应

    最强蜗牛经常的会碰到服务器无响应的情况,那么遇到这样的情况怎么办呢?下面就来为大家分享一下最强蜗牛服务器无响应详细解决办法。

  • 外媒称微软响应机制太慢:8个月前反馈问题Win10 5月更新依然未修复

    8个月前反馈的问题,微软居然在Windows 10更新中没有解决,这确实有点说不过去。现在,有用户反馈称Windows 10 May 2020(20H1/Version 2004)功能更新导致“Fresh Start”功能无法

  • 5nn麒麟+5倍潜望式光变 华为Mate 40手机将于国庆节发售

    2020年5G手机很快就要进入下半场了,其中最受期待的旗舰5G就有华为的Mate 40系列,今年该系列手机无疑会是全线5G,微博大V@长安数码君爆料称Mate 40系列今年会在国庆节发售,这个时间要比去年更

  • 华为Mate 40 Pro爆料:首次加入潜望式镜头 支持5倍光变

    6月13日消息,爆料人RODENT950表示,Mate 40 Pro的主要升级之处是变焦和电影镜头,主摄和TOF与P40 Pro+相同。RODENT950称Mate 40 Pro加入了潜望式长焦镜头(这将是Mate系列第一次使用潜望式镜

  • HTTP和HTTPS是什么?

    我们都知道使用浏览器访问一个网站页面,需要知道该网站的域名,例如访问百度知道,在浏览器的地址栏中我们会看到一串URL。网站的URL会分为两部分:通信协议和域名地址。域名地址都很好理解,不同的域名地址表示网站中不同的页面,而通信协议,简单来说就是浏览器和服务器之间沟通的语言。网站中的通信协议一般就是HTTP协议和HTTPS协议。两者分别是什么,有什么区别呢?HTTP协议HTTP协议也就是超文本传输协议,是一种使用明文数据?

  • 华为Mate 40手机将于国庆节发售:搭载全新5nm芯片 支持5倍潜望式光变

    按照往年惯例,华为将在今年10-11月推出全新的Mate 40系列旗舰,不过作为全球最大的手机厂商之一,华为的每一款代表性旗舰的一丝一毫消息都备受外界关注,而全新的华为Mate40系列也逐渐开始进入大家的视野。现在有最新消息,近日有知名数码博主爆料称,该机将会在今年国庆节发售。我们知道,去年的华为Mate 30系列是在9月19日率先在德国发布,随后在9月26日于国内正式亮相。而据知名数码博主@长安数码君 最新发布的消息

  • 李楠评价PS5工业设计:这两点差评

    6月12日,索尼正式召开PS5发布会,PS5游戏主机的真机外观也终于揭开神秘面纱。外观方面,PS5主机采用了一种立式夹层设计,也有点像一本立起来的书籍,上宽下窄,中间是黑色的主体,两侧是乳白

  • HTC U20 5G、Desire 20 Pro正式发布

    DoNews 6月16日消息(记者 刘文轩)许久未公布新机的HTC今天正式发布第一款5G手机HTC U20 5G,一同发布的还有4G中端手机Desire 20 Pro。HTC U20 5G搭载高通骁龙765G,支持原生双模5G连接,配备6.8英寸屏幕,5000mAh容量电池,售价只要18990元新台币(约4130元人民币),成为目前台湾市场最便宜的5G新机。HTC U20 5G背部搭载4颗镜头,分别是4800万像素/f1.8光圈标准镜头、800万像素/118度超广角镜头、超微距20mm镜头、200万像素景深

    HTC
  • 抢到就是赚到?小米手环5上手体验:磁吸式充电+小爱同学=独一档存在

    2020年6月11日小米通过直播发布会发布了这款最新的智能穿戴设备,通过官方所宣传的图我们能看到有很多亮点,那么我也是在第一时间拿到了这款小米手环5,那么此次升级的小米手环5究竟有哪些亮点呢

  • 小米手环5发布:磁吸式充电 售价189元起

    今日下午,小米正式发布小米手环5,标准版售价 189 元, NFC版售价 229 元, 6 月 18 日上午10: 00 全渠道开卖。据悉,小米手环 5 搭载一块1. 1 英寸动态彩显AMOLED屏,显示面积较上代增加了20%,屏幕最高亮度为450nit,并支持五档亮度调节。

  • 特斯拉拍下停车收费员扎胎引热议:多名车主响应

    6月4日,有微博网友曝出一则特斯拉哨兵模式录像视频,视频纪录一位停车场收费员故意扎胎的行为,引起微博网友热议。据悉此事发生在重庆,该车主表示自己在停车办事的过程中,车胎被停车收费

  • 响应印度新规:苹果、谷歌应用商店对59款中国应用下架

    上个月底,印度电子信息技术部宣布,禁止包括TikTok、微信、茄子快传、UC浏览器、微信、QQ、快手和美图等在内的59款中国应用。对于这样的举措,印度在声明中提到这些应用存在安全问题。&ldquo

  • 设计实战 赞扬设计服务带你探究LOGO设计

    我们都知道,每个公司都有着它自己的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师们才能基于它们来为这些公司企业进行LOGO设计。LOGO绝对是最能够直观的体现一个公司属性和风格的东西之一。专门设计一个独立的、与众不同的LOGO是一件很艰难的事,因为就目前市场上存在的公司企业和五花八门品牌LOGO实在是太多太多了。LOGO设计的独一无二,对公众而言,能够看一眼就能快速的想起某一?

  • Hydroblok®海卓布洛克响应时代号召,强力升级环保新主张

    6 月 22 日,第 26 届中国(济南)建筑装饰博览会在山东国际会展中心盛大开幕。本届展会展览面积逾 50000 平方米,汇聚了 800 余家参展企业,现场 3000 多种新品集中展示,吸引了数万名采购商买家团,火爆程度令人叹为观止。这其中,家居建材版块人气颇高。众所周知,环保一直是家居建材行业常年关注的重点,近年来健康、绿色、环保、无醛消费更是成为了主流的家居建材家装消费趋势。作为行业内正在崛起的“黑马”企业,Hydroblok?海

  • 58部落上线“地摊经济”话题 响应稳就业号召点燃线上人间烟火

    今年两会期间,“地摊经济”成为各界关注的焦点。“地摊经济”不仅是城市里的人间烟火,也对稳就业发挥了积极作用。响应政府关于地摊稳就业的号召, 58 部落上线了“地摊经济”话题,为用户提供经验交流的平台,以优质专业的内容向平凡劳动者致敬。 人间烟火气,最抚烦人心。 5 月 27 日,中央文明办提出,今年全国文明城市测评指标明确要求不将占道经营、马路市场、流动商贩列为文明城市测评考核内容,推动文明城市创建在恢复经?

  • 北京下调防控响应等级 携程旅游搜索量爆增300%

    北京召开疫情防控第 110 场例行新闻发布会,决定自 6 月 6 日 0 时起,将北京重大突发公共卫生事件二级应急响应下调为三级,并相应调整相关防控策略。适时开放境内团队旅游业务,中高风险地区除外,按50%限流开放公园、旅游景区和体育健身场所、图书馆、博物馆、美术馆等室内场所,并视情况动态调整限流比例。

  • 索尼PS5外观正式公开:黑白双色调设计 支持两种摆放方式

    6月12日消息,凌晨四点,索尼PS5的线上发布会正式召开,受制于疫情影响,本次发布会采用线上形式,索尼官方公布了主机外观、配置以及将于新平台上推出的全新游戏阵容。外观方面,索尼PS5不是此前爆料的“深V造型”,采用了立式机体,整机采用黑白双色调设计,科技感十足。官方称,PS5有自带光驱和无光驱两种版本。配件方面,索尼PS5包括DualSense充电站、全新的高清摄像头、Pulse 3D无线耳机以及遥控器等。配置方面,采

  • 王腾暗示Redmi要用联发科天玑1000+:首款A77集成式5G旗舰Soc

    6月16日消息,Redmi产品总监王腾暗示Redmi要用联发科天玑1000+芯片。天玑1000+是联发科2020年推出的5G旗舰Soc,它基于7nm工艺制程打造,采用Cortex A77大核+Cortex A55能效核心组成,安兔兔跑

  • 业界首款A77集成式5G旗舰Soc 小米要用联发科天玑1000+

    6月15日消息,博主@数码闲聊站爆料,小米或Redmi要用联发科天玑1000+芯片,号称是中端杀手。目前联发科天玑1000+已经量产商用,首发机型是iQOO Z1,618期间到手价为1998元,在2000元档位极具竞

  • 突发重大洪水灾害,轻松集团·轻松公益快速响应发起救灾募捐驰援灾区

    今年5月底以来,我国西南部出现持续强降雨天气,广西省桂林、柳州、河池、百色,贵州省遵义等多地发生洪涝灾害,作为民政部指定的互联网募捐信息平台,轻松集团·轻松公益立即响应,联合基金会和当地组织,启动线上募捐项目,第一时间驰援灾区,送去温暖。持续降雨,让两省各地出现了洪涝、滑坡、塌方、城市内涝等灾情,受灾面波及十几万人口,大量农作物受损、房屋倒塌,导致直接经济损失5. 52 亿元。灾情过后,满目疮痍,随处可?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议