马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > SEO优化 > 移动端SEO > PC站建立移动端网站的三大方法模式

PC站建立移动端网站的三大方法模式

时间:2016-12-07   文章来源:马海祥博客   访问次数:

移动端网站作为移动互联网最主要的入口,能随时展现自身、与目标用户便捷沟通,同时方便手机用户随时随地查询和浏览,有效占领客户“空闲时间”。移动端网站确实是最便捷的宣传册,无论何时何地,遇见何人,你只要打开手机即可以让对方浏览到产品和服务信息,不会错过任何一次宣传和推销。

PC站建立移动端网站的三大方法模式-马海祥博客

建立一个适合移动端浏览的网站有很多种方法,主流的方法有自适应网页设计、移动网站和移动APP应用三类,通过这些方法,可以在短时间内将一个已有的桌面网站转换为适合移动设备访问的网站。

一、自适应设计网站

自适应网页设计,就是让同一个网页代码,能够在不同设备上(从桌面电脑显示器到智能手机或其他移动产品设备)都能有更好的浏览体验,因此,站长在建站前,就要考虑好页面布局如何能适应多屏幕浏览,这样移动设备可以通过原网址来浏览桌面站点,看到的是自动适应屏幕大小后的网站。

尽管这种方式使得域名统一了,但如果对于结构复杂、页面反复的网站来说,代码设计具有相当高的难度。

因此,通常自适应网页设计比较适合单栏或双栏等简单版面网站,对于复杂版面较难设计(具体可查看马海祥博客《如何利用“自适应网页设计”实现不同的设备上呈现同样的网页》的相关介绍)。

由于自适应设计的内容使用同一个网址,不会出现重定向,因此对于访问用户来说,不必花时间记忆另外网址,对于网站开发者来说,改造单栏或双栏网站为自适应网站的开发较为简单,只需对CSS进行不大的修改即可。

自适应网页需要手机浏览器支持css3,例如目前的iPhone和Android内置浏览器都支持css3,但诺基亚手机内置浏览器就不支持css3,考虑到老式的手机已经逐步淘汰,这部分用户也可以考虑忽略不计。

同时,自适应网页需要展示更多的图片,较耗费流量,因此也不太适合2G网络用户访问。

对于网站的修改来说,只要在HTML头部增加viewport标签(控制显示尺寸、是否允许缩放、初始比例、上下限等)、MobileOptimized标签(微软为IE Mobile版设置的定义宽度标记)和HandheldFriendly标签(是否对手持设备友好,只有true或者false),在CSS文件尾部增加针对不同屏幕分辨率的规则,布局宽度使用相对宽度,隐藏侧栏,半小时的开发量就可以提升网站的手机移动浏览体验。

1、在HTML头部增加viewport标签

在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

<meta name="viewport" content="width=device-width, initial-scale=1" />

这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。

2、在CSS文件尾部增加针对不同屏幕分辨率的规则

例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节,以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {
  #divMain{
  float: none;
  width:auto;
  }
  #divSidebar {
  display:none;
  }
}

3、布局宽度使用相对宽度

网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。

当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。

4、页面使用相对字体(非必要)

在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用em = px/16 换算,例如16px就等于1em。

5、图片自适应(非必要)

img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }

css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;

总之,根据上面步骤进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面,这对于通过手机访问网站的用户来说,的确是一件好事。

二、移动网站

移动网站是指对于现有的桌面网站,按照移动端的设计规则来重新建立一个移动网站,尽管内容和桌面网站一样,但却拥有两个不同网址。通常的移动网站使用子域名的方式实现,例如使用类似m.mahaixiang.cn这样的地址,为移动用户专门定制,内容可以与桌面网站不同,桌面网站的网址检测到移动设备后自动重定向到移动网站页面。

移动网站可以支持非触屏智能手机和触屏智能手机,适合侧重移动设备或专门针对移动设备的网站,使用移动浏览器访问。

很多blog、cms建站程序都有桌面的移动页面入口,网站只需将移动设备用户引导到这个入口即可,通常有wap或HTML5等方式的建站方式。

wap页面主要针对老式手机浏览器和2G用户,例如诺基亚手机用户,页面简洁,很省流量,但目前正处于淘汰过程中。

HTML5的技术门槛较高,单独开发会有不少难度,很多站长采用移动建站工具来生成基于HTML5的移动网站(具体可查看马海祥博客《移动端网站的HTML5前端性能优化指南》的相关介绍)。

虽然手机网站作用很大,但是制作手机网站时的注意事项很多,否则就会造成网站打不开,甚至影响网站的正常使用。

1、使用独立域名

很多站长为了省事,将PC端域名与手机域名使用同一个域名。这本来问题不大,但却忽略了,在移动端,搜索引擎对于PC端的资源是排斥的。也就是说,网站需要有明确的指示给搜索引擎,在什么时候PC端优先,什么时候移动端优先。

