21世纪是信息的时代，更是移动互联网的时代，手机网站的发展势如破竹，截至2012年底，手机网民数达：4。20亿网站流量有33来自移动互联网并持续上升中，56的移动互联网网民每天上网1小时以上，78每天上网1次以上，3G网络已普及，4G网络建设中，手机网站的打开速度越来越快。很多网站开始建设手机版的网站，那么在这个时候有一个疑问了，手机版网站制作有哪些是需要注意的呢 ？

　　我们首先先了解下手机版的特点：

　　1。具备营销型网站特性

　　继承PC版网站一贯的营销性，塑造企业品牌形象和产品（服务）优势，页面布局以及广告文案精心策划

　　快速电话拨号询盘，直接拨打页面上的400电话。

　　微博、微信、QQ互动，增加分享等。

　　首页底部布置手机版网站网址二维码，方便网站的传播，更具传播力。





　　2。针对移动搜索进行的SEO优化（这块会弱化、在移动端优势不明显）

　　继承传统的SEO规范，titlekeyworddescriptions，关键词密度，静态化等

　　使用手机版专属域名，m。xxx。com，百度、google优先收录

　　针对手机用户的搜索，优先显示手机版网页，排名靠前

　　3。手机版网页内容与PC版的信息保持一致性

　　PC版与手机版共享同一个数据库，数据同步。

　　共享同一个后台系统，管理和录入同步。产品、资讯录入只要一次录入。

　　4。强大的、专业的后台图片处理系统

　　编辑上传的产品、资讯图片会自动缩放大小，适合手机上展现、加快图片加载速度，并节省流量

　　用户在手机上输入www。xxx。com会自动跳转到m。xxx。com手机版网站

　　5。良好的用户体验




　　醒目的品牌形象语和咨询服务热线，方便客户记忆和询盘。

　　清晰的网站导航功能（主导航、分类导航、面包屑导航），方便客户找到自己想要的信息。

　　提供精准的客户资讯和相关产品，及时的咨询反馈与意向订单提交，增加网站粘度和订单转化率。

　　网页大小（网页通常只有一列，320的宽度）、图片大小适合手机访问，减少流量，加快页面加载速度，在3G、GPRS网络情况下应付自如。

　　字体、图片等网页内容清晰，适合在手机上访问

　　支持触摸屏特有的操作方式，如左右滑动切换、上下滑动滚屏

　　6。采用HTML5CSS3国际标准技术，兼容性强

　　兼容不同的操作系统，iOS、Android

　　兼容不同的浏览器，Safari、UCWEB、QQ手机浏览器

　　兼容不同的屏幕大小，3。5、44。3、55。5、710英寸

　　兼容不同的分辨率， 848X480、960640、1280720

　　兼容不同的设备厂商，苹果、三星、华为、中兴、联想等

　　7。超高的机动性和灵活性

　　无论何时、何地，只要有移动、联通、电信的3G、WIFI、GPRS，掏出智能手机就可以访问到你的网站。





　　8。超强的传播力与影响力

　　网站内容可以通过微博、微信快速的传播，扩大公司、产品、品牌影响力

　　标准版每个产品型号都有多套布局（展现形式）以及皮肤风格，可以快速选择

　　4。提供多套内页皮肤，以后可继续升级皮肤（标准版）

　　讲完特点之后，该讲讲手机网站制作的注意事项了：

　　1。 手机版网站的需求是什么

　　※我要制作全新的网站，同时具备传统网页与手机版网页

　　※我要将原本的网站，制作成传统网页与手机网页兼具的网站

　　※我不想变更原有的网站，而是制作一个额外的手机网站 这三种情况的制作方式有一些出入，因此请与您的网页设计公司详细商谈设计的需求，对于制作的初期会有很大的帮助

　　2。 商业的目的为何

　　手机网站制作目的为何 ？是希望可以品牌形象优先、促进企业服务商机为优先、还是讯息传递为优先 ？因为行动网页的版面，比起一般的网页更有限，因此优先顺序很重要。 就以现代汽车（Hyundai。com）网站来看，这个网站的传统网页是以新车的介绍为主，而各类的说明文件、经销资讯、客户服务等选项则是条列于选单上。接着进入网页版的画面，可以发现最主要的资讯仍是新车款的照片（经过压缩）为主，而其余的选项就消失了。对于该公司而言汽车是最核心的资讯，因此强调图片为该手机网站的重点。

