清远企业网站制作：内容第一——设计最后

2019.08.12 mf_web

121

如何为响应式网络设计和开发？许多方法都试图解决这个问题，但所有方法都依赖于相同的经典网站开发过程。它归结为以下内容：设计然后发展。让我们疯狂一点，将这种过时的方法推到脑后。

在我们开始翻转周围的事情之前，让我们快速沿着记忆小道漫步，这样我们才能知道我们来自哪里以及现在的位置。清远企业网站制作

历史

现在是1989年，有计划的人蒂姆·伯纳斯 - 李在欧洲核子研究中心工作时想到了HTML。它是一种跨文档链接内容的语言。

四年后，网络于1993年上市。人们花了几年的时间才创建了第一个使用表格的圆柱布局 - 此时，有些东西发生了变化。我认为这是网络开发的转折点。这是设计可以转移到开发过程前端的时刻。您现在可以设计一个网页，将其切片并将其呈现在网络上。

幸运的是，我们恢复了理智，并放弃了布局。我们自豪地转向语义HTML，但我们坚持我们的设计优先方法。让我们仔细看看语义HTML。

语义HTML

语义HTML是关于选择正确的HTML元素来描述给定的信息，而不是使用HTML来定义信息的外观。如果你是一名前端开发人员，过去几年你可能已经这样做了。太棒了，继续吧！

在我看来，编写语义HTML是成为一名优秀的前端开发人员的关键方面之一。这是我非常重视的东西。

正因为如此，我一直在与那些重视或不了解的同事讨论过很多话题。为了一劳永逸地解决这些争论，我试图让他们一瞥HTML写作背后的思考过程。

我在网上搜索了一个简单的网站并衍生出了它的HTML结构（没有查看现有的HTML，这本来就是作弊）。然后，我将HTML思维过程转变为逐步可视化。对于我的许多同事而言，这种可视化结果令人大开眼界。这些视觉效果创造了对前端开发人员所做事情以及语义HTML重要性的相互理解。另外，有趣的是，它揭示了并非所有前端开发人员都以同样的眼光看待语义HTML。

以下是我在思考过程实验中使用的网站。

我已经在下面列出了思考过程。在左侧是我对该网站的看法。右侧是在浏览器中呈现的书面HTML。好的，我们这样做！

在我看来，这个登陆页面可以作为所有子页面的保护伞。所以，我将徽标包装成一个h1。我还会添加一个img标签，以便在打印时显示徽标。
好的，接下来是菜单。我把它放在顶部，因为这是一个登陆页面。另外，让我们用CSS处理大写字母text-transform。我将菜单包装在一个nav并在里面添加一个名为“Navigation”的强制标题。此外，我们将添加一个普通的无序列表，其中锚点作为其他页面的链接。
这张图片显示的是列车实际内容吗？因此，我们应该使用img标签吗？或者它是否美观，这意味着我们应该在CSS中处理它background-image？我将继续审美，这意味着它不会最终出现在HTML大纲中。
图像下方的白色文字是什么类型的内容？我该怎么命名呢？怎么样“介绍” - 我不是百分百肯定的。我将添加一个“简介”标题，稍后用CSS隐藏它。此标题也可能对屏幕阅读器有用。
等一下！那个蓝色的“今天加入我们”按钮与介绍段落相关（“......如果你加入我们”）。此外，它不是一个按钮，而是一个链接。我正准备迎接CSS定位的噩梦。
此时，我不知道如何处理“预订活动”按钮。它与“今天加入我们”无关，这是肯定的。这是一个没有上下文的按钮。我现在就跳过它。
最后，一些简单的内容：标题，段落和链接。为了定位它们，我们可能需要在div稍后包装其中一些。
关于事件！让我们去一个有序列表，因为改变日期会让人感到困惑。我们将使用time元素来表示日期和时间。让我们围绕子标题包装一个链接。
现在我们知道“预订活动”按钮的位置。人们需要知道即将发生的事件才能预订 - 这是有道理的。因此，我们将按钮与事件使我们的CSS定位噩梦更加糟糕。

下面是生成的HTML。

<h1><img src=""/>Greater Dunnellon Historical Society</h1> <nav>     
   <h2>Navigation</h2>    <ul>       <li><a href="/">Home</a></li>         
      …    
   </ul> </nav> <main>     <h2>Introduction</h2>    <p>We’ve come together … if you joined us.</p>    <a href="/">Join us today</a>  
   <h2>A commitment to our history</h2>    <p>The Greater Dunnellon … in its heyday.</p>  
   <h3>Learn about Dunnelon's history</h3>    <p>Dunnellon was platted … South Williams Street.</p>    <a href="/">More history</a>  
   <h3>Your next event at the depot</h3>    <p>The depot provides … are also available.</p>    <a href="/">Make a reservation</a>  
   <article>        <h2>Upcoming events</h2>       <ol>          <li>             <h3><a href="/">Museum open Tuesdays</a></h3>             <time>01/21/2015 from 11:00 am</time> to <time>4:00 pm</time>             <p>Learn, teach and share history with Boomtown Sam!</p>          </li>             
         …          
      </ol>        <a href="/">Book an event</a>     
   </article>  </main>

