韶关网站优化：如何保持框架开发简单和无错误

对于您的产品来说也是如此：人们依靠我们的产品来工作。臭虫侵蚀了信任，而信任又失去了客户。因此，当我们开始更新响应式CSS框架Foundation时，我们希望确保一切正常。彻底。我们知道许多人依靠我们的软件来完成他们的工作，并且保持这种信任是至关重要的。

在本文中，您将学习我们的响应式测试方法，而不仅仅是逐案，页面来自PSD补偿。看，我们开发了一个特定的系统，以确保在不同的设备上发布时没有任何损坏。

首先，我们如何定义“破碎”？有一定程度的问题。解析错误显然是错误。但其他问题更难以分类。例如，我们曾经在繁忙的页面上有一个下载按钮，似乎没有人找到。我们将此定义为“破坏的用户反馈”，并将其视为错误，即使按钮工作正常。

寻找明显的错误是不够的。你必须彻底：执行，责任和方向。

从一开始就测试的想法 - 甚至在代码之前

早在我们达成更有条理的审核流程之前，我们就会与客户密切合作，在编写之前对其进行测试。他们从项目的第一天开始参与，在我们决定如何最好地解决问题时提供想法和反馈。

请记住，“破碎”不仅仅是解析错误。糟糕的想法和破碎的用户流程会像报告错误消息的用户一样杀死项目。所以我们从我们最喜欢的工具开始：Sharpie标记和Copic着色器。

我们喜欢素描。设计师为每个用户流或视图绘制几百个想法，并访问手册中有30-50页的客户端并不罕见。它们既易于制作又易于丢弃。对于一个不起作用的想法标记，五分钟比在Photoshop中同一个想法的一小时更好。

Sharpie草图非常有用，可以帮助我们预防高水平的问题。特别是对于响应式网页设计，每个页面必须具有不同的屏幕尺寸，设备功能或其他因素的配置。一些快速图纸显示：

• 每个配置在每个页面上显示（或不显示）的内容

• 如何安排这些元素

• 我们最喜欢的英雄PIC将得到大小，缩小多么小的移动设备上的......？

以不同的尺寸绘制相同的网站，可以在设计问题发生之前对其进行概述，至少在广泛的描述中。

使用视觉检查表

作为设计师，我们是视觉人。我们的工程师也会将他们的想法概括为与他人沟通。当我们创建响应式设计时，我们倾向于首先绘制桌面 - 它是视觉效果，客户可以更好地掌握结构和风格，而且我们设计的宽屏幕比移动设备更长。我们对这个过程感觉更舒服。

然而，移动性很重要，因此我们找到了一种可视方式，您可以对自己负责：使用视觉清单。这是它的工作原理。

1. 如果您正在以数字方式工作，请打印您的作品。对于快速的一次性编辑，没有什么比硬拷贝好了。

2. 圈出页面的位置：号召性用语，_____或_____。

3. 划掉每个元素 - 除了绘制直接路径到那个圆圈元素的元素。例如，在营销网站上，我们可能会保留一个英雄形象，一段描述性文字，以及......就此而言。杀死侧边栏，删除页脚，甚至导航栏。毫不留情。这只是一点纸。

剩下的一切都是必不可少的元素。页面的核心。

1. 草绘 - 是的，我们建议使用详细信息去模拟Sharpie和纸张 - 这是一个移动版本的页面，只包含您之前定义的基本元素。按照您在任何设计中使用的相同注意事项进行布局。

2. 一旦您将这些元素粗略化，请添加以前消除的元素 - 但支持整个站点。例如，导航或链接负载的页脚。

视觉清单方法很难学习，并且在削减移动设备的网站时值得付出努力。但这只是一个开始。编写完工作后，就该进行测试了。

在现实条件下测试执行......或者其他

在响应式网页设计方面，只需调整浏览器窗口大小并不会超出快速检查的范围。公平地说，这是一个罕见的日子，当我们不使用浏览器的窗口大小时，只需简单地了解响应式设计。但我们也在真实设备上进行测试。我们的设计思维过程涉及快速迭代和大量反馈。我们开始编码后不久，我们开始测试。

