There are two fundamental approaches when designing interfaces compatible with different devices: Responsive and Adaptive design.
Responsive Design:
- Uses fluid grid systems
- Uses the same HTML/CSS across all devices
- Continuously adapts proportionally to screen size
- Advantage: Easy maintenance, single codebase
- Disadvantage: Challenges with complex designs
Adaptive Design:
- Uses fixed layouts for specific screen sizes
- Different HTML/CSS for different device types
- Device is detected and appropriate version is served
- Advantage: Device-specific optimization
- Disadvantage: Maintenance difficulty, more workload
In the real world, most sites use a hybrid version of these two approaches.
Make your choice based on project characteristics: Choose adaptive if very different device experiences are required, prefer responsive if general consistency is important.