卢松松博客

提高移动站在百度质量度等级的详细说明

 人参与 | 时间:2013年09月18日 09:32

本文是非常详细的一份移动建站方面的资料,上一次谷歌发布了移动网站建站的十大原则,这次百度也发布了移动建站指南,图文并茂的描述了如何提高移动站在百度质量度的等级,在百度推广后台已经有“移动站点质量度”的星级评价体系了,页面大小、页面内容、页面样式、转化渠道等因素都会影响质量度星级,加载速度快、内容丰富的页面质量度星级更高,提升移动网站质量可以增强用户体验和转化效果。

一:怎样做好页面设计

(1),页面适配手机屏幕

提高移动站在百度质量度等级的详细说明 建站教程 第1张

(2)页面专门针对手机屏幕设计:

1、页面随屏幕宽度变化,无横向滚动条

2、不放大时,能清晰浏览内容,文字大小不低于12像素

3、不放大时,按钮、链接等点击方便,按钮尺寸不能过大或过小

(3)使用最多三级的页面结构

提高移动站在百度质量度等级的详细说明 建站教程 第2张

减少移动站的页面层级,降低用户认知难度,一个标准的移动站应该包含首页、列表页和详情页三种类型,以满足广告主的推广需求和用户的认知需要;页面类型及层级建议不超过3个,保证简单、高效的用户体验。使用尽量浅的页间结构,减少用户点击次数,提升浏览体验。

提高移动站在百度质量度等级的详细说明 建站教程 第3张

1、首页:整站内容索引,内容预览(使用“更多” “详情”等链接),首页作为用户分流前到达的页面,要求能够汇集整个网站的大部分模块和功能,以保证不同需求的用户在着陆后都能寻找到自己想要的信息。内容式一般首页又可以分为导航式和内容式,导航式因其风格简洁,一般又可用作品牌宣传,起到快速传达品牌形象的作用;内容式因其丰富的内容,常用来快速传达广告主想传递的信息。

提高移动站在百度质量度等级的详细说明 建站教程 第4张

(移动站首页分为导航式和内容式)

2、列表页:频道内容、分类、列表为主,列表页一般用于展现结构简单,并且重复度较高的内容,最常见于商家的产品/服务,形式也一般相对简单,用于满足展现多产品/服务的需求,根据商家产品/服务信息不同一般分为纯文字和图文两种基本形式。

提高移动站在百度质量度等级的详细说明 建站教程 第5张

3、详情页:详介绍,推荐以结构化形式展现内容,详情页一般用作展示首页和列表页未显示完全的信息,以满足用户了解详情的需求,从而辅助用户进行决策。

提高移动站在百度质量度等级的详细说明 建站教程 第6张

(4)使用清晰的导航组件

提高移动站在百度质量度等级的详细说明 建站教程 第7张

全站导航:快速到达各个频道

局部导航:在单个频道的首页、列表、详情页面间移动

相关链接:相关频道之间的链接

(5)页面单列布局,重要内容显示在首屏

提高移动站在百度质量度等级的详细说明 建站教程 第8张

页面内容模块从上到下,单列布局,重要内容展现在首屏。

(6)保证良好的可用性,页面内容无缺失,交互功能正常使用。

提高移动站在百度质量度等级的详细说明 建站教程 第9张

不使用flash

使用html5来实现动画

(7)优秀交互方式,简化操作流程,提升使用体验

优秀的交互方式能很有效地提升用户体验,一方面能够简化操作流程提升操作效率,另外对于产品功能易用性的提升也是较大的。

滑动切换图片相比于自动切换和点击切换,滑动切换增强了用户操作的主动性、同时提升了切换的便捷性。

提高移动站在百度质量度等级的详细说明 建站教程 第10张

滑动切换页面用户可以通过滑动进行页面之间的切换,节省用户寻址时间。

提高移动站在百度质量度等级的详细说明 建站教程 第11张

点击放大图片点击缩略图放大图片,减少了操作流程,一定程度上减少了因页面跳转带来的用户流失。

提高移动站在百度质量度等级的详细说明 建站教程 第12张

页面区域点击区域点击能较大提升用户点击的效率,减少用户因定位点击区域造成的效率损失。

提高移动站在百度质量度等级的详细说明 建站教程 第13张

点击加载更多一方面减少单张页面的非必要信息,让页面变得简洁,同时能减少页面间的跳转,降低因网速等原因造成的用户流失。

