《
响应式设计 BosonGlobe.com的HTML5响应式设计》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302339512013.htm
你们使用的是什么工具？
Tag：响应 设计 响应 设计
Parker：我认为，在威望地解决这些问题上我们做得还不错。目前仍比拟棘手的问题是广告。使用JavaScript实现广告功能，会给页面增长非常多的问题。把这些内容放到沙盒中，并且不把整个页面弄得一团糟的确是一个非常棘手的问题。
Marquis：到目前为止，我们根据屏幕的尺寸来肯定显示什么样内容和提供怎么功能。所以，不存在这样的情形，“OK,品牌网站设计应避免的7大失误，如果用户使用的是安卓客户端，他们获取到的是XYZ，如果用户使用iPad，他们获取到其他的内容。”如果用户使用的是触控的设备，特定的功能和志愿需要额定增添Javascript来实现。因此，我们只给特定的用户提供特定的功能。我们不会说iPad用户使用的是这种布局，而是某个尺寸的设备会使用什么样的布局。
当然，它使重要是jQuery，然后我们在它上面的插件，不仅使布局有视觉上的相应，还有行为上的。转变所有组件的行为、适应触摸、不同的交互和前提，这些都会使感情在断定的内容上而不会在别的方面。
Marquis：现在我们有了更好的解决方案。个别准则是，从用户的角度来看越凸起，我们就越胜利。我们没有留太多空缺，也没有盘踞整个页面的广告，我们只有两个框式广告和两个悬框广告，这些处理起来都非常简略。我们可以把这些放到沙盒中，免得这些广告损坏网页上的其他内容。
Filament团队向HTML5跨出了一大步
Marquis：我认为真正的挑战之一就是不晓得会遇到什么样的挑战，这些挑战可能是从前没有碰到过的问题。因此，这需要新的解决计划，但是现在没有谜底。这会是一项艰难的义务。
Parker：我想，兴许一年半之前应该实现的，这只是把一些技术碎片拼在一起的问题。
Marquis：我想，我最爱好举的例子就是我们盘算做的填字游戏，看上去就像是网站上的一个小部件一样，我们开端使用由服务器端发生的有丰富语义的标志。因此，不论你的设备的兼容性如何，你都能获取到这个字谜游戏，就像在一张平坦的报纸上填答案一样，没有什么区别。今后，如果用户的浏览器支持本地存储，就是浏览器能够存储数据的问题，我们就能增加一个按钮，让用户保留未实现的游戏，下次翻开的时候接着玩。
为什么这个功能现在才实现？
Parker：对我们来说，我们始终关注通用访问的问题。我们大部分精神都花在这上面，算下来已经有10年了，尤其是我。我想，大多数人只是在把这些技术碎片拼起来的时候慢了一步，当初我们领有了中心工具，我们需要让这些工具可用。好比说，一年前我们写了一本书，对于渐进式加强。那就是我们创建Globe的基本。以一种简练、不背眼的方式在CSS和JavaScript上增添简洁语义的HTML语言。现在我们做了更多辨别，不如说我们供给更多的兼容性以使用户得到更好的休会。说穿了，我们所做的这些全都取决于用户的屏幕尺寸，下一步，我们将把目的转向布局。
技术挑战
本文编译自Lisober
设备辨认和适应屏幕的尺寸带来的问题
破洛洛文章简介：看波士顿环球报是如何借助HTML5实现响应式设计的.
Scott Jehl：在全部网站中，我们大部门应用的是jQuery，咱们在多少个处所使用jQuery Mobile，比方，照片跟触摸交互。我以为，在加载jQuery之前，我们为代码创立一个自定义框架，来处置JavaScript的动态加载。因而，我们只须要加载很少一部分内容，而后动态加载残余局部。恰是这样的内容使它变得十分敏捷。它是一种很不错的行动,品牌力如何在网站建设中延拓。
周一，波士顿环球报宣布了面向手机的付费网站—BosonGlobe.com。不要把它和官方免费旗舰站点Boston.com混杂在一起。这本身并没有那么有趣。然而，HTML5开发社区对BostonGlobe.com大加赞美，称颂网站的内容依据屏幕的大小进行调剂是种立异，这种翻新叫做响应式设计。
通过下面的视频来看看BostonGlobe.com的响应式设计师如何实现的吧。（注：视频播放不了，料想是网站进行了IP限度。）
Marquis：第三方服务是我们遇到的最大挑战之一。仅仅是在提供广告和其它功能上，我们不得不和他们周旋，找到他们默认提供的标记和脚本。
另外一个大的挑衅就是，我们正在解决的响应图片问题。到目前为止，我们做的所有工作都采用挪动优先的方法。如果你访问Globe的站点，就会发明文章的配图都有1000像素宽，他们无比大并且颜色丰盛,告别了纯流量的时代 粘度流量助我留住广告商，像大片一样。而我们在HTML中需要援用较小的图片，这里我们用到一个小技能，如果你使用平板或者桌面机，并且支撑下载响应模式的话，就能够访问高辨别率的图片；假如你使用手机，拜访到的就是低分辩率的图片，如果你使用阅读器或者平板，访问到的就是高分辨率的图片。因此，给对应的装备发送相应的图片是我们需要解决的另一个技巧难点，在CMS环境中实现这个功效确切花了我们不少工夫。
Globe和Upstatement之间有非常严密的配合关联，关于屏幕尺寸的问题，还有很多需要完美的地方。我认为，它确定会改变设计过程，因为这没有人会保持情随事迁的情势。
ToddParker：我想我们应当是在11月正式开始实施这个项目标。界面模板的预备，和设计师打交道一直连续到4月底，然后我们做了一些整体的筹备工作一直到夏末，之后项目就进入正式实施的阶段。
这时，Filament Group中负责UI的 Scott Jehl，参加了我们的对话，探讨他们在开发顶用到的工具。
在很多方面，我们使用和其它站点一样的方式来使用jQuery。jQuery自身什么都不做。作为一个框架，它会给你提供可以使用的工具，我们在此基础之上进行开发。我认为最主要的差别，对Globe来说这不是一个奇特的功能，我们发现如果我们动态加载jQuery，在老版的设备上会有更好的表现。比如一款老版的Blackberry，4.5或5版，没有运行jQuery。因为网站创建的方式在游戏中会呈现延迟，并且在这种设备只总提供基础功能能够有更好的表示。
波士顿环球报得到了Fliament团队的服务支持，Fliament团队附属于波士顿的一家设计发展公司，这家公司致力于开发帮助功能。下面是ReadWriteMobile和三个Fliament团队的设计师和合伙人之间的谈话全文，这三个人在开发响应式设计中做出了宏大奉献。Mat Marquis在Globe的开发中是主力，ToddParker和ScottJehl是他的错误。EthanMarcotte，响应式设计之父，这个时候不便发表评论。
--> [
网站建设之]响应式设计:BosonGlobe.com的HTML5响应式设计
因此，说到技术难点，我认为应该是媒体查询。许多东西都要波及到媒体的查询，但是目前下载到的IE版本对此不提供支持。因此，我们首先要做的就是写一段代码实现媒体查问。固然还有其他的方式能够实现同样的功能，但是对于我们的需求来说真实 未审是太慢了，因此我们创建了响应JS，这是我们实施这个项目必需要解决的第一步，我们在这上面破费了很多时间。
Parker：广告带来的挑战除了广告的技术方面的问题，还需要保障广告依照我们的方案能够运行得很好，这确实非常辣手。而另外一个问题就是广告发售的方式并没有按照我们的方案来实行。他们把空白部分出卖给广告商。我们笼罩了如斯大的范畴，基本没有方法分辨他们。对于一个7英寸的Android平板来说，这样适合么？对于Kindle来说合适么？因此，我们只添加一个广告，在页面中使用CSS，使它看上去显得标新立异。你看，这就是单一广告的模式。
译者注：在HTML5真正变更各平台的开发模式前，定需要获得某些根天性的打破。今年的的一大冲破就是“响应式设计”的发展。从根原来说，响应式设计需让内容适应任何屏幕尺寸。今年响应式设计最惹人注视的案例要数Boston Globe推出BostonGlobe.com。这篇文章转述了ReadWriteWeb与BostonGlobe的开发团队Fliament之间谈话内容，其中具体先容了开发中遇到的一些问题。盼望这篇文章能够给开发者们带来一些心得和领会。
响应式设计容许Globe的内容根据屏幕的可用尺寸进行从新调整，在与移动设备、屏幕尺寸和移动设备上的内容显示的这场较量中，这是个成功。下面是和Globe响应式设计的开创人进行的一次深度讨论。
Paker：我们给企业做了良多利用设计，或者类似的内容。在我看来，做更适用的东西会是一个挑战。环球报证明，在内容布局上，可以做出一些很酷的货色来。然而，如果你有一个应用程序，它有丰硕的可视化GUI，或者你正在使用类似商务运用的表格数据。我认为这是我们下一件要证实的事件。我有信念能做到的，这只是投入时光去做的问题。我们确切实为一些这个范畴的客户，做一些类似的名目。所以，这是一个有趣的时刻。
Parker：我们从没做过用户代办检测，这是个大忌。因此，网站完全是开放式的。我们专一于机能和兼容性，我们检测设备，以便按照其需求动态加载内容。这就是为什么每个设备下载的内容都会有非常简洁的体验。可能这个平板能够支持触摸事件，而另外的一个就不行。因为分辨率的不同，它们获取到的布局就会不同。
Marquis：我认为，之前,后端开发工程师的DIV+CSS两栏布局入门，某些方面是应该能够实现的。我是说，HTML5为目标功能提供更多可用接口，比如说，检讨设备是否提供触屏支持，从技术上来说，这是通过HTML5来实现的，虽然并不是利用HTML5标记来实现的。然而，毫无疑难，HTML5为我们实现特定的下载提供了支持。说到标记本身，HTML5通过另外的语义，为我们提供了很多功能。应用HTML4，这些功能也能够实现，只不外标记并没有那么丰富的语义。
这个项目是如何启动的
响应设计下一步是什么？
广告带来的挑战
我认为，这项技术目前只在博客、文件夹等类似的应用中涌现过。都是一些零碎的碎片，没有一个完全的系统。我想会有一个用户勇敢地说，这个功能对他们来说很主要。因为这项技术比正常的web开发要消费更多的时间和测试，而普通的web开发只要要把几部分拼在一起就OK了。
Paker：在设计过程中，需要斟酌的一件事就是，目标设备的普遍水平。从智能手机到宽屏桌面电脑，从1200像素到更大的像素。所以，在设计这些网页时，我们思考把这些设计联合在一起会得到什么样的产品。
Marquis：这之间不一个交接的进程，在你把它交给到下一个团队时，他们仅仅是运行它。他们需要常常性的对话。团队之间需要时常交换。
Marquis：显然，我们的打算并不包含在所有情况下，任何人都能够使用游戏机打开它，但是，最近有人这样做的时候，它的确表现地非常杰出。
其余挑战
Parker：我认为最大的上风就是我们采取的是一个不可知的措施，而不是关注特定用户的需要。我们的方式完整关注兼容性，这样一来，我们使用jQuery的时候，拿到测试设备的时候（我们不间断地拿到这些设备），在这些我们从没见过的设备长进行测试的时候，Globe看上去异常棒，我们不需要担忧兼容性的问题,合理运用标签达到对页面及搜索引擎的优化。跟着设备源源一直地面世，这会是一个兼容的办法，并且可能在旧的设备上使用，由于我们在做渐进式增强。未几之后，在你的Newtons和旧版的Palms，或者相似的设备，都可以浏览Globe。
(责任编辑：网站建设)
响应式设计 BosonGlobe.com的HTML5响应式设计相关文章