HTML5時代移動互聯(lián)網(wǎng)廣告的變革

李儒俊+盧維林

摘 要：自2007年萬維網(wǎng)聯(lián)盟（W3C）正式宣布一種新的語言代碼——HTML5規(guī)范的產(chǎn)生，各大瀏覽器紛紛進行了技術(shù)層面的提升，對HTML5進行兼容與開發(fā)，淘汰原有的HTML4.01。HTML5互動性、兼容性能夠更好地促進用戶群體與網(wǎng)站間的互動，特別是在移動平臺上，為多媒體網(wǎng)站提供更多高質(zhì)量的視頻和音頻流。隨著HTML5的到來，新的廣告模式也孕育而生，用HTML5制作的網(wǎng)頁廣告不僅豐富，而且擴展性也更好，HTML5技術(shù)在移動設(shè)備和平板電腦廣告領(lǐng)域贏盡了人氣，已成為行業(yè)變革的中堅力量。

關(guān)鍵詞：HTML5；移動互聯(lián)網(wǎng)廣告；變革

2014年10月，W3C小組完成了HTML5標(biāo)準(zhǔn)的制定工作，HTML5規(guī)范的標(biāo)準(zhǔn)正式定稿，一種新的語言代碼的產(chǎn)生，使得各大瀏覽器紛紛進行了技術(shù)層面的提升，結(jié)束了HTML5長達到8年的長跑。HTML5從2010年始，從蘋果最初不支持Flash，開始支持HTML5以來，到Facebook全力推廣HTML5的標(biāo)準(zhǔn)，2015年1月，谷歌將YouTube原來默認格式更換為HTML5格式，之后又全面把他們自己的Flash廣告代碼轉(zhuǎn)為HTML5版本，再也不支持在Flash的設(shè)備上或者瀏覽器上投放廣告，顯示HTML5正式進入一個大爆發(fā)時代。

綜合移動互聯(lián)網(wǎng)廣告的發(fā)展，早在2003年，那時的智能機還處于開發(fā)的狀態(tài)，手機的主要功能只是通話和短信，我們接觸的移動端廣告的形式也比較單一，大部分就是短信、彩信、或者是手機報的類型格式，移動端廣告發(fā)展得比較弱。后來，WEB時代的到來，利用GPRS，通過手機自帶的瀏覽器，可以打開網(wǎng)頁看新聞，那時的QQ都是有網(wǎng)頁版的。隨著科技的發(fā)展，塞班系統(tǒng)風(fēng)靡，智能機開始使各種各樣的APP興起，“富媒體”這個詞隨之產(chǎn)生，各種音頻、視頻相結(jié)合，廣告也變得豐富多彩，出現(xiàn)橫幅廣告、展開廣告、信息流廣告，這些都是時代的標(biāo)志。但這些單向的廣告信息發(fā)布缺乏交互性的信息傳播，促銷類廣告常用的banner模式，或者是其他的客戶端廣告，已經(jīng)面臨著種種挑戰(zhàn)，并且慢慢的走向淘汰。前段時間，德國的一家Trademob平臺對移動端的banner、展開廣告、信息流等廣告進行了點擊量上的數(shù)據(jù)調(diào)查，研究全球超過600萬次的點擊廣告次數(shù)，無效的點擊率40%，誤點22%，欺詐性的點擊18%，它占屏幕的比例比較小，從數(shù)據(jù)上我們就可以看出，投放與用戶之間缺乏交互性的廣告，真正達到效果的點擊率才占20%左右，從廣告投放和產(chǎn)生效益上來說，很難實現(xiàn)廣告的價值。

未來的移動端廣告是一個很有潛力的市場。H5代碼的誕生，能夠使手機端把各個視頻、音頻、文字平臺結(jié)合起來，使移動互聯(lián)網(wǎng)廣告發(fā)生了本質(zhì)的變革和創(chuàng)新，媒體互動性的重要性以及結(jié)合音頻、視頻和動畫效果的時代到來了。

