你很有可能已經(jīng)看到了智能手機(jī)是如何展示網(wǎng)站的。它可以一目了然地向您顯示整個網(wǎng)頁,或者放大以使您感興趣的文本具有可讀性。從某種意義上說,由于iPhone使用Safari,網(wǎng)頁設(shè)計(jì)人員不應(yīng)該做任何特別的事情來創(chuàng)建一個可以在iPhone上運(yùn)行的網(wǎng)頁。但是,你真的希望你的頁面只是工作-還是脫穎而出?當(dāng)你建立一個網(wǎng)頁,你需要考慮誰將會看到它,以及他們將如何查看它。一些最好的站點(diǎn)會考慮頁面所使用的設(shè)備類型,包括分辨率、顏色選項(xiàng)和可用的功能。移動端
網(wǎng)站建設(shè)需要特別注意的一些準(zhǔn)則,因?yàn)樗麄儾荒軆H僅依靠設(shè)備來解決問題。
建立移動設(shè)備站點(diǎn)的一般準(zhǔn)則
盡可能多地測試設(shè)備。您應(yīng)該做的第一件事是在iPhone和盡可能多的不同移動設(shè)備或模擬器上查看您的站點(diǎn)。雖然您可以在所有測試中使用模擬器,但它們給人的感覺與在小屏幕上瀏覽網(wǎng)站時(shí)的感覺不同。您應(yīng)該盡可能多地在實(shí)際設(shè)備上進(jìn)行測試。
使您的頁面優(yōu)雅地降級。您可以為啟用Flash的寬屏瀏覽器編寫頁面,但請確保關(guān)鍵信息即使在無法處理任何特殊功能(如cookie、Ajax、Flash、JavaScript等)的微型顯示器中也可見。任何超越XHTML Basic的東西都將超越一些手機(jī)。雖然大多數(shù)智能手機(jī)可以處理所有這些事情,但其他移動設(shè)備不能。
構(gòu)建特定于無線的頁面,并使其易于查找。如果你想為你的手機(jī)和無線用戶建立一個特定的頁面-讓它可用。一種很好的方法是將鏈接放在文檔頂部的無線頁面上,然后使用手持媒體類型對非手持設(shè)備隱藏該鏈接。畢竟,大多數(shù)人都會訪問你的主頁,即使是在手機(jī)上-如果你的無線頁面鏈接不在那里,如果這個頁面太難使用,他們就會離開。
移動端網(wǎng)頁布局
在為智能手機(jī)市場撰寫頁面時(shí),你應(yīng)該記住的第一件事是,如果你不想做任何改變,你就不必做任何改變。大多數(shù)智能手機(jī)最棒的地方在于,它們使用Webkit瀏覽器(iOS上的Safari和Android上的Chrome)來顯示網(wǎng)頁,所以如果你的頁面在Safari或Chrome中看起來不錯,那么它在大多數(shù)智能手機(jī)上都會很好(只是小得多)。但是你可以做一些事情讓你的瀏覽體驗(yàn)更愉快:
記住屏幕很小。智能手機(jī)會將所有這些列壓縮到小窗口中,這會使它們在不縮放的情況下很難閱讀。大多數(shù)用戶習(xí)慣于縮放,但它可能會讓人感到厭煩,一長列文本更容易閱讀。
將頁面分成更小的塊,在手機(jī)上閱讀很長的文本片段是很困難的,所以把它們放在多個頁面上會讓它們更容易閱讀。
iPhone上的鏈接和導(dǎo)航
URL越短越好。如果你曾經(jīng)嘗試在手機(jī)上輸入U(xiǎn)RL,你就會知道這是一種痛苦(除了那些習(xí)慣于發(fā)送大量短信的青少年)。即使在iPhone上,輸入長URL也很乏味。把它們剪短。
但是長鏈接文本更容易點(diǎn)擊。當(dāng)一個頁面上有幾個單獨(dú)的單詞鏈接到不同的文章時(shí),如果沒有縮放,就很難點(diǎn)擊正確的單詞。很多人會放棄去別的地方。帶有3到5個單詞的鏈接比1個單詞的鏈接更容易在電話上單擊。
不要把你的導(dǎo)航放在屏幕的最上面。沒有什么比在屏幕和鏈接屏幕上翻頁來找到你想要的信息更煩人的了。如果你看過為手機(jī)設(shè)計(jì)的網(wǎng)頁,你會發(fā)現(xiàn)首先出現(xiàn)的是內(nèi)容和標(biāo)題。下面是導(dǎo)航。不要害怕隱藏你的導(dǎo)航。使用CSS或JavaScript隱藏導(dǎo)航鏈接,并僅在用戶要求時(shí)才顯示這些鏈接,這是使智能手機(jī)用戶更容易訪問頁面的一種方法。
智能手機(jī)網(wǎng)頁圖像提示
圖像必須很小。是的,Android和iPhone可以放大和縮小圖片,但無論是在尺寸上還是下載時(shí)間上,它們都越小,你的無線用戶就會越開心。優(yōu)化圖片一直是個好主意,但對于手機(jī)頁面來說,這一點(diǎn)至關(guān)重要。
圖像必須快速下載。當(dāng)您在移動設(shè)備上查看圖像時(shí),這些圖像占用了網(wǎng)頁上的大量空間。而且,雖然它們通常非常漂亮,在全屏Web瀏覽器上查看時(shí)會使頁面看起來更好,但在移動設(shè)備上它們往往會妨礙頁面的瀏覽。此外,當(dāng)智能手機(jī)用戶在手機(jī)網(wǎng)絡(luò)上時(shí),他們最不愿意花錢的事情就是下載一堆巨大的圖片或?qū)Ш綀D標(biāo)。
不要把大的圖片放在頁面的頂部。就像導(dǎo)航一樣,等待一個需要3到4個屏幕的圖片加載到頁面頂部是非常乏味的。這在網(wǎng)頁上是非常普遍的。唯一例外的是,如果讀者知道,當(dāng)他們點(diǎn)擊時(shí),他們將得到一張圖片,例如在圖片庫。
為移動設(shè)備設(shè)計(jì)時(shí)應(yīng)避免的事項(xiàng)。在構(gòu)建一個移動友好的頁面時(shí),有幾件事是你應(yīng)該避免的,這些基本原則是:
- Flash:大多數(shù)移動電話不支持Flash,因此將其包含在無線頁面上并不是一個好主意。
- Cookie:許多手機(jī)沒有Cookie支持。iPhone確實(shí)支持Cookie。
- 框架:即使瀏覽器支持框架,也要考慮屏幕的尺寸??蚣懿荒茉谝苿釉O(shè)備上工作-它們很難或不可能讀懂。
- 表格:不要在移動頁面上使用表格進(jìn)行布局。盡量避開餐桌。并不是所有的手機(jī)都支持它們(盡管iPhone和其他智能手機(jī)都支持它們),結(jié)果可能會很奇怪。
- 嵌套表:如果必須使用表,請確保不要將其嵌套在另一個表中。對于桌面瀏覽器來說,這些都是很難支持的,而且充其量也只能使頁面加載得更慢。
- 絕對度量:換句話說,不以絕對大小(如像素、毫米或英寸)定義對象的尺寸。如果您定義的東西為100px寬,那么在一個可能是屏幕一半的移動設(shè)備上,而在另一個移動設(shè)備上,它可能是屏幕寬度的兩倍。相對大小(如EMS和百分比)效果最好。
分享標(biāo)題:移動端網(wǎng)站建設(shè)需要特別注意的一些準(zhǔn)則
新聞來源:http://m.rwnh.cn/news21/155321.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)