公司最近要搞活动，需要做两个活动的官网用于宣称。在活动准备伊始，公司找了外包团队来做这件事，但是最后交付之后效果不满意，所以紧急找内部开发和设计想要重新开发。

呃，没错，我就是那个开发。以下是一些经验总结，非技术居多，希望能够帮助到大家。

网站使用的技术栈是：nextjs + tailwindcss + vercel。以下是整个过程中面对的问题。

技术

最快的方式部署

nextjs + vercel 部署很方便，完全不用额外的时间去设计 CI / CD，这可以节省大量的时间，因为前端写 github action 诸如此类的配置文件，不小心就会跳进坑。如何快速部署是我们需要第一考量的。

响应式

需要从一开始就想好如何做移动端和 PC 端的兼容。用 tailwindcss 做出一套响应式的网站还是比较容易的，只要理解好 tailwindcss 里的断点使用就可以了。

处理好图片

我个人觉得图片是很难处理的一部分。无论是要求不同屏幕上的正常显示，还是响应速度，图片都很麻烦。

先把 png /jpg/svg 的区别与使用场景分清楚，特别是清晰度的问题。了解 picture、img、srcset、object-fit 这些概念之后，就能够很好的帮助到我们快速解决图片的问题。

实在不行，就用上 JS 大法。

中英文排版

页面的布局是一种排版，主要取决于设计师的考量。

中英文的呈现也是一种排版，好的排版会让页面显得高级，排版规则请参考： 中文文案排版指北 。

国际化

从一开始就要问清楚当下或者以后有没有做多语言的需求。现在很多库都能帮助开发方便的添加多语言，不会花费太多时间。但如果做到中途发现需要实现多语言，可能 Ctrl + C 和 Ctrl + V 就会被按烂。

关注过渡

好的交互细节能够极大的提升用户访问的体验，例如交互按钮的 hover 效果，页面的滚动效果，或者更复杂的效果。

注意 UI 细节之外的东西

作为活动，必定会在一些社交媒体分发，怎么保证在设计媒体最优显示，是非常值得注意的问题。例如，在 twitter 分享的时候，有一个加 twttier card 的东西，可以帮助别人浏览推文的时候，预览网页内容。为此，需要在网站的 head 里设置添加一些 meta 信息。

当然，最基本的，把一些基本的 SEO 问题处理一些，例如设置 title 等 meta，以及一些语义化标签。

无障碍访问和键盘导航

没什么好说的，我也不是很懂，学习中。

非技术

不需要的设计整理

例如，我们要做一个人物介绍的列表，大概有 100 个人，每个人最近基本的信息有：名字、介绍

图片。我们可能写了一个组件，我们只要把数据整理成数组，map /foreach 就可以。

我们绝大部分时间都是花在整理数据，其实完全可以交给运营或者设计来做，因为整理这些数据本来就是需要做的，ta 们完全可以顺手整理一份你想要的数据。当然，你或许想要一份 json 数据，但是运营 / 设计很难理解或者编辑这种数据结构。你可以用 ta 们熟悉的文本编辑方式，最后自己写个脚本做 format。

直接和运营沟通

在某种情况下或者项目前期的时候，可能不太会和运营产生直接的接触（都不一定）。个人感觉越早越好。

这种沟通是双向的，可以尽早的把网站部署在不重要的域名上，给相关人员预览，方便早期得到反馈。

售后服务

即使这个网站需要快速上线、即使这个网站可能只用几天，也不要在开发的时候偷懒，至少不要偷懒太多。尽量减少冗余的代码，尽量设计组件，虽然可能看起来很简单。

因为上线之后，运营人员根据一些内部或者外部的反馈，对网站进行调整，这些调整可能包含某些细微的设计更改，或者是推翻整个一大部分设计。如果此前偷懒了，就代表面对这些更改，你需要霰弹式更改，非常恶心。

编写你觉得正确的代码风格的代码，即使可能花费一些时间。

最后，祝大家切图愉快。