The layout and features of the different guide tabs will change based on the device that they are displayed on. Use the following mockups while creating your site design so you can customize all aspects of your guide tabs and maintain a consistent and reliable design.
Responsive device size breakdown used in MindTouch. Approximated pixel values displayed alongside their em units for easier reference.
- Large Desktop (87.5 em = 1400 px)
- Desktop (80 em = 1280 px)
- Laptop (65.25 em = 1044 px)
- Tablet - landscape (50 em = 800 px)
- Tablet - portrait (37.5 em = 600 px)
- Mobile - landscape (25 em = 480 px)
- Mobile - portrait (18.75 em = 320 px)
Each guide has the ability to display multiple types of tabs. The following is an example of the featured article tab organized by user type and screen size. Download the .zip file to view each tab type, by each user role, and each screen size.
Download: Guide tabs.zip