一、HTML5的新特性

W3C[]是這樣定義HTML5的：“HTML5 是HTML版本誕生以來，近十年時間內(nèi)，web開發(fā)標(biāo)準(zhǔn)的最巨大的一次飛躍，是由W3C與WHATWG聯(lián)合研發(fā)的一個結(jié)果。它將會成為HTML、XHTML以及HTMLDOM的一個新標(biāo)準(zhǔn)，不僅僅能夠用來表示web的內(nèi)容，而且它還有一個新的使命——將web帶入一個將視頻、音頻、圖像、動畫、以及同電腦間的交互都被標(biāo)準(zhǔn)化的成熟的應(yīng)用平臺。”[]HTML全呼為Hyper Text Markup Language，中文直意為“超級文本標(biāo)記語言”，它是一種基于互聯(lián)網(wǎng)的網(wǎng)頁編程語言，從1994年由萬維網(wǎng)發(fā)明至今，已逐漸成為了網(wǎng)頁編程的行業(yè)規(guī)范。HTML5具備本地儲存、設(shè)備兼容、連接、網(wǎng)頁多媒體、三維圖形及特效、性能與集成、CSS3等特性，其優(yōu)點如下：

（一）公開的網(wǎng)絡(luò)標(biāo)準(zhǔn)

HTML5它是一個聯(lián)合開發(fā)的成果，是一個公開的技術(shù)，也就是說聯(lián)合研發(fā)的幾百家公司的每一個公開的標(biāo)準(zhǔn)平臺可以在W3C數(shù)據(jù)庫中需找資源，而W3C也可以通過HTML5在每一平臺上實現(xiàn)。

（二）多設(shè)備跨平臺

多設(shè)備跨平臺是，根據(jù)HTML5的設(shè)備兼容特性，能使各大互聯(lián)網(wǎng)公司旗下的設(shè)備相結(jié)合。也就是說，用HTML5制作的網(wǎng)頁版本的APP，你能夠在微信上打開，能夠在新浪微博打開，也能夠在Facebook上打開，通過封裝的技術(shù)甚至還可以發(fā)放到App Store或Google Play上，所以HTML5受到大部分人的推崇。

（三）自適應(yīng)網(wǎng)頁設(shè)計

做過網(wǎng)頁設(shè)計的人可能對這方面比較了解，制作一個網(wǎng)頁，按照相應(yīng)尺寸制作圖片，如果在21寸電腦上看，所看的內(nèi)容比例和排版都是恰當(dāng)好處，但如果在14寸電腦上看，可能就會出現(xiàn)這樣的效果，你見到的只是網(wǎng)頁的中間部分，還有很多內(nèi)容看不到，而且排版上也會覺得過大，不協(xié)調(diào)。自適應(yīng)網(wǎng)頁設(shè)計，顧名思義，它可以根據(jù)我們手機端、pad的不同尺寸，調(diào)整網(wǎng)頁的大小比例，自動適應(yīng)不同版本、不同尺寸的手機、pad，使我們在不同媒介端看到的內(nèi)容都是一樣，只是尺寸發(fā)生變化，從而達到更好屏幕效果。

（四）即時更新

我們在使用APP或者瀏覽器的時候，因為版本的更新，要進行下載，安裝才能很好地更新軟件，而用HTML5制作的游戲或者別的形式的網(wǎng)頁版APP的更新，就像刷新頁面一樣，速度很快，能即時更新。

隨著經(jīng)濟的發(fā)展，生活水平提高，手機端的廣告發(fā)展迅速。據(jù)預(yù)測，到2019年移動廣告將占據(jù)所有廣告投入的四分之三，戶外、報紙、PC等固定廣告慢慢將淡出我們的視線，無論網(wǎng)絡(luò)程序語言怎么開發(fā)，移動端為主的趨勢已經(jīng)形成了。

二、HTML5在廣告方面產(chǎn)生的變革

