EP567-574. “优化收尾 + 手机与平板设计（UX + UI）”

• 全球超过 50% 的网页流量来自手机，Google 又用「移动优先」索引——手机版设计做不好，直接拖累 SEO 排名
• 拇指最容易触达的是屏幕下方中间，CTA 按钮该放这里，而不是最难触达的顶部
• 手机模式里改的间距只影响手机端，桌面版完全不受影响——放心大胆调，不用怕搞乱桌面设计

重点内容

EP567：浏览器缓存（Leverage Browser Caching）

什么是浏览器缓存： 访客第一次访问你的网站时，浏览器会把静态资源（图片、CSS、JS）保存在本地。下次访问同一页面，不需要重新下载——直接读本地缓存，速度更快。

实现方法：WP Super Cache

1. WordPress 后台 → Plugins → Add New → 搜索「WP Super Cache」→ Install → Activate
2. Settings → WP Super Cache → Easy → 选 Caching On → Update Status
3. 进入 Advanced 标签页 → 找到「Use 304 Not Modified browser caching」→ 勾选 → Update Status

[截图：WP Super Cache Advanced 标签页设置界面]

「304 Not Modified」的意思：服务器告诉浏览器「你缓存的版本仍然是最新的，不需要重新下载」→ 节省带宽，加速加载。

最终优化效果（完成所有优化后）：

EP568：其他进阶优化

压缩（Compression）： Cloudflare 和大部分现代主机都默认开启 Gzip 压缩——把 HTML/CSS/JS 文件在传输时压缩，到浏览器再解压。Autoptimize 也处理了部分压缩工作，通常不需要额外配置。

避免落地页重定向（Avoid Landing Page Redirects）： 每多一次重定向，浏览器就多一次 HTTP 请求往返。常见问题：

• http:// → https:// → https://www. → 三次才到真正的 URL
• 解决：用 Redirection 插件（Settings → Permalinks 也能处理基础重定向）确保一步到位

优先加载可视内容（Prioritize Visible Content）： 「Above the Fold」（首屏可见区域）的内容应该优先加载，下方内容可以延迟加载（Lazy Load）。Critical CSS 的作用就是做这件事——之前已安装。

AMP（Accelerated Mobile Pages）——课程原本推荐的做法，现状已经变了：

• Google 的手机加速页面标准，去掉大部分 CSS 和 JS，纯净极速
• 课程原本建议：适合以博客文章为主的网站使用；如果网站用 Elementor 设计了大量自定义页面则不适合（会破坏设计）

EP569：Bluehost 支持

使用 Bluehost 的一大优势是拥有全天候在线聊天支持（helpchat.bluehost.com）。遇到技术问题时：

1. 直接访问 helpchat.bluehost.com
2. 发起 Live Chat
3. 描述你的问题（例如：「我在设置 SSL 时遇到错误」）

EP570：手机端设计 UX（Mobile Design UX）

移动端流量数据：

• 全球超过 50% 的网页流量来自手机
• Google 使用「移动优先」索引（Mobile-First Indexing）→ 手机版设计直接影响 SEO 排名
• 非手机友好的网站会被 Google 降权

Thumb Design（拇指设计）理论： 手机用户通常单手操作，拇指能轻松触达屏幕的不同区域：

设计建议：

• 主要 CTA 按钮（Learn More、订阅）→ 放在页面中下方（绿区）
• 菜单在顶部（红区）虽然难触达，但占用屏幕面积——这个取舍是值得的（菜单放顶部可以节省 15% 的屏幕空间给内容）
• 不要让重要信息「隐藏」在难触达区域

验证工具： Google Mobile-Friendly Test → 输入你的网站 URL → 自动检测是否手机友好

EP571：手机端设计 UI（Mobile Design UI）

进入手机设计模式： Elementor 编辑器 → 底部 → Responsive Mode → 选 Mobile ⚠️ 在手机模式里所做的所有更改只影响手机端，桌面版不受影响。「手机模式里发生的事，就留在手机模式里。」

修复 Logo + 菜单双行问题： Elementor 默认 Logo 宽度 280px → 手机端太大，菜单被推到第二行

1. Appearance → Customize → Header → Logo
2. 切换到手机预览模式（底部点击手机图标）
3. 把 Logo 宽度从 280 改为 200px
4. Publish → Logo 和菜单可以并排显示在同一行

