使網站在所有設備和屏幕尺寸上都可用且一致的最佳實踐是什么？

Question

對使網站在所有設備（台式機、上網本或 Ipad 和移動設備（主要是智能手機））上可用且一致的最佳方法感到困惑。

我不是前端開發人員或設計師，所以我不確定什么是最好的。

我一直在閱讀 Liquid Layouts、Keeping 2 different version of style sheet（1 個用於屏幕，1 個用於手持設備）和 CSS 媒體查詢。

我不確定其中哪一個最適合為我網站的用戶提供一致的體驗，無論他們是使用智能手機（任何 android、BB、iphone、諾基亞）上網本還是台式機。

請幫忙。

Answer 1

正如我在評論中所說，我認為您應該盡可能簡單，並遵守 HTML 和 CSS 等良好標准。

讓瀏覽器/用戶選擇使用您網站的最佳方式。

還要記住優雅降級/漸進增強和支持頁面的邏輯結構。

Answer 2

您正在尋找的是所謂的響應式 Web 設計。

流體網格、靈活圖像和媒體查詢是響應式 web 設計的三個技術要素，但也需要不同的思維方式。 與其將我們的內容隔離到不同的、特定於設備的體驗中，我們可以使用媒體查詢在不同的查看環境中逐步增強我們的工作。 這並不是說沒有針對特定設備的單獨站點的商業案例。 例如，如果您的移動網站的用戶目標在 scope 中比在其桌面版中更受限制，那么為每個網站提供不同的內容可能是最好的方法。

但這種設計思維不需要成為我們的默認設置。 現在比以往任何時候都更重要的是，我們正在設計旨在通過不同體驗的梯度來查看的作品。 響應式 web 設計為我們提供了前進的道路，最終讓我們能夠“為事物的潮起潮落而設計。

Think Vitaimin上有一個很好的免費介紹視頻。

響應式 Web 設計：基礎知識：簡介

觀察到大約 3/4 的時候，他們開始展示他們在說什么。

Answer 3

根據我收集到的信息（我自己一直在研究），它確實是所有東西的結合。 流動布局適用於不同的顯示器尺寸，而媒體查詢有助於定位移動和平板設備。 我一直在尋找978 Grid System來格式化我正在開發的一些網站。 它有幾個設備的網格，但我的一部分認為它對於我想做的事情來說可能有點太笨重了。

Answer 4

我認為流式布局是最好的，因為它們是最跨平台的並且非常容易實現。 我在我制作的每個網站上都使用它們。

Answer 5

即使在平板設備中，屏幕尺寸和屏幕分辨率的差異也可能需要不同的 fonts 尺寸和鏈接間距，以確保字體的易讀性和鏈接的准確可觸性。 在 10 英寸 iPad 上清晰呈現的頁面可能難以閱讀，並且在 7 英寸平板電腦上使用起來很笨拙。 7 英寸平板電腦可能會讓您覺得自己的手指就像史萊克一樣。最近，當我使用 7 英寸平板電腦查看經過修改以在 iPad 上運行良好的網站時，這發生在我身上。 在 7 英寸平板電腦上閱讀太小，您並不總是希望您的 7 英寸平板電腦用戶捏拉縮放，以便他們可以閱讀您的頁面並與之交互。 您必須確定目標屏幕的大小並針對該外形尺寸采用適當的 CSS 樣式，並且您可能還需要減少內容量和/或為更小和最小的外形尺寸提供替代導航模式。 可能需要動態提供特定於外形尺寸的內容，或者使用 CSS 對內容可見性進行高度精細的控制。

我會從具有“通風”外觀的頁面開始——避免內容過多且過於“忙碌”的頁面。