提高移动站在百度质量度等级的详细说明 建站教程 第14张

(8)保证广泛的兼容性,在主流OS、浏览器中均可正常展现

提高移动站在百度质量度等级的详细说明 建站教程 第15张

操作系统:Android,iOS;浏览器:UC、QQ、iOS Safari、Android原生、Baidu

二:内容设置的几条准则

(1)一致性:着陆页内容与关键字、广告文字的相关性,不仅保证广告与目标页面呼应和一致,更重要的能够提升潜在客户在着陆页上面的点击次数,减少客户流失。

提高移动站在百度质量度等级的详细说明 建站教程 第16张

(2)可信度:通过告知潜在客户公司名称、联系地址、客服电话等信息,能够有效地提升网站(公司)的可信度。

提高移动站在百度质量度等级的详细说明 建站教程 第17张

(3)重要信息首屏显示:具体产品信息尽量出现在网页的第1~2屏,避免与用户玩寻宝游戏。

提高移动站在百度质量度等级的详细说明 建站教程 第18张

(重要信息首屏显示)

(4)根据行业特性,放置针对性的内容

重点关注移动页面的信息构建,以满足用户需求

基础信息:公司介绍、产品/服务介绍、etc.

信任信息:荣誉资质、专家团队、案例,etc.

转化信息:电话、地址,etc.

(5)精简文字,处理好图片

提高移动站在百度质量度等级的详细说明 建站教程 第19张

精简文字量:PC内容一半左右,

使用图片、幻灯片提升展示效果,并注意压缩图片尺寸,

推荐用宽图片展示LOGO,正方形图片展示产品。

三:优化页面性能

(1)控制加载时间与网页大小

提高移动站在百度质量度等级的详细说明 建站教程 第20张

(跳出前等待时间的用户比例)

加载时间:单页面5S以内

网页大小:单页面50K以内

优化加载时间和网页大小:重点在前端优化

减少HTTP请求:减少重定向,合并图片,懒加载……

减少传输数据大小:压缩图像,开启GZIP……

考虑到移动设备和移动互联网的特点,在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率,降低页面加载时间。

(2)减少访问请求数

从设计实现层面简化页面,不要放太多的图片、复杂的表达、动画、视频等等,

资源合并及压缩:比如将背景图片、导航图片等等作为一张图片,这样只需一次请求,而不是多次。

静态资源(Css、Js、Image)懒加载

异步执行inline脚本

避免重复的资源请求

缩小cooike

设置连接方式为keep-alive

减少DNS查询

移动端可见区域是有限的,采用延迟加载方式

开启服务器压缩(gzip方式)

(3)优化图片处理

图片走CDN

少用动态gif图

图片不适宜过多及过大

零碎图片使用css Sprite技术一次性下载

避免使用bmp图片

图片压缩

(4)优化HTML

减少HTML标签,减少不必要的嵌套

废弃table标签

减少DOM深度

压缩HTML,去掉注释,空格换行等信息

(5)优化JS

使用临时变量或者数组存储document.images及document.forms等集合数据

慎用with语法

使用AJAX缓存

避免eval及Function语法

避免使用inlineScript

异步、底部加载js

合并压缩js

字符串连接使用数组的join方式

顶: 3踩: 0

来源:,欢迎分享,(QQ/微信:13340454)

必填

选填

选填

◎已有 63 人评论,微信:QQ13340454

