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:
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
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.
This work is licensed under a Creative Commons Attribution NonCommercial 4.0 International License. | Details and Exceptions