使用Divi建立无缝响应网站的6个步骤

虽然Divi确实是一个响应迅速的WordPress主题“开箱即用”，但是当使用Divi为自己或客户创建一个独特的网站时，相当多的测试，调整和微调绝对是必要的，因为你正在创造的定制设计变得生动。如果，也就是说，您希望最终结果是一个完美的响应式网站，在每个设备上看起来都很完美。

我已经多次为许多客户遍历这条道路，如果我分享我的设计过程和我在此过程中学到的课程，我认为这对Divi使用者是有益的。在下面的文章中，我创建了一个六步流程，任何使用Divi的人都可以采用或改编以改进其响应式设计工作流程。

让我们开始吧！

1.了解他们的业务目标

对我而言，成功响应式网页设计的真正秘诀在于此。我从一份项目调查问卷开始，该问卷构成了他们希望在未来五年内开展业务的深入对话的基础。这些只是我们提出的几个问题。

他们目前的业务组合是什么？他们是否期望改变？
他们的扩张计划是什么？他们是否计划很快或在不久的将来推出新产品或内容（即在线销售，发布播客，建立项目）？

我要求客户考虑的最重要的事情之一是，他们希望访问者在网站上可移动访问，以及他们希望访问者访问之前在主页上获得哪些关键点。他们如何回答，将决定我们如何制作主页。

确定需要在主页上传达的关键消息，按重要性排列它们，您就可以创建客户端优先的Web体验。

2.看看统计数据

我沉迷于谷歌分析，因为它有助于以多种方式完成客户的业务概况。离开率低？他们的主页内容显然正在运行，因此要弄清楚他们需要保留什么以及需要做些什么。回访的人很少？人们不会再回头看，所以也许产品没有展示得足够好。停留时间短？也许副本令人困惑或不够引人注目。

最重要的是，百度指数可以告诉您大多数访问者使用哪些设备访问网站。我的大多数客户都是摄影师，在大型台式机Mac上工作，所以我知道我的设计需要在这么大的尺寸上完美无瑕。但他们的大多数客户首先在平板电脑上访问，然后第二次在15英寸笔记本电脑上返回。这种英特尔是无价的，完全回答了任何项目的问题，关于“移动优先”或其他问题。

3.草绘它

在这个阶段，您可能正在考虑使用线框来帮助确定网站的基本结构以及页面如何从一个页面流向另一个页面。我的出发点始终是值得信赖的铅笔和空白纸。它使我能够制作一系列粗略的草图，而不会过于强调任何特定的设计方向。我通常会与客户一起做这件事，直到我们同意最好的主页布局。

The_Design_Space_Wireframe草图

在那之后，我的下一步取决于网站构建技术复杂程度。如果它很简单，我拥有所有的副本和资产，以及详细的站点地图，我可能会直接进入Divi。

如果设计涉及原始UX细节，我经常使用我当前的粉丝，Adobe CC体验应用程序（http://www.adobe.com/uk/products/experience-design.html）来测试动画和响应式布局的内容在平板电脑或手机上可能会有显着改变。这使您的客户可以选择在所有设备上查看折叠（屏幕底部）上方的内容。

The_Design_Space_Wireframe-的Adobe体验-CC

大多数情况下，当项目需要复杂的图形元素时，我在Photoshop中工作以开发详细的分层文件。我是Photoshop粉丝，因为它可以消除在开发完成网站中使用的资产时的猜测。此外，您可以快速导出图层组作为剪裁的png和jpeg文件，从而大大加快工作流程。

我的黄金法则是为目标受众最常用的分辨率创建画布。在我的情况下，我从一个典型的15“视网膜宽度2880px开始，我确保我用指导规则标记我的中心点和标准阶段。根据记录，标准Divi网站宽度为1080px。

The_Design_Space_Wireframe到PSD

将图层分组在每个部分的文件夹中，以便您可以轻松调整部分高度和重复设计功能。

The_Design_Space_Photoshop层

4.随时测试

Divi最有用的功能之一是能够保存和重用部分和布局，从而可以非常快速地构建具有类似结构的页面。您想要不惜一切代价避免的是复制仍然需要一些响应性调整的布局。没有什么比通过十几个完成的页面一遍又一遍地纠正同一问题更糟糕了。

为了加快您的响应工作流程，我使用免费的在线工具Screenfly（http://quirktools.com/screenfly）开发每个部分并进行测试。当我到达页面末尾时，我会在真实设备上进行测试，包括Android，iPhone 5，iPhone 6和iPad以及27英寸显示器和13英寸笔记本电脑。显然，将浏览器拖动到近似形状的效果非常好，但没有什么比真正的设备测试更好。

完善您的主页，您会发现您可以使用并重复使用这些部分来构成其余页面的主干。

5.将您的内容定制到设备

我构建的响应式网站越多，我就越喜欢隐藏某些内容，特别是涉及移动设备时。第一次在移动设备上访问网站的人往往会寻找概述。当然，这是一种概括，但这意味着您应该专注于客户的业务目标，并确保只需单击一下即可快速轻松地到达关键区域。

不要忘记，使用Divi时，只需检查几个方框，就可以轻松地将这些部分隐藏在平板电脑和手机上。

The_Design_Space_Brett_Florens_Site

6.注意细节

如果您正在使用Divi进行构建，而Divi已经完成了大量繁重工作，那么您已经完全掌握了响应式设计的方法，而且当涉及到控制设备的更精细细节时，这就是Divi的用武之地它自己的。

我特别喜欢调整平板电脑和移动设备的字体大小以及填充和边距的容易程度。在那里我曾经写过几十个媒体查询，现在我没有写。

综上所述

制定一个可靠的规划流程，首先确定业务优先级，并在进入浏览器阶段之前解决潜在问题，这将有助于您充满信心和速度地开发响应式站点。在设计过程的每一步都进行测试，并使用Divi内置的高级设计设置在每台设备上获得所需的结果。

感谢您的阅读，请随时向我提出任何问题或分享您在下面的评论部分中学到的经验教训。