【51CTO.com快译】响应式网页设计是指设计可以从各种设备(包括手机和平板电脑)访问的网页。以响应式网页设计为例，布局适应设备的屏幕尺寸和浏览方向。使用响应式网页设计可以改善用户的浏览体验，那样用户可以从任何位置轻松访问您的网站;如果企业想要留住客户并与客户互动，响应式网页设计是最佳选择。

专业网页设计人员可帮助将普通网站变成响应式网站。他们提供广泛的服务，从创建针对移动端优化的设计，到从头开始创建新网站，不一而足。

响应式网页设计(RWD)是网站开发界的最新趋势。它已成为一种需要考虑的基本设计，以满足客户的需求：让公司以可行的成本覆盖更广大的受众。开发响应式网站时须遵循严格的准则，比如浏览器兼容性测试。

鉴于如今移动设备日益普及，响应式网页设计的重要性显著增加。现在，对于Web设计人员、开发人员和测试人员来说，跨不同设备轻松访问网站，创建可在移动设备上访问的网站和应用程序已变得很重要。

为了使网站在移动设备上易于访问，网页设计人员必须确保网站能够灵活地适应不同的屏幕尺寸。

浏览器兼容性是关键

原型设计是软件开发流程的一个重要组成部分。为了确保移动设备的响应方式与较大尺寸的设备一样，在使用不同屏幕分辨率和浏览器尺寸的各种流行的移动设备上进行测试至关重要。确保所有屏幕上有完全一致的响应。

设备分辨率或尺寸方面的变化所需的任何调整(比如缩放或调整大小)都必须自动进行，并且内容不应更改大小或重新排序。跨浏览器测试可确保软件在所有浏览器和设备上按预期运行。

注意设计兼容性

响应式设计测试旨在确保网页或应用程序的功能在多个设备上继续正常工作。虽然无法测试所有设备，但使用众多设备进行测试很重要，因为移动网站流量一直在稳步上升。响应式设计依赖目标设备的宽度、设备屏幕分辨率和像素密度。

随着移动设备变得更多样化，定义和测试响应式设计模板变得越来越困难。然而，借助综合测试技术，您可以确保自己的设计适用于多种响应式网页布局。

在移动设备测试市场，有多个品牌可供选择。响应式设计测试需要考虑设备组合。虽然测试应该涵盖市面上的大多数常见设备，但很难全面地测试每种移动设备。

这些准则将向您介绍如何确保图片及其他元素不会在您的响应式网页设计中重叠。您的测试计划应涵盖消费者使用的所有主要设备：从台式机到智能手机。如果您在从事客户项目，需要从客户那里获得有关设备的一些信息。此外，许多测试人员没有认识到两个看起来相似的设备会带来全然不同的结果。

比如说，屏幕尺寸的微小差异可能导致加载和使用网站所需的时间量出现巨大差异。让您的团队确定是否存在任何问题的一个好方法是，从客户那里获取有关其客户在使用的设备的信息。

确保您网站的导航系统准确无误

响应式导航栏可帮助您在移动设备上浏览您的网站。您可以快速访问网站的不同部分，并返回到访问过的上一页。用户的设备尺寸变化后，导航栏也应该随之变化。导航栏用于快速导航到您网站上的不同部分或不同页面。导航栏通常包含五个或更多元素。确保您的导航栏适用于所有设备和浏览器。

测试响应式网站时，重要的是要考虑RWD中存在的不同屏幕尺寸。确保您的网站面对最小的手机屏幕和最大的桌面显示器都能完美运行，可能需要特定的宽度或布局。这里允许端到端浏览的测试很重要，因为用户应该能够从各种尺寸的屏幕和各种类型的设备访问您的网站。

转向并行测试

在您的移动版和桌面版上并行工作是最好的测试方式。这可提高您的效率，并让您可以为用户创建更顺畅的响应式网页设计体验。如果没有并行测试，您就无法确定网页的质量水准。测试对于RWD测试流程的所有阶段都至关重要。测试对于响应式网页设计流程的所有阶段都至关重要。

虽然分别测试桌面版和移动版可能更具成本效益，但这并不能让您了解全貌。并行测试是跨多个设备创建无缝用户体验的关键。借助并行测试，您可以在手机、平板电脑和台式机上获得同样的体验。这将让您可以通过移动响应式网页设计获得更好的用户体验。

响应式网页设计是一种多设备体验。用户希望在其台式机、平板电脑和移动设备上找到同样的内容和功能。借助并行测试，您可以确保页面内容非常适合在多个设备上浏览。请记住，测试是响应式网页设计流程中一个非常重要的环节。如果不进行测试，您无法确定用户在跨设备和浏览器访问您网站方面的体验有多好。

不要完全依赖功能测试

代码测试并不验证按钮和链接在所有浏览器和设备上是否正确对齐。功能测试可以确认布局在不同浏览器和设备上的实现统一，确保用户有一致的体验。功能测试确认网站功能根据代码来工作。但是这种测试并不确认按钮和链接在所有浏览器和设备上是否正确对齐。虽然手动测试最有效，但它并没有考虑用户体验。

