Mobile Optimization - Qiwako CMS

Complete guide to mobile optimization, templates, and responsive design in Qiwako CMS.

Overview

Qiwako CMS is built with mobile-first design principles, featuring automatic mobile detection, dedicated mobile templates, and native-like navigation.

Mobile Detection

Automatic Detection

Mobile detection is handled by django-user-agents middleware:
- Middleware: tenants.middleware_your-domain.com
- Detection: Based on User-Agent header
- Flag: request.is_mobile available in all views

Template Selection

Mobile templates are automatically served when mobile device detected:
- Template Path: templates/mobile/<template_name>
- Fallback: Desktop template if mobile template doesn't exist
- Utility: tenants.utils_mobile.get_mobile_template_name()

Mobile Templates

Base Template

Mobile base template: templates/mobile/byour-domain.com
- Native-like header bar
- Bottom navigation bar
- Touch-optimized UI
- Full-screen content area

Template Structure

templates/
 your-domain.com # Desktop base
 mobile/
 your-domain.com # Mobile base
 tenants/
 *.html # Mobile tenant templates
 dashboard/
 *.html # Mobile dashboard templates

Creating Mobile Templates

1. Create template in templates/mobile/ directory
2. Extend mobile/byour-domain.com
3. Template will be automatically served for mobile devices

Example:

{% extends 'mobile/byour-domain.com' %}

{% block title %}My Mobile Page{% endblock %}

{% block content %}
<h1>Mobile Content</h1>
{% endblock %}

Mobile Login

6-Digit Numeric Code Login

Qiwako supports mobile login using a 6-digit numeric code for quick and secure access:

Features:
- Generate Code: Logged-in users can generate a 6-digit code from /mobile-login/generate/
- One-Time Use: Each code can only be used once
- Short Expiry: Codes expire after 5 minutes
- Secure: Codes are hashed before storage (SHA-256)
- Mobile-Optimized: Dedicated mobile templates for code generation and verification

How It Works:
1. User logs in normally (username/password)
2. User navigates to /mobile-login/generate/ to generate a code
3. Code is displayed (only shown once)
4. User enters code on another device at /mobile-login/verify/
5. Code is verified and user is logged in

Security:
- Codes are hashed using SHA-256 before storage
- Invalid codes are rejected
- Expired codes are automatically cleaned up
- IP address and user agent are tracked
- MFA verification is still required for tenant admins (if policy enabled)

Templates:
- templates/mobile/tenants/mobile_login_your-domain.com - Generate code page
- templates/mobile/tenants/mobile_login_your-domain.com - Verify code page

URLs:
- Generate: /mobile-login/generate/ (requires login)
- Verify: /mobile-login/verify/ (public)

Mobile Navigation

Bottom Navigation Bar

Fixed bottom bar with 3-5 menu items:
- Always visible (doesn't scroll)
- Touch-optimized (min 44px height)
- Role-specific menus
- Active state indication

Floating Action Button (FAB)

Quick action button for create operations:
- Position: Center, above bottom bar
- Only shown for users with create permissions
- Circular design with icon
- Scale animation on press

Bottom Drawer

Slide-up menu for secondary actions:
- Swipeable (swipe down to close)
- Backdrop overlay (tap to close)
- Handle bar at top
- Max height: 80% of screen

Role-Specific Menus

Different menus for different user roles:

Tenant Admin:
- Bottom Bar: Home, Konten, Donasi, Profil
- FAB: Create (for new content)
- Drawer: Users, Settings, Homepage, Menus

Editor:
- Bottom Bar: Drafts, Editor, Preview
- FAB: New Article
- Drawer: Media Library, Categories

Viewer:
- Bottom Bar: Home, Kegiatan, Profil
- No FAB (read-only)
- Empty drawer

Responsive Design

Viewport Configuration

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">

Touch Targets

• Minimum Size: 44px × 44px
• Spacing: Adequate spacing between targets
• Feedback: Visual feedback on touch

Typography

• Base Font Size: 16px (prevents iOS zoom on input focus)
• Line Height: 1.6 for readability
• Responsive Sizing: Uses rem/em units

Breakpoints

/* Mobile */
@media (max-width: 767.98px) { /* ... */ }

/* Tablet */
@media (min-width: 768px) { /* ... */ }

/* Desktop */
@media (min-width: 1200px) { /* ... */ }

Image Optimization

See WebP Implementation Guide for details.

Mobile-Specific Optimizations

• WebP Format: Automatic conversion for smaller file sizes
• Lazy Loading: Images load on demand
• Responsive Images: Different sizes for different screens
• Placeholders: Lightweight SVG placeholders

Performance

Code Splitting

• JavaScript split by feature
• Lazy load non-critical scripts
• Minimize initial bundle size

Asset Optimization

• Minification: CSS and JS minified for production
• Compression: Gzip/Brotli compression
• CDN Support: Static assets can be served from CDN

Caching

• Service Worker: Caches static assets
• Browser Cache: Proper cache headers
• CDN Cache: If using CDN

Testing

Chrome DevTools

1. Open DevTools (F12)
2. Toggle device toolbar (Ctrl+Shift+M)
3. Select device or custom dimensions
4. Test touch interactions

Physical Devices

Test on actual devices:
- iOS (Safari)
- Android (Chrome)
- Different screen sizes
- Different browsers

Lighthouse

Run Lighthouse audit:
1. Open Chrome DevTools
2. Go to Lighthouse tab
3. Select "Mobile" preset
4. Run audit

Best Practices

1. Mobile-First: Design for mobile first, then enhance for desktop
2. Touch-Friendly: Ensure all interactive elements are touch-friendly
3. Performance: Optimize for slow connections
4. Progressive Enhancement: Core functionality works without JavaScript
5. Accessibility: Maintain accessibility on mobile