Challenges with Retrofitting Responsive Design
Challenges with Retrofitting Responsive Design
Join the DZone community and get the full member experience.Join For Free
Written by Ed Charbeneau
Many development teams have large investments in desktop apps that have provided long lasting profitability and stability for years. However, the industry is changing and now it’s time to retool for mobile and reinvest. If you have a web application, then technically it’s a mobile application already, since smart devices have web browsers making them capable of opening your application. The catch is that if the app is designed for desktop use, the mobile user experience is usually poor.
A responsive design retrofit looks like an attractive candidate for going mobile since the technical requirements, such as tooling and team skills, align well. Retrofitting your existing web application with responsive web techniques may seem like the path of least resistance, but understanding the challenges before you begin can help you avoid problems down the road.
When an HTML element receives its visual style from a style attribute, this is referred to as an inline style. Inline styles were common practice before external CSS style sheets became best practice.
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Inline styles pose a problem in modern web design architectures like responsive web design because they take precedence over external CSS values making them ineffective. Inline styles must be removed before migrating to a responsive framework design, additional work or a complete redesign may be necessary in this scenario.
Frameworks that have a long history like ASP.NET Web Forms can also generate HTML with inline styles. If you’re using ASP.NET Web Forms, consider replacing the default controls with alternatives from Telerik’s UI for ASP.NET AJAX. If you’re already using UI for ASP.NET AJAX, enable light weight rendering mode to create semantic HTML elements that are free from inline styles.
<appSettings> <add key="Telerik.Web.UI.RenderMode" value="lightweight" /> </appSettings>
If your application has seen years of development, it could be using HTML tables for handling page layouts. Table layouts were common early in web design, however table-based layouts have long been obsolete.
<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>
Modern page layouts are created by combining semantic HTML elements like
section, or non-semantic elements like
div, along with CSS styles. Consider adopting a responsive grid layout like Bootstrap, Foundation or RadPageLayout and replacing the old table elements.
Learn more about choosing a responsive design framework by downloading the free whitepaper: The Anatomy of
Responsive ASP.NET Apps
Legacy HTML & Attributes
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
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.
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.
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.
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.
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.
Published at DZone with permission of Burke Holland , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.