Responsive design ensures your websites look great on any device. Learn how Azyrom's responsive features help you design for desktop, tablet, and mobile.
Breakpoints
Breakpoints define where your layout changes for different screen sizes:
| Breakpoint | Width | Typical Devices |
|---|---|---|
| Desktop | 1280px+ | Laptops, monitors |
| Tablet | 768px - 1279px | iPad, Android tablets |
| Mobile | 320px - 767px | Phones |
Designing Responsively
Use these techniques to create designs that adapt:
Auto Layout
Auto Layout is the foundation of responsive design:
- Elements flow and wrap automatically
- Spacing adjusts based on container size
- Items can grow or shrink to fill space
Constraints
Set how elements behave when their container resizes:
- Fixed - Element stays exact size
- Fill - Element stretches to fill space
- Hug - Element shrinks to fit content
Min/Max Width
Set boundaries for element sizing:
- Minimum width prevents elements from getting too small
- Maximum width keeps content readable on large screens
Start designing for desktop (largest size), then adjust for smaller screens. It's easier to simplify a complex layout than to add complexity to a simple one.
Responsive Typography
Text sizing for different screens:
| Element | Desktop | Mobile |
|---|---|---|
| H1 Heading | 48-64px | 32-40px |
| H2 Heading | 32-40px | 24-28px |
| Body text | 16-18px | 16px |
| Caption | 14px | 12-14px |
Responsive Images
- Use fill mode for hero images that span full width
- Set aspect ratios to maintain proportions
- Consider different crops for mobile vs. desktop
- Provide @2x assets for retina displays
Navigation Patterns
Desktop Navigation
- Horizontal nav bar with visible links
- Dropdown menus for categories
- Full-width mega menus
Mobile Navigation
- Hamburger menu (☰) icon
- Slide-out drawer
- Bottom tab bar
Design navigation as a component, then create variants for desktop and mobile. This keeps the styles synchronized across breakpoints.
Testing Responsive Designs
Preview your design at different sizes:
- Use the device preview toolbar
- Drag the canvas edge to resize viewport
- Select specific device presets
- Enter custom dimensions
Common Responsive Patterns
Column Stacking
Multi-column layouts on desktop stack to single column on mobile.
Navigation Collapse
Horizontal nav becomes hamburger menu on mobile.
Image Cropping
Landscape images on desktop become square or portrait on mobile.
Content Prioritization
Less important content hides on mobile; essential content stays visible.
Best Practices
- Touch targets - Buttons at least 44x44px on mobile
- Readable text - Never smaller than 14px on mobile
- Adequate spacing - More padding on touch interfaces
- Test on real devices - Emulators aren't always accurate