Coursera 笔记

Module 02 · Web Design Methodologies网页设计方法论

Hands-on Lab: View in Responsive and Nonresponsive in Emulator动手实验：响应式与非响应式网站

Coursera ↗

预计所需时间： 30分钟

在本实验中，我们将使用在线模拟器来浏览一些响应式和非响应式网站的例子。在线模拟器帮助我们在各种预配置设备上查看网站。使用模拟器的优势在于能够按需更改设备，并查看网站以测试其功能或视觉效果。

目标

完成本实验后，您将能够：

  • 理解响应式与非响应式网站的功能

练习 1：访问模拟器

在本练习中，您将通过网页浏览器访问模拟器。

  1. 在网页浏览器中，打开以下链接 – http://appsimulator.net/webapp/?frame=apple_iphone_6_v
  2. 模拟器将以 iPhone 6 模式打开框架
  3. 输入网址 - https://www.wired.com/
  4. 点击 模拟 按钮
  5. 网站将在模拟器上显示

练习 2 : 改变网站布局

你可以观察到 WIRED 的网站具有动态布局，桌面设备上有多个列和一个侧边栏，而在手持设备上则转换为单列。当从平板设备切换到移动设备时，它们的菜单缩小，只包含他们的logo、一个菜单图标和一个订阅链接。

  1. 尝试更改设备。点击顶部行中的 Apple iPad Air 选项以更改设备
  2. 你将看到网站动态改变布局

** 让我们检查另一个响应式网站示例。 **

  1. 在网页浏览器中，打开以下链接 – http://appsimulator.net/webapp/?frame=apple_iphone_6_v
  2. 模拟器将以 iPhone 6 模式打开框架
  3. 输入网址 - https://www.shopify.com/
  4. 点击 Simulate 按钮
  5. 网站将在模拟器中显示

注意：* 你会看到 Shopify 的用户体验在所有设备上是一致的。在桌面和笔记本电脑以及平板设备上，行动呼吁按钮位于表单字段的右侧。在移动设备上，它位于下方。*

尝试向下滚动。你会观察到，当你向下滚动时，头部保持静止，展示了响应式设计的强大功能。

  1. 要更改设备，请从顶部行中点击一个 Device 选项
  2. 你将看到网站动态改变布局

让我们检查最后一个响应式网站的示例。

  1. 在网页浏览器中，打开以下链接 – http://appsimulator.net/webapp/?frame=apple_iphone_6_v
  2. 模拟器将以 iPhone 6 模式打开框架
  3. 输入网址 - https://www.wikipedia.org/
  4. 点击 Simulate 按钮
  5. 网站将在模拟器中显示

注意：* 维基百科的网站高度响应，提供无缝的浏览体验，适用于各种设备。无论你是从桌面、平板还是手机访问，网站都能流畅适应，确保无论屏幕大小如何都能获得最佳的可读性和导航体验。*

  1. 通过点击顶部行中的 Device 选项更改设备，点击 Galaxy Tab 4 选项

注意，图像会自动拉伸以适应新的布局。同时，布局和设计会变化，以提供更大的图像，但网站的响应性保持不变。

练习 3 : 非响应式网站示例

在当今的移动世界中，非响应式网站示例非常少见。仍然有一些网站没有采用响应式设计原则。让我们来看几个例子。

  1. 在网页浏览器中，打开以下链接 – http://appsimulator.net/webapp/?frame=apple_iphone_6_v
  2. 模拟器将以 iPhone 6 模式打开框架
  3. 输入网址 - https://www.headhunterhairstyling.com/
  4. 点击 模拟 按钮
  5. 网站将在模拟器上显示

注意：* 该网站是在没有响应式设计原则的情况下创建的，展示了不良实践。您可以观察到，在模拟器中显示时，文本没有在页面上对齐。*

页眉和页脚没有居中。如果网站上有任何图像，它们的大小也不会根据设备进行调整。

  1. 尝试更改设备。点击顶部行中的 Apple iPad Air 来更改设备

注意：* 您将看到随着设备的变化，页眉和内容没有改变。这是一个非响应式网站的例子，它在设备变化时保持布局不变，导致用户体验差。*

另一个部分非响应式网站的示例如下。

  1. 在网页浏览器中，打开以下链接 – http://appsimulator.net/webapp/?frame=apple_iphone_6_v
  2. 模拟器将以 iPhone 6 模式打开框架
  3. 输入网址 - http://www.roverp6parts.com/
  4. 点击 模拟 按钮
  5. 网站将在模拟器上显示

注意：* Rover P6 Parts 网站缺乏响应性，无法很好地适应不同的屏幕尺寸和设备。这可能导致移动设备上的用户体验差，元素显示不对齐或难以导航。*

  1. 尝试更改设备。点击顶部行中的 Apple iPad Air 选项来更改设备

注意：* 您还可以看到网站的内容没有居中，而是左对齐。*

此外，您还有选项使用另一个在线模拟器 - BrowserStack 来测试响应式和非响应式网站。下面是一个练习，旨在测试 BrowserStack 上的网站。

练习：使用 BrowserStack 测试响应式和非响应式网站

任务 1：访问模拟器

  1. 通过点击“免费试用”按钮在 *BrowserStack 上创建一个免费账户。这将打开注册页面，您可以选择使用 Google 账户或电子邮件 ID 注册。

  1. 登录并使用以下 URL 访问响应式测试工具：https://www.browserstack.com/responsive。
  2. 登录后，您将看到如下所示的主页。

任务 2：测试响应式网站

  1. 从设备列表中选择 iPhone X。
  2. 输入网址： https://getbootstrap.com/
  3. 点击 检查 按钮以在模拟器上查看网站。
  4. 观察 Bootstrap 的网站具有动态布局。在桌面上，它呈现多列布局，而在手持设备上则变为单列布局。
  5. 使用顶部的选项将设备更改为 iPad Pro。
  6. 注意布局如何动态调整。

任务 3：检查另一个响应式网站示例

  1. 再次打开模拟器。
  2. 选择 Galaxy Note 10。
  3. 输入网址：https://www.ft.com/
  4. 点击 检查 以查看网站。
  5. 注意到 FT 的网站能够流畅适应不同的屏幕尺寸，保持一致的用户体验。
  6. 将设备更改为 Windows。

任务 4：检查非响应式网站

  1. 打开模拟器并选择 iPad Mini 2019。
  2. 输入网址： https://dequeuniversity.com/library/responsive/1-non-responsive
  3. 点击 检查。
  4. 观察网站如何展示响应式设计原则。
  5. 将设备更改为 Mac OSX。
  6. 观察布局如何不动态调整。

恭喜！您现在已经学习了使用在线模拟器的响应式和非响应式网站的基本功能。这个实践实验帮助您理解不同网站如何适应（或未能适应）各种设备，为响应式设计原则提供了宝贵的见解。

作者

Simranjit Singh
Raul Chong
Andrew Pfeiffer