使用Ress改善響應式網絡設計-IT業界-PHP中文網

首頁

科技週邊

IT業界

使用Ress改善響應式網絡設計

Christopher Nolan

Feb 20, 2025 am 09:27 AM

使用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></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></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可以根據設備的功能優化圖像和其他媒體文件的交付。服務器可以調整圖像大小，將其轉換為更有效的格式，甚至完全省略了功能有限的設備。這樣可以確保媒體文件不會不必要地減慢網站的加載時間。網站和可用資源。由於需要服務器端編程和設備檢測，最初的實施可能更昂貴，但從長遠來看，改進的性能和用戶體驗可能會導致更高的用戶參與度，並且可能會帶來更高的收入。