隨著智能手機(jī)逐步普及，手機(jī)網(wǎng)站所占比重逐年上升。因此在網(wǎng)站建設(shè)時(shí)，手機(jī)網(wǎng)站的布局成了一個(gè)重頭戲。下面我們說(shuō)說(shuō)手機(jī)網(wǎng)站建設(shè)注意細(xì)節(jié)攻略.

布局
我們一起來(lái)看看不同元素在布局中的使用情況：
(1) 標(biāo)志
標(biāo)志是布局的核心之一。標(biāo)志要盡可能做到引人注目，但與此同時(shí)，應(yīng)注意它的尺寸，并確保它的大小不會(huì)超過(guò)2KBs。因?yàn)?，移?dòng)網(wǎng)絡(luò)載入圖片通常要花很長(zhǎng)時(shí)間，你也不想因?yàn)閭€(gè)體差異而使得自己的網(wǎng)站載入不完全。
(2)? 網(wǎng)站導(dǎo)航
導(dǎo)航是設(shè)計(jì)中最重要的事之一。不管怎樣，你都需要導(dǎo)航欄來(lái)鏈接到網(wǎng)站的各個(gè)位置，它的位置通常在網(wǎng)站頂部。你也明白，大多數(shù)移動(dòng)設(shè)備根本不便于使用QWERTY實(shí)體或虛擬鍵盤(pán)。因此，為網(wǎng)站創(chuàng)建導(dǎo)航是移動(dòng)網(wǎng)站界面友好的一個(gè)關(guān)鍵環(huán)節(jié)。
(3)?內(nèi)容
內(nèi)容在移動(dòng)網(wǎng)站中占據(jù)著核心位置。人們用移動(dòng)設(shè)備訪(fǎng)問(wèn)網(wǎng)站，最主要的目的就是為了獲取內(nèi)容信息。所以要確保你的移動(dòng)網(wǎng)站的內(nèi)容不會(huì)有任何改變，否則，你最終可能將面對(duì)用戶(hù)流失。
人們使用移動(dòng)設(shè)備時(shí)，通常處于移動(dòng)狀態(tài)，所以他們沒(méi)有太多時(shí)間來(lái)瀏覽網(wǎng)站內(nèi)容。為此，你應(yīng)該采取縮減內(nèi)容的措施，并選取內(nèi)容中有價(jià)值的部分，與此同時(shí)，你要將完整內(nèi)容的鏈接提供給用戶(hù)。如果你的個(gè)人博客處于活躍狀態(tài)，你可以忽略這個(gè)問(wèn)題，因?yàn)椋悴粫?huì)每天都去對(duì)每篇博文的內(nèi)容進(jìn)行縮減。
我們都明白圖片在內(nèi)容中的重要性。但是移動(dòng)網(wǎng)站不宜使用過(guò)多圖片，因?yàn)?，大部分手機(jī)載入這些圖片要花很長(zhǎng)時(shí)間，所以盡可能地少用，如若上下文中涉及到相關(guān)圖片時(shí)，圖片則不可少。
如果你希望在移動(dòng)網(wǎng)站上添加圖片，最好使用占用空間小的.JPEG，.GIF，.PNG等圖片格式。為了避免用戶(hù)對(duì)圖片進(jìn)行縮放，一定要對(duì)圖片進(jìn)行壓縮?，F(xiàn)在幾乎所有的設(shè)備都能顯示圖片，但是，有些用戶(hù)可能在瀏覽時(shí)會(huì)關(guān)閉圖片顯示。因此，推薦大家用ALT替換文本顯示圖片信息。一些讀者或訪(fǎng)問(wèn)者會(huì)放大圖片，為了避免這種情況，圖片的尺寸必須固定。
(4)?頁(yè)腳：
老話(huà)說(shuō)得好：“看男人不能只看它的衣服，要看它的鞋”。許多網(wǎng)站的頁(yè)腳做得非常爛。我經(jīng)常逛博客和營(yíng)銷(xiāo)網(wǎng)站，看到頁(yè)腳放慢了雜亂的超鏈接，我跟大多數(shù)人對(duì)此都非常厭惡，再加之，移動(dòng)網(wǎng)站的屏幕尺寸小，這就可能造成客戶(hù)或讀者流失。所以，制作吸引人的頁(yè)腳非常有必要。

所以，如果你希望你的應(yīng)用程序/網(wǎng)站的移動(dòng)界面大獲全勝，你就應(yīng)該把重心放在布局上面，做到零錯(cuò)誤，因?yàn)橛靡苿?dòng)設(shè)備進(jìn)行網(wǎng)頁(yè)瀏覽將會(huì)是未來(lái)發(fā)展的大趨勢(shì)。

