网页设计策划一个具有高质量度移动站点的方法步骤,如果做个SEOer或站长们近期工作重点排名调查表的话,我估计排名首位的一定是移动站点或手机网站的建设了。移动站点之所以被站长们如此的看重,主要是因为其强大的平板电脑和手机用户群了。据悉在百度推广后台也已经有“移动站点质量度”的星级评价体系了,页面大小、页面内容、页面样式、转化渠道等因素都会影响质量度星级,其中明确表示说加载速度快、内容丰富的页面会获得更高的质量度星级。所以马海祥觉的光简单的做个手机网站还是不够了,我们更要做个具有内容丰富的高质量度移动站点了,通过提升移动网站质量可以增强用户体验和转化效果。
面对着这么多已经初具规模的移动站点,我们将如何提高自己负责的移动站点在百度质量度的等级?对于还没有开始建移动站点的站长们,我们又该怎么策划一个具有高质量度的移动站点呢?在此不妨仔细的看下马海祥博客所建议的几个方法步骤:
一、先规划好页面样式布局
1、页面适配手机屏幕
2、页面专门针对手机屏幕设计
(1)、页面随屏幕宽度变化,无横向滚动条
(2)、不放大时,能清晰浏览内容,文字大小不低于12像素
(3)、不放大时,按钮、链接等点击方便,按钮尺寸不能过大或过小
3、使用最多三级的页面结构
减少移动站的页面层级,降低用户认知难度,一个标准的移动站应该包含首页、列表页和详情页三种类型,以满足广告主的推广需求和用户的认知需要;页面类型及层级马海祥建议不超过3个,保证简单、高效的用户体验。使用尽量浅的页间结构,减少用户点击次数,提升浏览体验。
(1)、首页
整站内容索引,内容预览(使用“更多”“详情”等链接),首页作为用户分流前到达的页面,要求能够汇集整个网站的大部分模块和功能,以保证不同需求的用户在着陆后都能寻找到自己想要的信息。内容式一般首页又可以分为导航式和内容式,导航式因其风格简洁,一般又可用作品牌宣传,起到快速传达品牌形象的作用;内容式因其丰富的内容,常用来快速传达广告主想传递的信息。
(移动站首页分为导航式和内容式)
(2)、列表页
频道内容、分类、列表为主,列表页一般用于展现结构简单,并且重复度较高的内容,最常见于商家的产品/服务,形式也一般相对简单,用于满足展现多产品/服务的需求,根据商家产品/服务信息不同一般分为纯文字和图文两种基本形式。
不使用flash;
可使用html5来实现动画。
7、优秀交互方式,简化操作流程,提升使用体验
马海祥认为优秀的交互方式能很有效地提升用户体验,一方面能够简化操作流程提升操作效率,另外对于产品功能易用性的提升也是较大的。
(1)、滑动切换图片相比于自动切换和点击切换,滑动切换增强了用户操作的主动性、同时提升了切换的便捷性。
操作系统:Android,iOS;
浏览器:UC、QQ、iOSSafari、Android原生、外贸网络推广Baidu。
二、内容设置准则
1、一致性
着陆页内容与关键字、广告文字的相关性,不仅保证广告与目标页面呼应和一致,更重要的能够提升潜在客户在着陆页上面的点击次数,减少客户流失。
(重要信息首屏显示)
4、根据行业特性,放置针对性的内容
重点关注移动页面的信息构建,以满足用户需求
基础信息:公司介绍、产品/服务介绍、etc.
信任信息:荣誉资质、专家团队、案例,etc.
转化信息:电话、地址,etc.
5、精简文字,处理好图片
(跳出前等待时间的用户比例)
加载时间:单页面5S以内。
网页大小:单页面50K以内。
优化加载时间和网页大小:重点在前端优化(具体方法可查看《提高网站速度的6种网站前端优化方法》)。
减少HTTP请求:减少重定向,合并图片,懒加载……
减少传输数据大小:压缩图像,开启GZIP……
考虑到移动设备和移动互联网的特点,在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率,降低页面加载时间。
2、减少访问请求数
从设计实现层面简化页面,不要放太多的图片、复杂的表达、动画、视频等等,
资源合并及压缩:比如将背景图片、导航图片等等作为一张图片,这样只需一次请求,而不是多次。
静态资源(Css、Js、Image)懒加载(推荐一个好用的css压缩工具:)
异步执行inline脚本
避免重复的资源请求
缩小cooike(不明白什么是cooike的,看查看一下《基于cookie信息的互联网精准广告定向技术研究》)
设置连接方式为keep-alive
减少DNS查询
移动端可见区域是有限的,采用延迟加载方式
开启服务器压缩(gzip方式)
3、优化图片处理
图片走CDN
少用动态gif图
图片不适宜过多及过大
零碎图片使用cssSprite技术一次性下载
避免使用bmp图片
图片压缩
4、优化HTML
减少HTML标签,减少不必要的嵌套
废弃table标签
减少DOM深度
压缩HTML,去掉注释,空格换行等信息
5、优化JS
使用临时变量或者数组存储document.images及document.forms等集合数据
慎用with语法
使用AJAX缓存
避免eval及Function语法
避免使用inlineScript
异步、底部加载js
合并压缩js(推荐一个便捷的html跟js互转工具:)
字符串连接使用数组的join方式
马海祥思维感悟:
随着互联网的发展,商家和企业面向消费者提供的应用和服务向3G平台迁移已是大势所趋,马海祥觉的移动互联网必将比传统互联网具有更高的商业价值。手机网站具有让消费者随时、随地、随身访问的优势和方便快捷的不可取代的特点。而目前,手机正迅速成为人们最常用的上网方式,截至2012年,我国网民中用手机接入互联网的用户占比已达到72.2%,首次超过台式电脑,成为我国网民的第一大上网终端,因此手机网站又具备了得天独厚的发展潜力。因为传统网站不适合通过手机访问,因此建立专供手机上网浏览的移动站点,让客户真正能实现实现随时、随地、随身的访问,已成为了许多企业和商家的必须选择了。
本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于,注明出处;否则,禁止转载;谢谢配合!