通过响应式设计管理不断增长的移动设备浪潮





0/5 (0投票)
Sitefinity 使用响应式设计来帮助您跨设备提供更好的 Web 体验。
专家估计,到 2014 年,移动流量将增长 4,000%,并最终超过桌面流量。 为了满足这一日益增长的需求,组织拥有一项移动策略至关重要。 为所有网站访问者创建理想的 Web 体验需要广泛支持各种移动设备。 为了创建这种支持,网站必须根据访问者个人选择的设备进行调整。 从历史上看,创建这些特定于设备的调整非常具有挑战性。
糟糕的旧时代:大量手机,大量内容版本
许多网站维护其 Web 内容的单独移动版本。 这些网站检测访问者的设备并重定向到子站点以呈现自定义体验。 或者,网站可以使用相同的页面,但应用不同的 HTML 标记。 这些技术适用于少数设备,但不可能扩展此策略来解决当今已在使用的大量 Web 设备。 对于每种设备,程序员、前端开发人员和内容编写者都必须管理 Web 内容的附加版本。
现代解决方案:通过响应式设计支持无限数量的移动设备
响应式设计是一种设计理念,它使用“最佳实践”Web 标准来解决 Web 设备中的极端多样性。 通过使用 CSS3 媒体查询,网页可以根据设备的功能或限制进行调整。 这意味着网页可以为每个访问者“渐进增强”或“优雅降级”。
Sitefinity 使用响应式设计来帮助您跨设备提供更好的 Web 体验
Sitefinity CMS 包括可以毫不费力地拖放到任何页面或模板上的布局。 这些布局使最终用户可以轻松地将新列(2 列、3 列等)添加到其网页,而无需任何 HTML 知识,同时仍生成基于“最佳实践”DIV 的标记。
因此,通过这些布局,Sitefinity 已经知道网站中使用的设计结构。 这使 Sitefinity 客户可以轻松地将响应式设计规则附加到这些布局。 这些响应式规则可以使用基于 Web 的界面在 Sitefinity 中定义。 通过此界面,网站管理员可以指示 Sitefinity 在访问者使用智能手机时将 4 列布局转换为 4 行布局。
此外,Sitefinity 还包括一个基于 Web 的预览模式,使内容作者可以快速预览其内容在各种设备(iPad、iPhone 等)上的显示效果。
通过使用拖放布局并将响应式规则附加到这些布局,Sitefinity 客户可以快速创建流畅地适应无限数量设备的网页。 因此,组织可以专注于创建引人入胜的内容,而不是无数次地重新创建内容。
它在 Sitefinity 中如何工作?
响应式设计的核心是依赖于 媒体查询 来为不同的分辨率定义不同的样式。 所有基于 WebKit 的浏览器(Safari、Firefox、Chrome)都支持媒体查询,并且在 IE 中可以通过一些 jQuery 插件支持。
以下代码在 Sitefinity 中实现,使您的网站立即为移动设备做好准备
通过建立这组自适应样式,Sitefinity 可以使网页适应无限数量的设备和分辨率。 对于网站管理者来说,无需在子站点中重新创建 Web 内容,也无需为特定设备创建专用标记。 您的网页将转换为完全适合所有设备的样式。