代碼設(shè)計(jì)
很多開(kāi)發(fā)新人在寫(xiě)移動(dòng)界面代碼時(shí)一直很猶豫，下面的建議有助于你打消這些考疑慮：
(1)?有效代碼
使用合適的代碼，確保其100%有效，因?yàn)榇蟛糠忠苿?dòng)瀏覽器達(dá)不到電腦端的瀏覽器性能。
(2)流動(dòng)布局：
在所有移動(dòng)瀏覽器上查看布局效果，這往往是不現(xiàn)實(shí)的，因?yàn)橛脕?lái)瀏覽網(wǎng)頁(yè)的移動(dòng)設(shè)備太多，逐一去追蹤效果讓人很頭疼。流動(dòng)布局可以很好解決或避開(kāi)這個(gè)問(wèn)題，它可以根據(jù)屏幕尺寸自動(dòng)調(diào)整。
(3) 具體的樣式表
你可隨時(shí)使用各種移動(dòng)設(shè)備找出更好的用戶(hù)體驗(yàn)。比如，使用手持設(shè)備瀏覽你的網(wǎng)站的用戶(hù)。
(4)拒絕使用花哨的腳本
你的移動(dòng)網(wǎng)站想要成功，不要使用Javascript腳本，F(xiàn)lash動(dòng)畫(huà)或其它任何花哨的腳本語(yǔ)言。因?yàn)榇蠖鄶?shù)移動(dòng)設(shè)備無(wú)法解析這些腳本語(yǔ)言，最終，要么設(shè)備死機(jī)，要么出亂子。
如果你非用不可的話(huà)，那么就應(yīng)該給出友情提示，告知用戶(hù)他們的移動(dòng)設(shè)備正在載入和啟用這些腳本。如果出了差錯(cuò)，也錯(cuò)不在你，因?yàn)槟闶孪纫呀?jīng)提醒了他們。
(5)小心插入廣告
這一點(diǎn)應(yīng)該引起大家的重視，不要讓你的移動(dòng)網(wǎng)頁(yè)鋪天蓋地都是廣告，PC端的網(wǎng)站同樣也應(yīng)該注意這個(gè)問(wèn)題。
俗話(huà)說(shuō)得好：“一顆耗子屎攪壞一鍋湯”。這對(duì)許多網(wǎng)站而言，倒是大實(shí)話(huà)。因?yàn)樵S多網(wǎng)站都是廣告滿(mǎn)天飛，他們根本不關(guān)心用戶(hù)體驗(yàn)，一個(gè)個(gè)都唯利是圖。因?yàn)橐苿?dòng)設(shè)備的CPM（每千人瀏覽頁(yè)面的費(fèi)用）很高。
所以我建議，不要讓網(wǎng)站淹沒(méi)在廣告里，尤其不要插入那些五顏六色的廣告。
(6)自動(dòng)識(shí)別移動(dòng)瀏覽器
為了成功打響你的招牌，你應(yīng)該在服務(wù)器端納入“移動(dòng)瀏覽器偵測(cè)和重定向”服務(wù)的腳本（比如說(shuō)PHP）。你可能用得著User Agent偵測(cè)服務(wù)，服務(wù)器會(huì)根據(jù)當(dāng)前瀏覽器所描述的信息來(lái)判定它應(yīng)該訪(fǎng)問(wèn)移動(dòng)還網(wǎng)頁(yè)還是原網(wǎng)頁(yè)。你可以用User Agent 偵測(cè)替代前面提到的“PHP移動(dòng)瀏覽器偵測(cè)”。再介紹另一例實(shí)現(xiàn)辦法，通過(guò)實(shí)時(shí)的JavaScript腳本語(yǔ)言，請(qǐng)求存儲(chǔ)了設(shè)備相關(guān)信息的DeviceAltlas或WURFL數(shù)據(jù)庫(kù)，進(jìn)行瀏覽器判定。
(7)可開(kāi)發(fā)專(zhuān)門(mén)的客戶(hù)端程序
如果你的用戶(hù)群體數(shù)量非常高，可以為此開(kāi)發(fā)一款針對(duì)多種移動(dòng)界面的應(yīng)用程序。Facebook、Gmail、Twitter、Yahoo以及許多大公司都有自己的客戶(hù)端應(yīng)用程序，這也是他們?nèi)绱顺晒Φ脑?。如果你有了自己的客?hù)端程序，就不必再擔(dān)心那些花哨的腳本語(yǔ)言了，因?yàn)槟憧梢园凑兆约旱姆绞教嵘绦蛐阅堋?br>

• 上一篇：seo優(yōu)化過(guò)度有哪些方面的體現(xiàn)
• 下一篇：簡(jiǎn)約型網(wǎng)站是如何制作的？