響應(yīng)式設(shè)計：基礎(chǔ)實踐

網(wǎng)頁設(shè)計師似乎已經(jīng)有了一個共識，就是為大量設(shè)備建立不同的網(wǎng)站幾乎是不可能的。響應(yīng)式網(wǎng)站是未來的趨勢，除非這個移動設(shè)備需要一些非常具體的功能或完全不同的內(nèi)容值得開發(fā)。

你可能已經(jīng)知道響應(yīng)設(shè)計，移動第一方針，和得體的退化。這些都是建立廣泛可訪問站點和網(wǎng)絡(luò)應(yīng)用程序的主要工具和技術(shù)。在這篇文章中，我將集中著重討論移動設(shè)計方面和一些亮點技術(shù)，從而能改善您的桌面站點。移動第一并不意味著，你應(yīng)該開始從320px屏幕寬度的向上延伸擴展。更多考慮的是從工作流程中所有可能的使用情況。

簡單

即使在一個很小的屏幕，一個簡單而整潔的布局，也能確保用戶得到最好的體驗。但是你只有這一種方法為手持設(shè)備的用戶考慮嗎？一旦你創(chuàng)建了一個偉大的無障礙和良好的流動性的移動網(wǎng)站，再回頭看看對比下你的桌面版本。不要忘了觸摸和鼠標是完全不同的性質(zhì)。不要讓您的桌面用戶僅僅因為需要在兩個菜單項之間移動200px而扭傷了手腕。媒體查詢是你的朋友。

放棄它，隱藏它

因此你應(yīng)該決定要花費比別人更多的代價為這些看似不太重要的體驗上建立一個移動網(wǎng)站。最好的做法就是擺脫他們，不僅僅是為了節(jié)省一些像素和提供更好的用戶體驗?，F(xiàn)在問你自己，有必要把桌面版本上的東西全部展現(xiàn)出來嗎？那樣可能讓用戶感到迷惑或分心？也許這些選項應(yīng)該是為高級用戶而設(shè)計為隱藏在子菜單？也許用戶會體會到只有4個主菜單，而不是6個主菜單項？

桌面瀏覽器的響應(yīng)

對于我而言，尤其是當多任務(wù)時，更喜歡頻繁的調(diào)瀏覽器窗口大小。有時，你不能浪費時間在某一個站點上，使用媒體查詢創(chuàng)建網(wǎng)頁時，要把桌面用戶考慮在內(nèi)。如果讓我重新調(diào)整站點來適應(yīng)視頻或圖像，我想，我不是唯一一個會發(fā)瘋的。所以，請開始使用響應(yīng)媒體，這么做會給站點帶來更多變化。

方位

方位是一個基于當前正在縱向或橫向位置看設(shè)備的規(guī)范。通過媒體查詢，你可以在不同方位分配不同的布局。一些桌面瀏覽器是“偽造”的方向，根據(jù)窗口的寬度和高度的比例。這使您可以添加一些很好的調(diào)整，以增強用戶體驗。

輸入類型

HTML5有一些新特性能幫助移動用戶填寫表格。例如：如果你添加類型為email的字段，它會告訴移動瀏覽器提供像“@”字符或“.com”擴展性的電子郵件地址。請記住，它也有助于桌面用戶。他們將得到他們以前使用的電子郵件地址提供的一個下拉菜單，甚至根據(jù)他們以前使用的細節(jié)，自動填充整體表格。

少的導(dǎo)航，更好的用戶預(yù)測

在移動設(shè)備上瀏覽，如果我有從主頁丟失了印象深刻的幾個鏈接，我會很惱火并感到失落。我會問自己：我在正確的地方嗎？我應(yīng)該回去并開始了嗎？這是不應(yīng)該出現(xiàn)的，用完整的URL欄和臃腫的文字描述當切換標簽對于移動用戶來說是不明智的。

滾動似乎比通過瀏覽菜單項更適合觸摸屏用戶。在可能的情況下，避免創(chuàng)建一個復(fù)雜的網(wǎng)站結(jié)構(gòu)，不要試圖預(yù)測用戶可能尋找并嘗試相關(guān)的菜單或命令。

擁抱新標準

沒有通過不必要的“哦，閃光，為什么”的辯論，我只是建議你讓您的網(wǎng)站面向未來，盡可能地利用新興的標準。CSS3的過渡和其他花哨的視覺效果，先進的互動HTML5的。這似乎是以后要走的，除了一些過時的標簽，W3C已經(jīng)支持相當一部分新特性了，所以我認為從長遠看來這是一個不錯的選擇。

正如你看到的我沒討論過多的技術(shù)細節(jié)，但我一般都認為，擁有這方面技術(shù)的眼光會讓你更加節(jié)省開發(fā)時間。要考慮跨平臺而不僅僅為移動設(shè)備。讓您手持設(shè)備和桌面站點在某個內(nèi)容上的行為更加接近。

原文：http://buildmobile.com/7-things-your-desktop-envies-from-your-mobile-site/