SAP Fiori is a design system that helps you create user-friendly and responsive apps for your business needs. SAP Fiori apps can run on any device, whether it is a desktop, tablet, or smartphone. However, if you want to make your app more suitable for mobile devices, you need to follow a ‘mobile first’ approach. This means that you design your app for the smallest screen size first, and then add more features and functionality for larger devices. In this blog post, We will share some of the benefits, best practices, tips, and examples of using a ‘mobile first’ approach for your SAP Fiori apps.
Benefits of using a ‘mobile first’ approach
Using a ‘mobile first’ approach has several advantages for both developers and users of SAP Fiori apps. Some of them are:
- You can focus on the core functionality and user needs of your app, and avoid unnecessary features and complexity. This will help you create a simple and intuitive user interface that is easy to use and understand.
- You can improve the performance and usability of your app by reducing the amount of data and controls on the screen. This will help you optimize the loading time, network bandwidth, and battery consumption of your app.
- You can ensure consistency and coherence across different device types, as well as alignment with the SAP Fiori design principles. This will help you create a seamless user experience that is familiar and predictable.
According to a survey by SAP, 87% of SAP Fiori users reported increased productivity, 80% reported improved data quality, and 76% reported higher user satisfaction after using SAP Fiori apps. These results show the positive impact of using SAP Fiori apps that are designed with a ‘mobile first’ approach.
Best practices and tips for using a ‘mobile first’ approach
To use a ‘mobile first’ approach effectively, you need to follow some best practices and tips that will help you create SAP Fiori apps that work well on mobile devices. Some of them are:
- Use SAP Fiori elements to create standard SAP Fiori apps quickly and easily. SAP Fiori elements have improved functionality to make it easier for you to build apps that work well on phones and tablets, as well as desktop systems. SAP Fiori elements provide templates for common app types such as list reports, object pages, overview pages, analytical list pages, etc. You can use these templates to generate code automatically based on your metadata annotations.
- Use responsive controls and layouts that adjust to different screen sizes and orientations. For example, use the sap.m library instead of the sap.ui.commons library. The sap.m library provides controls that are designed for touch devices and support gestures such as swipe, tap, pinch, etc. The sap.m library also provides layouts that are flexible and adaptive to different screen resolutions and orientations.
- Set UI. Importance is high for the most important fields only, as this will help save additional space. UI. Importance is a metadata annotation that defines the visibility of a field depending on the device type. You can set UI. Importance is high for the fields that are essential for the user to complete their task and set it as low or medium for the fields that are less relevant or optional.
- Use dynamic header for object page, as mobile-specific features won’t work for standard header. Dynamic header is a feature that allows the header of an object page to collapse or expand depending on the scrolling position of the user. This will help you save space and improve readability on mobile devices.
- Test your app on different devices and browsers to ensure compatibility and accessibility. You can use tools such as SAP Web IDE or SAP Business Application Studio to test your app on various device emulators or real devices. You can also use tools such as SAP Web Analytics or Fiori Apps’ Usage Report to measure and monitor the usage statistics of your app.
Use cases and examples of using a ‘mobile first’ approach
To illustrate how to use a ‘mobile first’ approach for your SAP Fiori apps, here are some use cases and examples of how you can apply this approach to create user-friendly and responsive apps for your business needs.
- A sales manager who wants to monitor the sales performance of his team on his smartphone. He can use a SAP Fiori app that shows him a dashboard with key metrics such as revenue, orders, and customer satisfaction. The app uses responsive charts and tables that adapt to his screen size and orientation. He can also drill down into the details by tapping on the charts or using filters.
- A warehouse worker who wants to check the inventory status of a product on his tablet. He can use a SAP Fiori app that scans the barcode of the product using his device camera and shows him the available quantity, location, and expiry date. The app uses native features such as augmented reality to enhance its experience.
- A travel agent who wants to book a flight for a customer on his laptop. He can use a SAP Fiori app that allows him to search for flights based on various criteria such as date, time, destination, and price. The app uses dynamic headers that show him relevant information such as flight details, weather forecasts, and currency exchange rates.
These are just some examples of how you can use a ‘mobile first’ approach for your SAP Fiori apps. If you want to learn more about how we can help you create user-friendly and responsive apps for your business needs, please visit our website www.mobifysolutions.com, or send us an email at info@mobifysolutions.com. We would love to hear from you!
