这取决于 ...
当您拥有现有内容并且是Web Reedesign的时候，内容 - 第一个策略只是一个事实。在重新设计网站以获得巨大的移动体验时，最好根据您的用户需求的优化内容，使用渐进式增强和响应性设计是最好的。然而，在更大的公司中，工作的分区可能意味着在实际信息元素的大小是已知的尺寸之前，设计布局 - 可能是因为尚未编写文本，或者并行发生内容审计。
不幸的是，当容器和内容结合在一起时，意外的结果可能导致笨拙的变通方法、昂贵的返工或裁剪所有内容以适应。以避免这些常见的问题它是最好的相互设计布局和内容。
容器优先方法出错的地方
空占位符
模板或CMS可能包含不存在于每个页面的占位符，或者对组织没有意义。在设计期间用假内容填充这些可以导致空，不需要的空间以后。“Lorem Ipsum”必须死。
对自己的缘故一致
锁步一致性可能会导致包含冗余或无关内容的页面无法使用。例如，如果一个模板有3层标题，而内容有2层，你不应该仅仅因为有足够的空间就重复其中一个标题，但是如果把它留空可能会看起来很尴尬。作为脚根说，“最重要的一致性是与用户期望的一致性。”
避免占位符的霸道，特别是在使用现成平台时。根据需要进行定制。
扩展问题
当内容大小与其需要进入的空间不匹配时出现缩放问题。常见问题包括：
- 当导航缩放或本地化时，布局元素不会优雅地长大。导航元素的数量最终打破页面布局，或者将新项目填充到快速链接或者资源菜单。
- 内容对于其分配的空间来说太大或太小，导致视觉毛刺。
- 图像破坏了框架元素，或者必须以太小的尺寸显示，以获得良好的易读或最佳享受。
由于缩放问题，我们所做的许多主要网页重新设计是所需的。规模化的变通方法就像你厨房里的垃圾抽屉一样，往往会以无用的方式发展。
非预期的约束
有时占位符内容是为了适应所提出的布局模板，因此有些早期的假设是关于如何看待如何成为任意约束的。
烘焙布局限制的例子：
- 所有图片说明必须为2行。
- 所有的总结必须是一段5行。
- 添加一个句子有时会迫使另一页。
- 缺陷内容类型导致人们必须单击的空页面。
- 菜单项或标题可以是一个或两个字，但不是三个。
- 在不打扰其他页面元素的情况下无法更改列宽度。
- 更改浏览器字体大小会导致整个页面损坏。
广告问题
广告遍布整个地方并更改大小。曾几何时，所有广告都是一定尺寸的水平横幅矩形。后来他们是一个不同的尺寸，然后他们变得几乎是广场。在一个点，他们在页面上游行。后来他们占用了庞词页面。需要他们设计的设计师持续多年不应该在广告尺寸周围设计布局。
广告假装满足。有时他们潜伏在滚动条附近，以抓住杂散点击和水龙头。（不要试图欺骗人们点击广告。这是失去访客的好方法。）
广告不是最重要的内容。当广告是看不见的，一些模板看起来很荒谬，这是一个很好的迹象，他们将在所有广告中显示它们更糟糕。如果您正在设计主要用于广告的布局，您可能已停止关注您网站访问者出现的内容：内容。
广告有条件的人潜意识地忽略它们。横幅失明可以在广告附近（或任何看起来它的东西）可以是广告），几乎看不见到你的观众。
你不能测试这些类型的广告问题，直到你有真正的内容在你的布局。
要做什么
- 创建灵活的布局。这几天，应该没有说，但我们仍然看到了这么多刚性设计。今天的无数屏幕尺寸要求响应网页设计。适应性和响应性设计通常能更好地容纳内容，但它们不能避免缺乏对实际内容的测试。
- 为了成功，您的布局、导航和文本容器必须是在设计过程中和部署后很长时间内都是灵活的。
- 使用渐进增强原理设计无障碍和跨平台兼容性。
- 使用现有内容设计。如果您重新设计并且您有内容（甚至过时的内容），则可以使用它开始。在任何情况下，如果您正在设计一个大小的系统，那么您需要将设计符合内容以及设计内容，因为网站设计和内容必须一起成长。
- 如果你没有内容，借一些类似的媒体来自其他来源并将其组装在线线框，原型和其他样机内。您还可以打印出来，将其剪切，并重新排列表格上的内容项，以为您的页面布局如何处理它。本练习还可以帮助您更好地了解您需要解决的内容类型，以便在您的行业中使网站具有竞争力和可比性。
- 仅在您必须只在低FI线框设计通信的第一个阶段时使用占位符。
- 计划拥抱任何可预测的未来发展。几十年来，你的设计可能会比你想象的要长了几十年。问自己，这个组织想要在带宽更好时发布的是什么？当两个巨大的白板大小显示和微小的智能手表更常见？数字助理正在读到人们？您的移动首先网站需要什么？您的中文B2B网站需要什么？也许您现在需要更多的模板以稍后避免昂贵的重新设计。
- 考虑将来的内容类型和显示大小，以及重新使用内容的有用方法。所有那些昨天的固定宽度的表格布局必须被替换或在周围工作。轨道内容，一篇文章一个列表他指出，网站内容正被拉进各种各样的其他容器。例如，人们和应用程序经常使用浏览器插件来重新格式化页面，以避免糟糕的布局和文本处理，这样他们可以更容易地阅读文章。manbetx官网手机登陆类似地，网站也可能通过各种方式嵌入内容来包含其他的大块文档。计划可嵌入性和共享。
- 计划扩大。尽量不要限制文本的长度或条目的数量，除非您必须这样做。计划适应更大的字体大小比您自己的首选大小。计划更多一切，特别是导航。
- 记录您的设计决策。明确设计假设和权衡，这样利益相关者就可以做出明智的选择，要么限制内容，要么留出时间让布局更加灵活。考虑在模板的样式指南或模式库中是否需要提到这些约束及其设计结果。
- 早期和经常测试。从建议的布局开始，用真实的内容进行测试，并在进行的过程中修改设计。
- 注意内容大小和放置中可能存在问题：
- 固定宽度任何东西
- 用于换行文本的元素
- 内容领域中图像和视频的许多长宽比
- 该完整性的幻觉（假楼层）由水平元素引起
- 内容看起来狭窄或破碎
- 互动没有足够的周围空间的触摸目标
- 确保您知道您的布局会发生什么当:
- 导航项目数量或长度增加
- 书页被大声朗读屏幕阅读器软件
- 页面被视为跨平台，包括移动设备
- 内容类型（广告，视频，文本）更改大小或形状
- javascript，flash和webfonts已关闭
- 打印表单，收据和其他关键项目
- 测试边缘案例。创建看起来很好的布局也很好的异常值：最小，最大，最长，最繁忙，最繁忙的大多数图片，所有文本，图表和图形，信息图表，缩进列表，段落列表，拉引力，帮助，程序，任何广告类型，形式等。
- 以尽可能多的平台和显示尺寸的平台上测试您的布局。你不可能总是采用一种适合所有人的设计，但是如果你在开始构建之前想好最棘手的内容，你可能会避免制作三个版本的网站。
- 翻译草稿布局，看看什么中断。使用现实文本并将其转换为德语和语言，与不同的字符集，只是看出会发生什么。这项运动有助于测试适合极端。它还可以帮助您检查您的布局如何传达人们应该做的事情以及页面如何在视觉上流动。
底线
当然，在每个布局中，都无法容纳每个可能的内容类型或大小。然而，通过将来的使用和人们享受和重新利用您的内容的方式思考，您应该到达可用和有用的布局，这些布局将多年来才能到来。在设计过程中调试布局，可以节省大量的复制时间和以后重新设计的费用。
分享此文章：