【怎样做网络推广】创作移动H5页面时应注意哪些

2019-07-10 栏目:网络营销 查看()

【怎样做网络推广】创作移动H5页面时应注意哪些问题呢?移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信、QQ等。

我们在创作移动H5页面时应注意哪些问题呢?

1.单个页面内容不能过多

设计常用尺寸:7501334/6401134,包含了手机顶部信号栏的高度。移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信、QQ等。使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在设计环节就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住。如下图(QQ内置浏览器):页面设计尺寸为7501334,顶部占用150px,底部占用110px,共占用了260px,因此设计稿内容应控制在1334-260=1074px的高度内。编写代码时,使用Chrome浏览器模拟设备大小,将该尺寸(*7501074*)存下来,用于实时查看移动端页面效果。如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。2.标题简短移动端浏览器导航条宽度有限,简短的标题可以使其展示完整。3.二维码图片使用img标签引入二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。4.二维码图片记得扫描测试有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒。这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如App的下载页面等。因此二维码的扫描测试不能少。举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。5.使用Gulp拼合图片如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写CSS的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。举个例子,如果布局时width:100%;background-position:center;使用工具拼合图片后,该元素区域(100%的宽度)内会将其他图片显示出来,这不是我们想要看到的。6.关于链接的分享-QQ如果将页面链接直接复制分享给其他人,在手机上接收链接消息的用户可能会看到链接的相关信息,如页面标题、描述和图片。相关信息设置方式如下:QQ中链接的标题由此处获取*.*.com/static/images/share.png"/>可参考手机QQ接口文档:setShareInfo。问题:即使使用了如上的image设置方法,还是没能显示预期图片?解决:确定下你发送的链接格式,会不会有所省略,如:somedomain/或者somedomain/index,正确的应为somedomain/index.html,才能正确解析到图片。如果是打开链接后,在QQ内置浏览器里选择将页面分享出去,那一般不会出错。7.CSS动画属性前缀webkit使用CSS3来制作动画效果的话,webkit前缀一定记得加,要不然在某些手机下动画效果是没有的。如下:-webkit-animation:f.8s2sforwardsease-in-out;animation:f.8s2sforwardsease-in-out;@-webkit-keyframesf{0%{opacity:0;-webkit-transform:translate3d(750px,0,0);transform:translate3d(750px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframesf{0%{opacity:0;-webkit-transform:translate3d(750px,0,0);transform:translate3d(750px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}推荐使用自动化工具来处理未加前缀的CSS文件,如gulp-autoprefixer。8.图片压缩使用自动化工具gulp-imagemin(教程)来压缩图片,效果举例:101KB=>80.7KB。后来我使用了在线工具Tinypng又进行了一次压缩,效果举例:(上面使用gulp-imagemin压缩过的图片)80.7KB=>38.1KB,可见光使用自动化工具来压缩是不够的,大部分图片仍存在较大的压缩空间,可以再扔到Tinypng里压缩一下看看。在线的Tinypng可以无限次使用,如果想要使用其API来进行压缩自动化的话,可以使用gulp-tinypng等插件,但是有每月压缩图片数量限制,每月前500张图片免费,其他收费情况参考官网说明。使用其API还需要获取APIKey,这里可以获取。个人觉得想要免费的话使用API会有数量限制,时刻惦记着数量有点心累,不如直接使用在线工具,也不麻烦~9.Loading代码段分享,拿走即用~functionloading(){functionLoad(){}Load.prototype.loadImgs=function(urls,callback){this.urls=urls;this.imgNumbers=urls.length;this.loadImgNumbers=0;varthat=this;for(vari=0;i
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

郑重申明:以外的任何单位或个人,不得使用该案例作为工作成功展示!