Develop IBM i Mobile and Desktop Applications with a Single Code Base
About the Presenters Greg Patterson Technical Sales Engineer BCD and Quadrant Software - A Division of Fresche
Maximize Your Investment in IBM i
Responsive Web Applications
Agenda What is Responsive Web Design Introduction to Bootstrap Rapid Development with WebSmart
What is Responsive Web Design Make web pages look good on all devices
What is Responsive Web Design Uses CSS and HTML Hide, move, stack, resize Grid layout Responds to device screen One code base
Live Example - Wenger
Media Queries Dimensions 480px 768px 992px 1200px Orientation Browser OS
B2B ecommerce on IBM i
B2B on IBM i
Dashboard on IBM i
IBM i Document Portal
Alternatives? Desktop only Mobile only Native Mobile App Hybrid (app wrapper) Article on Responsive Design on Smashing Magazine from 2011: https://www.smashingmagazine.com/2011/01/guidelines-forresponsive-web-design/
Agenda What is Responsive Web Design Introduction to Bootstrap Rapid Development with WebSmart
What is Bootstrap Most popular HTML, CSS, and JS framework for developing responsive web applications Build sleek sites quickly and easily Single code base Free Open Source getbootstrap.com
Why Use Bootstrap Ease of use basic HTML/CSS skills Responsivity phones, tablets, desktops Mobile-First Approach Cross-browser compatibility Theming
Grid Layout
Media Queries xs - 480px s - 768px m - 992px l - 1200px Class =.hidden-xs
CSS Styles and Components
JavaScript and Plug-ins
Other Advantages Popular Saves Time What Other Platforms Use Cross Browser Attract New Developers
Bootstrap Site Example http://htmlstream.com/preview/unifyv1.9.4/e-commerce/index.html
Resources http://getbootstrap.com/ https://bootswatch.com/ http://builtwithbootstrap.com/ https://wrapbootstrap.com http://www.w3schools.com/bootstrap/ http://startbootstrap.com/bootstrap-resources/
Agenda What is Responsive Web Design Introduction to Bootstrap Rapid Development with WebSmart
Rapid Development with WebSmart Overview Live demo Tour of IDE
Rapid Web Development Tool
Three Editions
WebSmart Benefits See results in minutes Reduce web development learning curve Leverage existing RPG code and resources Attract new developers Strategic web applications
Any Application
Other IDEs
Templates Create Program in Minutes PHP, ILE, Node.js HTML CSS JavaScript
Live Demo
ecommerce
B2B on IBM i
Dashboard on IBM i
Tour of IDE
Technical Resources WebSmart Examples mybcdsoftware.com User Guide and KB Training
Professional Services
Maximize Your Investment in IBM i
Questions? For more information or a free trial visit: bcdsoftware.com/responsive (630) 986-0800