如果你不懂做适配设置(具体可查看马海祥博客《PC网站自动适配手机网页的方法技巧》的相关介绍),最好的办法是将PC端网站与手机网站分开,针对移动互联网做适配的手机网站。因而,在搜索有限的情况下,手机网站使用独立域名是最佳的选择。

2、使用HTML5程序

目前大多数网站建设仍然沿用着ASP、PHP、JAVA、NET等程序语言。这些语言对于PC端网站建设来说没有太大的问题,但由于移动设备的屏幕尺寸所决定的各种因素,这些语言所建设的网站在移动端具有一定的局限性。这时候,更轻便、更灵活、具有强化了的Web网页表现的HTML便成了手机网站建设的最佳选择。

3、根据手机特征设计网站

手机屏幕远没有PC的大,因而,无论是在版面设计上还是功能设计上,都需要更注重实操性。

PC端的版式布局并不适合小屏幕的手机浏览及操作,在手机网站设计上,可以根据手机的实际操作情况来排版网站的栏目。

4、使用精简的网页设计

手机网站的版面小,因而在进行手机网页设计时要尽量少使用阴影、渐变等复杂的设计手法,尽量采用简洁大方的版面设计,目前一些潮流的设计方式能够在手机网站上得到很好的体现,在手机网站设计中可以参考或使用。

还有,专业手机网站制作方法中,手机网站一定要注意用户体验,不能单一化,要注意手机的特定人群,这和传统网站制作截然不同,做到上面几点就离成功不远了!

三、移动APP应用

移动APP应用指的是专门在苹果和安卓应用商店里发布移动APP应用,安装后可以直接使用。移动APP应用的开发成本较高,针对苹果和安卓需要两套开发API,不过,移动APP可以允许用户离线使用,还可以访问移动设备的硬件信息,对于交互性强的应用来说较为适合。

对于普通内容类网站来说,使用移动APP应用的好处并不明显。

由于移动APP应用开发门槛较高,因此站长可以使用相关工具来自动生成应用,百度Site App里也有这种功能,可以一键生成iOS和Android应用文件,但是需要网站站长自己去苹果和安卓应用商店提交应用。

目前使用较多的移动建站工具是百度Site App,百度移动搜索会将大部分网站进行转码,转码后的内容比较适合手机移动等小屏幕设备访问,百度Site App这个工具可以支持站长将自己网站转码后的页面进行定制,并部署到自己独立子域名的网站。

对于网站站长来说,通过这三种形式都可以打造适合移动设备访问的网站,自适应网页设计的开发难度小,手机浏览体验好,还支持自适应AdSense广告,但是目前百度搜索还不能很好地识别自适应网页,部分自适应页面会被百度移动搜索进行转码(主要是由于未携带移动网页特征),使得原有的页面设计和AdSense广告都无法显示。

对于期待从百度移动搜索获取流量的网站,应该优先做单独的移动网站,百度对于移动网站的支持较好,在移动搜索结果中会优先显示移动网站,不过,随着智能手机的迅速普及,百度已经逐步开始支持自适应网页在移动搜索中的展现。

对于Google来说,其没有对网页进行转码,因此对于自适应网站来说能够有较好的显示效果,但是对于未经改造的网页来说,会在移动设备展示桌面网站,可能会耗费更多的手机流量。

因此,对于网站站长来说,较为稳妥的移动化方案是,既能提供网站的自适应设计,同时又提供一个单独的移动网站,这样既能让用户得到良好的浏览体验,又能让搜索引擎较好收录。

马海祥博客点评:

手机网站和微信网站都是未来的大趋势,我们要做的应该是以手机网站为基础延伸微信网站功能,再结合PC端网站,实现网站的三站合一。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/ydseo/1723.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 移动端   移动端网站   pc站  

上一篇:搜索引擎喜欢什么样的移动页面优化方式?
下一篇:移动设备环境如何影响手机网站的设计?

