html5营销方式,HTML5营销背后的4大原则、7个案例和12张图

伴随着一只神经猫和几次品牌内容的朋友圈疯转,H5迅速赢得了众多营销人员的关注。

但随之而来的是,一些H5制作的邀请函、产品宣传图被疯狂转发,被无数次点赞,被业内人士口口相传,而另外一些则无声无息,虽然制作方也花了不少费用。

那么,H5能在营销中做什么?它的传播阵地在哪里?如果要启动一次H5传播,该以哪些先例为标杆?如何选择供应商?市场上的一般收费情况如何?

七个案例

1、触屏类:指纹识别

移动社交产品分享会(经纬创投+36氪+nice)

396b7bee3acb43d4be111d4248fd39d4.png

4万UV,只能容纳1000人报名的表单瞬间关闭。

这是在2014年8月份在移动互联网从业者圈内热传的H5,其最大的亮点是将按钮做成指纹识别的样式,巧妙地利用点击错觉,给用户前所未有的体验。这款h5算比较早期的经典案例,现在看起来虽然觉得没有那么惊艳了,但是在8月份还是跟行业带来一阵与众不同的创意旋风。

2、滑屏类:无极滑动

一封来自未来的邀请函(Pingwest)

104116b350a619a622842ae35a7a948e.png

这是在2014年10月份未来应用团队在旅行途中给pingwest的 sync2014大会做的,从策划到创意设计一气呵成,除了文字的修改外,从头到尾这款H5没有做过任何的修改。亮点是采用无极滑动的方式来做页面过渡,对比泛滥的H5滑屏页面过渡的形式,这个设计非常巧妙的把活动信息展示出来,让用户在阅读时不觉得枯燥反而充满期待。值得说明的是这款H5给只能容纳800人的现场带来了4万人的报名,现场的过道、走廊上都挤满了人,未来应用团队也是做了这个之后才确定的团队名字。

3、滑屏类

支付宝十年账单(支付宝)

3a0687848dbd0d782184d161554a110b.png

4、内容创意:选择题

优酷未来贺卡(优酷)

3a0c00c357b8356237ca60189f5b81c0.png

5、剧情化:动画剧情化

广告人插上geek的翅膀(百度)

e59d73fa943c20405c4c21ee6aad018e.png

6、剧情化:开场剧情化

极客世界漫游指南(极客公园)

79db814b8e3305f1ff76aeaa97506b20.png

未来应用已经不满足于在某个特效或场景的展示,而是将技术创意提高到一个全新的高度,呈现给用户一个完整的剧情式的体验,或许代表着未来的精品H5方向,无论是品牌发布、招聘、报告披露还是促销,用户看到的越来越多,口味也越来越刁,能够打动吸引用户并且形成自发传播的Hh5就需要在整个体验环节上下功夫,所以剧情类H5或许可以代表未来的发展方向。

7、传统页面切换

微博之夜(新浪微博)

af7ca180c06a38a5d455fec09a98d1a5.png

四大传播原则

应该说,H5从立意、创意、设计,到制作、传播,是一个一气呵成的系统工程,技术的把握、创意与文案的优化、传播的执行不可或缺。在实践过程和实战经验中,陈鸿总结了以下4个传播原则。

1、主题:要有创意的新鲜感,少抄袭,多原创。

2、内容:要做优质内容,创建具有分享价值的内容,再由微信达人(好友多的个人号、自媒体号或具有某个行业特征的个人号)进行分享。

3、传播:要集中传播,H5上线的前5天是黄金传播期。

4、形式:内容展示尽量把信息视觉化。

H5可以做什么

宣传发布、书信邀请函、品牌图文传播、招聘...

0252c869eed3dc72fa14c0e5d67e0099.png

H5的传播阵地

不仅是微信,微博、QQ、APP...

0c354b203a1f6a6a3177a3d716e7876d.png

比较浅显的理解是移动端的易拉宝,或者更有深度的理解为移动端的传播引擎。至于H5怎么用,就看各位对H5的理解喽。

企业营销人员该如何行动

通过优质案例寻找供应商

b746e2b5e0440816b81bac731acc5e89.png

现在供应商是怎么收费的

ea906ec6e417fac4ba2329913e82ea25.png

如何砍价并达成一致

7013f882121b22544560d624d09bf013.png

要实现HTML中的图片轮播,可以使用多种方式,其中一种常见的方式是使用JavaScript和CSS。可以通过CSS设置图片的尺寸和位置,通过JavaScript来实现图片的轮播。 以下是一个简单的HTML图片轮播代码示例: ``` <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> /* 设置图片的宽度和高度 */ img { width: 100%; height: 400px; } </style> </head> <body> <div id="slideshow"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementById("slideshow").getElementsByTagName("img"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // 图片轮播的时间间隔为2秒 } </script> </body> </html> ``` 在上述代码中,使用CSS设置图片的宽度和高度为100%和400px,这样可以让图片充满整个轮播容器。在JavaScript中,使用了一个showSlides()函数来实现图片的轮播,通过调用setTimeout()函数来设置图片轮播的时间间隔为2秒。 如果需要改变图片的位置和尺寸,可以在CSS中修改img标签的样式,例如设置margin和padding属性来调整图片的位置,设置width和height属性来调整图片的尺寸。同时,也可以通过JavaScript来动态修改图片的位置和尺寸。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值