Bootstrap Responsive To IBM i Mobile Development

September 28, 2015 Dan Burger

Do you know a good mobile application when you see one? I’ll bet you do. Although the IBM midrange community lives in a predominately green-screen world and uses outdated terminology like AS/400, iSeries, and System i, we see what’s going on around us. It doesn’t matter if you are an application developer, an app dev manager, or the worried owner of a company with concerns about the current state of the business applications.

It’s not difficult to compare what you have application-wise with what is becoming the norm: Web applications that look better and work better on both desktop and mobile devices than anything we’ve developed before.

Well beyond the obvious green-text-on-black-background limitations is a development proficiency called responsive design. The responsive design framework takes two of the most intimidating aspects of Web-based application development–CSS and JavaScript coding–and minimizes the learning curve on those scary beasts. To a large degree, it’s CSS and JavaScript that put the good in good Web apps. When you want a Web app that not only looks good but performs well with any device that serves the business world, there’s almost always going to be some CSS and JavaScript involved. That includes hand-coding CSS and JavaScript for those who cherish the idea of doing so.

Responsive design is a term that describes how a single UI can change based on the screen real estate of desktop, tablet, and smartphone clients. Dealing with those changes, because multiple user interfaces are required, is the reason companies are interested in responsive design. At its core, responsive design is the capability to add attributes that recognize and send signals regarding the type of device calling the app. As the desire for mobile apps has increased, so has the popularity of responsive design.

If you are going to research responsive design, you’ll quickly discover Bootstrap, an open source framework for combining the development of multiple user interfaces.

Bootstrap really shines when it comes to responsive design, says Aaron Bartell, who has fingerprints all over the open source collection of tools that include templates for typography, forms, buttons, navigation, and other interface components.

Bootstrap is popular, so it provides good support, says Bartell, who is one of the leading subject matter experts in the use of open source software in the IBM i community. He uses Bootstrap and has evaluated the framework based on comparisons with similar open source frameworks such as Zurb Foundation and Bourbon. Among the attributes that impressed Bartell is the ease with which websites devoted to coding with Bootstrap can be found. His web searches led him to enterprise strength code others have written. He happily made use of these for his own purposes.

“It puts you way ahead in your development schedule compared to having to do everything for yourself,” he says. “I’m a big advocate of copy-and-paste programming.”

BCD Software, an IBM i ISV with a long history of application development tooling and more than 5,000 customers, is promoting the responsive design capabilities supported by its Presto on-the-fly GUI generator for 5250 green screens and the WebSmart Web application development and runtime environment. The company relies on Bootstrap for its responsive Web development framework capabilities that complement the capabilities that Presto and WebSmart already possess. The responsive design framework has become significant for BCD customers with mobile development ambitions.

“With Bootstrap, it’s not a separate development effort to develop for desktop, tablet, and phone. It’s all the same code base on the server side and the client side (same HTML page). That’s a key advantage of this approach,” says Marcel Sarrasin, VP of corporate marketing at Quadrant Software, the parent company of BCD.

“What we’re talking about with responsive design is the appearance of the page and how the appearance is controlled,” says Duncan Kenzie, chief knowledge officer at Quadrant. “That can be done through CSS, through JavaScript, or through Bootstrap.”

For some perspective, Kenzie looked back five years ago when it was common to see separate development efforts that concentrated strictly on user interfaces. And those user interfaces did not deal with things like scaling font sizes and websites that didn’t fill the entire screen, Kenzie points out.

“To design a responsive Web page for both desktop and mobile without Bootstrap means you have to code the JavaScript and CSS that handles how to display conditional content and the break points (screen width) that you base them on. Bootstrap allows you to decide what content appears on which screen sizes and makes it easy to identify that content. It goes way beyond just adjusting the size of elements,” Sarrasin says.

Designing mobile web applications that are also optimized for desktops has always been the goal, but accomplishing it quickly and easily has been the catch. Before Bootstrap, BCD’s WebSmart users had a jQuery Mobile template and some coding to do when designing separate user interfaces for desktops, tablets and phones. jQuery support gave IBM i shops the capability to generate Web clients that use HTML, CSS, and JavaScript technologies. That was the beginning of what BCD referred to as responsive design.

Companies that are considering mobile application development need to be watchful of the comparisons they choose when figuring cost calculations. Designing with Bootstrap for desktop and mobile will take more time than designing only for desktop. Even though you have the efficiency of designing multiple interfaces from a single code base, design work and testing for multiple clients still needs to be accounted for and it will increase the cost of development compared to designing for a single client.

The Google factor should also be taken into account.

“One thing to take into consideration from a business perspective,” Sarrasin notes, “is that Google changed its algorithm for its search rankings for mobile search. Customers we are seeing now have B2C or B2B websites that depend on mobile search rankings and being ahead of competitors.”

Building mobile apps using Bootstrap takes into account the new Google mobile search algorithm.

BCD has several customers using Bootstrap. I’ve seen websites that three of them designed, but that came with a non-disclosure agreement that keeps their identities concealed. They are all e-commerce sites with very similar functionality on smartphone or desktop.

“The difference,” Sarrasin explains, “is how the content is laid out.” The desktop version has a menu across the top, while the phone version uses a drop-down list. The checkout button goes below image of item instead of beside it. There are other similar variances. “Some examples of Web applications are more sophisticated on a desktop and still might be better having separate desktop and mobile versions. Take Google Docs, for example. On a phone, the editing options are much more limited than on the desktop. The complexity, when comparing the desktop UI with the phone UI is often in determining how to design an intuitive user interface for a phone. It’s always harder than designing a UI for a desktop.”

There are instances, however, when the desktop application will be responsible for handling much more data and more complex tasks than the mobile applications. There are also instances where the functionality of an existing desktop application needs to be optimized for mobile devices.

A consistent look and feel definitely is not enough of a reason to redo a desktop application with Bootstrap, there should be a business case for supporting it on mobile devices as well. It’s not always the same person using the application on desktop and mobile.

In the case of an existing desktop application needing to add mobile support, Bootstrap is often the best approach based simply on the single code base instead of separate UI code bases and the reduction in development time that comes with it. There’s also the benefit of a consistent look and feel is also important as is ease of long-term maintenance, which is also a money saving consideration.

Table of Contents

Content archive

Recent Posts

Subscribe

Pages

Search