Skip to Main Content
Responsive Design
- Websites with a responsive design make it easy to read content across a variety of devices.
- It allows for interaction without needing to resize or scroll because the content is placed in a flexible grid that changes based on screen size.
- Responsive design also removes the need to design separately for mobile devices since every device is served from a unified design.
- Place your most important content in the left column or top box since this is guaranteed to always be at the top of the guide.
- Break up content so there is a natural flow when the columns are rearranged.
- Group similar or themed content closer together in a column so they don't get separated.
- View your guide on multiple screens (or resize your browser window to activate the responsive design scripts) before publishing.
- Don't use empty columns to take up space.
- Use one or two column layout. Avoid 3 column layout as the content will move around when viewed on various devices
- Review your guide on multiple devices with different screen sizes to ensure that your guide functions well and important content is still on top.
- Shrinking and expanding your browser window can show a similar effect of how your guide will appear on a smaller or narrower screen.