HTML5對移動端廣告產(chǎn)生的變革可以分為三個方面，制作、投放的形式和投放的人群。我們從移動互聯(lián)網(wǎng)廣告的制作對HTML5代碼變革進行分析。

（一）廣告制作上發(fā)生的變革

1、本地儲存特性使儲存空間更大

HTML5的本地儲存特性是指基于HTML5采用的HTML5 AppCache技術(shù)，用HTML5制作出來的網(wǎng)絡(luò)版本的APP，從原有的HTTP Cookie大小限制在4KB到HTML5本地存儲大小限制為5MB。這意味著移動互聯(lián)網(wǎng)廣告容量變大，內(nèi)容能夠更加得豐富，擁有超強的畫面感和震撼力，并且在啟動時間和網(wǎng)絡(luò)的聯(lián)網(wǎng)速度上都變得更加得快捷。而且只要瀏覽過HTML5制作的網(wǎng)頁版APP，在你的瀏覽器關(guān)閉以后，原先看過的信息，能夠很好的通過Global Storage存儲下來，而且儲存下來的信息還能很好地被頁面共享。這意味著，原來移動互聯(lián)網(wǎng)廣告簡單的平面或者GIF動圖形式將慢慢地變得更加得豐富。

2、設(shè)備兼容特性使廣告制作費更低

HTML5的設(shè)備兼容特性，就是以HTML5制作的網(wǎng)頁為主體，與外界之間接上了無數(shù)條數(shù)據(jù)線，可以讓瀏覽器與外部資源直接連接起來，不同設(shè)備之間的數(shù)據(jù)交換不需要數(shù)據(jù)接口——數(shù)據(jù)線連接。HTML5制作的網(wǎng)頁使你能夠在微信上打開，能夠在新浪微博打開，也能夠在Facebook上打開，它的跨平臺性非常強大。原本你要在UC、Opera、或者APP上同時發(fā)布一則相同的廣告，要在不同瀏覽器或者APP中打開，因為它們之間的代碼是不兼容的。就像你在淘寶客戶端頁面裝修的一個廣告頁面，你不可能照搬到京東上或者亞馬遜里面去，他們兼容的代碼不一樣，會導(dǎo)致亂碼的現(xiàn)象。而HTML5設(shè)備兼容性非常高，同一次廣告創(chuàng)作，可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應(yīng)用平臺，很大程度上降低了廣告的制作成本。

3、網(wǎng)頁多媒體，三維、圖形及CSS3特性使廣告由靜態(tài)轉(zhuǎn)為動態(tài)，由平面轉(zhuǎn)為三維

目前的移動互聯(lián)網(wǎng)廣告模式，banner廣告、展開廣告以及信息流廣告始終保持的都是以平面為主的形式，只是插放的形式和廣告圖片的大小有所改變。HTML5代碼能夠?qū)崿F(xiàn)視頻、音頻之間的快速結(jié)合，使資源之間的兼容性和代碼簡單化，減少了資源的跨域。在平面作品的創(chuàng)作基礎(chǔ)上，HTML5采用了CSS3代碼把圖片分割，加入了一些圖片的三維、旋轉(zhuǎn)，使FLASH形式有了平面轉(zhuǎn)換為三維或者更高層次上的提升，由原來的靜態(tài)變成動態(tài)。用戶出于好奇進入界面，首先聽到音樂，接著又是各種炫酷的FLASH效果或者小游戲形式，在體驗上有更大的主動性，在不知不覺中成為了受眾甚至是下一個傳播者，由此廣告?zhèn)鞑バ室泊蟠筇嵘恕?015年春節(jié)，央視春晚推出了整點搶紅包的活動，大家在微信客戶端打開搖一搖功能，就能參與搶紅包，這就是一個很好的廣告互動效果。利用HTML5的定制頁面，搭建一個搶紅包的場景，利用手機掃描二維碼或搖一搖，和朋友分享自己搶紅包的戰(zhàn)果，而朋友圈的朋友也可以通過你分享的鏈接參與進來。在與廣告互動的同一時間，用戶還充當(dāng)了一個傳播者的角色，對廣告?zhèn)鞑テ鹆撕艽蟮淖饔谩?/p>

