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

2019.08.12 mf_web

121

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

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

历史

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

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

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

语义HTML

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

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

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

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

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

01-dunnelon-OPT

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

  1. 在我看来,这个登陆页面可以作为所有子页面的保护伞。所以,我将徽标包装成一个h1。我还会添加一个img标签,以便在打印时显示徽标。

    02-dunnelon分析-1-OPT
  2. 好的,接下来是菜单。我把它放在顶部,因为这是一个登陆页面。另外,让我们用CSS处理大写字母text-transform。我将菜单包装在一个nav并在里面添加一个名为“Navigation”的强制标题。此外,我们将添加一个普通的无序列表,其中锚点作为其他页面的链接。

    03-dunnelon分析-2-OPT
  3. 这张图片显示的是列车实际内容吗?因此,我们应该使用img标签吗?或者它是否美观,这意味着我们应该在CSS中处理它background-image?我将继续审美,这意味着它不会最终出现在HTML大纲中。

    04-dunnelon分析-3-OPT
  4. 图像下方的白色文字是什么类型的内容?我该怎么命名呢?怎么样“介绍” - 我不是百分百肯定的。我将添加一个“简介”标题,稍后用CSS隐藏它。此标题也可能对屏幕阅读器有用。

    05-dunnelon分析-4-OPT
  5. 等一下!那个蓝色的“今天加入我们”按钮与介绍段落相关(“......如果你加入我们”)。此外,它不是一个按钮,而是一个链接。我正准备迎接CSS定位的噩梦。

    06-dunnelon分析-5-OPT
  6. 此时,我不知道如何处理“预订活动”按钮。它与“今天加入我们”无关,这是肯定的。这是一个没有上下文的按钮。我现在就跳过它。

    07-dunnelon分析-6-OPT
  7. 最后,一些简单的内容:标题,段落和链接。为了定位它们,我们可能需要在div稍后包装其中一些。

    08-dunnelon分析-7-OPT
  8. 关于事件!让我们去一个有序列表,因为改变日期会让人感到困惑。我们将使用time元素来表示日期和时间。让我们围绕子标题包装一个链接。

    09-dunnelon分析-8-OPT
  9. 现在我们知道“预订活动”按钮的位置。人们需要知道即将发生的事件才能预订 - 这是有道理的。因此,我们将按钮与事件使我们的CSS定位噩梦更加糟糕。

    10 dunnelon分析-9-OPT

下面是生成的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的定义:赋予内容意义。

11设计的HTML内容的选择

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

12-内容设计HTML-OPT

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

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

翻转它

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

13 dunnelon-后选择小
(查看大图)

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

当我们将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大纲视图。

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

14设置内容,选择

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

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

15  - 设置 - 品牌选择

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

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

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

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

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

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

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

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

16设置的组合物-OPT

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

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

17  - 设置 - 响应-OPT

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

我们将通过关于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并移至浏览器。我们减少了可交付成果,这意味着我们的工作效率更高。

与您的客户交谈

和所有事情一样,这都是关于沟通的。

如果您的客户认为Web是一个1024×768像素的盒子 - 并且在您和您的团队正在开发他们闪亮的新网站时继续思考这一点 - 那么您将遇到很多麻烦。

许多客户都期望在前面进行视觉设计,因为这是他们习以为常的。他们不知道更好。

你的工作 - 不是一件容易的事 - 就是向他们解释为什么这是不可能的。启发他们关于数以百万计的不同视口,交互方法和功能集,并帮助他们理解您无法在静态设计中捕获所有这些。

如果您的客户了解网络,您就赢了一半的战斗。

清远企业网站制作

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP