马海祥博客是一个专注于分享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端网站,实现网站的三站合一。

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

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

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

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

  • 移动端制作手机版专题页面的优化要点

    专题网页的设计通常是短平快,在特定时间达到一些运营需求,而响应式设计通常需要考虑更多不同分辨率下的响应效果,花费的设计和开发时间成本可能是双倍的,而且专题设计具有很强的形式感,响应式设计的流体布局,必然会对视觉造成限制,所以对于专题来说做成响应式的网……【查看全文

    阅读:880关键词: 移动端   页面制作   专题页面   移动端优化   日期:2017-01-23
  • 2014年中国移动搜索行业发展研究报告

    随着智能手机普及,极大地推动移动互联网快速发展,用户上网行为随之发生迁移和改变,包括在互联网时代占据主要入口地位的搜索,用户搜索行为逐渐从传统PC搜索向移动搜索转移,移动搜索已经成为移动互联网时代的重要入口之一,相比传统PC搜索,用户在使用移动搜索时,往……【查看全文

    阅读:766关键词: 移动搜索   研究报告   日期:2015-03-25
  • 移动端网页界面常用的六种导航模式

    标签式导航:最常用、最不易出错,请第一时间考虑它。抽屉式导航:如果你的信息层级繁多,可以考虑将辅助类内容放在抽屉中。列表式导航:作为辅助导航来展示二级甚至更深层级的内容,每个APP必不可少,但请注意数量与分类。平铺式导航:如果你的内容是随意浏览,无需来……【查看全文

    阅读:4414关键词: 移动端网页   导航模式   网页导航   日期:2016-09-02
  • Wap手机站的SEO优化要点及注意事项

    随着智能手机的普及,Wap手机网站也逐渐多了起来,移动搜索也成了网站SEO优化的新战场,移动端的SEO优化随着移动智能终端的普及而显得尤为重要,甚至许多手机企业网站的建设也显得刻不容缓,所谓抢得先机即为赢得商机。作为中文手机搜索引擎百度移动搜索,每天用户使用……【查看全文

    阅读:1815关键词: 手机站   seo优化   日期:2016-05-03
  • 提高网站在移动端打开速度的方法技巧

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

    阅读:8225关键词: 网站   移动端   网站速度   日期:2015-03-12
  • 如何优化一个移动端手机网站

    随着移动设备的普及,也引发了一大批移动端网站的建设,但随之而来的问题也就出现了,作为一名专业的SEO人员,我们又该如何优化移动端手机网站呢?最近,也看到有很多做SEO的博友都在讨论移动端的网站怎么去做SEO优化?怎么做好手机网站优化?怎么把我们网站关键词排名……【查看全文

    阅读:3124关键词: 网站优化   移动端网站   手机网站   移动端   日期:2015-04-04
  • 搜索引擎喜欢什么样的移动页面优化方式?

    智能手机和平板电脑的普及,产生了越来越多的移动端客户流量,尽管基于手机和平板电脑的网络浏览器种类繁多,功能也都越来越完善,但限于较小的终端屏幕以及网络流量的问题,移动设备并不适合直接浏览各种基于桌面电脑登陆的网站,因此,做为网站站长来说,有必要为自己……【查看全文

    阅读:546关键词: 搜索引擎   页面优化   日期:2016-11-02
  • 移动端网站SEO优化排名的一些注意细节

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

    阅读:2295关键词: 移动端   seo优化   seo排名   日期:2015-11-17
  • 优化手机网站的三大SEO策略

    手机浏览器的搜索引擎采用多项指标决定网页排名,站点的整体性能、易用性、下载速度和屏幕效果等都是影响排名的因素。因此,相比那些专为小屏幕设计、只包含了简单信息的网站,一个全面优化、涵盖了所有功能和关键信息的网站的排名,显然会靠前很多。假如某网站使用了一……【查看全文

    阅读:2080关键词: 手机站优化   网站优化   手机网站   seo策略   seo   日期:2014-08-20
  • 谷歌(Google)手机站优化指南及建站原则

    所谓简单快捷,就是要在手机有限的屏幕上以最简单最实用最快捷的形式展示给用户最需要的东西,让用户方便。谷歌的建议是:(1)、优先提供用户最需要的内容和功能;(2)、减法,减法,减法(这一点其实就是在强调手机网站要去掉一切可以去掉的内容、功能、板块、按钮等……【查看全文

    阅读:838关键词: 谷歌   google   手机站   优化指南   建站原则   手机站优化   日期:2014-08-22
  • 详解移动端设备页面尺寸设计原理

    现在移动设备越来越多,使用手机上网的人也越来越多,移动设备也成为访问互联网的常见终端设置,以前我们在编写管理系统的时候,客户端只需要考虑PC机桌面设备,现在则必须要考虑到移动终端设备了。移动终端设备的屏幕分辨率很多都不一样,手机就分很多种大小的,然后还……【查看全文

    阅读:3049关键词: 移动端   页面设计   设计原理   日期:2015-07-16
  • 移动端手机站做站内优化的要点

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

    阅读:1946关键词: 移动端   手机站   站内优化   日期:2015-11-10
  • 移动端页面开发过程中经常碰到的一些问题

    对于前端开发者来说移动端存在着很多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题,那么今天我为大家分享移动端页面开发过程中的一些问题和解决问题的方法技巧。现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作,就目前的状况来看,手机页……【查看全文

    阅读:17731关键词: 移动端   日期:2016-05-20
  • 制作移动端手机网站过程中的SEO优化方法技巧

    由于是手机用户,用户浏览网页的时间是零碎的,不可能耐心点击很多的页面,因此,要想做好一个移动端网站的优化,就需要尽可能在制作移动端手机网站的过程中精简移动网站设计,并要合理的做好移动端网站的SEO优化,网页设计要尽可能的设计简单,手机端可视区域小,布局……【查看全文

    阅读:2526关键词: 移动端   手机网站   seo优化   seo方法   seo技巧   日期:2015-04-17
  • 关于移动端手机站的12个SEO优化方法

    手机站和PC端站点不一样,PC端站点百度明确给出关键词跟描述标签对优化起不到任何效果了,但手机端的关键词和描述标签是对手机站点有效果的,所以百度移动搜索也给出了建议,最好要把三大标签做好优化。网站结构要用合理的树形结构,最好采用树形和扁平相结合;清晰的……【查看全文

    阅读:1949关键词: 移动端   手机站   seo优化   优化方法   seo   日期:2014-08-26
  • PC站建立移动端网站的三大方法模式

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

    阅读:3223关键词: 移动端网站   移动端   pc站   日期:2016-12-07
  • 新手如何做移动端网站的SEO优化

    如今,移动互联网的使用人数在不断的增加,网站通过移动搜索来的流量也越来越多,但不可否认的是,现阶段许多PC端网站copy成简单的移动版本的wap网站,基本没有做优化,所以需要我们重视移动端网站的SEO优化,因移动与PC端的显示媒介不同,所以在选择目标关键词时会有差……【查看全文

    阅读:6536关键词: 移动端   网站优化   seo优化   日期:2016-01-14
  • 手机网站制作的常用方法及优化技巧

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

    阅读:4574关键词: 手机网站   网站制作   优化方法   优化技巧   日期:2014-10-04
  • 百度移动搜索开放适配服务的3种方法

    为了提升用户的移动搜索结果浏览体验,百度移动搜索对具有对应手机站的PC站提供“开放适配”服务。如果您同时拥有PC站和手机站,且二者能够在内容上对应,您可向百度“提交”PC页―手机页的对应关系,若对应关系准确,将有助于百度在移动搜索中将原PC页结果替换为对应的……【查看全文

    阅读:11752关键词: 百度移动搜索   开放适配服务   移动搜索   日期:2014-11-01
  • 我对网站移动端建设的一些看法

    如今,国内移动互联网用户数量仍在日益增长,各个互联网大佬也都在抢占移动资源,移动互联网资源正在高速发展中逐步繁荣,而其中移动搜索这一块当然也将是重点,不管你网站的移动端是使用手机站点或网站APP,都要明确一点:网站内容才是网站运营的根基,网站内容的专业……【查看全文

    阅读:2228关键词: 网站移动端   网站建设   移动端   日期:2015-01-11
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

如何提高用户体验,增加网站信任度 MIP Cache服务下线通知