无论您是在建立一个新的商店，还是意识到是时候对已有的商店进行适当的重新设计了，开始研究时可能首先遇到的概念之一就是响应式网页设计。那什么是响应性网页设计？WooCommerce 店群美国虚拟主机商主要就响应式网页设计做一些简单介绍。
所谓响应性网页设计是一种相对较新的商店设计方法，它可以确保商店在所有装置上看起来都很好。在响应性商店上，无论您使用什么装置，都显示相同的资讯和页面元素，但它们的大小和组织方式将根据萤幕的大小而改变。不管是什么装置，该商店都会根据智慧手机和平板电脑的萤幕尺寸调整（或做出反应），以提供一种直观的体验。适应性设计和灵活的布局为访问者提供了更好的使用者体验，也有助于提高搜索引擎的优化价值。
响应性网页设计
随著使用手机访问各种商店的人数增多——手机使用者现在已经超过了 PC 端使用者——商店所有者必须优先考虑手机使用者的体验。在手机应用的早期，除了为 PC 使用者载入一个商店以外，设计师通常会为智慧手机使用者建立一个独立的手机商店。但是随著可用装置的型别和萤幕大小的增加，这并不能解决实际的许多问题。除了萤幕尺寸的变化，还必须处理人们改变手拿装置的方向的能力（横向与纵向），以及人们对如何设置网页浏览器视窗大小有不同的偏好。简而言之，即使可以设计十几个完全独特的商店来适应不同的萤幕大小，但仍然会错过一些常见的使用案例。或者可以设计一个几乎可以在所有的装置、萤幕和浏览器视窗上执行的响应性的商店——不管尺寸大小。其实有兴趣的朋友也可以关注一下 响应式网页设计的一些例子。
响应性网页设计的主要元素
灵活的网格。设计师一般使用网格来构建商店，但对于响应性商店，他们必须确保网格是灵活的，并且可以根据萤幕大小载入不同的内容。因此，灵活的网格是响应性商店设计的核心部分。
断点。与灵活的网格相关，断点是页面上的一些点，您可以在这些点上识别出页面的哪些地方可以被切断，以及旁边的资讯将向下移动。对于人们使用的三种主要装置型别，每个商店都应该至少有三个断点，但大多数商店应该有更多断点。
灵活的影象和响应性的媒体查询。根据萤幕的大小，文字很容易移动，但影象和媒体功能可能更棘手。设计人员可以使用多种不同的选项来确保影象以合适的尺寸显示在萤幕上，而不会导致载入速度变慢或看起来被压缩得很奇怪。在大多数情况下，这是确定影象将以多大尺寸显示的译码问题。在其他情况下，它可以改变影象本身（例如，删除不必要的部分），并根据萤幕大小让站点知道载入哪个版本。设计人员还可以使用一些编码命令来确保页面上包含的媒体以合适的大小载入。响应性媒体查询可以设置媒体的最大和最小宽度，以及为 ipad 上的媒体设置方向。
视觉层次结构。响应性设计的商店设计的很大一部分总是考虑页面的哪些部分是最高优先顺序的。对于访问者来说，要看的最重要的图片和资讯应该放在页面的上方，不那么重要的元素应该放在下方。一般来说，视觉层次结构是一种很好的网页设计实践，但它在响应性设计中尤其重要，因为使用较小装置的访问者每次在页面上看到的内容会更少。想要把它们放在页面上，要确保页面上最有价值的部分是可以在更高的位置访问。
触控式萤幕和是适合滑鼠的元素。手机设计的另一个重要原因是确保页面上的所有内容在触控式萤幕上都像在滑鼠上一样直观和可用。这意味著连结要足够大、足够明显，可以在小萤幕上选择，而且在所有装置型别上都可以轻松滚动。良好的响应性设计包括使用者测试，以确保页面的所有元素使用触控操作都能像使用滑鼠操作一样。
使用响应性网页设计的 5 个原因
作为一个商店的拥有者，应该知道网页设计的趋势有时是来来去去的。如果您已经有了一个商店，专注于一个专业的商店改进或重新设计是一件大事，所以即使知道什么是响应性商店设计以及这个词有多么响亮，都可能会想知道建立一个响应性的商店是否真的重要。对于一个刚开始建立新商店的人来说，可能会担心让它响应起来会更加困难或昂贵。在这两种情况下，响应性网页设计确实是最佳选择。
1 、大多数网络使用者使用手机浏览网页。
最近的预估显示，拥有移动装置的人数超过了 50 亿。正如我们已经提到的，现在更多的使用者通过手机上网，而不是桌上型电脑。手机上网显然是一种趋势，商店所有者需要适应这一趋势。您不会想因为糟糕的使用者体验而失去超过一半的商店访问者。为了让商店适合所有人，您需要平等地考虑手机和 PC 使用者。响应性商店是确保每个访问您商店的人都能获得您想要的体验的最好方法。
2 、搜索引擎优化需要一个适合手机的商店。
几年来，谷歌一直在告诉搜索引擎优化的专业人士，商店在手机上执行的好坏是决定排名的一个因素。他们甚至开发了一个免费的工具来看看商店是否适合手机。如果想让人们通过搜索引擎找到您的商店，那么让它适合手机是至关重要的。谷歌不仅将适合手机端作为搜索引擎优化排名的一个因素，而且他们还坦率地表示，他们更喜欢响应性设计。虽然表达自己的偏好并不等同于说它会提升您的搜索引擎优化，但如果关心商店在排名中的位置，接受谷歌的建议是明智的。
3 、可以节省时间。
显然，您需要一个能在手机上执行的商店，这一点已经没有争议了。但是，除了响应性设计之外，还有其他一些选项可以让您的商店更合适于手机。例如，您可以建立一个单独的手机版本的商店。但拥有两个商店也会带来一些问题。首先，建立两个独立的商店比建立一个单独的响应性商店需要更多的时间。当您建立商店和更新商店的时候，就会加倍努力。此外，必须熟练地掌握每一项工作。当您要监控的大量商店的时候，将会出现更多损坏连结或页面无法正确载入。
4 、提供跨装置的一致资讯。
建立一个独特的手机商店背后的思考是，当人们在移动装置上访问您的商店时，可以弄清楚他们在寻找什么，然后建立一个商店来满足这些针对于手机的需求。然后，在构建 PC 商店时，可以构建一个更完整的商店版本，因为有更多的空间可以使用，其中包含您想包含的所有内容。问题是，这意味著您的手机使用者正在错过 PC 访问者可以看到的一些资讯。要么在 PC 商店上填补访问者补需要的资讯，要么剥夺了手机使用者可能感兴趣的东西。无论哪种方式，因为他们使用的装置不同，您给他们的体验也不平等。手机行为与 PC 行为的相似之处令人惊讶。一项分析发现，人们喜欢使用手机或其他移动装置滚动萤幕程度几乎和在桌上型电脑上一样高，而且可能的话，他们更愿意在手机或其他移动装置上点选连结。如果把所有较长的页面和内容都放在只有 PC 版本的商店上，那就等同于把那些使用手机装置而且更愿意阅读和参与这些内容的使用者遮蔽了。和 PC 端相比，商店访问者在移动端滚动得更多。
5 、使跟踪分析更容易。
这只是使商店翻倍的另一种方法，意味著需要做更多的工作。必须跟上商店的两个版本的分析，并分别分析结果。相比之下，使用响应性商店，仍然可以看到根据使用者使用的装置不同分析也不同，但可以根据商店一致的大图检视来推断什么对您的使用者有用。当您在处理跨装置的相对一致的体验时，在一个地方跟踪您的分析并把他们弄明白会更容易。
如何建立一个响应性商店
随著响应性商店设计日益规范，商店所有者现在建立响应性商店更容易。决定如何让商店响应时，有两个主要的选择。
选项 1：使用响应性模板。
今天建立商店比互联网的早期时候建立要容易得多。即使不懂程式设计或设计技能的人也可以在正确的 WooCommerce 商店构建器的帮助下，在几个小时内拼凑出一个好看的商店。由于响应性商店设计的重要性，最好的 WooCommerce 商店构建器将包括响应性模板，您可以使用这些模板来简化对适合手机或其他移动装置的响应性商店的设计。
如果您的首要任务是让商店以一种快速、简单、实惠的方式建立起来，那么一个带有适合手机模板的 WooCommerce 商店构建器是响应性网页设计的最佳工具。当试图找到适合您需要的 WooCommerce 商店构建器时，请确保它提供了许多精心设计的模板供您选择，并且它们都是响应性好的。您不需要做任何额外的工作来确保商店对您的移动使用者和 PC 访问者一样有效。
选择二：雇佣一个熟练的设计师。
您的第二个选择更贵，但它给您更多的权力来实现商店的具体愿景。虽然使用响应性模板的 WooCommerce 商店构建器使事情变得容易得多，但您的工作是从一个已经存在的设计开始的，其他商店也是从这个设计开始的。一个好的网页设计师可以从零开始为您建立一个与您的想法直接匹配的商店。在这一点上，大多数专业的网页设计师都有能力构建响应性商店，但一定要询问您了解过设计师，并从一开始就明确表示您希望商店的响应性好。要求检视其他响应性商店的例子，以确保您喜欢他们的工作，并相信他们会建立您想要的商店。费用是建站的一个重点，有很多企业都会找便宜的建站方式，相关内容可以参考了解一下 如何找到一个价格便宜的 WooCommerce 商店构建器。
最后一步：执行使用者测试。
无论选择哪一个选项来构建响应性商店，为了真正了解它在所有型别的装置上都能很好地工作，都需要对其进行测试。或者更准确地说，需要目标客户来测试它。使用者测试可以确保在释出商店之前发现商店可用性的问题。在因为手机而降低销售之前，最好知道在手机上的结账过程是困难的，而使用者测试为您提供了这种有价值的资讯。使用者测试对于任何商店来说都是一个好主意，但是对于响应性商店尤其有用，这样您就可以确保商店在尽可能多的装置上看起来像您想要的样子。
关于响应式网页设计就介绍到这，有兴趣的朋友可以访问 WooCommerce 店群美国虚拟主机商官网，了解更多关于响应式商店的内容 2019 年网页设计的趋势是怎样的。