APEX Tips for Responsive and Mobile-Friendly Apps

Recently I have been working on an application that should be responsive, look good on mobile devices, and be based on previously prepared mockups. Of course, it was not possible without custom CSS.
But APEX itself gives us a few nice tricks that can make our application more mobile-responsive-user-friendly. And this article is exactly about that.

Page Template

Depending on what you want to achieve, choose the right page template. I noticed that Faceted Search with a Classic Report works differently (and better) on mobile devices when using the Left Side Column Template instead of the Default Template.

Left Side Column Template vs Default Template for Faceted Search and Classic Report on the screen with the same resolution.

Breadcrumbs, Buttons, and Hide Label on Mobile

If you decide to place buttons in your breadcrumb, it is worth considering the Hide Label on Mobile option. Button → Appearance → Template Options → Hide Label on Mobile. Long labels will be hidden and only icons will be shown. This can significantly improve the look of the application.

Buttons show only icons and become smaller.

Buttons Container and Stick to Bottom for Mobile

If you use a dedicated region with the Buttons Container template for your buttons, it is worth enabling Stick to Bottom for Mobile. Region → Appearance → Template Options → Stick to Bottom for Mobile. Buttons will always be visible at the bottom of the screen on mobile devices. Sometimes this is really helpful!

Buttons are always visible at the bottom of the screen on mobile.

Sticky Headers

If you want your breadcrumb to always be visible on the mobile screen, enable Sticky Header on Mobile. Page → Template Options → Sticky Header on Mobile. Now you always know where you are in your application.

Header is always visible on mobile.

Custom CSS

When everything else fails, you can always write custom CSS for your page (or globally for the entire application).

/* Your change will be applied for screen resolutions smaller than 640px */
@media (max-width: 640px){
  do some css magic here!
  }
}