最近手头正好搞个小项目，需要弄个微网站，说白就是手机上看的简单版网站。这玩意儿，看着简单，真自己动手搞起来，还是有点东西要琢磨的。今天就跟大家唠唠我当时是怎么一步步弄出来的。

开始琢磨

一开始接到这个需求，我也没想那么复杂。不就是个小网站嘛放点图文，留个联系方式就完事。但仔细一想，这东西主要是给手机用户看的，跟咱们平时用电脑看的那种大网站完全是两码事。

第一步，我就明确目标。我这个微网站是干啥用的？是为搞活动宣传？还是做个简单的品牌展示？或者是引导用户去下载个APP？我的目标比较直接，就是做个产品介绍，让别人快速解我们是干嘛的，最好能留个联系方式。

然后我就想，谁会来看？肯定是那些在外面跑，或者临时需要查点信息的人，他们没耐心看长篇大论。内容必须精简，直奔主题。

规划内容和结构

知道目标和用户习惯，接下来就是规划放啥内容。我拉个单子：

• 核心产品/服务的介绍（几句最关键的话）
• 我们的优势（一两点就行，别吹太多）
• 一些案例或者客户评价（有图最好）
• 联系我们（电话、地址，或者留个表单）

内容确定，就得考虑怎么放。手机屏幕就那么大点地方，不能像电脑网站那样搞复杂的导航栏。我当时就画个简单的草图，决定用单页滚动的方式，或者最多分个三四页，用户划拉几下就能看完。

导航要么放顶上固定，要么干脆用底部菜单，图标加文字那种。我选顶部一个简单的菜单按钮，点开弹出主要栏目，尽量不占地方。

设计界面

设计这块儿，我也不是专业的，就把握几个原则：

简洁第一。手机上看东西，最烦的就是花里胡哨、加载半天的。背景色用干净的，字体选清晰易读的，图片也要压缩保证加载速度。

突出重点。重要的按钮、联系方式，要用显眼的颜色或者更大的字号标出来，让用户一眼就能看到。

适配。这个挺关键。现在手机屏幕尺寸五花八门的，得保证在大部分主流手机上看着都还行，不会错位变形。我当时就想着得用那种叫“自适应”的技术，虽然具体咋弄的还得边学边做，但这个方向是定下来。

技术上的选择

前端么，现在都说用H5（也就是HTML5）加CSS3，能做一些简单的动画效果，而且对手机支持比较我也就随大流用这套东西。主要就是能比较方便地实现那个“自适应”布局。

后台当时没啥复杂功能，主要就是收集个表单信息。我就找个简单的PHP加个小数据库的方案，能把用户提交的信息存下来就行。没上大家伙，觉得没必要，杀鸡焉用牛刀嘛

动手开发和测试

然后就是吭哧吭哧地码代码、搭页面。一边写一边在浏览器模拟器上看效果，但那个不准。最靠谱的还是得用真机测。

我就找自己和身边朋友的几部不同牌子、不同系统的手机来回试。苹果的、安卓的好几个牌子，都打开看看排版乱不乱、按钮点着灵不灵、图片显示快不快。果然发现不少问题，比如有些手机字体显示不一样大，有些地方对齐有问题，还有的图片加载特别慢。一个个调，一个个改。

尤其是表单提交，测试好几遍，确保信息能准确无误地发到后台，并且给用户一个明确的提交成功提示。

上线和后续

反复修改测试，觉得差不多，就把它部署到服务器上，正式上线。上线后也不是万事大吉，还得时不时关注下访问情况，看看有没有用户反馈什么问题。

搞这个微网站的过程，就是不断地做减法，不断地站在手机用户的角度去思考。从最初的规划到最终上线，中间踩不少坑，但也学到不少东西。这玩意儿看着小，细节还真不少。分享出来，希望能给同样在琢磨这事的朋友一点参考。