LibGuides are made with responsive design. This makes it easier for users on phones, tablets, and other mobile devices to read and use them. However, this means that we need to pay attention to where we place content in guides as it will be rearranged to suit the screen size of the user.
Side-navigation layout guide on small devices
- The navigation will be at the top (first).
- The box(es) in the left column (Column 0) will be second.
- The box(es) in the right column (Column 1) will wrap around below the left column.
On a full-sized monitor, you can re-size your browser window to see how content will display on a smaller screen. Zoom your browser window to 400% to ensure that no content or functionality on your guide is lost and that no horizontal scrolling is required.
Responsive design tips
- Avoid using "positional language" (e.g., left, right, top, bottom) in the text to describe where content is located in the guide.
- Link to the content you are referring to within a guide, as every box has a unique URL. (Springshare: View a box's direct link)
Implications
- When using side-navigation layout, limit the box(es) you add underneath the navigation in the left column so readers will focus on the main content in your primary column.
- It is recommended that only functional boxes (e.g., profile, VPN, Ask a Librarian, related research guides, etc.) be placed underneath the navigation in the left column.
- 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.
- Test your guide on multiple screens (or resize your browser window) before publishing.