比如说，您可能希望在将网站上线之前测试不同的浏览器和设备。这就是为什么成功的发布流程通常需要自动化视觉回归测试。可是问题是，编写测试以检查对齐既缓慢又费钱。因此，为了降低成本，并优先考虑客户最关心的功能，您经常发现自己会略过这类测试。

在原始设备和现有设备上检查您的网站

在不同的移动设备和浏览器上测试您的网站将有助于找到布局问题。有时，由于特定的配置，问题在您的生产环境中看不到。比如说，某款手机的浏览器每英寸可以处理的像素比另一款浏览器更多或更少。定义您的测试参数。确保您拥有对观众而言最重要的设备。您网站的目的是获得更多的流量和销售额。

您希望自己的网站引人注目，但又不想在设计上花费大量时间。一次性原型设计工具将帮助您在各种设备上设计并测试线框和原型。模拟日常浏览的一次性原型设计工具可以帮助您深入了解用户如何与您设计的网页进行交互。通过模拟各种不同的浏览器，您可以测试您的网站在不同手机设备上浏览时所呈现的外观。

借助手动测试或自动化测试在实际设备上进行测试，您可以确保用户获得最佳的移动体验。在实际设备上进行测试可以让您深入地了解您的网站在不同情况下有怎样的呈现。

考虑到所有这些因素，在实际设备上进行测试显然至关重要，无论是手动测试，还是借助设备提供的某种形式的自动化测试。这让您可以确信自己的网站是否有效、吸引力有多大以及浏览起来多容易。

在各种显示模式下测试您的设计

响应式设计测试让用户可以检查网站/应用程序在不同状态下在移动设备上如何显示。应该在横向模式和纵向模式下都可以浏览。有多种工具可以帮助您实现响应式设计。

响应式设计是一种根据用于访问页面的设备来改变页面布局的网页设计。比如说，屏幕较大的笔记本电脑提供了更多的空间来显示内容，而智能手机屏幕较小，需要以不同的方式显示控件和内容以适应屏幕尺寸。响应式设计的“变革”专注于这样的媒体查询：消除针对不同屏幕尺寸的复杂编程，并提供几个优势。

“响应式网页设计”(RWD)这个术语代表了网页设计和开发的一种理念，而不是特定的设计方法。“响应式”一词是指网站对浏览它的设备做出响应的方式。它可以调整布局、图片/文本大小等元素，让网站可以处于跨所有设备浏览的最佳状态。

缩短网站加载时间

您和员工在很多时候需要外出。无法使用高速网络时，拥有一个可以在移动设备上快速加载的网站版本至关重要。无论可用的网络速度如何，移动网站都应该始终快速加载，并且与桌面版相比应该易于使用和导航。它们还应该是轻量级的，因为屏幕尺寸常常比标准显示器小。

渐进式Web应用程序是一种新方法，用来创建、启动、衡量和维护针对移动端优化的网站。其主要想法是制作一个类似应用程序的网站，该网站也可以离线工作、立即加载。这使得网站响应起来更快速，加载起来没有任何问题，即使网络速度慢或根本不可用。为了确保您网站的移动版快速加载，考虑优化您的图片。

确保您遵守不同浏览器建立的文件大小准则。比如说，Chrome和Safari将移动设备上的图片大小限制为32MB。提供出色的用户体验对于每个网站都至关重要，尤其是对于移动网站。研究表明，用户对无法在移动设备上正常运行的网站普遍感到不满。随着移动互联网的使用量日益增加，使用移动设备访问互联网的消费者数量也将随之增加。

最佳响应式网页设计工具

LT Browser是一款多合一的Web浏览应用程序，让您可以在多达50多种安卓和iOS设备的屏幕上以纵向或横向方式测试您的网站或Web应用程序，它还拥有一款适用于网站和Web应用程序的对移动端友好的测试器工具。凭借独特的并排视图，您可以在不同的浏览器上同时调试您的网站/Web应用程序。

只需点击一下，您就可以在全屏模式下制作网站的屏幕截图。为了提高工作效率，它还提供多标签支持、数据保存模式、云同步及其他有用的功能。LT Browser是一款适用于安卓和iOS的高级移动浏览器，可帮助您创建大量的下一代网站。它是一款功能强大的对移动端友好的测试工具，让您可以在网站上线前检查网站的方方面面，确保网页在所有设备上看起来都不错。

LT Browser是在您的移动设备上测试网页响应能力的便捷方式。通过一键式全页屏幕截图或视频录制，您可以立即与自己的团队直观地共享设计错误。共享的测试结果将在几秒钟内包含注释、标记、评论和测试详细信息，从而为您节省时间，而且无须费力气解释您的网站在移动设备上有怎样的外观。

原文标题：11 useful guidelines to improve responsive design testing，作者：Jamie Davidson

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】