zurb基金會4移動與桌面內容

Question

我是Zurb基金會的忠實粉絲。他們剛剛發佈了Zurb基金會4，該基金會被重新設計爲首先移動。考慮到移動設備，平板電腦和傳統桌面體驗，我對響應式設計相當陌生。我試圖圍繞如何最好地管理我的網站的這些不同設備的內容。藉助Zurb Foundation 4，您可以隱藏或顯示基於小型，中型或大型設備尺寸的內容。因此，Zurb的方法似乎將所有內容都放到設備上，並讓CSS根據設備決定顯示哪些內容（這是響應式設計）。

我的問題是，爲什麼我們要所有的內容拖放到設備？這似乎是在服務器上浪費處理器，浪費帶寬，並且由於瀏覽器處理內容，因爲他們正在使用的設備，某些內容可能永遠不會顯示給用戶，所以這會浪費更多的時間。我錯過了什麼嗎？回到服務器並讓它發送內容到適合設備類型的客戶端不是更好嗎？我們不應該關心移動用戶的數據計劃，不要發送不適合其設備類型的內容？我在響應式設計中看到的所有示例都具有下載到客戶端的桌面和移動/平板電腦的內容，這似乎是一種浪費。

我正在開發具有基於設備類型不同的用戶體驗時的入境申請。臺式機（全屏時）具有更詳細的數據輸入體驗，而移動設備/平板電腦具有不同的體驗，因爲設備的房地產規模較小。我正在開發應用程序，因此當桌面瀏覽器被調整到768px寬的較小尺寸時，jQuery會調用服務器來更換「較小」移動/平板電腦版本的用戶界面。這是否合適？我當然不想下載2個版本的應用程序，並根據設備寬度隱藏其中一個或另一個。

我在正確的軌道上我的jQuery的方法嗎？我是否錯過了一些關於響應式設計的知識，並且需要爲設備定製內容？任何想法，建議和指導表示讚賞。謝謝。

Answer 1

我開發的應用程序，以便在桌面瀏覽器的尺寸調整爲更小的東西是768px寬jQuery的向服務器調用換出UI的「小」手機/平板電腦的版本。這是否合適？

這聽起來不像是一個好方法，你採取的方向改變爲賬戶？

我當然不想下載2個版本的應用程序，並根據設備寬度隱藏其中一個或另一個。

如果你是大多數平板電腦訪問在縱向和改變網站的風景你已經下載< 768px UI後下載> 768px UI。

zb4中的移動第一種方法（帶有媒體查詢）使您可以防止屬於大型設備的內容被下載到小型設備中。基本上你從手機樣式開始，如果設備符合你在媒體查詢中設置的條件（你可以有更多的斷點比zf4框架默認給你的更多），那麼下一個規則跳轉。

我已經在幾個'響應'項目，甚至在前的媒體查詢日是我使用JavaScript來衡量窗口

關於JavaScript和@ powjames3說zepto比jquery輕得多/更快，如果你可以編寫自己的javacript函數將是很多比使用過度膨脹的庫更好。

現在我做mobileFirst響應式webapps和網站使用用戶代理嗅探混合（有時決定什麼圖像src或腳本/樣式src提供），儘管用戶代理測試的決定我總是提供移動第一次媒體查詢，和有條件加載的內容。

「正如Ethan Marcote（和他之前的John Allsopp）所指出的那樣，網絡固有的靈活性是一個功能，而不是一個bug。」

這裏有可能把你在正確的軌道的一些資源：

用戶代理解析及檢測：http://mobiledetect.net/

教程http://www.html5rocks.com/en/mobile/responsivedesign/覆蓋：

• 爲什麼我們需要創建移動優先，自適應的體驗
• 如何爲適應性網站構建HTML以優化性能和 - 優先靈活性
• 如何編寫CSS，首先定義共享樣式，建立起風格與媒體查詢更大的屏幕，並採用相對單位
• 如何寫不顯眼的Javascript有條件的內容片斷負荷，充分利用觸摸事件和地理位置
• 我們可以做什麼，以進一步提高我們的自適應體驗

希望它可以幫助

Answer 2

移動先用Zurb基金會基本上是由Zurb團隊理念的變化，如果你想你開發一個響應網站，而不是採取移動優先的方法，那麼我建議使用基金會3依然有效和美妙。我正在閱讀的一本書爲Mobile First提供了一個很好的選擇，Luke Wroblewski也被列爲Zurb的顧問，名爲Mobile First。

這裏是由同一作者的文章，可能是有趣：

http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first

基本上是：前提是你開始你的開發和設計用於移動，基本意思是iOS或Android風格的瀏覽器然後添加功能。

因此，與基礎3中的.hide類中通常使用的桌面/平板電腦體驗和刪除操作不同，它們仍然可以通過基礎4以這種方式實現，因此建議使用.show類來添加其他內容。

這可以通過使用指南針和薩斯混入方式進一步作出。關於如何做到這一點，沒有很多很棒的文檔，但基本上可以保持標記語義，應用一個id而不是一個類，並使用mixin將其應用於該id。在速度遍歷一個id與一個類的dom中有很多優點，所以它可以是一個很好的方法。

注：基礎4使用替換的下降（有一些限制）jQuery的所謂的Zepto。如果你真的需要基礎4或者使用基礎3，你可以用jQuery代替Zepto。Zepto更輕巧，因此非常適合移動設備。

至於通過使用jQuery異步加載基於瀏覽器大小的數據（我假設）更快，這是實現它的一種方法。我不確定你是否會在這裏獲得巨大的速度提升。有很多策略，分頁，異步異步加載更多數據，這取決於你如何圍繞這些數據安排UX/UI。

還有很多其他問題，例如緩存資源，CDN等，這些問題在前端工程中可能會帶來更快的加載時間。您可以查看與此相關的一個資源是ySlow。

還有很多設計模式，例如帆布幻燈片，3行（漢堡菜單），在滾動條上加載更多數據，無狀態應用程序，可以讓您在移動應用程序中擁有相同的功能。如果你無國籍，在初始頁面加載後，其他頁面應該幾乎是瞬間的。

我認爲這裏的問題更具哲理性，您是否需要所有的功能，這是我認爲採取移動優先方法嘗試處理的一件事。

另一件需要考慮的事情是感知加載時間。我想我讀到的是Seductive UX（另一個很棒的閱讀），但用加載器或微調器獲得頁面速度越快，即使實際上加載速度較慢，加載速度也越快。作爲最後一點，如果您打算使用基礎，您可以考慮使用jQuery/Zepto和Modernizr從基金會使用的相同媒體查詢中提取。這樣你就不會複製或創建與其他響應不一致的東西。