Responsive Design

Et'al works beautifully on any device, from phones to large monitors.

Et'al is built with a mobile-first, responsive design philosophy. Whether you're on a smartphone, tablet, laptop, or desktop monitor, you'll have an optimal experience.

Responsive Breakpoints

The interface adapts at these screen widths:

Adaptive Layouts

Navigation

Mobile (< 640px):

• Bottom tab bar for primary navigation
• Hamburger menu for secondary items
• Full-screen modal for forms

Tablet (640px - 1024px):

• Collapsible sidebar
• Tab bar for section navigation
• Slide-over panels for details

Desktop (> 1024px):

• Full sidebar always visible
• Multi-column layouts
• Inline editing and panels

Content Display

Tables adapt to screen size:

Desktop:
┌────────┬────────────┬──────────┬────────┐
│ Name   │ Status     │ Due Date │ Actions│
├────────┼────────────┼──────────┼────────┤
│ Task 1 │ In Progress│ Jan 15   │ ⋮      │
└────────┴────────────┴──────────┴────────┘

Mobile:
┌────────────────────────────────┐
│ Task 1                    ⋮    │
│ In Progress · Due Jan 15       │
├────────────────────────────────┤
│ Task 2                    ⋮    │
│ Completed · Due Jan 12         │
└────────────────────────────────┘

Forms and Inputs

• Touch-friendly targets (minimum 44x44px)
• Larger input fields on mobile
• Native date/time pickers
• Keyboard-appropriate input types

Touch Optimization

Gestures

Common touch gestures are supported:

Touch Targets

All interactive elements meet accessibility standards:

• Minimum touch target: 44x44 pixels
• Adequate spacing between targets
• Visual feedback on touch
• Clear active states

Cross-Browser Support

Et'al works on all modern browsers:

Accessibility

Responsive design includes accessibility features:

Screen Readers

• Semantic HTML structure
• ARIA labels for interactive elements
• Skip links for navigation
• Focus management

Keyboard Navigation

Full keyboard support on all devices:

• Tab navigation through elements
• Arrow keys for lists and menus
• Escape to close modals
• Enter to confirm actions

Reduced Motion

Respects user preferences:

/* Animations are reduced when preferred */
@media (prefers-reduced-motion: reduce) {
  /* Minimal, essential transitions only */
}

Performance

Fast Loading

• Optimized images for each screen size
• Lazy loading for off-screen content
• Code splitting by route
• Service worker caching

Smooth Interactions

• 60fps animations
• Hardware-accelerated transforms
• Optimistic UI updates
• Skeleton loading states

Tips for Best Experience

Related

• Mobile App - Native mobile experience
• Dashboard - Responsive dashboard features
• Quick Start - Getting started on any device