本世紀(jì)來(lái)最便捷于用戶的方式無(wú)疑于移動(dòng)設(shè)備網(wǎng)站的開(kāi)辟，如手機(jī)網(wǎng)站。移動(dòng)端網(wǎng)站開(kāi)發(fā)以來(lái)獲得了用戶群體的廣為關(guān)注，因?yàn)樗谋憬莺蛯?shí)用。同樣的，對(duì)于手機(jī)網(wǎng)站的建設(shè)也成為技術(shù)領(lǐng)域開(kāi)始了新的辯論。怎樣的移動(dòng)端網(wǎng)站才是用戶喜歡的的網(wǎng)站呢？是雷同于PC端的響應(yīng)式設(shè)計(jì)嗎？今天筆者小丹和大家分享該文章就大家一起解密移動(dòng)時(shí)代的優(yōu)化網(wǎng)站。

    首先對(duì)于谷歌來(lái)講，它提倡創(chuàng)建響應(yīng)web設(shè)計(jì)支持創(chuàng)建專用的手機(jī)網(wǎng)站。第三種選擇也越來(lái)越流行web服務(wù)器呈現(xiàn)適當(dāng)?shù)腍TML和CSS從相同的URL這取決于設(shè)備一個(gè)網(wǎng)頁(yè)在網(wǎng)站上被要求，這被稱為響應(yīng)設(shè)計(jì)+服務(wù)器端組件。

    本文將討論這些方法，現(xiàn)實(shí)世界的例子網(wǎng)站使用一個(gè)特定的方法提供了在每個(gè)部分，移動(dòng)設(shè)備用于測(cè)試和收集數(shù)據(jù)的例子是使用iOS 5.0 iPhone 4。

    響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（RWD）

    響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)通常使用CSS3媒體查詢來(lái)調(diào)整一個(gè)web頁(yè)面的布局是基于用戶的查看區(qū)域的大小。你使用相同的HTML顯示不同網(wǎng)頁(yè)布局臺(tái)式機(jī)、平板電腦、移動(dòng)設(shè)備、電視等。

    響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)點(diǎn)

    內(nèi)容校驗(yàn)：你的網(wǎng)站包含相同的內(nèi)容和HTML標(biāo)記不管所使用的設(shè)備，為用戶提供一個(gè)類似的經(jīng)驗(yàn)。這將增加的重要性隨著越來(lái)越多的人依靠他們的智能手機(jī)上網(wǎng)的主要方式。一個(gè)網(wǎng)頁(yè)的網(wǎng)址：這使它更容易共享和鏈接到你的內(nèi)容，他們不需要重定向讓設(shè)備優(yōu)化視圖與專用的手機(jī)網(wǎng)站相比。

    響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的缺點(diǎn)

    內(nèi)容不會(huì)完全為移動(dòng)設(shè)備優(yōu)化：除非你使用一個(gè)移動(dòng)先行的方法，您的web頁(yè)面將包含相同的信息作為它的桌面。將一個(gè)單獨(dú)的手機(jī)網(wǎng)站，你可以定制web頁(yè)面的內(nèi)容只是為了移動(dòng)用戶。慢的性能：一般的web頁(yè)面今天是大約1.3 MB據(jù)2013年1月的數(shù)據(jù)從HTTP存檔?？梢苑乐共槐匾南螺d使用RWD時(shí)，但在實(shí)踐中大多數(shù)響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站是相同或更大的規(guī)模。86%的網(wǎng)站測(cè)試手機(jī)性能研究的家伙Podjarny相同或更大的規(guī)模，在報(bào)道演講關(guān)于移動(dòng)站點(diǎn)的性能。它可以更加困難，導(dǎo)航網(wǎng)站：移動(dòng)用戶通常比桌面用戶想要執(zhí)行不同的任務(wù)。他們也可能更習(xí)慣推出用戶界面設(shè)計(jì)模式。除非你為每個(gè)設(shè)備定制導(dǎo)航結(jié)構(gòu)，可能存在可用性問(wèn)題。

    專用的手機(jī)網(wǎng)站

    一些網(wǎng)站優(yōu)化的經(jīng)驗(yàn)移動(dòng)設(shè)備用戶通過(guò)創(chuàng)建一個(gè)單獨(dú)的手機(jī)網(wǎng)站，最常見(jiàn)的實(shí)現(xiàn)桌面網(wǎng)站重定向到子域。

    一個(gè)專門(mén)的移動(dòng)網(wǎng)站的優(yōu)勢(shì)。容易單獨(dú)改變移動(dòng)和桌面網(wǎng)站：改變只能局限于手機(jī)版或桌面版。更快的加載時(shí)間：因?yàn)槟阏陂_(kāi)發(fā)移動(dòng)網(wǎng)站，只有你可以簡(jiǎn)化和優(yōu)化你的手機(jī)網(wǎng)站專門(mén)為移動(dòng)用戶體驗(yàn)。更容易導(dǎo)航：的導(dǎo)航結(jié)構(gòu)和內(nèi)容定制的任務(wù)由移動(dòng)用戶。

    一個(gè)專門(mén)的移動(dòng)網(wǎng)站的缺點(diǎn)。每個(gè)頁(yè)面的多個(gè)網(wǎng)址：共享一個(gè)網(wǎng)頁(yè)在社交媒體成為一個(gè)問(wèn)題，因?yàn)槭謾C(jī)用戶將分享移動(dòng)的URL，但桌面用戶可以點(diǎn)擊鏈接和手機(jī)版。為了防止重復(fù)內(nèi)容搜索引擎優(yōu)化問(wèn)題，您將需要使用 rel="alternative"和rel="canonical"meta標(biāo)記。同樣，當(dāng)移動(dòng)用戶在谷歌搜索和點(diǎn)擊桌面URL在搜索引擎的結(jié)果，他們會(huì)看到桌面版或被重定向到移動(dòng)版本的頁(yè)面。如果移動(dòng)版本的這個(gè)頁(yè)面不存在他們會(huì)得到一個(gè)錯(cuò)誤。

    不同的內(nèi)容和功能：創(chuàng)建一個(gè)專門(mén)的手機(jī)網(wǎng)站的目的是為手機(jī)用戶特別定制的網(wǎng)站。這可能意味著切割出的內(nèi)容和功能從而在一個(gè)不同的體驗(yàn)。內(nèi)容分支：你有兩個(gè)不同的內(nèi)容，這將創(chuàng)建一個(gè)內(nèi)容策略噩夢(mèng)。需要重定向：移動(dòng)用戶需要重定向到優(yōu)化的觀點(diǎn)，反之亦然。重定向會(huì)增加頁(yè)面的加載時(shí)間，它也可以影響你的網(wǎng)站的搜索引擎優(yōu)化。

    不同的HTML和CSS從相同的URL

    該方法創(chuàng)建一個(gè)慣于使用手機(jī)網(wǎng)站使用服務(wù)器端編程呈現(xiàn)自定義CSS和HTML為不同的設(shè)備。手機(jī)用戶將獲得一組代碼，而桌面用戶將獲得一組不同的代碼。這的主要目的是實(shí)現(xiàn)提高網(wǎng)站性能。該方法結(jié)合響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)時(shí)效果最好，這個(gè)實(shí)現(xiàn)被稱為響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)+服務(wù)器端組件。當(dāng)使用這種方法時(shí)，是很重要的包括不同的HTTP，這樣機(jī)器人爬行的桌面和移動(dòng)版本。

    在理論上，響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是最好的解決方案。但在實(shí)踐中大多數(shù)RWD網(wǎng)站沒(méi)有實(shí)現(xiàn)優(yōu)化，導(dǎo)致緩慢的加載時(shí)間。在測(cè)試中，有一個(gè)專用的手機(jī)網(wǎng)站導(dǎo)致最快的加載時(shí)間，但與此實(shí)現(xiàn)的重大缺點(diǎn)。

    我個(gè)人偏好是一個(gè)響應(yīng)相結(jié)合的網(wǎng)頁(yè)設(shè)計(jì)和不同的HTML從相同的URL。這提供了所有的RWD的優(yōu)點(diǎn)，同時(shí)克服了其兩個(gè)最大的缺點(diǎn)是多個(gè)文件下載和加載時(shí)間慢。

    (轉(zhuǎn)載請(qǐng)注明轉(zhuǎn)自：mjyil.cn/news/n1666.htm，謝謝!珍惜別人的勞動(dòng)成果，就是在尊重自己!）