Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps JK (JayaKumar Pedapudi) – Principal Consultant – NTT DATA, Inc. Agenda  Introduction.  Learning Points.  What is Responsive Design and its Role?  Design Trends & Responsive Design Layouts.  Return on Investment (ROI).  SAP ITS Mobile Technology  ITS Mobile Intro and Pre-requisites.  Advantages, Disadvantages and Standard Services  ITS Mobile - Template Generation Process.  ITS Mobile Customization.  Responsive Design Techniques and Tools.  Applying Responsive Design to SAP ITS Mobile App.  Challenges & Best Practices.  Wrap Up & Q&A. About NTT DATA, Inc.  World’s sixth largest IT Service provider & systems integrator  Founded 1967 in Japan as the technology arm of the NTT Group  $15B in annual revenues  60,000 professionals operating in 35 countries  Serving 80 of the Global Top 100 organizations  Executing aggressive globalization strategy  Global delivery provides high quality around-the-clock services for 2,500 clients in all global regions with scalable services Learning Points  Learn about responsive design and how it can be applied to ITS Mobile Apps.  Consistent user experience can be achieved using the responsive mobile design with cost effective way.  Learn Tools, Frameworks, Technologies, Best practices, Challenges and Solutions for designing responsive mobile applications that can lowers the maintenance cost. What is Responsive Design and its Role?  Tablets and smartphones become our default choice for connecting to the internet.  There are several ways to approach a mobile web presence, such as a separate mobile site, or a mobile app. The most recent and increasingly popular approach is responsive web design.  Responsive web design is a relatively new approach to mobile web design. Responsive web design is all about keeping it simple.  Responsive Design is a methodology and tool to approach any web app design or mobile design. What is Responsive Design and its Role?  The idea is to create one website to fit literally all screen sizes, be it a desktop or laptop screen, game console, e-reader, tablet or smartphone in landscape or portrait mode.  Responsive websites are designed with a flexible grid and uses media queries to determine the screen size for every individual site visit and rescale the content accordingly.  Responsive Web Designs offer the user an optimal viewing experience, no matter the device.  There are many web frameworks in the market that uses this Responsive Design techniques. Design Trends Responsive Design Layouts An example. 1024+ 1023-768 767-480 Up to 479 Return on Investment (ROI)  Designing the mobile apps with responsive design technique, which adopts itself based on different device form factor is a most cost effective way.  One Codebase for all devices.  It’s a low maintenance, single application supporting multiple devices.  Brand consistency across all the screen layouts and different devices gives more user friendly look and feel experience.  Responsive web design is highly user friendly. SAP ITS Mobile Technology ITS Mobile – Introduction  ITSmobile is an application using the Internet Transaction Server (ITS) and it uses the ITS template technique.  ITSmobile is delivered with a template generator that allows you to generate the templates of simple screens directly. A template generator allows you to easily generate templates of simple application screens for mobile devices of any screen form factor.  You can then change these templates further to meet your requirements.  You can also create a completely new template generator, or Create a new template generator based on the one delivered.