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