2

我正在为客户（项目已被接受，但现在是解释不同功能的问题）编写一个详细的估算，以开发一个响应式布局网站。

这不是我第一次进行这种开发，但这是一个关键帐户，必须铺设路径。

布局将从 300 像素宽度调整到 1200 像素以上，因此几乎适用于“任何”设备和浏览器，但我对我的承诺有点迷失。对于桌面网站，很容易在合同中写下受支持的浏览器将是“IE7+，FF、Safari、Chrome、Opera 的最新版本”，但是您对响应式网站有何看法？

我有一堆设备，我知道我会用它们来执行测试（比如说 PC、Mac、iPad、iPhone、2 或 3 台 Android 设备），但是我对我的客户说什么呢？我不能说“网站可以在任何设备上运行”，我也不能给出它可以运行的设备/浏览器组合的详尽列表。而且我不想被困在“我叔叔在他的 2.2 Android 旧手机上看过该网站但它不起作用”的情况下。

周围有很多桌面工具可以模拟各种视口并执行测试，但它们几乎不能作为“真实的东西”工作；还是我们开发人员可以“以合同方式”参考一种标准？您是如何做到这一点的？您对客户的承诺是什么？

4

5 回答 5

2

响应式布局的目标设备/浏览器
您应该以最小分辨率而不是设备或浏览器为目标。您应该重新调整设计大小并注意设计不再舒适地工作，然后使用媒体查询来响应和调整设计。

客户： 我认为理想情况下，您正在寻找一种向客户解释概念的方法。您需要做的是传达目标，即尽可能提供最佳体验。我发现您应该对您的客户诚实，让他们知道您正在遵循行业最佳实践，并且该设计将在市场上的大多数设备和浏览器中“实用”。

这是我喜欢使用的一个简介：

跨平台兼容性：由于网络浏览器、平台和设备数量众多，网站的用户体验可能会发生变化，以最适合查看平台。

如果您想解释或被要求解释这意味着什么，我会说：

我们（我）总是使用最佳实践来满足网页设计的行业标准。我们（我）尽我们的（我的）最大努力确保设计在所有主流平台上都是“功能性的”。由于可用的 Web 可访问设备数量越来越多，我不能保证设计在不同设备之间看起来会完全相同。

您还必须考虑一直在创建新设备。因此，您不想让您的声明过于具体，否则您将改装您的设计以适应下一个上市的 iWatch 或 iFridge。

请记住传达真正重要的内容，即显示内容。大多数情况下，文本和图像几乎可以在任何地方使用。阴影、圆角、视频 (IE7) 和媒体查询等花哨的东西并不总是有效，但不应掩盖内容。

此外，Web 应用程序可能有点棘手，因为某些表单元素不能跨设备和浏览器工作。（例如：文件上传）。

希望这会有所帮助。

我不是合同律师，您可能想向律师助理或精通法律的朋友寻求进一步的建议。

于 2013-01-28T22:23:39.753 回答
2

经历了很多次这种经验，这些是我倾向于向客户展示的关键点，以使他们理解这个概念。

  1. 什么是跨浏览器、平台 (OS)、屏幕分辨率和设备屏幕尺寸。我倾向于拍摄 W3C 统计数据的最新截图或链接，向他们展示过去 2 年的一些趋势以及这个市场的走向。它清楚地说服他们他们需要响应式布局。
  2. 如果他们想要进一步的证据，我会在至少 2-3 台设备上使用 Adob​​e Edge Inspect 向他们展示 twitter bootstrap 和 jquery UI 和 jquery 移动网站。笔记本电脑、平板电脑和手机都可以在同一个网络上，只需浏览网站即可向他们展示它对不同尺寸的响应。
  3. 我收集了 IE7、IE6、Chromeframe、Android 原生浏览器与 Android 上的 Chrome、iPhone4 与 iPhone5 浏览器的优缺点列表。通常我会看到他们更倾向于哪种方式，如果是手机，我会让他们了解该市场的利弊。大多数时候，他们应该明白它不是一个应用程序，而是一个响应式网站。
  4. 当您撰写提案时，请勿填写“我们将涵盖所有设备”。你永远不能那样做。现实点。在以书面形式提出这些声明之前，创建虚拟机和模拟器以至少测试您将要使用的框架。设置 VM 或 Virtual Box 是免费的，您可以让 Linux 和 eclipse 或 netbeans 运行虚拟手机和平板电脑并在其上浏览您的框架。
  5. 对于屏幕分辨率和屏幕尺寸，W3C 统计数据非常真实且令人信服。使用它们并在 firefox 或 chrome 中使用分辨率测试类型的插件，并为您过去的工作或框架截取一些屏幕截图，这样您至少可以展示所涉及的优点或可以做和不能做的限制。

