LibGuide Maintenance: Mobile-Friendly Guides

The boxes on a LibGuide condense into one column on mobile devices in the following order: Top box, columns left to right, and bottom box. On a mobile device, this page would stack: Description, Stacking Order, Tabbed Vs. Side Bar Guides, Preview Your Guide, Mobile Friendly Tips, Helpful Resources.

This is a tabbed guide. You can also set your guide to have side bar navigation, which is more mobile-friendly, but only good for guides with a few pages.

Change your guide from tabbed to side bar by clicking on the Guide Layout button above (near the unpublished/published status button) and choosing Guide Navigation Layout.

Even when still unpublished, you can view what your guide would look like on a mobile device. There are two methods:

1. Hit preview to see your guide. Drag the corner of your browser to make your window smaller. Watch as your guide changes from desktop to tablet to phone size.
2. Hit preview to see your guide and right click anywhere on the page. Choose "Inspect." A box will appear on the page. Click the "Toggle Device Toolbar" button (looks like a mobile device, to the left of the word "Element.) Use the drop down box at the top to switch between phone/tablet types.

• Avoid using the hover or i icon to display information about a book, database, or link, as these descriptions are hard to access on mobile devices.
• Opt-in for bottom of the page navigation. Under guide layout, select Prev / Next links. These are helpful when you scroll to the bottom of a page on a mobile-device.
• Avoid screenshots, as text can become too small to read when shrunk down on mobile devices.
• Make images and videos responsive.
  • For images, avoid setting height and width sizes. Instead, set a max-height or max-width at your desired desktop height/width so the image can shrink down on mobile devices.
  • For videos, use Bootstrap to make the video responsive. The most common setting is 16by9. Place the opening and closing tags of the div around the embed code (<iframe>).
• Set certain items to be hidden/only visible on mobile devices. Insert the appropriate Bootstrap class in a <div> around the desired item, like <div class="hidden-xs">.
  • You can create separate content for each size. For example, set the large banner to hidden-xs and the small banner to visible-xs. Now you have a banner that is easier to see on mobile devices!
  • You can hide book descriptions on mobile devices, too! (Just make sure you link to the book in the catalog.)
• Set your font sizes to shrink on mobile devices using a media query. For example, you can set your headings to be 48px on a desktop and 32px on a mobile device.
  • Combine this with a Google Font!
• Avoid long paragraphs of text (like this page!) and use chunking methods to improve retention and make your guide easier to read.