對于H5這個名詞大家可能已經很熟悉了，筆者對于這個詞真是又愛又恨，愛的是html5終于被大家接受并如此的重視，恨的是怎么可以把html5簡稱做H5呢，那些這么去簡稱的人知道html5真正的意義嗎，知道html是什么東西嗎，作為一直關注html5的技術狗，筆者實在不能接受這樣的簡稱，html5本身就是簡寫了，還要弄出個H5來，不倫不類!(以上純屬個人情感宣泄，如果傷害到某些人，筆者不表示道歉)
本篇原文作者就是些的h5,內容還是不錯的，忍不住與大家分享，但我必須給HTML5 正名。
然而這不是偶然，而是趨勢。在具體介紹HTML5 營銷之前，我想和大家分享一份eMarketer的數據，其中顯示了2012年-2018年品牌在不同媒體渠道的預算比重：
相比電視、雜志、戶外廣告等傳統媒體呈逐年下降的趨勢，品牌營銷在數字和移動方面的投入在逐年上升。而且，在所有渠道預算中移動技術的投入增長最快，遠遠高于其他渠道的增長。當然，這樣的結論你應該不會感到驚訝，因為我們早已習慣了24小時手機陪伴的生活，而品牌最關注的就是消費者“在哪”的問題。
據美國的調查數據顯示，我們每天要查看手機150次，44%的人睡覺都把手機放在身邊，9%的美國人承認他們在嘿咻時使用手機……毫無疑問，手機是有史以來最強大的媒介，從早上醒來到臨睡前的一秒，這個幾英寸的屏幕都在和我們“交流”。
顯然，移動營銷已是大勢所趨，我們可以看到已經廣泛應用的簽到、二維碼技術，正在興起的iBeacon、微信的Wifi連接，還有就是本文將與大家分享的HTML5 技術。文章有點長，可能需要費些時間閱讀，全文包括：HTML5 技術簡介及其特性，怎么實現、有哪些應用場景，以及如何推廣等內容。
Part 1 什么是HTML5 ？
經常有朋友找我咨詢HTML5 的問題，但是在和他們溝通的過程中，我發現很多人對HTML5 的理解都是停留在用戶層面，邀請函、小游戲、品牌展示、抽獎等等。其實如果上升到營銷層面的話，僅在用戶層面去思考是遠遠不夠的，因為任何傳播都要考慮有效性的問題，如果100w pv帶來的只是刷屏效果，而對品牌帶不來任何有效轉化，這樣的傳播顯然是不成功的。
對于事物的理解，如果不能從多個角度去分析，我們很難跳出原有的思考框架去看問題。因此，這篇文章我想以更原始的角度，從H5這項技術本身為出發點去闡述；事實上互聯網技術的發展本質上也是需求驅動的，程序語言其實是高于應用層面的產品。以下的內容希望不會太晦澀，也希望能對你有所啟發。
簡單來說，HTML5 就是一種高級網頁技術，我們平時看到那些邀請函、小游戲都是HTML5 網頁，確切來說叫HTML 5（國外目前沒有H5的叫法），它跟我們平時上網看到的那些網頁本質上沒有任何區別，只不過大家普遍接受的那個網頁技術版本是HTML4，而這個版本是在1997年發布的。
什么是HTML，我這里簡單解釋一下——想象一下兩個計算機在溝通的場景，A如果要把一個圖文信息傳給B的時候，交流過程中B肯定會產生這樣的問題：你給了我那么多信息，哪些是網頁標題、哪些是正文、哪些又是圖片呢？于是，A和B商量了一個辦法，用一些符號來標記不同類型的內容，而這些標記的一整套規范就是HTML。
比如當A要把圖文的標題傳給B的時候，最終給B的表達是這樣的：
<title>品牌HTML5 營銷完全實戰指南</titile>
如果設計HTML語言的人是中國人，那表達就會是這樣的：
<標題 始>品牌HTML5 營銷完全實戰指南<標題 終>
所以大家可以看到，HTML 其實是一項非常人性化的發明。關于HTML技術的詳解有興趣的讀者可以自行查閱，這里我主要跟大家介紹幾個營銷人應該關注的HTML5 特性，它能讓你對HTML5 能做成什么樣有個根本的認識。
No.1 繪圖功能（Canvas、SVG）
這是H5一個非常重要的特性，你在很多H5中看到的動畫效果就是用H5的繪圖功能做的，比較典型的例子是STC風云榜分享的可口可樂的例子，有興趣可以點擊最后的“閱讀原文”看一下。
為了方便理解，你可以將HTML5 的繪圖功能類比為Flash，但是唯一的決定性區別是，Flash做出來的動畫無法在移動端的瀏覽器中瀏覽，因為Adobe早已在2012年就停止了對移動端flash的開發。毫無疑問，未來的移動網頁游戲和動畫會是HTML5 的天下。
從技術實現的角度，HTML5 配合JS（一種程序語言）可以做出任何二維動畫，并且因為是網頁元素，所有元素均可以監測到用戶點擊的數據，也就是說你可以知道用戶在HTML5 動畫網頁中的所有交互行為。但是，具體到實際應用，我們就要考慮周期、成本，和用戶體驗的問題，復雜的動畫相應的制作周期和成本會提高，同時也有可能影響加載速度等用戶體驗相關的問題。
以下這個網站是HTML5 繪圖功能的典型例子，非常強大。你可以選擇不同型號的毛筆、筆觸半徑以及墨水的顏色，整個繪圖過程非常順暢，而且還有一個模擬手握毛筆的人性化設計。
No.2 三維效果（css3 3D）
H5的華麗效果離不開一種叫CSS的技術，形象的說，如果把HTML5比作漫畫的素描稿，CSS就是上色用的，相當于word界面上方的格式工具欄，如果沒有CSS我們看到的HTML5 網頁就只能以“素顏”見人了。如果你熟悉互聯網技術的命名規則你應該能知道css3就是CSS的升級版本。
在css3中有個非常酷的功能是三維渲染，也就說HTML5 中能做出3D動畫甚至3D游戲。目前我們看到的H5中css3 3D的應用較少，這個也許會是下一個營銷類HTML5 應用的熱點，建議大家持續關注。
下面這兩個網頁游戲就是用HTML5 +css3 3D做的，第一個是俄羅斯方塊的3D版，想象一下在三維的空間里玩俄羅斯方塊是什么感覺，喜歡挑戰空間想象力的朋友可以試一下；第二個游戲是3D版坦克大戰，非常精致耐玩的游戲，一句話評價就是“根本停不下來”。

