经过前面几周时间对移动网站的了解,基本知道了创建适合手机浏览网站的办法,前两天开始设立了一个实验性质的移动网站:邮编库手机版。
新设立的域名为子域名为:m.youbianku.com,网站名称为:邮政编码查询 - 邮编库手机版,初始的首页截图如下:
数据来源还是与电脑版本一样的,初期采用省份、地市、区县的三级结构,提供约3000个地方的邮政编码信息,也是使用的Drupal系统来建站,现在将与普通桌面版不同的地方进行记录:
- 网站只提供3000个中国各地的邮编查询,不提供地图、留言咨询、各国邮编等附加功能,满足手机上查询邮编的基本功能,留一个到电脑版的链接让需要的浏览者去访问;
- 各级页面尽量做到简洁,不在在每页开头的地方放置一句说明,直接显示用户需要看的邮编信息,而在Meta中保留一句说明;
- 手机版本的布局不需要左右分栏,也可以不另外设置菜单项,我还去掉了导航和登录的区块,让页面简化;
- 精简页面中的HTML代码,少用表格,合并CSS和JavaScript代码,减少注释,避免重复、无效的冗余代码;
- 网站主题不能用默认的Garland,而是改用专门的Nokia Mobile,并将后者设置为默认方式;
- 为了方便后台管理操作,可以将后台管理界面设置为单独的Garland,还可以将管理员本人的默认主题设置为Garland,而在其它的浏览器上以匿名用户方式查看移动网站;
- 修改CSS来实现网站名称Sitename的字体大小、表格标题Caption的位置、表单不转行等显示,可以放在Block中,或者修改php文件来实现;
- 移动网站做好后可以用工具来检查是否符合Mobile Web标准:http://validator.w3.org/mobile/;
- 广告代码还是采用Google AdSense提供的,但不用电脑版的,而是用专门为移动网站提供的,我是顶部放一个320*50横幅,底部放一个300x250的矩形,在部分电脑浏览器和手机浏览器中可能看不到广告;
- 统计代码还是可以用Google Analytics提供的,但不用电脑版的,而是用专门为移动网站提供的,选择PHP版本,下方显示的小图标我去掉了;
- 可以添加一个<meta name='HandheldFriendly' value='true' />的标签;
- 可以用XMLSitemap这个扩展程序来生成适用于电脑版的网站地图,然后人工按照Google Mobile Sitemap的标准来修改这个文件,再提交给Google Webmaster Tools;
- 用尽可能多的设备来测试:电脑浏览器、电脑中的手机浏览器模拟器、电脑中的手机模拟器中的浏览器、实际手机中的浏览器,争取多用各种实际手机来测试不同的尺寸、不同的带宽、不同的输入设备等。
这个手机版网站刚刚推出,后期还会不断完善,当全面掌握了手机版本网站的技术后,再推广做其它更多网站的手机版本。
这个站初步完工后也陆续在进行完善,补充记录:
- 数据量增加到170万;
- 依然添加microdata微标记;
- 修改css来实现一个页面中的多个表格对齐;
- AdSense和Analytics都改用与普通电脑版一样的代码;
- 在邮编库电脑版中相应的页面添加手机版链接;
- 在邮编库电脑版中相应的页面嵌入php代码来判断访问者终端类型,让手机用户自动重定向到手机版。
评论