爲移動瀏覽器設計網頁的提示？

Question

我在設計專門針對移動瀏覽器的網絡應用程序時首次亮相。雖然我之前在C＃/ ASP.NET中編寫過網頁，但我從來沒有專門針對有限的屏幕空間和移動瀏覽器的其他特性做任何事情。所以我在這裏尋找一些指針：

• 我應該考慮哪些設計考慮因素（除了明顯更小的屏幕）？
• C＃中有哪些有用的功能可以爲移動客戶端帶來良好效果？
• 您如何確保爲所有不同的移動瀏覽器提供相對統一的用戶體驗？
• 您有其他建議嗎？

謝謝！

Answer 1

我應該考慮哪些設計考慮因素 （除了 明顯更小的屏幕）？

用戶交互如何，例如，允許「懸停」的設備很少，因此不依賴於無法在移動設備上模擬的僞類，但不會完全忽略它們，所以移動設備可以使用它們。

如果設備支持橫向和橫向查看，請考慮設計的方向。

使用觸控筆無法使用iPhone等一些設備以毫米級的精度操作，因此請勿使輸入危險地變小。

如果使用效果撻了UI，大多數移動設備不顯示效果（如的jQuery提供的）非常好...

最後測試，測試，再測試！在儘可能多的真實移動設備上進行測試，並且在完成後考慮使用仿真器（例如BlackBerrys或iPhone），但這不會爲您提供使用設備的感覺，它應該顯示任何渲染問題。

Answer 2

可能很明顯，但請確保您定義了一個定製的手持樣式表。

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" /> 

雖然現代智能手機（如iPhone）可以處理普通網站的不斷放大和縮小是更好地避免了專門的移動應用程序。但是，如果用戶想要使用筆記本電腦/臺式機訪問應用程序，則需要設計兩個版本。

Answer 3

製作良好的移動設備體驗主要是關於用戶界面，而不是後端應用程序。

• 使用移動設備的樣式表（media="handheld"屬性上link - 元素）
• 儘可能少的HTTP的請求儘可能：
  • 壓縮所有的腳本和樣式到一個單一的文件（一個用於.js，一個用於。的CSS，這是）
  • 儘可能少的圖像儘可能
• 記住觸摸設備和非觸摸設備之間的差異（按鈕的尺寸，例如）
• 小心處理的內容量你適合一個頁面。

Answer 4

不要重定向到移動版本的網站，失去預期的目標。如果我想查看網站上的文章，請不要將我帶到移動主頁。您可以帶我到文章的移動視圖，但完全劫持我的目標是不可接受的。

一定CR *** ed.com這是否始終這是令人難以置信的真氣....

Answer 5

壓縮，縮小文件，優化有兩個原因。帶寬不是很好，在桌面上幾秒鐘加載的頁面可能需要30秒以上的移動設備。移動設備上的緩存功能非常差。一個例子是iPhone不會緩存25k以上的網站組件。所以讓你的圖片，腳本，樣式表儘可能小。

Answer 6

你應該檢查出WURFL這基本上是一個巨大的XML文件，可以幫助您識別設備。您可以獲取用戶代理並使用其API訪問該文件，以獲取該設備的所有功能和功能。我曾在衆多項目中使用過它，取得了巨大的成功。