使用Ress改善响应式网络设计-IT业界-PHP中文网

使用Ress改善响应式网络设计

这篇文章是由NetBiscuits赞助的。感谢您支持使SitePoint成为可能的赞助商！> 平均而言，您网站的三分之一以上的访问者使用了移动设备。仅在过去的一年中，移动使用量就增长了20％以上。那么，我们如何迎合这个市场呢？

钥匙要点

ress或响应式Web设计服务器端组件，通过合并服务器端智能来增强传统的响应式Web设计。该服务器端组件检测到设备的功能并提供了优化的网站版本，从而提供了更高效和个性化的用户体验。
>
>单独的移动网站

台式机或移动设备的日子早已一去不复返了。有各种各样的设备，具有不同的屏幕尺寸，像素密度，处理速度，网络功能和HTML5功能。而且我们中很少有人认为可穿戴设备！品牌需要创建许多网站来满足每种情况的需求吗？

>

识别用户的设备很困难。众所周知，用户代理字符串是棘手的，不会告诉您有关屏幕尺寸，网络速度或其他功能的任何信息。

>通常需要每个站点的单独URL，例如www.site.com和m.site.com。用户可以最终进入错误的设备网站，如果您不小心，搜索引擎会惩罚您重复的内容。
管理一个网站很艰难。现在，您需要构建和部署多个站点，并确保它们同时更新。也许您的开发人员将在磨难中幸存下来，但满足于编辑会应对多个针对不同观点的资产？

也就是说，对于亚马逊和eBay等公司来说，单独的网站仍然是一个有吸引力的选择，因为它提供了有针对性的体验。

响应式Web Design 另外，设计师和开发人员可以使用响应浏览器视口尺寸的设计（通常是较小设备上的整个屏幕）。使用移动优先的方法，该站点实现了默认的线性布局，也许具有较小的文本和汉堡图标访问的菜单。随着尺寸的增加，可以重新流动设计，以显示其他列，较大的字体，更多的间距，总是可见的菜单等。 RWD解决了遇到的许多问题。我们有一个具有一组内容的站点，可以响应无限的屏幕尺寸。很遗憾…

>同一页面和资产（主要是）交付给所有设备。可以在媒体查询，元素和srcset属性中使用CSS背景图像限制图像加载，但支持仍然斑驳，并且无法解决所有问题。客户端适应技术也可以减慢页面渲染，这需要解决。例如，即使用户处于缓慢的连接，也可以将大图像传递到高密度的视网膜屏幕。
平均网页超过2MB。许多人使用响应式网络设计，但并不能在低功率设备上进行
。现在，基于性能，创建一个快速，响应迅速的网站已经变得更加急切。
> ress：响应式Web设计服务器端组件 Ress是由Luke Wroblewski在2011年提出的。该概念使用响应式Web设计，但用功能检测将其补充以在需要时提供修改的内容。例如，您可以：

或

当带宽受到限制时。

避免在iOS和越来越多的Android设备上提供Flash游戏或广告。> 切换到电子书阅读器上的灰度图像。>

降低了较慢连接的AJAX民意调查请求的频率。> 当设备不支持动画时，请删除不必要的css3效果。>当不可用SVG时，

fall to png图像。

在用户在特定位置或国家 /地区时提供其他信息。

Ress从未成为广泛使用的技术，因为功能检测很困难，尤其是在服务器上。每当发布新的浏览器或功能时，必须对您的检测代码进行验证，更新和维护。幸运的是，有第三方服务，例如NetBiscuits 为您努力工作，并不断使用最新的设备信息进行更新。第一步：注册NetBiscuits帐户 - 有30天的免费试用版来评估该服务。将NetBiscuits跟踪代码粘贴到您的网站模板中，等待几秒钟，然后查看有吸引力的设备和访问者流量分析图表：使用Ress改善响应式网络设计

>客户端设备检测API

跟踪代码还定义了一个名为DCS的全局JavaScript对象，该对象暴露了650多个硬件，浏览器，操作系统和网络检测参数。示例：评估带宽分数 - 从零（非常慢）到20（通常为边缘/HSPA）到60（3G）至120（4G/WiFi）的等级：

<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>

登录后复制

确定设备是否具有触摸屏：

<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>

登录后复制

具有高密度像素比：

<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>

登录后复制

设备有电话设施吗？

<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>

登录后复制

SVG受支持吗？有SMIL动画吗？

<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>

登录后复制

找出用户的位置：

<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>

登录后复制

建议兼容的HTML5视频格式：

<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>

登录后复制

检测正在使用哪个浏览器：

<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>

登录后复制

是否是最新版本：

<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

登录后复制

>服务器端设备检测API

设备检测在服务器上最有用，您可以在发送响应之前对其进行修改。为PHP，Java和.NET提供了代码。 PHP例子... 该设备是否支持H264 HTML5视频并具有合理的连接？

<span><span><?php
</span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

登录后复制

该设备是否支持Ajax并具有比iPhone 5（得分为100的参考设备）更好的JavaScript性能？

<span><span><?php
</span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

登录后复制

我们可能永远不会有一个易于开发并在所有设备上完美工作的解决方案，但是Ress提供了一个良好的折衷方案，可以解决响应式Web设计遇到的许多性能问题。您只需要一项好的设备检测服务。

>通过RESS

改善响应式Web设计的常见问题

> RESS和传统响应式网络设计之间的主要区别是什么？

>传统响应式Web Design（RWD）仅依赖于客户端（浏览器）来根据设备的屏幕尺寸调整网站的布局。另一方面，Ress（带服务器端组件的响应式Web设计）将客户端的响应能力与服务器端智能相结合。这意味着服务器检测到设备的功能并发送了优化的网站版本，从而带来了更高效，更量身定制的用户体验。

> Ress如何改善网站性能？

> ress通过减少发送到设备的不必要数据数量来改善网站性能。使用传统的RWD，发送了所有数据，包括设备上不可见的元素数据。但是，使用RESS，服务器仅发送与特定设备相关的数据，减少负载时间并提高整体性能。

RESS与所有类型的设备兼容吗？设计为与所有类型的设备兼容。 RESS的服务器端组件可以检测请求该网页的设备的功能，并相应地提供该网站的优化版本。这样可以确保从台式机到智能手机的所有设备都有无缝的用户体验。

> RESS如何影响SEO？

> ress可以对SEO产生积极的影响。更快的加载时间和改进的用户体验会导致较低的跳出率和更高的用户参与度，这是搜索引擎对网站排名时考虑的因素。此外，Ress允许通过搜索引擎机器人对内容进行更有效的爬网和索引。

>与传统RWD相比，实施Ress的挑战是什么？。它涉及服务器端编程和设备检测，这可能很复杂。此外，维护RESS网站可能会更具资源密集型，因为它需要对设备检测数据库进行定期更新，以容纳新的设备和浏览器。

可以与现有网站一起使用RESS，还是仅适用于新的网站？可以在现有网站和新网站上实现

。但是，将RESS集成到现有网站可能需要对网站的体系结构和代码进行重大更改，这可能是耗时且复杂的。

> RESS如何处理图像和其他媒体文件？ Ress可以根据设备的功能优化图像和其他媒体文件的交付。服务器可以调整图像大小，将其转换为更有效的格式，甚至完全省略了功能有限的设备。这样可以确保媒体文件不会不必要地减慢网站的加载时间。网站和可用资源。由于需要服务器端编程和设备检测，最初的实施可能更昂贵，但从长远来看，改进的性能和用户体验可能会导致更高的用户参与度，并且可能会带来更高的收入。