[截图：Elementor Responsive Mode 切到 Mobile 后，Logo 与菜单并排显示的效果]

主要调整项目（Elementor 手机模式）：

Padding 解锁步骤：

1. Edit Section → Advanced → Padding → 点击链条图标解除联动
2. 顶部保留原始值（保持 Section 间距）
3. 左右改为 1px（消除侧边空白）
4. 底部改为 20–40px

EP572：平板端设计 UX（Tablet Design UX）

平板端基本数据：

• 平板流量占网站总流量约 4%（远少于手机）
• 但平板用户停留时间约是手机用户的 2 倍（平均 8 分钟 vs 4 分钟）
• 平板用户更倾向于娱乐或深度阅读，跳出率低于手机用户

屏幕方向（Orientation）：

• 手机用户：93% 使用 Portrait（竖向）
• 平板用户：Android 平板（市占率更高）→ 多数用 Portrait；Apple iPad（屏幕更大）→ Landscape 更常见
• 总体结论：优先为 Portrait 设计，同时兼顾 Landscape

平板设计原则：

1. 少即是多：平板屏幕比手机大，但不要因此塞更多内容 → 保持简洁
2. 不要用列表设计：竖向列表在横向（Landscape）模式下右侧会出现大量空白，不美观
3. 用块状设计（Block Design）：大标题内容在上，小卡片/文章/产品在下 → Portrait 和 Landscape 模式下都好看
4. 双手操作：平板用户 60% 会把平板架起来双手使用，40% 单手持平板 → 无论如何，双手操作更常见 → 没有手机那样严格的「拇指区域」限制，但依然要注意重要按钮的位置

EP573：平板端设计 UI（Tablet Design UI）

进入平板设计模式： Elementor → 底部 → Responsive Mode → 选 Tablet

主要调整方法（与手机端类似）：

1. Minimum Height（Section 最低高度）：
   • 桌面版背景图设了较大的 Minimum Height → 在平板上会出现过多空白
   • Edit Section → Style → Layout → Minimum Height → 调小（例：从 750px 改为 500px）

1. 列 Padding 调整：
   • 桌面版 padding 50px → 平板上改为约 25px（节省空间同时保持视觉整洁）
   • Edit Column → Advanced → Padding → 解锁 → 改为 25

1. 列 Margin 调整：
   • 课程把卡片间距（Margin）从 30px 提升到 50px（平板屏幕更大，适当加宽间距更宽敞）

1. Reverse Columns（列倒序）功能：
   • 问题：响应式模式下，多列布局会「Stack（堆叠）」，有时顺序会反转（你想要图片在上文字在下，结果反了）
   • 解决：Edit Section → Advanced → Responsive → Reverse Columns（Tablet） → 勾选 → 列顺序翻转回来

[截图：Elementor Advanced → Responsive 面板 Reverse Columns 设置项]

EP574：优化与响应式设计作业

完成以下所有任务代表这一组学习内容全部通关：

核心概念速查

行动步骤

浏览器缓存：

1. 安装 WP Super Cache → Easy → Caching On
2. Advanced → 勾选「Use 304 Not Modified browser caching」

手机端 UI：

1. Elementor → Responsive Mode → Mobile
2. Appearance → Customize → Header → Logo → 手机端改为 200px
3. 每个 Section → Advanced → Padding → 解锁 → 改为 20–40px
4. 字体大小和行间距按需调整

平板端 UI：

1. Elementor → Responsive Mode → Tablet
2. Section Minimum Height 调小
3. 列 Padding 改为 25px，列 Margin 改为 50px
4. 如果列顺序反转 → Edit Section → Advanced → Responsive → Reverse Columns → 勾选

工具 & 资源

常见误区

• ❌ 手机模式里改了 Padding 后以为桌面版也变了——手机模式的修改只影响手机端，放心改
• ❌ 平板端屏幕大就塞更多内容——平板依然是移动设备，保持简洁原则
• ❌ 不检查列 Stack 后的顺序——响应式 Stack 有时会把内容顺序搞乱，要用 Reverse Columns 纠正
• ❌ 只优化首页的响应式——每个设计过的页面都需要单独检查手机和平板效果

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 567
2. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 568
3. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 569
4. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 570
5. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 571
6. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 572
7. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 573
8. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 574

Blog / Website：

1. uptime.com/freetools/website-speed-test
2. whatsmydns.net
3. checkforcloudflare.selesti.com
4. helpchat.bluehost.com