SP2013 & 响应式设计 - 如何做对？答案

【问题标题】：SP2013 & Responsive Design - How to do it right?SP2013 & 响应式设计 - 如何做对？
【发布时间】：2014-07-02 09:39:44
【问题描述】：

我是一名 SP 开发人员，并且精通网页设计。我当前的任务是在 SP 2013 环境中实施响应式设计和品牌推广

现在我需要选择在 SP2013 中使用哪一个来实现响应式设计，因此我收集了 pro 的 和 con 的 foreach 技术。

你怎么看？有没有我遗漏的重要方面？还有其他更适合实现这一点的解决方案吗？ 欢迎任何意见！ :)

【问题讨论】：

让 SharePoint 做出响应……现在这是一项任务……：|
可以，但非常可行。
@JesseEarley 我刚刚看到你的链接，我非常印象深刻，你已经设法像你一样在 SharePoint 中实施 Bootstrap ，虽然这肯定是开发模板和在 SharePoint 设计器中工作（？）以使其工作的漫长过程，但覆盖所有 ms 类和样式表怎么样？例如.ms-promlink-root-2123412-12z.. 此外，SharePoint2013 目前是如何构建的，#s4-workspace 是一个“悬停”<div>。
至少如果你可以削减功能。我通过隐藏除导航和内容之外的所有内容创建了一个带有媒体查询的简单移动视图，然后从剩余内容中创建了一个 1 列布局
@MackieeE 谢谢！由于这是我们第一次实现 Bootstrap，我们花了大约 6 个月的时间，而那段时间包括我们在网站上的每一个设计（有很多），我们只有 3 个人在做这件事（我和 2 个学生设计师）矿）。我们没有使用 SharePoint 设计器，我们只进行部署，因此所有标记工作都在 Visual Studio 中完成并部署到服务器。我们的 CSS 位于内部 CDN 上，因此我们可以即时更新它。您不必重写所有 MS 类和样式表，事实上，我们根本不会重写很多。

标签： responsive-design twitter-bootstrap-3 media-queries sharepoint-2013

【解决方案1】：

使用自举。我在一所大学 (http://www.cmich.edu) 工作，我们的整个网站（内部和外部）都是使用此框架在 SharePoint 2013 中构建的，我是其实施的领导者。如果您根本没有使用过 Bootstrap，则需要一点时间来适应，尤其是在 SharePoint 环境中，但就我而言，响应式设计是产生最佳结果的唯一方法。查看我们的大学网站，如果您有任何问题，请告诉我。

【讨论】：

感谢您的回复！ BootStrap 的一个坏处是，它需要大量的 html 修改。一位在同一项目中工作的 Microsoft 同事要求 .master 修改应尽可能简约。我可以用 SASS 来做，但是扩展数百个类会很痛苦：-/
实际上，它并不需要像您想象的那样多的 HTML 修改。实际上，您需要的只是 Bootstrap 包装器类（容器、行、列和导航包装器），仅此而已。 SharePoint 标记将被折叠在这些包装器中，而 Bootstrap 将处理其余部分。
这取决于用例 - 我不是为 www 创建一个网站，而是一个包含多个自定义 webpart 和页面布局的发布 Intranet。我已经完成了自己的 POC，并尝试了 Eric Overfield (responsivesharepoint.codeplex.com) 的解决方案，但似乎需要进一步修改。
我们的实现是这样的：1 个带有许多自定义页面布局的自定义母版页。母版页和页面布局都需要修改标记，是的，如果您有自定义 Web 部件并希望它们具有响应性，则它们的标记也可能需要更改（尽管并非总是如此，因为很多开箱即用的 Web 部件不需要任何修改即可响应，只要它们的容器是响应式的）。

【解决方案2】：

设备渠道

是的，我说的是Device Channels，即使问题中没有提到它们，因为它们可以为最终用户和客户提供最佳性能和可优化性 - 在我看来 :)

专业版

单独设计的HTML/CSS 和JS foreach 设备
--无需隐藏或删除不兼容的元素
-- 速度更快，因为您只需加载真正需要的内容
--更快，因为你可能会更少CSS/JS and HTML
-- 更快，因为您可以为每个设备使用优化的代码
-- 更好地指出哪个频道有错误并且更改不会影响其他频道

骗局

单独设计的HTML/CSS 和JS foreach 设备
-- 您必须将更改附加到每个母版页
-- 完成相同结果的更多工作（通常）
--冗余
绑定到User Agent Strings
越来越多样化的设备
-- 可能等于母版页的多样性>> 工作

These are not all but my main points. Klick here to start your own research.

引导

专业版

强大且易于使用的框架
-- 大量文档
-- 快速的结果
--如果你喜欢 - 所有 Bootstrap 样式
已经有项目在使用它，因此您可能不必从头开始构建它
--http://responsivesharepoint.codeplex.com/

骗局

Bootstrap 是一个庞大的框架，在未缩小的 CSS 和 JS 文件中包含 8000 多行代码
-- 2 个额外的请求，大约 130kb 和 30kb
-- 很多样式和脚本供您的浏览器处理
Bootstrap 不是为在 SharePoint 中使用而构建的
-- 它会覆盖 SharePoint 样式，这会降低某些功能（例如 ComposedLooks）的价值
-- 需要大量自定义 CSS 才能使其与 SharePoint 无缝协作
SharePoint 有自己奇怪的做事方式，会干扰 BootStrap
--吨CSS
--吨JS
--吨HTML Attributes

These are not all but my main points. Klick here to start your own research.

媒体查询

专业版

只需要CSS
不要JS如果你不想这样做
您可以创建自己的布局
response.js 即使在 IE6 中也能正常工作
您可以轻松区分在特定屏幕尺寸下应提供哪些功能

骗局

几组CSS，取决于Breakpoints的数量
每个功能都需要自己开发
编写可以处理每个 SP2013 页面的通用代码并不容易
-- 这取决于所显示内容的复杂性。我写了大约 150 行 CSS，创建了一个移动视图，用于发布包含导航和内容的页面，但没有编辑等功能。
-- 如果客户想要智能手机上的所有功能，则需要进行大量工作和测试。（还有谁他妈想在手机上这样做？）

结论

我还不确定（如果我的结果得到很多反馈会很棒），但我倾向于使用Media Queries。为什么？好吧，SharePoint 有自己的方式来处理桌面用户，如果没有明确订购，我不会自定义该内置功能。另一方面，SharePoint 没有为智能手机提供真正的 UI。我不想使用 BootStrap，因为它包含很多样式，会在品牌环境中产生问题。而且我不会使用Device Channels，因为它有缺点。

【讨论】：