复制

为了保持HTML的紧凑性，省略了许多属性。

您可能已经注意到我已经做了很多假设，以便提出上面的HTML结构。介绍性段落标题，横幅图像和号召性用语按钮 - 这些都是我假设某些内容并在页面上添加或更改信息的地方。

我还假设了在页面上放置东西的位置。在从文本数据中导出语义含义时，我假设视觉设计师打算在右侧提供比左侧信息更低的优先级信息。基于这些假设，“即将发生的事件”最终低于“对我们历史的承诺。”我将导航置于“简介”之上，尽管反过来可能会更好。

假设是危险的，不仅因为人们可能会错误地假设，而且因为其他人很可能会采取不同的假设。在这种情况下，如果你和我根据上面的设计独立编写了一个HTML树，如果他们的结果是相同的，那将是一个奇迹。

HTML是关于赋予信息意义的。我们不应该对相同信息的不同描述结束。设计似乎掩盖了内容的含义，并为解释和假设创造了空间。

内容优先

一个内容的第一方式告诉我们，视觉设计应始终根据实际的内容。只有真实的内容，我们才能决定如何最好地向用户展示。我们将在一分钟内达到“真实”的含义。

通过内容优先的方法，我们从没有内容的设计转变为基于内容的设计 - 这是一个非常重要的区别。记住语义HTML的定义：赋予内容意义。

语义HTML与外观无关 - 这就是CSS的用途。为什么在设计阶段之后推迟HTML，如果它不依赖于外观？让我们将它移到前面并在设计之前描述我们的内容。

这是一个很小的变化，但它有很大的不同。通过这种改变，所有假设都从等式中取出。我们现在知道我们的内容将如何构建。在绘制像素之前，我们已经拥有了一个网站。

你听到了吗？这就是屏幕阅读器用户庆祝的声音。

翻转它

我们回到幻灯片。这一次，我们将以相反的方式做到这一点。我们将使用我们刚刚编写的HTML，并想象设计师将其用于视觉设计。

很难想象“号召性用语”按钮最终落在原始设计中的位置。在视觉效果和内容方面，这种新设置更有意义。

当我们将HTML基于初始视觉设计时，我们只能将视觉效果用于一个视口。通过扭转局面并将设计基于HTML，我们可以将HTML用于所有可能的视口和上下文。

现实呼唤

如果我引起了你的兴趣，你可能想知道如何在实际项目中实现这种方法。根据项目，团队和客户的不同，它可能如下所示。

因为我们先做内容，所以我们需要掌握客户的内容。Mark Boulton正确地指出，内容优先不是在做任何事情之前等待最终内容。当我们谈论内容优先时，我们的意思是我们想知道我们正在设计的内容的结构。拥有最终内容将是非常棒的，但大多数时候它根本就不是。在“ 结构第一。内容总是，“博尔顿说：

您无需了解内容即可创建良好的体验。你不能做的是在不了解你的内容结构的情况下创造良好的体验。

根据我的经验，这是事实，并确保每个人都知道“内容优先”意味着什么是重要的。因此，请确保每个人都了解您正在谈论结构，并且您并不意味着暂停项目并等待客户端提供最终内容。

在我们开始编写HTML之前，我们需要确定页面上显示的内容以及如何确定其优先级。这是优先指南派上用场的地方。与您的客户一起，在便签上记下您网页的所有内容类型，然后沿y轴按时间顺序排序。例如，您可以将“产品详细信息”粘贴，并将“发布评论”粘贴，并且因为有人需要在审核之前了解产品，因此应首先提供“产品详细信息”。您的客户可能认为“发布评论”框更为重要，但这种重要性可以在以后使用颜色和构图进行可视化，而不是通过更改内容的顺序。

我发现客户非常擅长这项工作，可能是因为他们习惯于撰写文章，例如引号和写论文，这些文件必须遵循某种层次结构和时间顺序才有意义。正如我所说，这项练习让他们真正思考什么是重要的。此外，如果有多个利益相关者，它会显示每个利益相关者的动机以及哪些利益相关者的影响力最大。

