1

我正在設計一個新的網絡應用程序,我想知道應該優化應用程序佈局和設計的「網絡安全區域」。通過Web安全區域我的意思是可用於在瀏覽器中顯示網站的實際區域(受監視器分辨率以及瀏覽器和操作系統佔用的空間的影響)網絡應用程序設計的網絡安全區域(最佳分辨率)

我自己做了一些調查和思考但想分享這個看看一般意見是什麼。以下是我發現:

最佳顯示分辨率:

  • W3Schools的網站統計似乎是 引用最多的來源(但是他們 狀態,這些都是從 其網站的搜索結果,是偏向科技 精明的用戶)
  • http://www.w3counter.com/globalstats.php (來自類似於 之類的聚合數據15,000個不同的站點使用他們的 跟蹤服務)
  • StatCounter Global Stats>顯示 分辨率(統計是基於由 StatCounter的上超過每月15個 十億網頁瀏覽的樣品收集 骨料數據S收集 從橫跨超過3 StatCounter的網絡 萬個網站)
  • NetMarketShare的屏幕分辨率(marketshare.hitslink.com)(一 網絡分析諮詢公司,他們 得到網站 訪問者的瀏覽器數據的實時統計數據的用戶在點播網絡 。該數據 從每月約160 萬人次)

顯示分辨率摘要編譯:還有幾分上述來源之間,但總體變化爲2011年1月的看起來像1024×768約20% ,而〜85%的分辨率至少爲1280x768(1280x800是其中最常見的,佔網絡總量的15-20%,具體取決於來源; 1280x1024和1366x768隨後以9-14%的份額)。我的猜測是,如果我們在北美進行篩選,那麼更高的分辨率值將更爲常見,如果我們對N.American企業用戶進行篩選(不幸的是我找不到任何免費的地理過濾統計信息),則分辨率更高。另一點需要注意的是,1024x768桌面用戶數量可能低於前述的20%,因爲iPad(1024x768本地顯示器)可能會支撐這些數字。我的建議是圍繞1280x768約束條件進行優化(*注意:1280x768實際上是一個比較少見的分辨率,但我認爲這是一個有效的約束範圍,考慮到1366x768比較常見,而1280是最常見的水平分辨率)。

瀏覽器+ OS限制條件: 爲了進一步增加,我們必須減去(假設IE,這是最空間消耗)和OS(假設的WinXP-Win7的)由瀏覽器所佔用的空間的約束:

  • 的Win7已經在40像素的高度最大的任務欄足跡(XP的和Vista的是30PX)
  • 默認IE8視圖使用了25px的屏幕使用狀態欄的底部和另外120像素屏幕頂部帶有窗口標題欄和瀏覽器UI(假設默認的「收藏夾」工具欄存在,它就會顯示出來而不是最喜歡的工具欄的91px)。
  • 假設沒有滾動條,我們也爲窗口輪廓水平放置了4px的總數。

這意味着我們剩下583px的垂直空間和1276px的水平。換句話說,網絡安全區1276 x 583

這是一個正確的思路嗎?

我試圖谷歌一些設計的最佳做法,但大多數仍然談論圍繞1024x768設計,這似乎很快消失。

任何幫助,將不勝感激!謝謝。

+0

聽起來很不錯。由於上網本和iPad等新東西,我傾向於設計1024x768,但假設正常桌面用戶的1280分辨率似乎相當現實。 – 2011-02-23 01:38:27

回答

1

正如Bigood指出的,http://browsersize.googlelabs.com已轉移到Google Analytics(分析)中。然而,觀點也發生了變化。

與其嘗試創建具有固定「最佳」尺寸的頁面,更現代的方法是將網站設計爲適應不同屏幕分辨率的響應頁面。 Twitter Bootstrap是使創建響應式網站更容易的許多CSS和組件庫之一。

此外,其他工具可以輕鬆測試不同分辨率下的網頁響應。例如,Chrome的開發者工具現在允許開發人員能夠模擬特定的設備或手動設置特定的屏幕尺寸和獲得的網頁將如何呈現給用戶,在該決議合理的觀點:

Chrome Device/Resolution Emulation

Internet Explorer的開發工具允許您重新調整瀏覽器的大小以預設或自定義特定維度。

總之,現在沒有「網頁應用程序設計的網頁安全區」。對於與桌面瀏覽器共存的移動設備的期望已經導致該行業對那些設計有「最佳分辨率」的應用站點加以壓力。

+0

斷開的鏈接。 Browsersize現在是Google Analytics的一部分。 – Bigood 2015-03-02 13:50:41

0

後多一點環顧四周,我發現一個非常有用的網站,可以告訴你如何你的網站會出現在多個瀏覽器類型(和版本),以及在不同的操作系統:http://browsershots.org/

另一個需要注意的到我行上面的思考是,不同的瀏覽器實際上基於它們運行的​​操作系統佔用不同數量的像素。例如,在WinXP下,IE8在屏幕頂部佔用142像素(而不是Win7的120像素),因爲文件菜單默認顯示在XP上,而在Win7中,文件菜單默認爲隱藏。因此,它看起來像在WinXP + IE8上的Web安全區域將僅僅是572px(768px-142-30-24 = 572)

再一次,我真的很驚訝,我無法找到這種類型的「探索'在網絡上的任何地方。很多網站都在談論針對1024x768的設計,但這只是其中的一半!沒有提到瀏覽器/操作系統對實際區域的影響,您必須顯示該網站/應用程序。