（二）廣告投放方式上發(fā)生的變革

目前移動端的廣告主要投放形式如下：

APP內(nèi)的橫幅廣告設(shè)計、展開廣告、積分墻、插屏廣告、信息流廣告。

上述的廣告投放形式（基與平面類的廣告形式）的廣告投放都是有針對性的，比如信息流廣告必須是附在社交類的APP上，插屏廣告則必須寄生在游戲平臺或者是影音播放器里，而積分墻廣告是放在下載類的軟件上。他們有一個共同的特點，即之間是獨立的，就像是一個孤島，相互之間沒有關(guān)聯(lián)，廣告的投放形式也不能轉(zhuǎn)換，就像戶外的廣告牌，有固定的廣告位置，尺寸大小，你必須按照固定的樣式來投放。

如果說以上APP、瀏覽器投放的廣告是固定形式的，是一個個的孤島，那么H5就是所有孤島組成的大陸——超級APP。用HTML5制作的網(wǎng)頁版APP，它是一個APP，是瀏覽器的集合。它展現(xiàn)的形式不分瀏覽器，不分APP，也不管你是IOS系統(tǒng)，還是安卓系統(tǒng)，只要你手機上有瀏覽器，有APP，甚至是手機QQ，投放的HTML5廣告就能在手機展現(xiàn)，整個社交媒體都成了HTML5的傳播平臺，形成一種以瀏覽器為核心的多屏幕互動的方式，優(yōu)勢可謂非常的明顯。它打破了原有的規(guī)則，不再是有固定尺寸的橫幅廣告，手機將是一個主要的渠道入口。

（三）廣告投放人群上發(fā)生的變革

本質(zhì)上HTML5是一種網(wǎng)頁語言，它可以通過加入代碼進行系列追蹤，而且收集到的數(shù)據(jù)相當(dāng)精準(zhǔn)。精準(zhǔn)的數(shù)據(jù)，為我們提供了一系列特定的場景，幫助我們在特定場景里向特定的人群投放廣告，而且受眾會主動地帶動廣告交互，或者是與好友分享，這樣一來廣告的效果就大大提升了。比如，微信平臺可根據(jù)你發(fā)的朋友圈來判定你的生活水平與階段；又比如，春節(jié)這個特定的場景里，我們可以根據(jù)特定的人群發(fā)紅包、搶紅包；針對游戲愛好者可以制作小游戲進行廣告交互，這正是目前手機端廣告精準(zhǔn)投放的發(fā)展現(xiàn)狀。

2015年京東H5廣告：擼羊毛送紅包

2016年2月26日，F(xiàn)acebook 發(fā)布了它的交互式HTML5網(wǎng)站廣告，即圍繞特定的產(chǎn)品制作的一個HTML5網(wǎng)站，網(wǎng)站內(nèi)展示了包括幻燈片、圖文信息、視頻等內(nèi)容，用戶可以通過點擊、滑動屏幕獲取更多感興趣的產(chǎn)品或品牌信息。同一天，微信也推出了朋友圈的HTML5網(wǎng)站廣告發(fā)布平臺。

綜上所述，一個時代有一個時代的標(biāo)志，HTML5使廣告主找到了移動營銷的突破口。在移動+社交的傳播時代，HTML5廣告營銷簡單、快捷、靈活、有效、炫酷，使受眾感官更豐富，能夠吸引用戶關(guān)注及參與，進而進行價值轉(zhuǎn)化。不僅是互聯(lián)網(wǎng)公司和移動互聯(lián)網(wǎng)公司，越來越多的傳統(tǒng)企業(yè)也開始關(guān)注到HTML5廣告的價值。

參考文獻：

[1] W3C：World Wide Web Consortium萬維網(wǎng)聯(lián)盟

[2] 引用百度百科萬維網(wǎng)聯(lián)盟對HTML5的定義