Responsiveness

Desktop

Desktop Design

Purpose: These recommendations will ensure that the website maintain a consistent and optimized experience across all platforms.

Grid and Containers

• Use the same container and grid system (e.g., Bootstrap’s grid system) across all desktop pages, as defined in this guideline.
• Use breakpoints for larger screens (e.g., lg, xl, xxl) so that content aligns and scales appropriately.
• Prioritize hierarchies ensuring that headers, content areas, sidebars, and footers are well-defined and balanced.
• Use multi-column layouts where applicable.

Navigation

• Ensure the main navigation and any secondary menus are fully visible without requiring extra interactions.
• Provide clear hover, focus, and active states for interactive elements, including links, buttons, and navigation items as defined in this guideline.

Optimizations

Load high-resolution images and rich media for desktop users, while also ensuring that they are optimized for performance.

Devices

Mobile & Tablet Design

Purpose: These recommendations will ensure that the website maintain a consistent and optimized experience across all platforms.

Responsive Breakpoints and Adaptation

• Use consistent breakpoints (e.g., xs, sm, md) as defined in the Bootstrap settings to manage layout changes across devices.
• Ensure that content reflows gracefully for tablets and smartphones, with columns stacking, menus collapsing, and images resizing to fit smaller screens.

Navigation Adaptations

• Adopt a mobile-optimized navigation system (hamburger menu) to maximize screen space while maintaining easy access to essential links.
• Ensure that the navigation is consistent across all devices, using the same structure and hierarchy as on desktop, but adapted for touch interactions.

Media and Performance

Use techniques such as srcset and CSS media queries to load appropriately sized images for mobile and tablet devices, improving load times and clarity.

Responsiveness Document