当我们处理框架的新版本时，尤其如此。我们知道我们需要支持大约十几种不同的设备来捕获大多数用例。虽然我们没有完整的设备实验室，但我们确实在大约16种设备上测试即将推出的版本，包括iOS和Android，以及主要的现代桌面浏览器。像Litmus这样的服务也在我们的测试中发挥作用，尽管他们并不总是提供必要的实践经验。双关语意图。

说到硬件，我们还学会了以艰难的方式测试服务器。我们开发的另一个框架Foundation for Apps使用命令行工具进行安装和更新。在开发过程中，代码在每次测试中都运行良好 - 好吧，也许不是每次测试，但这就是你的开发周期。

不过，它有所改善。通过改进，安装框架变得如此可靠，我们没有质疑它。代码刚刚起作用。这就是为什么，在发布它的前夕，我们震惊地发现它无法在我们的生产服务器上加载。

我们的开发系统和现场系统之间的细微差别会在最后一刻产生灾难......除了我们将测试方法应用到我们的产品中，即使它们移动到不同的服务器。从那时起，我们的最佳实践包括测试我们在实时服务器上的工作，但在部署之前 - 当然在宣布它之前。

使用电子表格跟踪系统

解决技术和设计问题是非常困难的，没有开销，因此我们依靠简单的共享Google电子表格来跟踪哪些有效，哪些无效。具体来说，我们会跟踪每页或每个视图可以点击的内容。这些规则看似简单。

彩色背景表明：

• 什么有效

• 什么失败了

• 什么部分有效

• 什么还没有经过测试。

电子表格中的每个单元格都默认为白色。然后我们将每个通过集合或 - 我们承认的功能的颜色变为绿色 - 通常是红色和黄色，分别表示破碎和可疑。

每列描述每个州的页面或视图- 或每个页面加载的环境。例如，管理员和用户可能会看到相同的仪表板，但具有不同的控件。这是两个不同的列。

电子表格是一个很好的概述，但我们的开发人员使用GitHub来跟踪问题并报告成功。因此，我们在电子表格的注释中包含GitHub问题编号：指示代码问题的每个单元格也链接到GitHub中的问题。因此，我们的工程师与我们的设计师使用相同的电子表格，可以随时掌握问题，并在项目解决后将项目标记为绿色。

随着时间的推移，当我们修复错误时，电子表格会稳定地丢失其红色和黄色框以支持绿色。当然，我们也发现了新的问题，有时会发明必须测试的新东西。所有内容都会添加到电子表格中。

我们不仅将它用于客户端项目，而且还以这种方式测试即将推出的Foundation版本。每个组件及其功能都有预期的行为。每个都在电子表格中获得一列。它是否适用于Windows 7的Internet Explorer？Chrome for Mac OS X 10.10怎么样？等等。

例如，我们提供了许多可用于框架的免费入门模板。他们中的每一个都在Firefox中失败 - 在我们的故障排除电子表格中出现了长时间的红色。我们在没有首先通过Autoprefixer运行CSS的情况下意外地推出了代码。这个问题很容易解决，但在此强调了测试，测试......再次测试的重要性。

前进（并侧身滑动）

当我们发布我们的画布外导航组件以在任何现代浏览器上轻松实现滑动菜单时，我们遇到了许多意想不到的问题。显然，当谈到复杂的组件时，您不仅会列出Internet Explorer，而是列出电子表格中支持的所有版本。这也是我们所做的。

这也是一件好事，因为令我们惊讶的是，最初的非画布动画在IE9中不起作用。相反，面板只是坐在页面顶部，遮住了大部分布局，并拒绝放弃。我们不得不重新考虑某些CSS技术，并且 - 在确保它在我们支持的Internet Explorer版本中工作之后 - 再次通过QA色域运行它以确保解决一个浏览器没有破坏另一个浏览器。

开发工具的一半不是创造性工作 - 而是确保创造性工作有效的时间。我们处理不同程度的“破碎”，从考虑不周的想法到实施好的想法; 在各种情况下进行测试; 并确保我们尽可能多地覆盖基地。它不需要复杂的工具来保持负责任。我们的电子表格方法很有效，因为它简单易用。

它完美吗？不会。但是当问题出现时，我们的动手系统可以相对快速地解决问题。结果是许多设计师依赖的坚实基础。

韶关网站优化