Accessibility Checklist
Layout Best Practices
Layout Best Practices
When designing with columns, use the one- or two-column layout. Three or more columns can make the page too bogged down with boxes and less accessible in mobile view.
Choosing a LibGuide Layout:
-
Preferred: Select the "Side-Nav" layout when creating a new guide.
-
Two-column and three- column design are only available in top-tab navigation. Mobile display gets more complicated as you add columns.
-
You do not need a profile box on every page!
Before publishing:
-
Change the size of your screen and view the page on your mobile device
-
When you shrink the screen size, do the order of your boxes make sense?
-
Is the guide browseable?
-
Adjust your boxes as necessary to ensure students will get the most important information first
Responsive Design Layout Examples
Displays by Layout and Screen Size
This box contains examples of the different default LibGuides Layouts and how that content arranges depending on screen size.
Example A: Side-Nav Layout with 1 Column (Preferred)
Side tab navigation in desktop view
Side tab navigation in mobile view
-
LibGuide Layout ExamplesA downloadable copy of the layout examples following accessibility standards.
-
Adapted from "Responsive Design & You"a guide created by Boston College Librares
Displays by Layout and Screen Size
This box contains examples of the different default LibGuides Layouts and how that content arranges depending on screen size.
Example B: Top-tab Layout with 3 columns
Top tab navigation with 3-columns in desktop view
Top tab navigation with 3- columns in mobile view
Displays by Layout and Screen Size
This box contains examples of the different default LibGuides Layouts and how that content arranges depending on screen size.
Example C: Top Tab Layout with 2 Columns
Top tab navigation with 2-columns in desktop view
Top tab navigation with 2-columns in mobile view