1楼java网店系统  2016-08-11 15:23:33
移动站也有建站模板的吗?
公司的网站,还没做移动站,啊求移动建站教程
顶: 0踩: 0 回复
2楼健康门户  2016-01-23 11:28:29
学习了
顶: 0踩: 0 回复
3楼夜大网手机版  2015-07-03 22:07:06
移动站现在也是必须的了,我费了九牛二虎之力才搞好。幸好模板还挺好看的。
顶: 0踩: 0 回复
4楼郑州铁皮柜  2014-07-13 22:19:50
我想说的是 现在是移动网络还是好 还是媒体网络推广好
顶: 0踩: 0 回复
5楼九块九包邮  2014-05-19 10:30:27
手机用户体验也提高了
顶: 0踩: 0 回复
6楼恋字坊  2014-03-18 17:47:20
移动互联网的时代已经悄然而至了
顶: 0踩: 0 回复
7楼妹妹高清  2014-01-08 04:37:33
一直在努力,优化无极限
顶: 0踩: 0 回复
8楼囧事  2013-12-28 16:27:36
移动端的战火愈演愈烈,入口之争在移动端还没有定型
顶: 0踩: 0 回复
9楼上海百度排名  2013-10-30 14:01:20
手机用户体验也提高了
顶: 0踩: 0 回复
10楼伊莉  2013-10-24 13:36:17
移动是未来的趋势,百度也把重心放到移动搜索方面了
顶: 0踩: 0 回复
11楼伊莉心情  2013-10-11 10:00:41
手机上网是未来的趋势啊!!
顶: 0踩: 0 回复
12楼经典社区  2013-10-08 13:37:33
这篇文章就当做学习贴吧,移动端目前来看不太适合站长们参与,尤其没有技术根底的站长,ROI太难控制
顶: 0踩: 0 回复
13楼经典荟萃社区  2013-09-28 16:22:12
移动端的战火愈演愈烈,入口之争在移动端还没有定型
顶: 0踩: 0 回复
14楼化粪池  2013-09-24 15:15:40
移动终端终于独树一帜了~~
顶: 0踩: 0 回复
15楼FROYO  2013-09-24 11:30:51
基本都符合,主题比较给力,只能说感谢主题制作者了
顶: 0踩: 0 回复
16楼兔子一家  2013-09-24 00:54:30
我到是一直想开发手机端呢,但是很麻烦。
顶: 0踩: 0 回复
17楼站长百科  2013-09-22 10:15:53
移动站的发展是随着移动互联的不断深入进行的
顶: 0踩: 0 回复
18楼国外lead  2013-09-21 17:15:18
移动网络发展挺快的
顶: 0踩: 0 回复
19楼王牌论坛  2013-09-21 13:41:33
手机网站现在发展很快
顶: 0踩: 0 回复
20楼大学毕业证  2013-09-21 12:00:54
手机上网太贵了.手机查现在
顶: 0踩: 0 回复
21楼app推广联盟  2013-09-21 08:16:31
移动站,以后肯定是这个方向了
顶: 0踩: 0 回复
22楼香港新世界机房  2013-09-20 22:58:53
讲的很详细呀。
顶: 0踩: 0 回复
23楼威虎博客  2013-09-20 05:41:18
手机网站应该有前景。
顶: 0踩: 0 回复
24楼聊天室导航  2013-09-19 13:50:02
移动站,简单明了,快、省流量才是王道。
顶: 0踩: 0 回复
25楼天气预报查询一周  2013-09-19 12:46:27
结构不能太深层,这个是移动站的共性。
顶: 0踩: 0 回复
26楼阿锋  2013-09-18 19:23:05
移动互联网蓬勃发展
顶: 0踩: 0 回复
27楼张力博客  2013-09-18 18:54:02
我也在想把博客模板做成手机自适应的!
顶: 0踩: 0 回复
28楼  2013-09-18 18:00:23
完全适应、
顶: 0踩: 0 回复
29楼旅行者  2013-09-18 17:45:00
做好移动端页面设计,提高用户体验
顶: 0踩: 0 回复
30楼北漂书生  2013-09-18 17:37:27
对于移动网站的一些规则,百度更多的是从技术角度来解释,而谷歌更多的是从用户体验和策略层面向站长阐释
顶: 0踩: 0 回复
31楼碎钉足球鞋  2013-09-18 17:23:43
提升移动网站质量可以增强用户体验和转化效果
顶: 0踩: 0 回复
32楼玩游戏赚钱  2013-09-18 17:20:11
从文章中了解到移动站也是支持js的这一条信息啦
顶: 0踩: 0 回复
33楼合肥海弘游艇俱乐部  2013-09-18 16:32:42
这将会提高移动互联网的用户体验嘛
顶: 0踩: 0 回复
34楼7k电影网  2013-09-18 15:34:33
从移动端的流量来源是非常多,所以要做好用户体验,留住用户。
顶: 0踩: 0 回复
35楼龙三公子  2013-09-18 15:28:58
现在移动站是越来越多了
顶: 0踩: 0 回复
36楼蘑菇范儿  2013-09-18 15:13:22
过来看看松哥,提前祝松哥中秋节快乐
顶: 0踩: 0 回复
37楼CCCCCCCC  2013-09-18 14:55:22
这篇文章内容大概仿照一篇文章写的
顶: 0踩: 0 回复
38楼枫先生  2013-09-18 14:51:31
移动站不会搞啊。。
顶: 0踩: 0 回复
39楼好运鞋  2013-09-18 14:41:28
很复杂,好像就是把电脑屏幕缩小了,还要更好的感觉了。可以相辅相成的。
顶: 0踩: 0 回复
40楼草客网  2013-09-18 14:30:34
移动站,不好搞啊
草客网也想出移动站,没技术
顶: 0踩: 0 回复
41楼QQ趣味吧  2013-09-18 14:24:14
看不明白,网络站都做不好了这个先不考虑
顶: 0踩: 0 回复
42楼面子至上  2013-09-18 13:54:11
好的~~我去下来看看~~其实我在米聊上面都收听了你的内容都一样吧?
顶: 0踩: 0 回复
42楼伊莉  2013-10-24 13:36:17
移动是未来的趋势,百度也把重心放到移动搜索方面了
顶: 0踩: 0 回复
43楼声卡驱动器官方下载  2013-09-18 13:35:24
暂时不做移动站
顶: 0踩: 0 回复
44楼天津极地海洋馆  2013-09-18 13:23:57
其实也很不容易啊
顶: 0踩: 0 回复
45楼路路保  2013-09-18 13:03:46
网络的未来或将成为移动化的天下!
顶: 0踩: 0 回复
46楼含油铜套  2013-09-18 12:54:58
移动端的流量来源越来越大了,所以移动端的网站也必须要重视起来了。这是一种趋势。
顶: 0踩: 0 回复
47楼慢点博客  2013-09-18 12:43:39
哎,和一般的小站没啥关系。。
顶: 0踩: 0 回复
48楼海滨博客  2013-09-18 12:35:36
用百度app就没错啊
顶: 0踩: 0 回复
49楼awnuxkjy  2013-09-18 12:07:30
不错。网站得准备移动版了
顶: 0踩: 0 回复
50楼SEO新人  2013-09-18 11:57:52
新人看不太懂噢 先收藏再研究
顶: 0踩: 0 回复
51楼91笑话网  2013-09-18 11:55:52
要好好学习学习,顺祝中秋节快客
顶: 0踩: 0 回复
52楼阿兴博客  2013-09-18 11:52:13
现在移动媒体是主流啊
顶: 0踩: 0 回复
53楼社新社  2013-09-18 11:40:49
这篇文章是好文,不过一般的小站用不到。
顶: 0踩: 0 回复
54楼海棠果  2013-09-18 11:35:47
中秋节来临之际,祝卢松松中秋节快乐,希望贵站越办越好。
顶: 0踩: 0 回复
55楼面子至上  2013-09-18 11:32:38
好详细的介绍啊 卢哥什么时候把你的网站弄个app呢下载来看方便多了
顶: 0踩: 0 回复
56楼玩游戏赚钱  2013-09-18 11:31:38
移动端的访问会越来越多,也会有越来越多的站点推出移动站。所以百度这个做法是有必要的
顶: 0踩: 0 回复
57楼石家庄分类  2013-09-18 11:14:09
网站的wap站点之前还没有重视过,现在看来需要完善起来了。
顶: 0踩: 0 回复
58楼义乌代理注册公司  2013-09-18 11:00:45
说实话,不太喜欢移动站,手机不适合看网站内容。
顶: 0踩: 0 回复
59楼湖南论坛  2013-09-18 10:31:31
赞同:考虑用户访问的效率,降低页面加载时间
顶: 0踩: 0 回复
60楼旅途分享  2013-09-18 10:27:55
各行各业都有大学问,不懂程序的怎么办
顶: 0踩: 0 回复
61楼分享笑话  2013-09-18 10:24:28
一直在努力,优化无极限
顶: 0踩: 0 回复
62楼泥博客  2013-09-18 10:23:30
移动站点建设方面的资料确实少,顶!~
顶: 0踩: 0 回复
63楼网络营销博客  2013-09-18 10:07:20
不太喜欢用手机上网站,看看文章可以,想松松的博客,一些大型的站看着很压抑。
顶: 0踩: 0 回复
64楼非常芯地漏  2013-09-18 09:55:51
不是在360能搜百度吗,就是360有时候没有百度好用。。。
顶: 0踩: 0 回复
65楼琥珀  2013-09-18 09:50:48
好好学习,天天向↑
顶: 0踩: 0 回复
66楼夜知心  2013-09-18 09:43:05
百度是越来越牛了。无视360了
顶: 0踩: 0 回复