Автор Эд Шарбено
Многие команды разработчиков вкладывают большие средства в настольные приложения, которые обеспечивают длительную прибыльность и стабильность в течение многих лет. Тем не менее, отрасль меняется, и теперь пришло время переоснащения для мобильных устройств и реинвестирования. Если у вас есть веб-приложение, то технически это уже мобильное приложение, поскольку на смарт-устройствах есть веб-браузеры, благодаря которым они могут открывать ваше приложение. Загвоздка в том, что если приложение предназначено для использования на настольных компьютерах, опыт работы с мобильными пользователями обычно оставляет желать лучшего
Модернизация адаптивного дизайна выглядит привлекательным кандидатом для мобильности, поскольку технические требования, такие как инструменты и навыки работы в команде, хорошо сочетаются. Модернизация существующего веб-приложения с помощью адаптивных веб-технологий может показаться наименьшим сопротивлением, но понимание проблем до того, как вы начнете, поможет вам избежать проблем в будущем.
Встроенные стили
Когда элемент HTML получает свой визуальный стиль от атрибута style, это называется встроенным стилем . Встроенные стили были обычной практикой до того, как внешние таблицы стилей CSS стали лучшей практикой.
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>Встроенные стили создают проблему в современных архитектурах веб-дизайна, таких как адаптивный веб-дизайн, потому что они имеют приоритет над внешними значениями CSS, что делает их неэффективными. Встроенные стили должны быть удалены перед переходом к адаптивному дизайну структуры, в этом сценарии может потребоваться дополнительная работа или полная модернизация.
Фреймворки с длинной историей, такие как веб-формы ASP.NET, также могут генерировать HTML со встроенными стилями. Если вы используете ASP.NET Web Forms, рассмотрите возможность замены элементов управления по умолчанию альтернативами из пользовательского интерфейса Telerik для ASP.NET AJAX . Если вы уже используете пользовательский интерфейс для ASP.NET AJAX, включите облегченный режим рендеринга, чтобы создать семантические элементы HTML, не содержащие встроенных стилей.
<appSettings>
<add key="Telerik.Web.UI.RenderMode" value="lightweight" />
</appSettings>Таблицы HTML
Если ваше приложение было разработано годами, оно может использовать HTML-таблицы для обработки макетов страниц. Макеты таблиц были распространены на ранних этапах веб-дизайна, однако макеты на основе таблиц уже давно устарели.
<table border="0" cellpadding="0" cellspacing="0" class="columns-container">
<tr>
<td valign="top">
Column 1
</td>
<td valign="top">
Column 2
</td>
</tr>
</table>Современные макеты страниц создаются путем объединения семантических элементов HTML, таких как articleи section, или несемантических элементов, таких как div, и стилей CSS. Рассмотрите возможность использования адаптивного макета сетки, такого как Bootstrap, Foundation или RadPageLayout, и замените старые элементы таблицы.
Узнайте больше о выборе адаптивного дизайна, загрузив бесплатный технический документ: Анатомия
отзывчивых приложений ASP.NET
Устаревший HTML и атрибуты
Table elements are no longer used for page layouts, but by HTML5 standards they are still relevant for data grids. However, there are elements and attributes that are obsolete and can interfere with responsive design techniques.
HTML elements like <font> and attributes such as height, width, marginheight, and other obsolete features have been superseded by CSS styles. Using obsolete features can cause issues by overriding styles defined in CSS. Depending on the amount of obsolete code that exists in your application will directly effect the amount of work necessary to add responsive behavior.
Desktop Functionality
Apps that rely on rich desktop interactions like drag & drop, context menus that are triggered from left mouse clicks, and popup dialogs can be especially challenging to retrofit. Mobile users simply lack the ability to use these types of interfaces due to lack of a mouse or a large screen. Small icons and buttons must be replaced with touch-friendly alternatives. Desktop style interactions should be dropped in favor of mobile friendly approaches, or adaptive controls may be used to bridge the gap between desktop and mobile.
Adaptive controls are available in both UI for ASP.NET AJAX as well as UI for MVC.
User Context
Ignoring the user’s context can be the biggest challenge to any mobile app’s success. Mobile users are used to quick and meaningful actions that can be completed with minimal effort. It’s important to be mindful of the user’s environment, perception and ability to complete the task at hand.
Some complex operations may need to be broken down into smaller tasks that can be completed individually. Smaller tasks are also less vulnerable to connectivity problems that can occur with mobile users. In addition to retrofitting an existing app, developing a complementary native or hybrid app may be needed to fully reach the mobile potential for an application.
Images
Using images in an application may not have required much planning or forethought before, but it does in a responsive app. Images are generally used as fixed size pieces of content. Since there is no known screen size in a responsive app, images must also be flexible.
In addition to flexibility, we must consider the file size of the image. Because mobile networks often have much lower bandwidth capabilities, large image files can create performance problems. Cost can also be an issue for users on cellular networks with metered data plans.
One solution for responsive images is the <picture> element. The picture element is a new addition to the HTML5 standard that allows developers to specify multiple image sources that can target different screen sizes. This approach requires recreating art assets at multiple sizes. Alternatively, the Telerik Responsive Image Service is a solution that works on existing assets by automating the process using cloud-based Backend Services.
Conclusion
Successfully retrofitting an app depends greatly on factors such as UI complexity and how close the existing code base aligns with modern HTML best practices. Existing apps with complex data entry forms, modal windows, that require heavy use of a mouse or wide screen real estate may not transition well. Apps that were developed with techniques considered “modern” best practices like using semantic elements and CSS instead of tables, or those designed using fixed grid systems may be ideal to retrofit.
It’s important to consider that user experience (UX) matters and what works for desktop may not translate well to mobile. Even when an app can functionally retrofit, complementary hybrid or native apps may be required to fully mobilize the solution.
As with any project, choosing the right tool for the job is necessary for success. Before embarking on a mission to retrofit be certain that this is the right choice for your project. If you find your app has multiple challenges like the ones mentioned here, a retrofit may not be the best choice and may need to be avoided entirely.
Be sure to check out our free whitepaper that will walk you through the must-know responsive web practices to help you succeed in building apps for any screen size.