Skip to main content

Mobile Navigation

Conducky is designed with mobile-first principles, ensuring that navigation works seamlessly on smartphones and tablets. This page covers mobile-specific navigation features and best practices.

Mobile-First Design​

Responsive Sidebar Navigation​

The sidebar navigation automatically adapts to mobile devices:

  • Collapsible sidebar: Automatically collapses on mobile devices with hamburger menu
  • Overlay mode: Sidebar overlays content on mobile instead of pushing it
  • Touch-friendly: All navigation elements are optimized for touch interaction
  • Context awareness: Mobile navigation maintains the same context-aware behavior as desktop

Screenshot needed: Mobile sidebar navigation showing hamburger menu and overlay behavior

Mobile Navigation Controls​

Hamburger Menu (☰)

  • Located in the top-left corner on mobile
  • Tap to open/close the sidebar navigation
  • Consistent across all pages and contexts
  • Accessible via keyboard navigation

Swipe Gestures

  • Swipe right from left edge to open sidebar
  • Swipe left on open sidebar to close it
  • Tap outside sidebar to close it
  • Smooth animations for all interactions

Mobile-Specific Features​

  • Camera Integration:
    • Use the device's camera to capture and upload related files directly to an incident report.
  • Offline Support:
    • View cached incident details and comments even without an internet connection.
    • Draft comments and actions offline, which will sync automatically when connectivity is restored.
  • Push Notifications:
    • Receive real-time alerts for important updates, such as new comments, assignments, or status changes.
    • Customize notification preferences to stay informed without being overwhelmed.

This guide provides an overview of the mobile navigation system. For detailed instructions on specific features, refer to the relevant sections of the user guide.

Mobile Dashboard Features​

Compact Event Cards

  • Optimized layout for mobile screens
  • Essential information prominently displayed
  • Touch-friendly action buttons
  • Swipeable card interface for multiple events

Mobile-Optimized Lists

  • Infinite scrolling for long incident lists
  • Compact list items showing key information
  • Touch-friendly filters and search
  • Quick actions accessible via swipe or long-press

Mobile Navigation Patterns​

Bottom Navigation (Future Enhancement)​

Planned mobile navigation improvements include:

  • Bottom tab bar for primary navigation on mobile
  • Floating action button for quick incident submission
  • Context-sensitive bottom actions based on current page
  • Thumb-friendly navigation for one-handed use

Mobile Breadcrumbs​

Mobile breadcrumbs are optimized for small screens:

  • Condensed breadcrumb trail showing only essential navigation
  • Tap to navigate to previous levels
  • Horizontal scrolling for long breadcrumb chains
  • Current page emphasis for orientation

Performance on Mobile​

Optimized Loading​

Mobile navigation is optimized for performance:

  • Fast initial load: Core navigation appears immediately
  • Progressive enhancement: Additional features load as data becomes available
  • Lazy loading: Non-critical navigation elements load as needed
  • Efficient caching: Reduces data usage and improves speed

Network Considerations​

  • Offline support: Basic navigation works with poor connectivity
  • Data efficiency: Minimal data usage for navigation updates
  • Progressive loading: Works well on slower mobile networks
  • Smart prefetching: Anticipates likely navigation needs

Battery Optimization​

  • Reduced animations on devices with low battery
  • Efficient polling: Minimized background updates
  • CPU-friendly interactions: Smooth performance without draining battery
  • Dark mode support: Reduces screen power consumption

Mobile Accessibility​

Screen Reader Support​

  • Semantic HTML: Proper heading structure and landmarks
  • ARIA labels: Clear descriptions for screen reader users
  • Focus management: Proper focus handling when opening/closing sidebar
  • Keyboard navigation: Full functionality available via keyboard

Visual Accessibility​

  • High contrast: Meets WCAG AA contrast requirements
  • Scalable text: Respects user's text size preferences
  • Clear focus indicators: Visible focus states for all interactive elements
  • Color independence: Information not conveyed by color alone

Motor Accessibility​

  • Large touch targets: Easier for users with motor difficulties
  • Generous spacing: Reduces accidental activations
  • Alternative interaction methods: Multiple ways to access features
  • Timeout considerations: Adequate time for interactions

Mobile Browser Compatibility​

Supported Mobile Browsers​

iOS Browsers:

  • Safari (iOS 12+)
  • Chrome for iOS
  • Firefox for iOS
  • Edge for iOS

Android Browsers:

  • Chrome for Android
  • Firefox for Android
  • Samsung Internet
  • Edge for Android

Mobile Web App Features​

Progressive Web App (PWA) Support:

  • Add to home screen functionality
  • Offline capabilities for basic navigation
  • Push notifications for incident updates
  • Native app-like experience without app store installation

Screenshot needed: Mobile browser showing "Add to Home Screen" option for Conducky

Mobile Navigation Best Practices​

For Mobile Users​

  1. Use the hamburger menu to access full navigation
  2. Try swipe gestures for quick sidebar access
  3. Add to home screen for app-like experience
  4. Enable notifications for important updates
  5. Use portrait orientation for optimal layout

For Administrators​

  1. Test on actual devices not just browser dev tools
  2. Consider mobile workflows when configuring events
  3. Keep event names short for mobile display
  4. Optimize images for mobile loading
  5. Monitor mobile usage in analytics

Mobile Workflow Tips​

For Incident Reporting:

  • Use mobile camera for related file capture
  • Voice-to-text for description entry
  • Location services for automatic location detection
  • Mobile-optimized forms for quick submission

For Response Teams:

  • Mobile notifications for urgent incidents
  • Quick response templates for mobile typing
  • Touch-friendly incident management
  • Mobile-optimized team communication

Troubleshooting Mobile Navigation​

Common Mobile Issues​

Sidebar won't open:

  • Try refreshing the page
  • Check if JavaScript is enabled
  • Clear browser cache
  • Try a different mobile browser

Touch targets too small:

  • Check browser zoom level
  • Verify device accessibility settings
  • Try using the device's built-in zoom features
  • Contact administrators if issues persist

Slow performance:

  • Check network connection strength
  • Clear browser cache and data
  • Close other browser tabs
  • Restart the browser app

Navigation missing elements:

  • Verify you're logged in properly
  • Check your role permissions
  • Try rotating device orientation
  • Refresh the page

Mobile-Specific Solutions​

For iOS Safari:

  • Clear Safari cache in device settings
  • Disable Safari content blockers temporarily
  • Check iOS version compatibility
  • Try using Chrome for iOS as alternative

For Android Chrome:

  • Clear Chrome data in app settings
  • Disable Chrome extensions
  • Check Chrome version and update if needed
  • Try using Firefox for Android as alternative

Future Mobile Enhancements​

Planned improvements to mobile navigation include:

  • Voice navigation for hands-free operation
  • Gesture shortcuts for power users
  • Customizable mobile interface based on user preferences
  • Enhanced offline capabilities for areas with poor connectivity
  • Integration with mobile OS features like widgets and shortcuts

These enhancements will further improve the mobile experience while maintaining the current responsive design foundation.