Many existing legacy applications are still currently in use in the private sector, government, and military sectors. Many of them were designed as desktop web applications using HTML, JavaScript, CSS, and the like for the frontend client code and have huge databases on the backend server side. There was little or no concept of mobile devices, or the desire to use them for the purpose of accessing the application, when each was originally designed and implemented. Over time and certainly moving forward, more and more of these applications need to be revamped due to the increasingly growing use of mobile devices in the work force, as well as in user’s private lives.
As the owners of these applications look toward the future, they must determine the cost associated with updating these systems to meet current user requirements. In particular, the owners need to determine a good plan, timewise and financially, for either migrating these systems or biting the bullet and having them totally redesigned and re-written. In a perfect world, the argument may be made, it would seem most appropriate to have different websites for each application. One website would be for mobile access and another would remain a desktop website. In many cases, this is simply not realistic. A more “migrational approach” would be more appropriate and would include several steps, such as these:
- Modify the frontend code to use Responsive Web Design elements – with html5/css3/javascript – to enable a more mobile friendly approach.
- Add an access layer between the frontend code and the backend database – – such as web services or APIs.
- Eventually, modify the frontend code to make use of the API layer to further improve the user experience for each mobile device.
I’m going to focus on the first step….
How can you modify the HTML/CSS/JavaScript code to include Responsive Web Design Elements?
Responsive web design makes your web page look good on all devices. It is about using HTML and CSS to automatically size, resize, show, hide, shrink, or enlarge the content of a website for desktops, tablets, and phones. This is not new. It’s been around for years, but mobile devices weren’t that important for accessing websites as they are today.
Unfortunately, when modifying a legacy desktop web application, there is usually no clean slate to start over with a new responsive web design. Also, in many cases with the legacy systems that we’ve worked on here at Ideamatics, the information on many of the desktop pages is quite overwhelming. Perhaps the best “responsive design” that can be accommodated by “simply” changing some html and css is a more readable layout of the content and the input fields.
Are used to determine which css style to use based on the browser and/or the width of the device viewport or orientation.
Ex in HTML:
<!– Separate CSS File –>
<link href=”styles.css” rel=”stylesheet” media=”all and (max-width: 1024px)”>
Ex: in CSS (preferred method)
@media all and (max-width: 1024px) {…}
This is the practice of building the layout of a website with a flexible grid (such as GridView in ASP.Net), which is capable of dynamically resizing to any width. These use relative length units, such as percentages or em units, rather than fixed widths. This is a big departure from traditional, legacy web application table layouts.
W3School’s https://www.w3schools.com/css/css_rwd_intro.asp and Shay Howe’s https://learn.shayhowe.com/advanced-html-css/responsive-web-design/ offer a look at many of the elements you can use to modify the look of your web site based on the size of the client device (and the browser). In addition to adding a meta tag to declare a viewport in each HTML web page, both agree that responsive web design is broken down into 3 main areas: media queries, flexible layouts, and flexible content, especially media. These elements are available in CSS3/HTML5 to support responsive web pages and can be added to existing legacy HTML and CSS files to provide mobile support:
Viewport
Gives the browser instructions on how to control the page’s dimensions and scaling. This meta tag should go in every HTML web page within the application:
ex: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Media Queries
Are used to determine which css style to use based on the browser and/or the width of the device viewport or orientation.
Ex in HTML:
<!– Separate CSS File –>
<link href=”styles.css” rel=”stylesheet” media=”all and (max-width: 1024px)”>
Ex: in CSS (preferred method)
@media all and (max-width: 1024px) {…}
Flexible Layouts
This is the practice of building the layout of a website with a flexible grid (such as GridView in ASP.Net), which is capable of dynamically resizing to any width. These use relative length units, such as percentages or em units, rather than fixed widths. This is a big departure from traditional, legacy web application table layouts.
Flexible Content/Media
Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes.
Ex: img, video, canvas {
max-width: 100%;
}
Closing Thoughts
According to W3Schools, responsive web design is not a program or a JavaScript. By using the elements of responsive web design, it may be possible to implement the requirements for introducing mobile devices into an existing, legacy web application by just making changes to existing HTML and CSS files. The changes to any JavaScript files should be minimal, if any, in comparison to the HTML/CSS files.
It may be possible to include the use of free, open-source CSS/HTML/JavaScript frameworks such as Bootstrap, Foundation, or Skeleton. Bootstrap, in particular, is directed at responsive, mobile-first frontend web development.
So, what has your experience been with migrating legacy desktop web applications for mobile users? Do you think it’s worth taking a step by step approach, with the first step as outlined above? Or, do you think it would be more cost effective to redesign the legacy system and implement some other sort of approach?