我们已经设置了内容类型; 我们来谈谈内容结构。构建内容正是HTML的优点所在。我们去吧。我们已经获得了内容类型，并且我们理解语义HTML，所以让我们开始向各种内容类型添加结构。这可能很容易或具有挑战性，具体取决于您的内容类型的高级别。

基本的“发布评论”表单可能非常简单：

<form>     <fieldset>       <legend>Rating</legend>        <label><input type="radio"/> 1</label>       <label><input type="radio"/> 2</label>       <label><input type="radio"/> 3</label>       <label><input type="radio"/> 4</label>       <label><input type="radio"/> 5</label>     </fieldset>     <label>Review</label>    <textarea></textarea>     <button type="submit">Send</button>  </form>

复制

为了保持HTML的紧凑性，省略了许多属性。

粘性的“产品细节”可能会更具挑战性。在最小的形式，它可能只是一个“标题”，“图像”和“短段”。但您的客户可能也想要那里的东西，如“产品规格”，“订购选项”，“相关产品”等这些其他内容类型需要进一步讨论和确定优先级。最后，您可能会得出结论，“发布评论”实际上是“产品详细信息”的一部分，因为人们将发布“产品详细信息”中描述的产品评论。

<article>    <h1>MacBook Pro</h1>     <img src="macbook-pro.jpg"/>     <p>A groundbreaking Retina display. All-flash architecture. Fourth-generation Intel processors. Remarkably thin and light 13‑inch and 15‑inch designs. Together, these features take the notebook to a place it’s never been. And they’ll do the same for everything you create with it.</p>  
   <section>
      <h1>Post a Review</h1>        <!-- 'post review' module here -->     </section>  </article>

复制

为了保持HTML的紧凑性，省略了许多属性。

这些内容类型不是独立的。它们应该包含在整个内容层次结构中，正如我们之前在与语义HTML相关的一系列图像中看到的那样。与此层次结构一起，您的内容类型应创建一个漂亮且正确的HTML5分区大纲。要对此进行测试，您可以将HTML复制到HTML5大纲视图。

以下是初始网页设置的示例。

现在，我们也可以做一些内容编排，以确保每一位内容都能从用户那里得到适当的关注。在他出色的书籍响应式设计工作流程中，Stephan Hay建议我们在此时设置内容参考线框。在我看来，这有点太早了 - 最好在构图上再等一会儿，因为颜色，排版和功能会影响注意力在整个页面上的分布方式。

让我们继续我们的基本HTML网页。不要向客户展示; 首先混合他们的品牌标识。添加他们的徽标，并将他们的排版规则和配色方案转换为CSS。这将使您的客户更容易识别内容 - 内容看起来不那么匿名，更像是他们自己的内容。

虽然您的客户能够与上面显示的版本相关联，但他们可能很难对此感到热情。根据我的经验，客户会对完成的工作量留下深刻的印象，但不知道结果会是什么样子会感到不舒服。我最近装修了我的房子，我不得不承认，在完全剥离它之后，取下墙壁并拆除旧的管道和电力，我严重怀疑它最终是否会在一起。那时我才明白客户的感受。

您需要管理这种感觉，否则他们会恐慌并回归到经典的Web开发模式，需要预先设计。

上面的版本是“最不可行的网页。”它包含，如果一切按计划进行，则客户的用户将进入网页的核心内容。

如果你一直在使用实际内容，那么即使所有地狱都破裂了，你也可以按照原样在线投放。它不是完美的，但品牌是可识别的，用户将能够访问信息。

现在，地狱并没有松动。那么让我们转到内容编排。开始调整浏览器窗口的大小并在某些不同的设备上查看页面。您会注意到，在更宽的视口中，线条长度会变得不舒服。一个理想的线所包含的字符45和75之间。因此，您可以将比它更长或更短的点视为调整布局或字体大小的指标。

这里有两个选项：要么在浏览器中进行调整，要么启动您喜欢的设计工具。根据我的经验，在浏览器中进行设计对于调整字体大小和颜色等内容很有用，而在Sketch或Photoshop或使用笔和纸时，组合实验更容易。

在浏览器中调整CSS值可能很诱人，但截取屏幕截图并在浏览器外部进行一些快速调整通常会更快。我发现这会带来更有趣的设计选择。在绘制草图时，尝试想象您的解决方案如何在越来越大的视口中缩放或分解，以及您的设计选择如何与内容的顺序和重要性相关联。

如果您对草图感到满意，请将结果转换为CSS。

现在我们已经设置了网页的基本版本，我们可以开始测试和迭代。做一些快速可用性测试，你可以通过遵循Do not Make Me Think方法轻松完成。有时为此创建一个小型原型比使用生产版本更容易。