您可能还会对以下这些文章感兴趣!

  • 移动端网站SEO优化排名的一些注意细节

    俗话说,有搜索的地方就有SEO优化,移动端的SEO优化也逐渐的进入火热化,对于移动端的SEO优化,大家都是处于同一个阶段,就看谁花在这上面的心思更多一些了,在优化移动端网页的时候,越来越多的问题开始出现,在暴露移动端薄弱的同时,也让刚刚进入SEO行业的新人们跟前……【查看全文

    阅读:1980关键词: 移动端   seo优化   seo排名   日期:2015-11-17
  • PC网站自动适配手机网页的方法技巧

    随着智能手机的不断发展,移动搜索的比例也在不断增加,而传统的PC站点在手机端的用户体验度较差,这就容易流失大量的用户,所以做一个对应的手机站就理所当然,如今手机站已经逐渐成为一种潮流,基本上有点规模的PC站点都会制作相应的手机站,可是在很多方面依然存在一……【查看全文

    阅读:23001关键词: 网站   手机网页   pc站   日期:2015-12-03
  • 提高网站在移动端打开速度的方法技巧

    最近一项研究表明:80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间,由于64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二倍以上的时间,达到了9秒,为了满足移动用户的高期望,你需要对网站针对移动……【查看全文

    阅读:7817关键词: 网站   移动端   网站速度   日期:2015-03-12
  • 手机网站制作的常用方法及优化技巧

    手机网站是指用WML(无线标记语言)编写的专门用于手机浏览的网站,通常以文字信息和简单的图片信息为主。实际上,随着向手机智能化方向发展,安装了操作系统和浏览器的手机的功能和电脑是很相似,使用这种手机可以通过GPRS上网可浏览几乎所有的www网站,无论网站是不是专……【查看全文

    阅读:4273关键词: 手机网站   网站制作   优化方法   优化技巧   日期:2014-10-04
  • 移动设备前端开发中viewport的理论及使用技巧

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备,viewport并非只是ios上的独有属性,在android、winp……【查看全文

    阅读:219关键词: 移动设备   前端开发   日期:2016-04-03
  • 百度移动搜索优化:手机站优化指南

    本文旨在为手机站站长提供官方、明确的搜索引擎优化标准,使站长合理、可持续的提升手机站流量,获得长久、稳定的发展,同时促进整个移动互联网的良性发展。其中移动搜索会优先收录的手机站点为:A、拥有手机用户迫切需要内容资源的手机站点。B、符合手机建站规范的站点……【查看全文

    阅读:2206关键词: 移动搜索优化   移动搜索   手机站优化   优化指南   日期:2014-08-18
  • PC站建立移动端网站的三大方法模式

    移动端网站作为移动互联网最主要的入口,能随时展现自身、与目标用户便捷沟通,同时方便手机用户随时随地查询和浏览,有效占领客户“空闲时间”。移动端网站确实是最便捷的宣传册,无论何时何地,遇见何人,你只要打开手机即可以让对方浏览到产品和服务信息,不会错过任……【查看全文

    阅读:3004关键词: 移动端网站   移动端   pc站   日期:2016-12-07
  • 移动端手机站做站内优化的要点

    随着移动流量的与日俱增,移动搜索引擎的功能越来越丰富,意味着更多移动特性可以施展,同时也意味着对HTML5网站的要求更趋规范和严格,这对于负责移动站点优化的负责人来说是个极大的挑战,我一般将站内优化的生命周期概括为三个词,实验、评估、调整,因此我的站内优……【查看全文

    阅读:1849关键词: 移动端   手机站   站内优化   日期:2015-11-10
  • 如何优化移动页面中的head标签代码更利于搜索引擎识别

    对于手机网站的首页或者频道首页的网页代码中的keywords、description最好加上与PC端有所区别的meta标签和关键词,在每个页面的关键字及描述像做传统PC端网站一样,做好针对性的填写工作,对搜索结果的展现(摘要)以及优化工作大有帮助,另外确保在手机网站或者PC端网站……【查看全文

    阅读:1326关键词: 页面优化   搜索引擎   日期:2015-08-08
  • 移动端SEO优化与PC端SEO优化的不同点

    随着移动互联网的快速发展,用户从PC端向移动端迁移的大趋势更加明显,但这也使得移动手机网站的SEO优化工作还处于探索阶段,很多SEO和站长也都有了一些疑问,移动端需要做SEO优化吗?移动端该怎么做SEO优化?我们都知道,移动端与PC端搜索引擎排名算法是不一样,但是优……【查看全文

    阅读:931关键词: 移动端seo   seo优化   seo   日期:2015-09-10
↓ 点击查看更多 ↓

互联网更多>>

  • 移动互联网是什么意思? 移动互联网是什么意思? 移动互联网就是将移动通信和互联网二者结合起来成为一体,是指互联网的技术、平台、商业模式和应用与移动通信……
  • 计算机的开机启动原理 计算机的开机启动原理 计算机从打开电源到开始操作,整个启动可以说是一个非常复杂的过程。总体来说,计算机的整个启动过程分成四个……
  • 互联网思维究竟是一种什么样的思维? 互联网思维究竟是一种什么样的思维? 但凡做企业的,不管是创业的还是在互联网冲击下转型升级的传统行业企业家,“互联网思维”已经成为了大家共同……

SEO优化 更多>>

医疗行业开展品牌推广急需解决的10大问题 如何以一个用户的角度来做企业门户网站