移動(dòng)端網(wǎng)站如何做
seo優(yōu)化??下面由北京
網(wǎng)站設(shè)計(jì)公司商企云來和大家分享一下:
1、手機(jī)站定位和頁面設(shè)計(jì)
手機(jī)站和PC站除了頁面大小、展現(xiàn)形式不一樣之外,在分析用戶需求方面是都要做的。舉個(gè)例子,對(duì)于一個(gè)本地的裝修網(wǎng)站來講,PC站是重點(diǎn)展現(xiàn)裝修效果圖案例、裝修報(bào)價(jià)以及公司的裝修設(shè)計(jì)師風(fēng)采,那么手機(jī)站就應(yīng)該重點(diǎn)突出公司的聯(lián)系方式、地圖、電話等等。移動(dòng)端網(wǎng)站要的就是“及時(shí)、快速”。
同時(shí)考慮到營(yíng)銷型
網(wǎng)站建設(shè)的反應(yīng)速度,整體頁面最好用div+css的代碼來寫,不要為了圖個(gè)方便,用flash或者是js,這樣搜索引擎想要抓取都很困難。還有就是很多的手機(jī)瀏覽器比如UC,他本身是不支持flash播放的,你需要另外單獨(dú)安裝手機(jī)falsh,但是用戶哪有這么多時(shí)間去等待呢?
現(xiàn)在的很多智能手機(jī)都不支持java程序,所以網(wǎng)站最好用php開發(fā)。
2、手機(jī)站要做到簡(jiǎn)潔、大方
用戶在手機(jī)上瀏覽內(nèi)容,或者是屏幕大一些,在平板電腦上瀏覽,但是再大也沒有普通的電腦屏幕大,所以,手機(jī)站的頁面要更加的簡(jiǎn)潔,特別是對(duì)于那種有下載需求的網(wǎng)站,手機(jī)站上的下載按鈕要清晰的擺在用戶面前。如果你在手機(jī)上看過太原雅輝裝修公司的移動(dòng)站,就可以明顯的感受到,我設(shè)計(jì)導(dǎo)航的時(shí)候并沒有隱藏起來用下拉的方式展現(xiàn),而是平鋪在頁面上面,用戶一看就知道該點(diǎn)擊哪里能找到他想要的內(nèi)容。
還有就是內(nèi)容頁面不要太長(zhǎng),因?yàn)橛檬謾C(jī)瀏覽網(wǎng)站的用戶,時(shí)間都是非常緊迫的,有的還是在坐車的過程中看,流量以及網(wǎng)速是一個(gè)大問題,所以一個(gè)問題能用一句話一幅圖解決,就不要長(zhǎng)篇大論。
對(duì)于商城類手機(jī)站來說,除了要做到以上幾點(diǎn),在最重要的付款頁面一定要做到傻瓜式簡(jiǎn)單化,這個(gè)可以參考京東、淘寶來做,他們的付款頁面就做的非常不錯(cuò)。
3、手機(jī)站禁止使用彈窗(一定要禁止)
彈窗這種東西,在PC站上用戶已經(jīng)夠心煩的了,如果在手機(jī)或平板這么點(diǎn)的地方也弄個(gè)彈窗,用戶真的是很無語了:“讓我們進(jìn)來,但是卻不讓我們安心的看”。
4、用哪種web語言做手機(jī)站比較好?
這一點(diǎn)我在趙一鳴隨筆博客的移動(dòng)端
網(wǎng)站優(yōu)化教程中已經(jīng)講過了,詳細(xì)的分析了html4、html5做手機(jī)站的區(qū)別。在這里可以100%的告訴你,只要用戶體驗(yàn)好,用哪種語言都可以,不一定是html5,你看商企云
網(wǎng)站制作公司的手機(jī)站是html5嗎?
5、url路徑必須要規(guī)范化
做手機(jī)站,不要為了省那點(diǎn)空間費(fèi)用用欄目頁做,重新買個(gè)空間,用單獨(dú)的二級(jí)域名做手機(jī)站是最好的,m.xxx.com或者是wap.xxx.com這種形式。
6、PC站與手機(jī)站做開放式配
我的那個(gè)裝修網(wǎng)站手機(jī)站,上線之后只是針對(duì)性的更新了內(nèi)容,一個(gè)外鏈沒有,現(xiàn)在大多數(shù)主關(guān)鍵詞都排名在首頁,最重要的一個(gè)原因就是我的手機(jī)站做了開放式配。如果不知道該怎么做開放式配,可以看我博客的移動(dòng)端網(wǎng)站優(yōu)化板塊兒里的移動(dòng)端網(wǎng)站如何做開放式配一文,里邊是以視頻的形式展現(xiàn)的,一步一步教你怎么做開放式配。
7、其他小細(xì)節(jié)
關(guān)于robots、地圖、關(guān)鍵詞設(shè)置等這些問題,與PC站是一樣的,PC站怎么做,手機(jī)站就怎么做。手機(jī)站首頁的標(biāo)題可以只寫公司品牌詞,也可以和PC站的標(biāo)題一樣,這個(gè)無妨。
對(duì)于響應(yīng)式網(wǎng)站我們會(huì)談到移動(dòng)互聯(lián)網(wǎng)和響應(yīng)式設(shè)計(jì)的關(guān)系,首先將介紹如何巧妙的運(yùn)用響應(yīng)式設(shè)計(jì),為什么性能對(duì)移動(dòng)端非常重要,為什么響應(yīng)式設(shè)計(jì)不能作為你網(wǎng)站的目標(biāo),最后技術(shù)的性能問題幫助我們更好的理解這問題。
自2000年開始,設(shè)計(jì)者和開發(fā)者就把移動(dòng)設(shè)備的問題過于簡(jiǎn)單化,以至于現(xiàn)在仍然有人認(rèn)為響應(yīng)式網(wǎng)頁設(shè)計(jì)能解決一切問題。
大家必須明白,凌駕于任何目標(biāo),移動(dòng)網(wǎng)絡(luò)體驗(yàn)必須和閃電一樣快。迅速、實(shí)用、兼容的體驗(yàn)對(duì)所有移動(dòng)設(shè)備都是挑戰(zhàn)。當(dāng)你使用響應(yīng)式設(shè)計(jì)時(shí),這些挑戰(zhàn)都存在。從一開始就重視性能會(huì)讓過程容易些。
響應(yīng)式設(shè)計(jì)是很棒,但不是萬能鑰匙。如果你在移動(dòng)設(shè)備上一味堅(jiān)持,在轉(zhuǎn)換率后就可能隱藏著性能問題。大約有11%的網(wǎng)站是響應(yīng)式,這個(gè)數(shù)字每月都在增長(zhǎng),所以現(xiàn)在是談?wù)撨@個(gè)問題的時(shí)機(jī)了。
據(jù)Guy Podjarny研究,72%的響應(yīng)式網(wǎng)站不分屏幕大小都提供相同的字節(jié),盡管這會(huì)降低移動(dòng)網(wǎng)絡(luò)連接。不是所有用戶都有耐心等著網(wǎng)站加載。
對(duì)響應(yīng)式設(shè)計(jì)存在的問題有了基本認(rèn)識(shí),我們就能減低它帶來的損失。
移動(dòng)網(wǎng)站來自過去
我不是說你不應(yīng)該采用響應(yīng)式設(shè)計(jì)或者去用m.*的子域名。事實(shí)上,現(xiàn)在社會(huì)分享無處不在,不分設(shè)備,分配給給文檔一個(gè)URL,這是聰明的做法。但這并不意味著一個(gè)單獨(dú)URL應(yīng)該提供相同的文檔或每一個(gè)設(shè)備都應(yīng)該下載相同的資源。
援引Ethan Marcotte的話,他創(chuàng)造了“響應(yīng)式網(wǎng)頁設(shè)計(jì)”這個(gè)術(shù)語。
最重要的是,響應(yīng)式網(wǎng)頁設(shè)計(jì)的初衷不是要取代移動(dòng)網(wǎng)頁。——Ethan Marcotte
交互、移動(dòng)、快速
如果我們能使用一些其他的技術(shù),就可以實(shí)現(xiàn)獲得響應(yīng)式設(shè)計(jì)好處的同時(shí),不影響移動(dòng)設(shè)備的性能。響應(yīng)式設(shè)計(jì)從來不是意味著要解決“性能”,這也是為什么我們不能因此指責(zé)它的原因。然而,相信它能解決你所有問題,這大錯(cuò)特錯(cuò)。
設(shè)計(jì)響應(yīng)式很重要,因?yàn)槲覀冃枰鉀Q跨桌面和移動(dòng)端視窗大小范圍的問題。但是只考慮屏幕大小就低估了移動(dòng)設(shè)備。桌面和移動(dòng)端的界限正在變得模糊,基于不同的設(shè)備對(duì)我們而言仍然有多種可能性。但是我們還不能通過媒體查詢來決定響應(yīng)式設(shè)計(jì)的功能。一些評(píng)論家稱之為“可靠的響應(yīng)式網(wǎng)頁設(shè)計(jì)”,然而另一些人則認(rèn)為它是伴隨現(xiàn)代視覺的響應(yīng)式網(wǎng)頁設(shè)計(jì)。在沒有了解其基本語義的情況下,我們需要搞清楚這個(gè)問題。
雖然沒有可應(yīng)用于各類文檔的萬全之策,但是能夠運(yùn)用一些技巧來改善現(xiàn)有響應(yīng)式的解決辦法,并且力求性能最大化。
實(shí)現(xiàn)每一個(gè)文檔對(duì)所有的設(shè)備都使用相同的URL和相同的內(nèi)容,結(jié)構(gòu)不必要相同。
當(dāng)從零開始,遵循“移動(dòng)先行”的方法。
在一個(gè)真實(shí)設(shè)備上測(cè)試當(dāng)資源加載和顯示會(huì)發(fā)生什么。不要依賴調(diào)整你的桌面瀏覽器。
使用優(yōu)化工具測(cè)量和提高性能。
通過JavaScript傳輸響應(yīng)圖片,雖然我們更期盼著瀏覽器供應(yīng)商(例如srcset)能解決這個(gè)問題
當(dāng)你需要當(dāng)前設(shè)備具備加載條件時(shí),只加載JavaScript,這會(huì)在onload事件之后發(fā)生。
對(duì)移動(dòng)設(shè)備,內(nèi)聯(lián)文檔的原始視圖,或者發(fā)送一屏顯示內(nèi)容。
使用下面一種或幾種技術(shù)應(yīng)用智能響應(yīng)式的解決方案:條件加載、按組響應(yīng)、服務(wù)器端層(如適應(yīng)性方法)。
條件加載
不要總是在CSS中依賴media queries,因?yàn)闉g覽器將會(huì)為所有設(shè)備加載和解析所有選擇器和樣式 (后面詳細(xì)討論)。這就意味著手機(jī)為了一個(gè)大屏要下載和解析CSS。因?yàn)镃SS塊的呈現(xiàn),你要浪費(fèi)一些時(shí)間等待聯(lián)接成功。
在設(shè)備上用JavaScript的matchMedia查詢來代替CSS media queries,你知道這些內(nèi)容是不會(huì)變化的。例如,大家都知道iPhone不能動(dòng)態(tài)的轉(zhuǎn)換成iPad的規(guī)格,所以我們只在正在需要CSS時(shí)才用。
可以用特征檢測(cè),例如 Modernizr,對(duì)UI和功能性做出更明智的決定而不是僅僅根據(jù)屏幕尺寸。
按組響應(yīng)
在處理簡(jiǎn)單文檔、為臺(tái)式電腦和智能手機(jī)提供相同的HTML時(shí),雖然為我們可以讓所有屏幕依賴一個(gè)單一的HTML基礎(chǔ)和響應(yīng)式設(shè)計(jì),但這并不總是最好的解決方案。為什么呢?同樣是由于移動(dòng)設(shè)備的性能。
即使我們?cè)诜?wù)器端儲(chǔ)存相同的文檔,但是根據(jù)設(shè)備組別的不同給用戶不同的文檔。舉個(gè)例子,為一個(gè)6英寸甚至更大的屏幕提供大的浮動(dòng)菜單,為一個(gè)小屏幕提供漢堡菜單。在每個(gè)組群里,使用響應(yīng)時(shí)技術(shù)以適應(yīng)不同的場(chǎng)景,例如肖像模式和風(fēng)景模式的轉(zhuǎn)換,切換iPhone(320像素寬)、5英寸Android設(shè)備(360英寸)和平板(400像素)。