在调整每个上下文的网页时，我们可以考虑根据上下文测量添加功能和表示样式。例如，在小视口中，我们可以将菜单移出视图。或者当用户在昏暗的环境中深夜查看网页时，我们可以加载具有反色的样式表。如果有足够的房地产，我们可以将地址变成谷歌地图。

仔细观察，您会发现所有这些增强功能都是在内容之上进行分层的。它们只会改变内容呈现和交互的方式; 他们从不改变内容（或内容的优先级）本身。这完全符合渐进增强的策略：从内容开始，然后从那里开始工作。

我们将通过关于Web应用程序的简短说明来完成本节。上面介绍的方法适用于内容驱动的网页 - 所有环境中的所有人都可以访问这些网页。并非所有Web应用程序都符合此描述。许多人使用HTML来描述界面而不是内容。在这些情况下，这种方法可能不是最合适的。

优于设计第一的方法

我编制了一份克服的挑战清单以及这种方法所获得的优势。并不是说这种方法不会带来新的挑战，但这些新挑战主要与管理客户期望和团队沟通有关。

到列表！

内容 - 因此是HTML - 是所有设备中唯一的常量。如何呈现您的内容以及用户与其进行交互的方式因设备而异，但内容将保持不变。从内容开始意味着从每个人开始。
用HTML描述内容不仅涉及列表，段落和标题。它还涉及在按钮和链接，下拉列表和单选按钮，表格和定义列表之间进行选择。它首先概述了HTML的所有功能。
随着内容的确定，对实际内容的混淆程度会降低。有些东西看起来像是视觉设计中的按钮，但实际上是超链接。这会在团队中造成错误传达，这可以通过首先编写HTML来轻松防止。
因为我们在HTML之上进行了分层设计，所以我们为团队创造了一个共同合作的机会。开发人员可以致力于实现HTML，而设计人员可以考虑各种视口和上下文的合成。没有更多可交付的依赖性意味着没有更多的小秘密瀑布。
这种方法使设计人员能够与他们的开发人员同时工作，允许他们在浏览器中快速测试。CSS中可能更容易解决一些设计问题。正如保罗·博格（Paul Boag）所解释的那样：“开发人员可能会提出你可能认为不可能的想法。”
现在很清楚应该通过CMS生成或管理哪些内容。隐藏的跳过链接，标题和标签不再被隐藏 - 所有内容都在那里。设计选择现在可以隐含内容，但这并不意味着内容不会最终出现在HTML中，因为我们已经编写过了。根据我的经验，这些隐式内容项中没有一个最终出现在CMS中，因为它们并不是每个人都可以看到的。通过从HTML开始，这很容易解决。
如果您和客户已经确定了要与用户通信的内容，那么在开发过程中很可能不会发生变化。只有当用户研究发现一些以前未知的事实需要改变时，才会发生变化。
内容创造焦点。通过在流程早期关注内容和功能，您不太可能最终与客户进行“红色或蓝色”讨论。当客户应该考虑全局时，他们常常倾向于关注细节。通过这种分层设置，焦点从大图开始，然后在项目期间移动到细节。
早期使用HTML可以让您首先构建最小可行产品。在项目的后期阶段，您可以逐步增强它以进一步改善用户体验。如果您在项目中引入可用性测试（您应该），您可以使用结果来决定首先要增强的内容。异步搜索过滤系统可能很酷，但您的用户可能更重视其他功能。哈里罗伯茨提醒我们，今天“足够好”明天胜过“完美”。
正如我们在语义HTML练习中看到的“调用操作”按钮一样，当您使用内容作为基础时，更容易发现用户体验问题。
完成HTML后，您可以立即开始与视障用户一起测试内容。大多数附加分层将用于视力正常。
从内容开始，您可以更轻松地定义HTML5分区大纲，选择微格式或微数据并应用WAI-ARIA规则。这样可以提高访问性，并使搜索机器人更容易索引页面。
这种方法需要从稳健的稳定基础转变为非常详细的灵活终端产品。通过尽早远离高度详细的解决方案，您可以降低将大量时间投入不需要的功能的风险。例如，您可以先构建同步搜索，然后再在项目中构建，如果您的用户群非常有利于搜索，您可以在其上层叠异步搜索和过滤。
正确编写的HTML树为以后的JavaScript提供了自然的钩子。标题下的内容可以在大型视口中显示，然后以较小的手风琴呈现。
你不再创建漂亮的网页图片了。重点转移到快速草图和微型原型以解决设计挑战，结果很快转换为CSS并移至浏览器。我们减少了可交付成果，这意味着我们的工作效率更高。