移動(dòng)互聯(lián)網(wǎng)時(shí)代你需要一個(gè)完全適應(yīng)手機(jī)端訪問的網(wǎng)站

互聯(lián)網(wǎng)+時(shí)代到來了，而這個(gè)時(shí)代是手機(jī)訪問的時(shí)代，移動(dòng)端的訪問流量已經(jīng)超越了PC端，成為目前主流訪問的方式，而4G網(wǎng)絡(luò)的普及，讓手機(jī)網(wǎng)頁(yè)更容易輕松的打開，現(xiàn)在的用戶不管身在何處，都能夠輕松地訪問網(wǎng)頁(yè)。而越來越好的手機(jī)硬件配置也為手機(jī)網(wǎng)頁(yè)的特效展開有了更好的基礎(chǔ)。

在過去的一個(gè)多月中，我們針對(duì)移動(dòng)端網(wǎng)頁(yè)進(jìn)行了非常細(xì)致的研究，并在最后決定使用swiper框架作為以后新開發(fā)的WordPress主題發(fā)展方向。

什么是"H5"網(wǎng)站？

如果你是一個(gè)互聯(lián)網(wǎng)行業(yè)的工作者，最近一段時(shí)間肯定聽過“H5”這個(gè)名詞，H5網(wǎng)站，H5效果這樣的詞匯層出不窮。那么什么是傳說中的H5呢？

你可以看到，在WEB主題公園官網(wǎng)，對(duì)于"H5"我們都打了一個(gè)引號(hào)，因?yàn)榇蠹铱谥械?H5"已經(jīng)超出了這個(gè)單詞所包含的含義。"H5"應(yīng)該是html5的簡(jiǎn)稱，而html萬維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML），而html至今為止總共進(jìn)行了5次重大修改（更新），最新的修改后發(fā)布的版本名為HTML5。

【html是網(wǎng)頁(yè)的主體代碼，在之前我們用最通俗的說法，網(wǎng)頁(yè)編寫技術(shù)DIV+CSS，而這個(gè)“DIV”就是html語(yǔ)言的一個(gè)代表，因?yàn)樵诖隧?xiàng)編寫技術(shù)中，html標(biāo)簽“<div>”是組成網(wǎng)頁(yè)塊的主體標(biāo)簽】

相對(duì)于html以前的版本，html5增加了非常多的特性，如：

緩存本地化（app的本地化應(yīng)用）、

多媒體特性（可直接播放MP4視頻等文件，而在以前的版本，只能通過flash播放視頻）、

設(shè)備兼容特性（這個(gè)版本的html可以直接調(diào)用用戶的攝像頭，麥克風(fēng)等設(shè)備的功能）、

連接特性（擁有更有效的服務(wù)器推送技術(shù)）等等，因此html進(jìn)入了html5之后可以制作除了網(wǎng)頁(yè)之外的更多程序，如app、游戲等等，此處我們只針對(duì)網(wǎng)頁(yè)論述，其他功能不做闡述。

看了上面的介紹，如果不是編程技術(shù)人員，肯定會(huì)頭大，下面就用最通俗的方法，解釋一下通常大家所說的“H5”是什么。

通常大家所說的"H5"網(wǎng)站，是能夠兼容手機(jī)訪問，并且有非常好的動(dòng)畫視覺切換效果，在手機(jī)上流暢的滑動(dòng)，展現(xiàn)，這一類網(wǎng)站不管他們是使用什么技術(shù)實(shí)現(xiàn)的，被大家統(tǒng)稱為"H5"網(wǎng)站。

這一類的網(wǎng)站擁有流暢的手機(jī)訪問效果，而他們的動(dòng)畫通常是使用css3（樣式表）動(dòng)畫和javascript（腳本動(dòng)畫）實(shí)現(xiàn)的，如果一定要區(qū)分他們是否使用了html5技術(shù)，這樣是非常不好區(qū)分的，因?yàn)?strong>html作為一個(gè)擁有五次重大更新的語(yǔ)言，并不是一個(gè)全新的語(yǔ)言，所以html不同版本的標(biāo)簽混用是非常常見的事情，比如整個(gè)網(wǎng)站如果使用了一個(gè)html5標(biāo)簽，那么如何鑒定呢？因此如果抓住"H5"這個(gè)被神化的單詞來做鑒定是不可靠的。

總而言之，能夠非常好的兼容手機(jī)的瀏覽，流暢、動(dòng)畫效果好這樣就是我們所追求的。

WEB主題公園此次開發(fā)的swiper? WordPress網(wǎng)頁(yè)前端框架

此次我們所開發(fā)的框架并不是簡(jiǎn)單的只針對(duì)手機(jī)端，而是需要pc電腦和移動(dòng)設(shè)備都能夠全面的兼容。因此，選擇swiper插件是最合適的。

最近所發(fā)布的《魔術(shù)滾軸WordPress企業(yè)主題》是使用了swiper框架的主題，你可以查看演示，或者掃描二維碼進(jìn)行觀看他們?cè)诓煌O(shè)備所展現(xiàn)的效果。我們?cè)谝院蟮臅r(shí)間會(huì)開發(fā)更多的swiper框架的WordPress主題

魔術(shù)滾軸WordPress企業(yè)主題詳細(xì)介紹【點(diǎn)擊查看】

pc電腦的演示鏈接【點(diǎn)擊查看】

手機(jī)網(wǎng)頁(yè)移動(dòng)版演示【掃描下面的二維碼】

