今天想聊聊做网站的事儿，毕竟最近刚帮朋友折腾完一个小项目，踩了不少坑，干脆记下来给新手提个醒。

一开始真没想那么多

朋友开了个小工作室，非要我帮忙弄个网站展示作品。我想着不就做个页面嘛直接打开编辑器就开始写代码。结果第一版扔过去，人家说手机上看全是乱的，字小得要用放大镜看。

被迫研究响应式布局

这下傻眼了，赶紧查资料才知道现在做网站得考虑各种屏幕尺寸。于是我又吭哧吭哧加了一堆媒体查询，让页面能自动适应手机和平板。折腾到半夜才发现，光调整布局就得花掉一大半时间。

• 别用绝对尺寸：刚开始老喜欢用px单位，后来才发现用rem和百分比才是王道
• 图片要灵活：记得给图片设置max-width:100%，不然大图在手机上会撑破布局
• 测试要勤快：每改一次代码就得在手机和电脑上来回切换着看效果

内容管理是个大麻烦

朋友三天两头要更新作品，每次都得找我改代码。后来实在受不了，干脆给他搭了个简单的后台管理系统。这下可光是教他怎么上传图片就花了整整一下午。

最搞笑的是有次他误删了首页 banner 图，半夜打电话问我网站怎么变空白了。从此我学乖了，做后台时直接把危险操作都加了确认提示。

速度优化比想象中难

网站上线后朋友抱怨打开太慢，我一看发现图片全是大好几兆的高清图。压缩图片倒是简单，但又要保证清晰度又要控制大小，来回折腾了好几次。后来还学会了懒加载，非首屏的图片等滚动到再显示。

• 图片格式要选对：照片用jpg，图标用png，动图用gif
• 代码能合并就合并：css和js文件太多会影响加载速度
• 缓存设置很重要：有些静态资源可以让浏览器缓存起来

总结几点血泪教训

给新手朋友几个实在建议：做网站前先想清楚要展示什么内容，别像我一样边做边改；移动端适配从开始就要考虑，别等做完了再返工；如果客户要经常更新内容，后台管理系统真的不能省。

当然最最重要的是——记得先谈好价钱，别像我这样免费劳动力当得这么投入。