在为各种用户和设备构建内容时，请同时考虑内容、布局和平面设计。
用户在网络上阅读的方式
研究表明，用户不会阅读网页，而是会浏览网页。平均而言，用户只会阅读 20-28% 的网页内容。在屏幕上阅读比在纸上阅读慢得多。如果信息不易访问和理解，用户就会放弃并离开您的网站。
如何为移动设备写作
专注于当前主题，并在开头讲述故事。为了让写作内容在各种设备和视口上都能正常显示，请务必在开头就传达主要观点：一般来说，最好在开头四段中，用大约 70 个字来传达。
问问自己，用户希望从您的网站获得什么。他们是否想了解某些信息？如果用户访问您的网站是为了获取信息，请确保所有文字都旨在帮助他们实现目标。使用主动语态，提供行动和解决方案。
仅发布访问者需要的内容，不要发布其他内容。
英国政府的研究还表明：
换句话说：即使是受过教育的技术受众，也要使用简洁的语言、较短的字词和简单的句子结构。除非有充分的理由，否则请保持对话式的语气。新闻业有一条古老的规则，即写作时要像与 11 岁的聪明孩子说话一样。
未来的十亿新用户
这种精简的写作方法对于移动设备上的读者尤为重要，对于为低价手机（视口较小，需要更多滚动，显示质量可能较低，屏幕响应速度较慢）创建内容时至关重要。
未来的十亿新用户大多会使用廉价设备。他们不希望将数据流量用于浏览冗长的内容，而且可能不会使用自己的母语阅读。精简文字：使用短句、最少的标点符号、段落不超过五行，以及单行标题。考虑使用自适应文本（例如，为较小的视口使用较短的标题），但要注意其缺点。
采用极简主义的文本态度还可以让您的内容更易于本地化和国际化，并让您的内容更有可能在社交媒体上被引用。
要点总结：
- 力求简单
- 保持井井有条
- 直奔主题
去除不必要的内容
就字节大小而言，网页很大，而且越来越大。
自适应设计技术可以为较小的视口提供不同的内容，但最好先简化文本、图片和其他内容。
Web 用户｛与 App 用户相对｝通常以行动为导向，他们会“网络互动”来寻找当前问题的答案，而不是向后倾来阅读一本好书。
Jackob Nielsen
问问自己：用户访问我的网站时想要实现什么目标？
每个页面组件都有助于用户实现目标吗？
移除多余的页面元素
根据 HTTP Archive 的数据，平均每个网页包含近 7 万个 HTML 文件和 9 个以上的请求。
许多热门网站在每个网页上使用数千个 HTML 元素和数千行代码，即使在移动设备上也是如此。HTML 文件大小过大可能不会导致网页加载速度变慢，但 HTML 载荷过大可能是内容膨胀的标志：较大的 .html 文件意味着更多的元素、更多的文本内容，或两者兼而有之。
降低 HTML 的复杂性还可以减少页面重量，有助于实现本地化和国际化，并使自适应设计更易于规划和调试。如需了解如何编写更高效的 HTML，请参阅 高性能 HTML。
在用户从您的应用中获得价值之前，您让用户执行的每一步操作都会让您损失 20% 的用户
Gabor Cselle，Twitter
内容也是如此：帮助用户尽快找到他们想要的内容。
不要只是向移动用户隐藏内容。力求内容对等，因为猜测移动用户不会错过的功能注定会有人猜错。如果您有资源，请为不同的视口大小创建相同内容的不同版本，即使仅针对高优先级页面元素也是如此。
考虑内容管理和工作流：旧版系统是否会导致旧版内容？
简化文本
随着网络向移动设备发展，您需要改变写作方式。力求简单、保持井井有条、直奔主题。
移除多余的图片
图片可以美观、有趣且信息丰富，但它们也会占用页面空间、增加页面重量并增加文件请求的数量。随着连接质量的下降，延迟会越来越严重，这意味着随着网络向移动设备发展，过多的图片文件请求会成为越来越严重的问题。
图片还会消耗电量。屏幕之后，无线电是第二大耗电因素。图片请求越多，无线电使用越多，电池电量就越低。即使只是渲染图片也需要耗电，而且耗电量与图片的大小和数量成正比。请查看斯坦福大学的报告《谁杀死了我的电池？》
如果可以，请删除图片！
下面提供了一些建议：
- 考虑完全避免使用图片的设计，或谨慎使用图片。纯文本也可以很美观！问问自己：“访问我网站的用户想要实现什么目标？图片是否有助于实现这一目标？”
- 过去，将标题和其他文本保存为图形是很常见的做法。这种方法无法很好地响应视口大小的变化，并且会增加页面重量和延迟。将文本用作图形还意味着搜索引擎无法找到文本，并且屏幕阅读器和其他辅助技术无法访问文本。尽可能使用“真实”文本 - 网络字体和 CSS 可以实现美观的排版。
- 对于渐变、阴影、圆角和 背景纹理等所有现代浏览器都支持的功能，请使用 CSS 而不是图片。不过请注意，CSS 可能比图片更好，但仍可能会产生处理和渲染开销，尤其是在移动设备上，开销会非常显著。
- 背景图片在移动设备上很少能正常显示。您可以使用媒体查询来避免在小视口上使用背景图片。
- 避免使用启动画面图片。
- 使用 CSS 实现界面动画。
- 了解字形；使用 Unicode 符号和图标 代替图片，必要时使用网络字体。
- 考虑使用 图标字体；它们是可无限缩放的矢量图形，并且可以在一种字体中下载整套图片。（但要注意这些问题。）
- 可以使用
<canvas>元素在 JavaScript 中使用线条、曲线、文本和其他图片构建图片。 - 内嵌 SVG 或数据 URI 图片不会减少页面重量，但可以通过减少资源请求的数量来减少延迟。内嵌 SVG 在移动和桌面浏览器上具有出色的支持，而优化工具可以显著减小 SVG 大小。同样，数据 URI 也得到了很好的支持。两者都可以内嵌在 CSS 中。
- 考虑使用
<video>而不是动画 GIF。移动设备上的所有浏览器（Opera Mini 除外）都支持视频元素。
设计内容，使其在不同的视口大小下都能正常显示
“创建产品，而不是为小屏幕重新设计产品。出色的移动 产品是创建出来的，而不是移植过来的。”
《移动设计和开发》，Brian Fling
出色的设计师不会“针对移动设备进行优化”，而是会以自适应的方式思考，以构建可在各种设备上正常显示的网站。文本和其他页面内容的结构对于跨设备成功至关重要。
未来的十亿新用户中有许多人使用视口较小的低价设备。在分辨率较低的 3.5 英寸或 4 英寸屏幕上阅读可能会很困难。
下面是两者的合影：
在较大的屏幕上，文字很小但可读。
在较小的屏幕上，浏览器会正确渲染布局，但即使放大后，文字也无法阅读。显示模糊不清，并且有“色偏” - 白色看起来不是白色 - 导致内容难以辨认。
为移动设备设计内容
在为各种视口构建内容时，请同时考虑内容、布局和平面设计， 并使用真实文本和图片进行设计，而不是使用占位符内容。
“内容先于设计。没有内容的设计不是设计，而是装饰。”
Jeffrey Zeldman
- 将最重要的内容放在顶部，因为 用户倾向于以 F 形模式阅读网页。
- 用户访问您的网站是为了实现目标。问问自己，他们需要什么才能实现该目标，然后删除其他所有内容。严格控制视觉和文本装饰、旧版内容、过多的链接和其他杂乱内容。
- 谨慎使用社交分享图标；它们可能会使布局杂乱无章，并且其代码可能会减慢网页加载速度。
- 为内容设计自适应布局，而不是固定设备尺寸。
测试内容
- 使用 Chrome 开发者工具和其他 模拟工具检查较小视口上的可读性。
- 在低带宽和高延迟条件下测试内容；在各种连接场景中尝试内容。
- 尝试在低价手机上阅读内容并与之互动。
- 请朋友和同事试用您的应用或网站。
- 构建一个简单的设备测试实验室。Google 的 Mini Mobile Device Lab 的 GitHub 代码库提供了有关如何构建自己的实验室的说明。OpenSTF 是一款简单的 Web 应用，用于在多台 Android 设备上测试网站。
下面是 OpenSTF 的实际应用：
移动设备越来越多地用于消费内容和获取信息，而不仅仅是用于通信、游戏和媒体的设备。
因此，在考虑跨设备布局、界面和互动设计时，规划内容以使其在各种视口上都能正常显示，并确定内容的优先级变得越来越重要。
了解数据费用
网页越来越大。
根据 HTTP Archive 的数据，排名前一百万的网站的平均页面重量现在超过 2MB。
用户会避开被认为速度慢或费用高的网站或应用，因此了解加载网页和应用组件的费用至关重要。
减少页面重量还可以带来利润。YouTube 的 Chris Zacharias 发现，当他们将观看页面的大小从 1.2MB 减少到 250KB 时：
换句话说，减少页面重量可以开辟全新的市场 。
计算页面重量
有许多工具可用于计算页面重量。Chrome 开发者工具的“网络”面板会显示所有资源的总字节大小，并且可用于确定各个资源类型的重量。您还可以检查哪些项已从浏览器缓存中检索。
Firefox 和其他浏览器也提供了类似的工具。
WebPagetest 能够测试首次和后续网页加载。您可以使用 脚本（例如，登录网站）或使用其 RESTful API 自动执行测试。以下示例（加载 developers.google.com/web）表明缓存成功，并且后续网页加载不需要额外的资源。
WebPagetest 还按 MIME 类型提供了大小和请求细分。
计算页面费用
对于许多用户来说，数据不仅会消耗字节和性能，还会消耗金钱。
网站 What Does My Site Cost? 可让您估算加载网站的实际财务费用。下面的直方图显示了加载 amazon.com 的费用（使用预付费流量套餐）。
请注意，这没有考虑相对于收入的负担能力。blog.jana.com 中的数据显示了数据费用。
| 500MB 流量套餐 费用（美元） |
每小时最低 工资（美元） |
支付 500MB 流量套餐 所需的工作时间 |
|
| 印度 | $3.38 | $0.20 | 17 小时 |
| 印度尼西亚 | $2.39 | $0.43 | 6 小时 |
| 巴西 | $13.77 | $1.04 | 13 小时 |
页面重量不仅是新兴市场的问题。在许多国家/地区，用户使用的数据套餐有限，如果他们认为您的网站或应用很重且费用很高，就会避开您的网站或应用。即使是“无限”的移动网络和 Wi-Fi 流量套餐通常也有数据量限制，超过该限制后，数据会被阻止或限速。出于这些原因，最好尽可能透明地说明您的网页消耗的数据量。以下博文提供了具体的最佳实践：通过费用透明化来培养信任
要点总结：页面重量会影响性能并消耗金钱。优化内容效率介绍了如何降低该费用。