上周帮朋友改一个烘焙工作室的页设官网，首页加载花了6.8秒。计报我打开开发者工具一看，页设一张3.2MB的计报奶油蛋糕特写图直接硬塞在Banner里，没压缩，页设没懒加载，计报连`width`和`height`都没写。页设这就是计报很多网页设计项目的真实起点——视觉稿漂亮，代码层面一塌糊涂。页设

网页设计不是计报画完图就结束。一个页面从服务器到用户屏幕，页设中间要过HTTP请求、计报DOM解析、页设CSS渲染、计报JS执行好几道关。页设任何一环拖后腿，用户就跑了。Google的数据摆在那儿：加载时间从1秒涨到3秒，跳出率增加32%。移动端更狠，53%的人等不到3秒就关页面。

结构先于样式

我见过太多人打开编辑器先写`<div class="wrapper">`，然后一层层往里套。三个月后自己都理不清嵌套关系。HTML的本质是给内容赋予语义，不是搭积木。<header>、<nav>、<main>、<article>、<aside>、<footer>——这些标签浏览器和屏幕阅读器都认识。你用`<div>`堆出来的布局，对机器来说就是一堆无名方块。

有个细节：表单输入框的`<label>`必须和`<input>`通过`for`和`id`关联。这不只是规范问题——点击文字能聚焦输入框，触屏用户的手指点不准小方框时，这个体验差异很实在。

CSS的取舍

Flexbox和Grid已经覆盖了95%以上的布局场景。但别急着把所有东西都塞进Grid。一个简单的导航栏用`display: flex; justify-content: space-between;`两行搞定，没必要上Grid模板区域。工具是拿来解决问题的，不是拿来炫技的。

响应式设计方面，媒体查询的断点应该跟着内容走，不是跟着设备走。我习惯先在320px宽度下把内容排好，然后慢慢拉宽浏览器窗口，哪里开始变丑就在哪里加断点。iPhone 15 Pro Max的430px、iPad的768px、常见笔记本的1366px——这些是参考，不是圣旨。

说到单位，rem和em的区别值得花十分钟搞清楚。rem始终相对于根元素字号，em相对于父元素。用rem做全局间距和字号，用em做组件内部的相对缩放，这个组合我用下来最顺手。

性能是设计的一部分

图片优化这件事，说多少遍都不够。WebP格式在同等画质下比JPEG小25%到35%，浏览器支持率已经超过97%。用`<picture>`标签做格式回退，老浏览器加载JPEG，新浏览器加载WebP。再加上`loading="lazy"`，首屏之外的图片等滚动到附近再加载。这三板斧下去，我那个烘焙工作室的首页从6.8秒降到了1.9秒。

字体也是重灾区。中文字体文件动辄好几MB，全量加载就是灾难。用`font-display: swap;`让文字先用系统字体显示，自定义字体加载完再替换。或者用Google Fonts的`unicode-range`做子集化，只加载页面实际用到的字符集。

可访问性不是可选项

颜色对比度至少4.5:1，这是WCAG AA的最低标准。很多设计师喜欢的浅灰文字配白底，对比度只有2:1出头，阳光下根本看不清。键盘Tab键能走通所有交互元素，焦点样式别用`outline: none;`一刀切掉——那是键盘用户唯一的导航线索。

网页设计这行，视觉稿只是起点。真正的工作在代码里，在加载速度里，在屏幕阅读器的朗读顺序里，在用户手指点击的精确度里。把这些东西都照顾到了，页面才算立得住。