　　不同的目的会有取舍的问题，经过企业的内部讨论，往往可以得到设计上的共识。

　　3。 制作前，先阅读网站的访客情报

　　制作手机网页，最重要的就是满足手机族群的需求，而手机族群所使用的不同装备，或多或少的影响了设计者该以什么样的工具加以设计。

　　要判断访客透过什么样的装置访问您的网站，有一些十分强大的追踪工具，例如Google Analytics，他能够告诉你有多少人使用手机装置到了您的网站上观看资料，而且使用的系统以及浏览软体都能清楚统计，对于行动版网页设计十分的有助益。

　　4。 回馈式的网页设计

　　回馈式的模式被用于商业与教育界一段时间，简单来说，具有回馈能力的团体，能够根据团体的需求进行调整，达到最佳的效能表现。

　　在手机网页设计的领域，我们对于回馈式的网页设计定义为：不论于任何一种装置上观看，例如：不同的解析度、不同的浏览器、不同的观看方向。。。等，都能够得到正确的解析度，这一点有许多网页技术都可以做得到，例如CSS与HTML 5都有对于手机网页的观看方式加以优化。

　　5。 简单是好事，但视觉表现不打折

　　就跟传统的网页设计一样，网页的档案大小，越小越好，到了手机版的行动网站，这个更是重要的关键！因为手机的速度不若桌上电脑或笔记电脑，因此设计师都十分重视网页档案的大小。

　　档案大小的情况也反应到了内容，因为简单的设计往往可以减少网页的档案，因此简单、精简的内容一直是手机网页的设计圭臬。

　　不过这不表示简单的网站就得十分的丑陋，因为现在的CSS3以及HTML 5的进步下，手机版的网页可以具有动画呈现、阴影、渐层等视觉效果，在不增加手机运算负担与档案大小的情况下，这都是可行的设计技术。

　　6。 单行式的手机网站是当今最好的设计

　　虽然今日的手机尺寸出现了很多变化，但基本上手机的最常用浏览模式仍以直立式的为主，因此网页设计者，应该清楚直式的网页设计是目前的行动版网页主流。

　　此外，也又不少手机网站擅长使用书签的技巧，让直立式的手机版网站，可以藉由书签的切换达到更多的功能，也是值得设计者参考与学习。

　　7。 垂直堆叠的选单设计

　　行列式的选单，按下后会将子项目展延，再按一下则会将目录收回，这样的垂直堆叠选单的网页设计看起来十分的老套，但却是不少大企业与网路使用族群的最爱。

　　8。 从「可点选」变成「可触碰」

　　过去设计网页总是以滑鼠为最主要的人机介面，但随着时代的改变，触碰式的笔记电脑、桌上电脑甚至是手机、平板电脑等，都已经十分的普及，设计师自然不能用旧有的方式设计行动版的网页。

　　过去网页设计十分爱用，根据滑鼠游标位置判定「滑鼠悬空」功能，在手机版的网页上是完全无法发挥作用的，影响最大的会是滑鼠经过才会出现的下拉式选单，因此这也是许多企业亟欲制作手机版网页的主因之一。

　　9。 加入互动效果

　　手机使用者往往希望可以看到比桌上电脑、笔记电脑更多的互动视觉效果，让他们可以在有限的画面上可以看到目前网页的变化。举例来说：按下按钮的反白效果，或是滑动的视觉页面都是非常不错的方式。

　　此外，也可以设计读取网页的画面，这对于频宽、速度受限的手机使用者来说，是十分有帮助的设计。

　　10。 测试你的手机网站

　　除了透过同事的手机设备加以测试外，比较进阶的设计师可以透过申请SDK的方式来测试，或使用各种不同的手机浏览模拟器，来验证您的行动网页是否符合手机与平板电脑平台。现在很多浏览器推出了模拟器的功能，可以省下您不少时间。

　　说了这么多之后，如果大家对手机版的制作有什么问题，可以先参考下优秀网站的手机网站是怎么制作的，比如新浪游戏的手机版，还有可以参考查字典板报网http ：m。banbao。chazidian。com的手机版，