混合响应式设计和移动模板

您的网站需要一个移动策略。您必须选择响应式设计或一个专门的移动网站，对吧？也许并非如此。也许您可以混合搭配各种策略。

我和团队每天都在努力工作 CodePen。但我们是一个三人团队。我们的移动策略是尽我们所能地逐步改进它，因为我们 1) 有时间，以及 2) 对如何处理事情有好的想法。

响应式模板示例

以我们的“近期活动”页面为例。此页面非常简单，编写几个媒体查询来重新排列内容，并使用少量 JavaScript 切换筛选器是一个不错的解决方案。

移动专用模板示例

现在看看我们桌面上的“详情”页面

此页面要复杂得多。它与编辑器视图共享相同的布局。您可以单击并拖动预览区域以使其更大或更小。还有键盘命令。保持桌面大小很尴尬，因为文本非常小。使用正确的元标记并使其以移动设备大小加载会导致非常尴尬的布局和尴尬的滚动（如果可能的话）。

这是我们整个网站上最糟糕的移动视图。

我本可以用 CSS 对此视图进行处理并将其塑造成型。但即使我这样做了，也加载了相当一部分不再有任何用途的 JavaScript。相反，我决定使用移动专用模板。这样，我就可以完全控制 HTML、CSS 和 JavaScript，并且只加载所需的内容。我能够重用几乎所有内容，因为我们从模块化角度处理了所有内容。我可以选择 HTML 部分、JS 模块并编译一个仅包含我需要的那部分的 CSS 文件——几乎不用从头开始编写。

现在，“详情”视图更易用了，而且速度更快。

对于好奇的人，我们使用 browser gem 并在控制器级别选择要渲染的模板。它是在进行 UA 嗅探，感觉不太好，但至少它是服务器端¹ 并且基于一个持续更新的开源项目。

if browser.mobile?
  render :template => 'details/mobile', :layout => "mobile-pages"
else
  render :template => 'details/index', :layout => "pages"
end

另外需要说明的是，移动版本上没有您无法在桌面版本上执行的操作。

“嗯，还没准备好”视图示例

CodePen 上的并非每个视图在小屏幕上都很好看。编辑器（可以说是应用程序最重要的页面）既不使用响应式设计也不使用移动模板。

它在 iPad 和大型平板电脑上运行得非常好，但在较小的设备上效果不佳。我们不希望这个视图做得很糟糕。将设计保留在桌面大小可以使其可用，直到我们对它有了好的想法并能够正面解决它。它很可能将是一个移动专用模板。

响应式模板中移动专用部分的示例

查看我们的“个人资料”视图

这是一个响应式模板。我认为它运行良好，**但“选项卡”区域除外**，它被分成两行。这很尴尬，并且随着我们可能添加更多导航而无法扩展。相反，我们只在这个特定位置提供不同的部分，该部分输出一个<select>菜单导航而不是选项卡。

无论如何，这样会更好一些。

这是一个过程

我写这篇博文并不是为了炫耀 CodePen 作为移动设计完美典范。它当然不是。我认为考虑混合和迭代方法来进行移动开发很有趣。

没有单独的域名/URL、没有单独的存储库/代码库、没有单独的团队。所有内容都作为一个大型怪物组合在一起。我认为它应该如此。

非常相关

RESS：响应式设计 + 服务器端组件

---

¹ 我觉得服务器端 UA 嗅探稍微好一点，因为 1) 立即提供正确的模板，而不是重定向；以及 2) 客户端 UA 测试意味着仅为此目的提供一大块 JavaScript。