您现在的位置：北京SEO技术服务中心 > SEO技术 > 移动端优化 >

SEO新手移动端专题页面的优化要点(2)

发布时间：2017.04.06 浏览: 次

5、安全宽度与扩展区域让页面适应主流分辨率

与PC上网页的做法一样，确定一个安全宽度，把重要信息控制在640PX宽度内(以iphone分辨率为安全宽度，可以根据具体页面投放的渠道做响应的首屏高度。

6、屏幕大小

每个手机都有不同尺寸的屏幕，有的手机会有两种方式的转换：纵向和横向。

所以，你的网站不能是固定的像素宽度，使用百分比和EMS会更好，这种方法能使你的网站适应各种屏幕尺寸。

7、布局

由于网页本身和外在的因素影响，用手机浏览网页可能会是一件比较耗时的事情，所以记住，让您的移动网站设计得方便使用者。

比如，把所有你想让手机用户看到的最重要的信息放到页面顶部；最大限度的避免在界面的左右两侧放置导航，因为为了方便浏览，我们更多需要把页面内容设计成单一的分栏形式。

也应该减少表格的使用，如果一定要加入表格，也不应超过2列，同时避免行与列的融合。

由于屏幕大小的限制，很多情况下铺天盖地的菜单是不被允许的。菜单可能必须采用垂直的方式，但如果每一个单页都需要用户去向下滚动菜单才能看清所有的内容，这可能又会很不舒服。所以，如果你的网站只有三个或者更少的链接，可以采用一直浮在可视窗口形式的菜单，在这种情况下，它恰巧可以是横向的。

比如，在第一页使用导航，在其他页面的顶部使用链接或者面包屑连接到首页。

8、页面的Title和Description设置

Title & Description最好也跟桌面端的网站保持一致，但是可以在网站名称的部分加入手机站的表述，如：

桌面端的网站：<title>北京SEO技术服务中心</title>；

而移动端网站则可以写成：<title>手机北京SEO技术服务中心</title>或<title>北京SEO技术服务中心</title>

9、面包屑导航

面包屑导航是很重要的，其实面包屑导航在不管是桌面端还是移动端都非常重要，但是很多人在移动端容易忽略面包屑导航。

10、块级化a标签

请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

11、控制图片的大小

正常情况下大多数手机载入的图片对它们来说都非常繁重，所以在相关地方使用的图像要尽可能的小，而且图片应该是JPEG、GIF或者是PNG格式的，因为这些格式的图片很轻盈。

专题的头图一般有很强的视觉，对于手机用户来说，加载一张图片的等待时间比PC上成本大很多，如果一个页面加载时间超过5秒，70%的用户会选择关闭，那么再出彩的专题也没办法呈现再用户面前了，所以需要对设计稿做折中的处理。

在做头部的延展区域(超出640px范围)，推荐使用纯色，渐变，可以平铺的素材，以便于减少头图的大小，提高加载速度，并且延展区域可以无缝连接，模糊的背景可以最大限度的压缩图片质量。

另外，确保你的图片被压缩过，以免图片在页面中变得很大。还有值得一提一点是：用户经常会浏览到没有打开的图片，因此，最好始终使用alt文本，这是一个值得推荐的做法。

12、内容

因为用户在浏览你的网页时可能正处于行走的状态，所以应该确保网站上的信息很容易阅读和浏览，并且让用户快速的识别并轻松的找到想要的信息。

要确定好最终要在移动界面上展示的内容，合理地规划好的菜单和文本，避免由此造成的不合理缩放变化。

至于所呈现文本的版式，可以考虑用标题来控制字体大小。

13、字体

手机中的字号一般上电脑中的两倍，一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中，也要使用iOS和安卓默认渲染的字体，以便更真实的还原真实环境。

在规范手游移动版专题中，主要字号控制在3个，大中小都有一个区间，避免随意用字体字号，并且字号必须上整数。

14、控件交互区域适合触控

手机专题的主按钮高度大于80px，并且根据活动的需求放在首屏内，文字链接上下的间距大于80px，手指在屏幕上热区最小感应是44px。

15、如何去除Android平台中对邮箱地址的识别

看过iOS webapp API的同学都知道iOS提供了一个meta标签，用于禁用iOS对页面中电话号码的自动识别。

在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中：

16、移动端网页少用跳转

手机用户的网络环境不如PC用户，页面的跳转会对用户产生更大的心理效力，如果在手机页面中能吧信息合理的展示在一个页面中最佳。

如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等，减少用户产生的不安全感。

17、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空。

但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮，这个技巧仅适用iOS对于Android平台则无效。

18、页面大小

为一个移动网站指定风格时，保持所有的东西简洁，尽量追求小页面是非常有必要的。移动页面最大容量是20KB，所以要确保一切尽量满足这一点。如果可能的话，页面的大小可以小于10KB。

要知道，用户在移动网络上的数据费用是以KB为单位收取的。

北京SEO技术服务中心点评：

虽然手机因为性能，网络等限制因素，不能达到PC专题那么优秀的效果，但手机网页还是有他独有的优势，手机网页也是可以动起来的，而且还可以通过手机特有的重力感应功能做视差滚动效果的交互，看起来很优雅，通过手机控制PC页面的浏览也是一种新体验，不妨试试挖掘更多可能性。