Mobile Responsiveness

SnapApp is designed with a mobile-first philosophy, ensuring that every application you build is automatically optimized for various screen sizes. Whether your users are accessing data via a desktop monitor, a tablet, or a smartphone, the interface dynamically adjusts to provide a seamless experience.

Table of Contents

• Automatic Layout Adjustments
• Key Mobile Features
• Best Practices for Mobile Optimization
• Global Responsive Settings
• Testing Your Configuration
• Support

Automatic Layout Adjustments

The SnapApp framework handles the heavy lifting of responsive design so you don’t have to manually code for different devices.

• Adaptive Grids: Data tables and List Views automatically transition into a “card” style or collapsed format on smaller screens to prevent horizontal scrolling.
• Responsive Login: The login box and social authentication buttons (like “Sign in with Microsoft”) adjust their layout to fit centered and clearly on mobile displays.
• Touch-Optimized UI: Elements like the System Buttons (Column Visibility, Personal Views) remain easily accessible and interactive via touch gestures.

Key Mobile Features

SnapApp leverages specific mobile capabilities to enhance field-level productivity:

Best Practices for Mobile Optimization

While SnapApp is responsive by default, you can further optimize your views for mobile users in the View Builder:

1. Prioritize Columns: Use the Column Visibility settings to ensure that only the most critical fields are displayed by default on small screens.
2. Use Deck Views: For structured presentations or media-heavy data, Deck Views provide a better sequential card experience than traditional tables on mobile.
3. Optimize Format Rules: Use Format Rules to add icons; these act as quick visual shorthand for mobile users who don’t have room for long text descriptions.
4. Simplify Headers: Remove unnecessary System Buttons (like “Print”) from mobile-specific views to keep the header clean.

Global Responsive Settings

Administrators can set global behaviors that dictate how the application responds when screen width decreases.

• Hamburger Menu: Ensure the sidebar is set to “Auto-Collapse” so it transitions into a hamburger menu on devices with a width less than 768px.
• Login Layout: Configure the Smart Layout in Authentication settings to ensure social provider buttons stack vertically on mobile rather than horizontally.
• System Buttons: In the UX Settings, toggle off non-essential system buttons (like “Export to CSV” or “Print”) for mobile user roles to keep the interface clean.

Testing Your Configuration

Before publishing changes, always test the responsiveness:

1. Browser Inspector: Use your browser’s “Inspect” tool to toggle device modes (e.g., iPhone, iPad).
2. Live Device Testing: Log in to your application from a physical mobile device to test touch target sizes and scrolling performance.
3. Event Logs: If using API Workflows triggered by mobile buttons, check the Events log to ensure the touch interaction is registering correctly.

Support

For support, email us at snapapp@bluevector.ai