Using Page Layouts & Columns
Websites with a responsive design make it easy to interact with content across a variety of devices. Content is placed in a flexible grid that changes to suit your screen size. Responsive design removes the need to design separately for mobile devices since every device is served from a unified design. The LibGuides platform is designed responsively, but it needs your help in getting there!
Guidelines for column layout:
- Use one-column layout for pages that have limited boxes of content, and will flow better as a full page.
- For two-column layouts, consider a 50-50% layout for balance and good responsive design.
- You can customize this ratio to 52%-48% if that works better for you
- Click the Layout Icon
and select Custom Columns Width. Play with the ruler to change the ratios.
- Avoid three or more columns as the content will move around considerably with responsive design. If three or more columns are necessary to present information, preview the page first in different devices to ensure the content is displayed correctly. You can also simply resize your browser window to activate the responsive design scripts.
and select Custom Columns Width. Play with the ruler to change the ratios.LibGuides already incorporated responsive design for their guides. Therefore, your content will get automatically rearranged to suit the screen size of each user. This means your guide will appear differently across various devices.
How to place content
- Place your most important content in the left column or top box since this is guaranteed to be always at the top of the guide.
- Place content so it flows naturally in order of importance, even when the columns are rearranged.
- Don't use empty columns to take up space.
- Don't use absolute directions/positions when referring to a specific box/column. Columns will move around for different screen sizes.
- Bad: "See the box on the right for additional information."
- Good: "Additional information can be found in the Resources box."
Design Check
Before publishing, check to see how the guide displays on different devices (desktop computer, laptop, tablet, smartphone) to ensure your content is displaying as you want it to. Simply resize your browser window to activate the responsive design scripts. Below are some examples of how boxes move on different devices.
In this three-column page layout, the highlight of the page is in the central column.
Now consider this same layout on a phone or smaller browser window.
Note: These two images were not place inside a table to control how they are displayed. Instead we used bootstrap coding to place them side by side. The design is responsive so the images can be seen well regardless of the device use to see the page. If you need help create responsive designed pages/guides, please contact the LGMT for help!.
Each guide's homepage should use a two-column 75/25 layout. You can customize the columns width, but for the sake of consistent user experiences, do so judiciously.
► Purpose: what the guide aims to do should be clearly stated on the first page. Limit this to 1-2 sentences.
◘ Box placement: either in the Top Box or upper left column.
► Profile: a profile box for the guide's author or the main contact person.
◘ Box placement: top right column.
► Recommended Resources: a box with links to highly recommended guides or resources.
◘ Box placement: at the bottom of either column.
