DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 移動浏覽功能網站:最流行且對可用性產生巨大影響
移動浏覽功能網站:最流行且對可用性產生巨大影響
編輯:關於網頁技巧     

目前,移動浏覽功能不斷普及提高,開始優化你的網站以更好地適應移動平台和它的局限性將是你的第一要務。有很多簡單的方法可以提高你的移動浏覽網站,同時又不過多的改動你的網站,本文探討其中最流行且可以對可用性產生巨大的影響的8個。

流式布局


讓您的網站液體寬度布局是使您的網站的朝著對移動設備友好的重要一步。它不僅摒棄了你的網站周圍的多余的死空間,他還可以使之在許多不同平台和分辨率下查看。那麼究竟流體寬度是什麼意思呢?

流體寬度,顧名思義,就是您的網站可以根據浏覽器的大小伸展活著縮放寬度。它實施的容易程度取決於您的當前設置和布局。如果你有一個簡單易用的布局,修改變CSS樣式表中的寬度屬性為以百分比來達到其效果是你唯一要做的。
沒有雜亂的廣告

雜亂的廣告是移動平台上的重大問題上,即使網頁原本的布局沒有被破壞,最終用戶看到的廣告可能比內容還多。有一個簡單的修補程序來隱藏這混亂的現象而不必創建一個特定版本的移動網站。你也可以創建針對手持設備的css樣式表,通過判斷終端的分辨率大小來調用。

無論你使用一個,你應該永遠記住,大多數手持移動設備有實際情況的限制,這意味著屏幕尺寸只能容納很少一些東西,這極少的東西就是訪問您網站的用戶希望看到的那部分內容。

集中的內容

集中你的內容是因為這是移動設備的用戶立即看到關鍵。很多針對移動設備的網站的往往會粘在了很多不必要的混亂的東西,例如圖像或廣告,但由於網站管理員必須了解,展示訪問者最關心的內容才是重點。

如果用戶是從手機訪問您的網站並沒有連接到有線網絡上,帶寬受到一定的限制,這意味著用戶將選擇他或她想要訪問的網站,而不是他們的訪問那些在桌面上的網站。
這意味著,你需要確保你的網站在利用手機浏覽占用少量的帶寬,這意味著圖像應該是有限的,並且文字內容應為重點。假使您的網站是內容是基於圖像的呢?
如果你的網站主要是基於圖象,你的第一要務是建立一個獨立的移動網站,針對移動平台進行優化——通過降低圖像的大小和高度壓縮。一種替代方法是創造適用,允許第三方應用程序的移動設備的移動應用(app),這對為您的用戶來說可能是一個有用的工具。

跨平台的友好鏈接鏈接和效果

隨著新的網絡工具和影響繼續擴大,很難沒有漂亮的懸停提示或下拉導航或甚至一個鏈接通過JavaScript彈出的小窗來展示信息。然而,對移動設備的用戶來說,這些效果和工具可能無法在他們的平台使用,這就帶來了許多無用的鏈接和工具。一個簡單的解決辦法,就是始終為不能查看或使用他們的用戶提供替代方案。
一些移動設備允許Javascript,但在你的網站無論如何都不能使用你原有的效果,所以最好的辦法是檢測連接到您的網站的平台類型,禁用或改變某些類型的工具和效果一遍適應得更好。

保持您的網頁簡短,結構緊湊

用於移動設備的長頁面肯定是一個巨大的倒退,因為加載頁面需要花費大量的時間。因此,保持你的網頁簡短、結構緊湊可以使你的網站跨平台可訪問——即使在一台網速極低的設備上。因為,用戶最不願意做的事情是等待網頁加載,而不是花時間浏覽網站。
徹底的導航

眾所周知,由於其鍵盤或虛擬鍵盤用起來一點也不方便,輸入在大多數移動設備就實實在在成為一種痛苦。因此,為您的網站建立一個徹底的導航是一個關鍵環節,它可以使您的網站的移動體驗更加友好。如果您提供的大量的內容,你需要確保用戶可以通過浏覽找到他們而不必用使用搜索引擎。如果你不能在不適用搜索的情況下找到到你網站的某些部分,很有可能用戶也不能。

醒目而清晰的內容

今天,許多新的移動設備是觸摸屏,這意味著用戶將可以使用他們的手指來導航他們的設備和您的網站。如果您的網站的內容和鏈接不夠醒目,不夠清楚,通過你的網站導航將是一個痛苦。
要防止這種情況很容易,試著去消除那些分散在文章或段落的鏈接,因為它們被純文本包圍而難以點擊或按住。相反,把這些鏈接放置到文本主題的上方或下方,同時保證他們足夠大,用戶就可以沒有困擾的用手指點擊它們。

簡短且易記的鏈接

這是另一種輸入相關的問題,如果用戶要輸入一個長URL才能到你的網站,很有可能他們不會這樣做。如前所述,使用鍵盤或虛擬的鍵盤打字不適合長文本塊,所以一定要確保你的網站有一個簡短易記的域名。此外,在您的網站盡量避開輸入工作也是理想的,因為通常他們通過快速指引或參考信息訪問您的網站。

原文(英文)鏈接:

http://designreviver.com/tips/8-ways-to-make-your-website-mobile-friendly/

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved