Introduction to Responsive Design in SAPUI5 and SAP Fiori

  • by Ameya Pimpalgaonkar, Senior SAP Architect
  • June 9, 2014
Ameya Pimpalgaonkar shows how to design responsive SAPUI5 or SAP Fiori applications. SAP Fiori uses the SAPUI5 framework and therefore all responsive design techniques used in SAPUI5 can also be used while developing custom SAP Fiori applications.
Learning Objectives

At the end of this article, you will be able to:

  • Understand the fundamentals of a typical responsive design
  • Explain what is responsive design and its scope in SAPUI5 and SAP Fiori
  • Understand the three pillars of responsive design
  • Experiment with the responsive UI, layouts, and framework provided by SAPUI5
  • Tweak your existing SAPUI5 or custom SAP Fiori applications to become responsive
  • Plan to develop responsive applications for your next SAPUI5 or SAP Fiori development project
Key Concept

Responsive Design is an approach that enables you to develop Web sites or applications independent of device size, resolution, and platform. It enables you to develop your Web page or application once and run it on devices of all types. SAP Fiori is a collection of usable and responsive enterprise applications developed especially for new age devices such as tablets, smart phones, and mobiles.

The longer you work with modern mobile applications, Web sites, and user interfaces (UIs), the more you realize the importance of the user experience. A lot has changed in development paradigms, design, and browser preferences. The recent growth of smart phones and mobile devices connected to enterprise systems marks the peak of this change.

Usability and user experience have been around a long time, but their scope was limited mainly to Web applications and Web sites. It is only recently that mobile application developers and enterprise software manufacturers such as SAP have recognized their importance and started investing in developing usable applications that provide a superior user experience. It is high time that we SAP developers understand the fundamentals of usability and the user experience, and strive to enhance the SAP application user experience.

I explain the fundamental principles of usability, user experience, and responsive design in the context of SAP. Understanding these concepts is imperative if you are working or going to work in SAPUI5 or SAP Fiori. I also discuss ways to design a responsive application, be it an SAPUI5 application or a custom SAP Fiori application. In this process, I spend time on the pillars of responsive design, such as viewport property, adaptive Cascading Style Sheets (CSS), and images. Remember, this is all going to be part of your SAPUI5 and SAP Fiori applications in some way.

Ameya Pimpalgaonkar

Ameya Pimpalgaonkar is a senior SAP architect. He specializes in SAP Netweaver Portal, SAP BPM, BRM, MDM, and SAP Mobile. His interests include UI and front-end technologies, SAPUI5, Responsive Design, and integration of modern technologies with SAP UI. He has also worked on HTML5, CSS3, and jQuery. Ameya is also a certified usability analyst from HFI, USA.

See more by this author


No comments have been submitted on this article. 

Please log in to post a comment.

To learn more about subscription access to premium content, click here.