这里的大多数答案都非常正确，只是想添加如何同时使用 W3C 和统计数据来说服响应式布局的路线。现在有超过一百万个在线示例网站可以说服人们，在过去的 6 个月里，我发现人们确实仅通过第 1 步就被说服了。

于 2013-02-03T04:41:27.487 回答
2

采取渐进增强的发展方法。不可能让网站像素完美，并且在每个浏览器上都可以正常工作。

采用分层方法（金/银/铜）。旧的和未经测试的浏览器将获得内容（IE7、旧的黑莓、旧的任何东西）。新浏览器的内容和布局都不错（IE8/9，Firefox < 4）。现代浏览器获得了一个典型的漂亮的现代网站。

可以通过适当的思考来设置它。从下往上构建它。青铜到白银到黄金。从最低限度的设置开始（只有颜色、字体、文本。没有 div、没有布局、nada）。这是你的青铜。接下来获得银级设置。包括布局。这种布局适用于较小的屏幕。最后我们将拥有黄金。这将包括更大屏幕的媒体查询和 JS 以提高可用性和细节。

通过将布局包装在 @media only screen{} 查询中，可以在布局的铜牌和银牌之间进行拆分。较旧的浏览器不理解它。内容仍然出现在这些浏览器上。要在 Silver 和 Gold 之间进行拆分，只需放入最小宽度的媒体查询即可。

此外，确保客户理解“网站可以在任何设备上运行”的定义。仅仅因为 Opera Mini 不支持 line-height 并不意味着该网站不能在上面运行。这是 Brad Frost 就该主题写的一篇文章：支持与优化：http ://bradfrostweb.com/blog/mobile/support-vs-optimization/

我希望这能有所帮助

于 2013-01-28T05:15:20.870 回答
1

这很清楚。您的客户想要一个现代化的网站。但是，并非所有浏览器都支持所有现代功能。您的客户希望明智地花钱并拥有一个随着时间的推移而改进的网站。随着新浏览器的发布，不会很快变老，并且会出现新的错误。这就是为什么分级浏览器支持适用于：http: //jquerymobile.com/gbs/

站点将可用于所有浏览器。主流浏览器将获得增强的用户体验。大多数现代浏览器都会获得超级酷的最新好东西。

让客户知道，您越是“破解”站点以获取某些功能以与某些有缺陷的旧浏览器一起使用，它就越有可能在新浏览器上中断。这不值得花时间和金钱。

于 2013-01-31T20:19:21.443 回答
1

这是我在设计响应式网站时所做的。

当检测到旧的或不受支持的浏览器时，网站将简单地排除使其响应的 jQuery 元素，因此结果是一个固定宽度的网站。

现在，你告诉你的客户什么？

坦率地说。告诉他们您使您的网站能够响应现代设备。对于较旧的设备，他们的网站不会那么好看。也给他们看几个例子。一些大公司，只是显示一个警告，告诉用户他们的浏览器已经过时，网站将无法正常工作。一个例子是谷歌。

因此，基本上，您的网站适用于所有设备，但看起来更好，并且可以在现代设备和浏览器上响应。

于 2013-02-03T02:15:21.923 回答