swiper目前擁有2個(gè)版本，啟用swiper2在很早以前就已經(jīng)發(fā)布了，它可以非常好的兼容手機(jī)和pc電腦上的不同瀏覽器，甚至能夠兼容到低版本如IE7，而swiper3是全新的專為IOS和android所開發(fā)的全新移動(dòng)版動(dòng)效插件，因此swiper3應(yīng)用在手機(jī)網(wǎng)頁(yè)上性能和效果更好。

所以我們以服務(wù)器端判斷的形式采用分開加載處理的方法：

在pc電腦端，我們使用swiper2，進(jìn)行兼容到ie7瀏覽器，以此兼容到不同的用戶群體，讓他們?yōu)g覽時(shí)不會(huì)感覺到有重大的錯(cuò)位或者動(dòng)效失敗。

而此次的開發(fā)，我們?cè)赑C端使用了一小部分的css3動(dòng)畫，確保在高級(jí)瀏覽器中，有更多細(xì)節(jié)的動(dòng)畫呈現(xiàn)給用戶（如鏡頭推進(jìn)效果、css3的鼠標(biāo)經(jīng)過特效等等。）低版本瀏覽器則不顯示這些動(dòng)效動(dòng)畫，因?yàn)闆]有了css3的動(dòng)畫過程，他們?cè)诘桶姹緸g覽器會(huì)顯得非常突兀。

在手機(jī)和平板電腦的移動(dòng)端，我們使用swiper3，帶來更多的流暢并且特別的動(dòng)畫效果，并減少使用javascript動(dòng)畫，采用css3動(dòng)畫代替而優(yōu)化手機(jī)上的訪問性能，讓手機(jī)端更具有流暢、優(yōu)美和特別的動(dòng)畫效果。同時(shí)，通過服務(wù)器判斷，加載特別制作的網(wǎng)頁(yè)頭部和底部，讓圖標(biāo)的形式能夠更好讓移動(dòng)端用戶訪問，如一鍵電話撥號(hào)，一鍵切換手機(jī)QQ客服，一鍵切換發(fā)送郵件等等功能，使用直觀的圖標(biāo)形式，切合手機(jī)用戶的習(xí)慣：

而針對(duì)移動(dòng)端的動(dòng)畫排版，也不是簡(jiǎn)單的使用自適應(yīng)的方法，而是通過服務(wù)器判斷，和后臺(tái)重建給移動(dòng)端用戶展現(xiàn)和pc端完全不同的方式，重新上傳的圖片更小，并且能夠通過網(wǎng)頁(yè)后臺(tái)移動(dòng)端的設(shè)置重新定好動(dòng)畫坐標(biāo)，動(dòng)畫更加美觀

pc電腦和手機(jī)最大區(qū)別在于，pc是橫屏顯示的，而移動(dòng)端是豎屏顯示的，這樣pc電腦端的左右元素滑動(dòng)進(jìn)入主畫面的動(dòng)畫在移動(dòng)端變得不可行，同理橫豎不一的背景圖片如果用同一張圖，不僅僅是性能上移動(dòng)端會(huì)變慢，并且和橫屏的圖片在豎屏上的表現(xiàn)也顯得突兀。

現(xiàn)在企業(yè)官網(wǎng)有了全新的玩法

通過上面的介紹，你可以發(fā)現(xiàn)企業(yè)官網(wǎng)現(xiàn)在有了新的使用方式，你可以使用這個(gè)網(wǎng)站做更多的營(yíng)銷、活動(dòng)和推廣，并且通過這樣的動(dòng)畫展現(xiàn)形式給你的用戶帶來新穎的，印象深刻的感受。

微信上的企業(yè)活動(dòng)：現(xiàn)在的企業(yè)都有了公眾號(hào)，利用公眾號(hào)給你的用戶發(fā)送信息，若還是在發(fā)送冷冰冰的圖文信息，現(xiàn)在對(duì)于微信上的用戶來說，印象不深刻，跳出率會(huì)很高。若使用官網(wǎng)關(guān)聯(lián)的特制自定義微信活動(dòng)頁(yè)面，不僅僅帶來更好的視覺效果以加深用戶印象，并且更多的鏈接、導(dǎo)航直接連接官網(wǎng)，讓感興趣的用戶通過你的活動(dòng)發(fā)布頁(yè)進(jìn)入到官網(wǎng)更多的內(nèi)容進(jìn)行閱讀，增加用戶粘性，獲得更好的活動(dòng)效果。

更好的產(chǎn)品展示頁(yè)：如果你的企業(yè)產(chǎn)品不多但都是精品，是公司主推的產(chǎn)品，若使用淘寶那樣的產(chǎn)品詳細(xì)介紹頁(yè)，那么就顯得太過于千篇一律了?，F(xiàn)在你可以看到不管是蘋果、小米或者其他高端的互聯(lián)網(wǎng)企業(yè)，展示他們的精品產(chǎn)品時(shí)，都是通過一個(gè)精心制作的單頁(yè)，配以簡(jiǎn)潔高效的動(dòng)畫，非常能夠簡(jiǎn)單的展示他們的產(chǎn)品優(yōu)勢(shì)，并非常吸引用戶觀看。

更好的服務(wù)項(xiàng)目推送：如果你的公司并不是生產(chǎn)產(chǎn)品型的而是服務(wù)型的，那么你可以使用這樣的單頁(yè)介紹你的服務(wù)，而非通過簡(jiǎn)單的圖文形式，以最生動(dòng)的形式展現(xiàn)給用戶，當(dāng)然手機(jī)推廣的效果也是更好的。

  
總之對(duì)于一個(gè)動(dòng)畫效果在pc電腦端和移動(dòng)端同樣出色的網(wǎng)站，做這些推廣活動(dòng)時(shí)，你可以兼顧更多的用戶，達(dá)到最好的推廣效果。