No.3 離線存儲（HTML5 Web Storage）

HTML5 的另一個重要特性就是離線存儲，它能將用戶的資源文件保存在本地，這樣在頁面加載的時候網頁能使用本地資源，從而實現離線狀態下訪問網頁應用。舉個例子，通過離線存儲，你可以在沒有網絡的情況下閱讀公眾號的文章（當然這只是技術上可行，微信目前沒有此功能）。
當然離線存儲能容納的數據量是有限制，跟瀏覽器有關，目前Chrome支持5M。大家或多或少都知道cookie這個東西，它也是記錄用戶瀏覽數據的，比如百度那些根據你的搜索習慣給你推薦的廣告就是這種技術實現的，不過它的容量是4k。
技術細節大家可以忽略，但是關于離線存儲這個功能，大家可以發揮想象——假設離線存儲的容量是100個G甚至更多，瀏覽器就變成了一個超級應用入口，所有網頁應用都具備離線存儲和在線瀏覽的功能，這時候在線Office、在線記事本甚至在線PhotoShop都可以實現，我們的電腦只需要裝一個程序——瀏覽器。在這個假設中，瀏覽器將干掉Windows，一切用戶操作都在云端進行！稍微有點難理解，大家可以仔細體會。
以下是運用離線存儲的一個例子，這個提供在線便簽功能的網站無論有沒有網絡都可以訪問，并且你記錄的所有便簽都會保存下來，很實用的網站，有興趣可以試一下。
科普先告一段落，雖然HTML5 有很多特性，但因為篇幅有限，本文只能介紹跟營銷有關的內容，其他的特性很多是程序猿的事，如果大家反饋還要了解更多，我可以再寫一篇具體介紹。
Part 2 HTML5 能怎么玩？
在了解完H5的一些基礎知識后，相信大家最關心的還是應用層面的問題——H5能做什么，有哪些玩法？接下來我將列舉一些典型的例子和大家探討：
幻燈片式玩法
以下這個特斯拉的例子相信很多人都看過，精美的圖片設計+簡單的翻頁效果，在我的印象中大概3、4月份看到特斯拉這個HTML5 的時候，大家還不知道原來微信營銷可以這么玩，記得那時候我們看到之后就在一周內做了一個類似的HTML5 ，用于STC的品牌展示。當然，在這之后HTML5 就千樹萬樹梨花開了。
這是H5最早期也是最典型的玩法，因為簡單、實用，所以至今還很流行。其效果就是簡單的圖片展示&翻頁交互，最終整體的表現很像幻燈片展示。
其實幻燈片式的HTML5 現在已經出現了很多在線制作軟件供大家使用，所以制作成本在現在看來幾乎是等于零的，而在之前這樣一個應用的開發可能要將近一萬（再一次見證了互聯網思維的破壞力）。當然啦，這對于品牌主來說是一個好事，因為很多時候這種簡單的展示已經能滿足需求了，不需要花不必要的錢。
★ 應用場景
由于制作簡單，周期短，這種HTML5 展現形式適用于頻繁、小型的需求。用在線編輯器的話，不需要任何開發，你只需要要配備一名設計和文案。
總結得不全，幻燈片式HTML5 可能有以下的應用場景：
1、定期發布的內容，幾乎零預算。這些內容相對而言比較常規，但是有時微信圖文又無法達到理想的效果，通過H5的形式會更易于傳播，當然前提是要有好的設計。比如數據報告、頻繁上線的新產品或功能、小型線下活動邀請、活動相冊等等。
2、結合熱點的營銷，周期極短。這種情況下，時效性是非常重要的，如果開發一個HTML5 用了半個月，熱點想必也結冰了。所以，應該以最快的速度推出才是明智的選擇，而這時候引起廣泛傳播的關鍵就在于文案和設計。
此外，大家不要輕視這種短頻快的傳播，有時候它要比很多大投入的傳播來得有效。沒有人能完全掌握受眾的興趣點，所以一次大投入的傳播不一定就能出效果，但是多次熱點傳播出效果的概率從統計學的角度也要高一些。如上文所述，我們可以實現用戶在HTML5 中所有交互行為的監測，因此，如果短頻快的傳播能配合有效的數據監測，便可以進行持續優化，降低不確定性。
交互式動畫
可口可樂這個案例在之前的風云榜中推薦過，是運用HTML5 繪圖功能的典型例子。當然這里面的交互還是比較簡單的，只不過它基本體現了交互式動畫的感覺。整個可口可樂的時間軸是隨著用戶向上滑動頁面“繪制”出來的。
其實除了這種敘事型的HTML5 動畫，我們能看到的大多數HTML5 游戲也都都屬于這一類，比如神經貓、打企鵝、2048等等。最近也有一個比較火的HTML5 游戲叫“財務包子鋪”，在這個游戲中用戶扮演包子鋪的創業老板，在事業發展的不同階段做出經營決策，最終登上人生巔峰。雖然游戲中植入了赤裸裸的產品推廣（知乎的一本新書），但最后還是取得了3天破300萬PV的成績。
這些類型各異的HTML5 應用，本質上都是基于H5的動畫技術做的。它們所涉及的相關動畫技術主要有HTML5 的Canvas/SVG，以及JS、css3，目前大部分HTML5 的動畫效果還是用JS實現的，實現的效果類似PPT中的動畫功能，只能實現元素的平移、旋轉、隱現等等。事實上通過JS+Canvas/SVG+css3可以實現非常復雜的交互式動畫，最直觀的就是HTML5 游戲，比如神經貓，還有上文提到的3D版坦克大戰。
那么，HTML5 到底能實現什么樣的動畫效果呢？我想這應該是大家在做HTML5 時最頭疼的問題，因為不知道能做成什么樣，你也就不知道從何下手。所以下面我給大家介紹一個網站：http://fff.cmiscm.com/，在這個網站中，你幾乎能看到所有HTML5 能夠實現的動畫效果，下次如果需要做HTML5 的時候就可以跟開發說“你看，就是這個效果”。
以下是該網站上幾個示例的截圖：
抓綿羊：你可以在奔跑的羊群中隨意抓取并放到任意位置
種樹：在屏幕任意地方點擊都會在相應的地方種一顆樹，你可以看到樹的生長過程。
3D罐頭：css3 3D的好展示，你可以看到三維罐頭的任意角度
照片處理：你可以把照片藝術化，圖示為處理過程截圖
★ 應用場景
交互式動畫類型的HTML5 制作周期和成本比較高，需要提前規劃。除了創意、文案、設計這些以外，開發周期較長，優質的HTML5 大約在兩周到4周左右，也有可能更長。
這種類型的HTML5 要找靠譜的供應商，因為復雜交互做出來的效果，在用戶看來只有好和垃圾兩種層次，所以慎重。當然如果你自己要花血本自建團隊也不是不行——產品經理、設計師、前端工程師、PHP工程師（涉及表單、登錄、評論等元素的時候需要），各一枚就夠了。
以下是總結的應用場景：
1、中小型活動/品牌事件的傳播，預算不多、周期較短。這種情況一般就是某些新品發布、企業招聘、公關事件、中型會議等的傳播。此時你需要權衡周期和成本的因素。
一般來說一周以內的時間不太可能做出優質的HTML5 ，這時候你可能要考慮幻燈片式的簡易開發或者參考已有的作品，然后著重從設計和文案上下功夫。如果有一到兩周的時間可以嘗試做一些輕交互的HTML5 ，除了常見的那些平移、縮放、淡入淡出的動效以外，在這里我比較建議大家嘗試一下css3 3D的效果，這是一個趨勢，當然成本也會相應的上升一個量級。
2、大型活動/品牌事件的傳播，預算充足、計劃性強、周期較長。一般大家看到的那些美輪美奐并且極具傳播性的HTML5 基本上都屬于這一類，比如上文提到的可口可樂“分享快樂128年”，以及我們之前分享過的潘婷“一封來自1947年的明信片”。像這一類在美學、交互和故事性上都表現突出的案例，都不是一兩周的功夫能做出來的，不計算創意、設計和文案的時間，光是開發和調試也要小一個月。
因此大家看到好的作品要理性看待，不能覺得很牛或者老板說好就想著也做一個，其實像這種交互與故事一體的應用，如果時間不夠只完成一半，整個HTML5 基本是沒法用的，也就是所有之前的投入都是無用功。這也是為什么有很多供應商無法在指定時間交付的原因，可能一開始就在做一個完不成的任務。
功能型 HTML5
看一下以下的兩個例子，第一個是百度針對地鐵漲價做的HTML5 ，它可以計算你每天坐地鐵要多少錢并且實時顯示大家的評論；第二個是STC的社交移動風云榜，很簡單，就是精品HTML5 的展示：
這兩個H5都有一個特點，除了針對受眾的熱點內容傳播以外，它們很像一個“供用戶重復使用”的產品，這就是所謂的功能型H5。其實大家看到風云榜可能會覺得它只是一個再簡單不過的網頁，但如果從它滿足用戶需求并產生重復“使用”行為的角度，它其實是一個產品，事實上我們從一開始就是把它當產品來運營的，關注Social Talent的朋友可能會有所感受——每周更新、定期群發推薦HTML5 的圖文、欄目更新通知等等。
功能型HTML5 的獨特價值在于，除了具備傳播性以外，它通過用戶的重復使用行為使得HTML5 的傳播是一個持續不斷的過程，這一點是一般的HTML5 所不具備的。風云榜首次發布時轉發6w+多，目前每月的訪問量都在10w左右，不算多，但是給我們帶來的流量轉化都是精準的，關注我們的大多還是從事營銷相關職業的朋友。
個人覺得web應用肯定是未來發展的方向，就像上文所說的，很有可能未來的操作系統將被瀏覽器所取代，服務和應用將進入完全的云世界。當然距離這種假設還比較遠，但唯一大家可以放心遵守的原則，就是聚焦于用戶需求。
我所說的功能型HTML5 ，是同時聚焦于用戶需求并且注重傳播性的H5輕應用，也就是在設計HTML5 的時候除了考慮傳播的問題以外，也要思考如何把它變成一個持續運營的產品。這里面其實是思考角度的問題，從“我要傳播什么”到“我希望用戶傳播什么”的轉變。
★ 應用場景
輕交互重功能的功能型HTML5 制作周期較短、成本也不高，成功的關鍵不在于酷炫的交互，而在于用戶需求的把握以及后續的運營。
因此，這一類HTML5 需要的是一名高水平的的產品經理，而以設計、開發為輔。功能型HTML5 目前沒有太多成熟的例子，不過我認為離線存儲的技術可能會是功能型HTML5 的應用重點，大家可以關注一下。
以下是總結的應用場景：
1、品牌賬號的粉絲運營。功能型HTML5 由于具備一定的產品特性，其大的價值就是提高粉絲活躍度和忠誠度。我們需要根據本身品牌的形象定位以及受眾的特性設計功能型HTML5 ，要將品牌或產品的功能性特征抽象到生活方式或者精神追求的層次。
舉個例子，賣洗手液的可以抽象為健康生活方式，設計一個改善生活健康狀態的功能型HTML5 ；服裝品牌可以抽象為追求時尚前沿，設計一個定期更新時尚潮流資訊的功能型HTML5 。事實上，以粉絲需求為中心的功能型HTML5 將潛移默化的提升品牌影響力，在提升忠誠度的同時帶來持續的口碑傳播。
2、結合熱點內容的品牌傳播。這種類型的傳播是最常見的，但是往往很多結合熱點的HTML5 傳播都是一次性娛樂消費，大家看過就忘了。其實如果能從用戶需求挖掘和產品運營的角度去思考，許多針對熱點的HTML5 傳播都有很大提升的空間。
近來大家都喜歡報道習大大和彭麻麻的“私生活”或者非正式領導會晤之類的，如果有人能做一個類似微博“學習粉絲團”那樣，定期更新“學習資訊”的功能型HTML5 ，想來必火。
Part 3 HTML5 如何推廣？
實際上HTML5 可以推廣的渠道有限，不像App的推廣有各類應用商店的流量。關于這個問題可以說的不多，我僅針對性的提出幾點建議：
1、從用戶角度挖掘HTML5 的價值點，寫一篇軟文。通過圖文群發來推廣HTML5 無疑是最重要的方式，但是如果只是簡單硬性推廣，比如宣布今天創新互聯上線了一個高大上云云的HTML5 ，然后就讓用戶點擊“閱讀原文”自己看，顯然這種新聞通稿式的推廣不會有太好的效果。
一個好的HTML5 一定具備打動用戶的價值點，從一個角度切入寫一篇軟文，無論通過投稿的方式還是大號轉發都能給你帶來意想不到的傳播效果。投入再大再精彩的HTML5 ，如果沒有好的推廣就只能孤芳自賞，所以哪怕是留點推廣預算也是值得的。
2、盡你所能利用所有能推廣HTML5 的渠道。目前比較常用的方式：通過公眾號的圖文群發推廣、微信群推廣、線下二維碼推廣，以及前面提到的KOL轉發和投稿等。這里主要說一下有關微信群的幾點建議。
首先，你需要列出所有你能用到的資源，并發動內部人員轉發，當然前提是HTML5 做得很棒。值得注意的一點是，每個微信群其實都有自己的定位——工作、生活或者閑聊扯淡，所以為了提升打開率可以適當的為不同的微信群定制轉發的文案，比如以上文的STC風云榜為例，對于工作學習為主的群可以是“品牌HTML5 做成這樣也是蠻拼的！”，如果是更加生活化的群就可以是“史上最好玩的HTML5 應用，根本停不下來”之類的，但是如果H5的調性實在和微信群的定位不搭，建議不要造成打擾。
3、充分利用“閱讀原文”和自定義菜單。由于微信的限制，圖文中唯一能跳轉的鏈接就是“閱讀原文”。關于如何利用好“閱讀原文”有三點小tips：
不要浪費每一篇圖文的“閱讀原文”，可能的話對于每一篇圖文用不同的文案引導點擊；
如果你的目的是推廣HTML5 ，不要在閱讀原文的提示之后或者閱讀原文引導和正文之間插播公眾號的廣告；
通過字體或者顏色的視覺跳躍引起讀者的注意，而且不要長期使用同一個格式，因為當用戶習慣了固定的格式之后會不自覺的忽略這些內容。

此外，自定義菜單也是需要充分利用的功能，一般來說新增粉絲都會瀏覽一遍公眾號的菜單，根據我們的數據監測，平均每個菜單項會有20%的新增粉絲點擊。假如你的賬號每天能有500個粉絲增長，就會有100個人以上點擊了菜單的某一項，因為這是持續進行的主動行為，由此為HTML5 帶來的瀏覽量可能比圖文群發還要高。

關鍵詞：創新互聯,成都品牌網站建設公司,網站制作公司,重慶網站建設,網站設計,網站建設,手機網站開發

名稱欄目：HTML5品牌營銷實戰指南
文章起源：http://m.newbst.com/news9/170259.html

成都網站建設公司_創新互聯，為您提供微信小程序、網頁設計公司、企業網站制作、營銷型網站建設、移動網站建設、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