如何建设一个手机网站

前阵子一个朋友做小生意，非拉着我帮他弄个网站。我说现在大家都刷手机，你得先做个手机能看的。他说那不就是把电脑网站缩小吗？我笑了笑，这事真没那么简单。

手机网站和电脑网站最大的区别，不在屏幕尺寸，而在使用场景。电脑前的人坐着，握着鼠标，慢慢看。手机前的人可能在地铁上，单手操作，随时可能被来电打断。所以手机网站的第一原则不是美观，是让用户在三秒内找到想要的东西。

我给他定的方案是响应式设计。就是同一套代码，根据屏幕宽度自动调整布局。听着挺玄乎，其实就是用css里的媒体查询，设置几个断点。比如屏幕小于768像素时，导航栏从横向变成下拉菜单，图片自动缩放，文字重新排列。这样做的好处是维护成本低，改一处全部生效。

但响应式只是基础，真正要花心思的是移动端的交互细节。比如按钮，电脑上鼠标点击精度高，按钮做小点无所谓。手机上手指头一戳就是几毫米，太小了根本点不准。我建议他所有按钮至少做成44像素高，这是苹果官方给的最小触控区域建议，拇指操作不会误触。

还有一个容易忽略的点是字体。电脑上宋体、黑体怎么用都行，手机上小字号的中文字体在部分低端安卓机上会发虚。我一般把正文设成16像素以上，行高1.5倍左右，段落间距拉开点，让人不用放大就能流畅阅读。千万别自作聪明用那些花哨字体，系统默认的最稳。

图片是手机网站的隐形杀手。一张高清大图在电脑上可能两三秒加载完，在4G网络下要转好几圈。我的做法是图片全部压缩，用webp格式，再做懒加载，就是图片滚到可视区域才加载。首页头图尽量控制在100kb以内，别上来就堆大图。Google有个调研说，加载时间超过三秒，超过一半的人会直接关掉，这个数据在手机上更残酷。

还有一点很多人不知道，手机上要用电话号码。电脑网站留个表单，用户填一下没什么成本。手机用户看到心仪的东西，第一反应是打电话或者加微信。所以我让他把电话做成点击拨号，邮件改成点击发信，省去复制粘贴的步骤。每个段落都用短句，说完一个意思就换行，别整那种大段大段的文字墙。

测试环节不能省。不要只在你自己手机上看看效果，至少拿三种设备试，一个主流安卓机，一个老一点的iPhone，一个iPad。还有个土办法，用浏览器开发者工具模拟各种机型，虽然不完全准确，但能发现大部分布局问题。我那天帮他测试的时候，发现他那个淘宝买的便宜安卓机上，字体渲染出来发虚，后来加了-webkit-font-smoothing属性才稍微好点。

最后说个实在的，手机网站的搜索引擎排名会更好。百度和Google都明确表示，移动端友好的网站有排名加权。再加上现在微信里打开的链接，大多数是手机页面，如果你的站还是电脑版，用户看到就是一堆小字乱糟糟的，关掉就走，那前面做的功夫全白费了。

帮朋友弄完那天，他拿着手机刷了半天，说这网站看着像那么回事了。我说你光看着像不行，你得自己从手机百度搜关键词进来，走一遍完整的流程，下单、支付、售后，哪里别扭改哪里。手机网站没有一劳永逸的建法，只有不断试出来的好用。他点点头，第二天就给我反馈了三个问题，说来也怪，都是我在电脑上完全没想过的事。