作者：埃德·夏博诺
许多开发团队对桌面应用程序进行了大量投资，这些应用程序多年来提供了持久的盈利能力和稳定性。然而，行业正在发生变化，现在是时候为移动设备重组并进行再投资了。如果您有一个 Web 应用程序，那么从技术上讲它已经是一个移动应用程序，因为智能设备具有 Web 浏览器，可以打开您的应用程序。问题是，如果该应用程序是为桌面使用而设计的，那么移动用户体验通常很差。
由于工具和团队技能等技术要求非常吻合，因此响应式设计改造看起来很有吸引力。使用响应式 Web 技术改造现有的 Web 应用程序似乎是阻力最小的途径，但在开始之前了解挑战可以帮助您避免以后出现问题。
行内样式
当 HTML 元素从样式属性接收其视觉样式时，这称为 内联样式 。在外部 CSS 样式表成为最佳实践之前，内联样式是常见的做法。
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
内联样式在现代网页设计架构（如响应式网页设计）中造成了问题，因为它们优先于外部 CSS 值，使它们无效。在迁移到响应式框架设计之前，必须删除内联样式，在这种情况下可能需要额外的工作或完全重新设计。
像 ASP.NET Web Forms 这样历史悠久的框架也可以生成带有内联样式的 HTML。如果您使用的是 ASP.NET Web 窗体，请考虑将默认控件替换为 Telerik's UI for ASP.NET AJAX 的 替代项。如果您已经在使用 ASP.NET AJAX 的 UI， 请启用轻量级呈现模式 以创建不受内联样式影响的语义 HTML 元素。
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
HTML 表格
如果您的应用程序经过多年的开发，它可能会使用 HTML 表格来处理页面布局。表格布局在网页设计的早期很常见，但是基于表格的布局早已过时。
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
现代页面布局是通过将
article
和
section
等语义 HTML 元素或
div
等非语义元素与 CSS 样式相结合来创建的。考虑采用像 Bootstrap、Foundation 或
RadPageLayout
这样的响应式网格布局，并替换旧的表格元素。
通过下载免费白皮书了解有关选择响应式设计框架的更多信息：
The Anatomy of
响应式 ASP.NET 应用程序
旧版 HTML 和属性
表格元素不再用于页面布局，但根据 HTML5 标准，它们仍然与数据网格相关。但是，有些元素和属性已经过时并且会干扰响应式设计技术。
HTML 元素（如
<font>
和属性（如
height
、
width
、
marginheight
和其他
过时的功能）
已被 CSS 样式取代。使用过时的功能可能会覆盖 CSS 中定义的样式，从而导致问题。根据应用程序中存在的过时代码的数量，将直接影响添加响应行为所需的工作量。
桌面功能
依赖于丰富的桌面交互（如拖放、鼠标左键单击触发的上下文菜单和弹出对话框）的应用程序在改造时尤其具有挑战性。由于缺少鼠标或大屏幕，移动用户根本无法使用这些类型的界面。小图标和按钮必须替换为触摸友好的替代品。应该放弃桌面风格的交互，以支持移动友好的方法，或者可以使用自适应控件来弥合桌面和移动之间的差距。
自适应控件在 ASP.NET AJAX 的 UI 和 MVC 的 UI 中都可用。
用户上下文
忽略 用户的上下文 可能是任何移动应用程序成功的最大挑战。移动用户习惯于快速而有意义的操作，这些操作可以毫不费力地完成。重要的是要注意用户的环境、感知和完成手头任务的能力。
一些复杂的操作可能需要分解成更小的任务，这些任务可以单独完成。较小的任务也不太容易受到移动用户可能出现的连接问题的影响。除了改造现有应用程序之外，可能还需要开发互补的 本机或混合应用程序 以充分发挥应用程序的移动潜力。
图片
在应用程序中使用图像以前可能不需要太多计划或预见，但在响应式应用程序中却需要。图像通常用作固定大小的内容。由于响应式应用程序中没有已知的屏幕尺寸，因此图像也必须是灵活的。
除了灵活性，我们还必须考虑图像的文件大小。由于移动网络的带宽容量通常要低得多，因此大图像文件会产生性能问题。对于使用计量数据计划的蜂窝网络用户来说，成本也可能是一个问题。
响应式图像的一种解决方案是
<picture>
元素。 picture 元素是 HTML5 标准的新增内容，它允许开发人员指定可针对不同屏幕尺寸的多个图像源。这种方法需要重新创建多种尺寸的艺术资产。或者，
Telerik 响应式图像服务
是一种解决方案，它通过使用基于云的后端服务使流程自动化来处理现有资产。
结论
成功改造应用程序在很大程度上取决于 UI 复杂性以及现有代码库与现代 HTML 最佳实践的一致性等因素。具有复杂数据输入表单、模态窗口、需要大量使用鼠标或宽屏幕空间的现有应用程序可能无法很好地过渡。使用被认为是“现代”最佳实践的技术开发的应用程序，例如使用语义元素和 CSS 而不是表格，或者使用固定网格系统设计的应用程序可能是改造的理想选择。
重要的是要考虑到用户体验 (UX) 很重要，适用于桌面的内容可能无法很好地转化为移动设备。即使应用程序可以在功能上进行改造，也可能需要互补的混合或本机应用程序才能完全移动解决方案。
与任何项目一样，为工作选择正确的工具是成功的必要条件。在开始改造任务之前，请确保这是您项目的正确选择。如果您发现您的应用程序面临着此处提到的多重挑战，改造可能不是最佳选择，可能需要完全避免。
请务必查看我们的 免费白皮书， 该白皮书将带您了解必须了解的响应式 Web 实践，以帮助您成功构建适用于任何屏幕尺寸的应用程序。